From 3751379f1e9a4c215fb6eb898b4ccc67659b9ace Mon Sep 17 00:00:00 2001
From: stephanchrst <stephanchrst@gmail.com>
Date: Tue, 10 May 2022 21:51:50 +0700
Subject: initial commit 2

---
 .../snippets_thumbs/newsletter_subscribe_popup.svg |  62 ++++++++++
 .../static/src/img/snippets_thumbs/s_alert.svg     |  36 ++++++
 .../static/src/img/snippets_thumbs/s_badge.svg     |  36 ++++++
 .../static/src/img/snippets_thumbs/s_banner.svg    |  41 +++++++
 .../src/img/snippets_thumbs/s_blockquote.svg       |  37 ++++++
 .../src/img/snippets_thumbs/s_call_to_action.svg   |  53 +++++++++
 .../static/src/img/snippets_thumbs/s_card.svg      |  32 ++++++
 .../static/src/img/snippets_thumbs/s_carousel.svg  |  63 +++++++++++
 .../static/src/img/snippets_thumbs/s_channel.svg   |  36 ++++++
 .../static/src/img/snippets_thumbs/s_chart.svg     |  46 ++++++++
 .../src/img/snippets_thumbs/s_color_blocks_2.svg   |  66 +++++++++++
 .../src/img/snippets_thumbs/s_company_team.svg     |  36 ++++++
 .../src/img/snippets_thumbs/s_comparisons.svg      |  73 ++++++++++++
 .../static/src/img/snippets_thumbs/s_countdown.svg |  18 +++
 .../static/src/img/snippets_thumbs/s_cover.svg     |  40 +++++++
 .../src/img/snippets_thumbs/s_dynamic_carousel.svg |  76 +++++++++++++
 .../src/img/snippets_thumbs/s_dynamic_snippet.svg  |  85 ++++++++++++++
 .../src/img/snippets_thumbs/s_facebook_page.svg    |  41 +++++++
 .../src/img/snippets_thumbs/s_faq_collapse.svg     |  63 +++++++++++
 .../static/src/img/snippets_thumbs/s_features.svg  |  36 ++++++
 .../src/img/snippets_thumbs/s_features_grid.svg    |  65 +++++++++++
 .../src/img/snippets_thumbs/s_google_map.svg       |  30 +++++
 .../img/snippets_thumbs/s_google_map_marker.png    | Bin 0 -> 977 bytes
 .../static/src/img/snippets_thumbs/s_hr.svg        |  22 ++++
 .../src/img/snippets_thumbs/s_image_gallery.svg    |  32 ++++++
 .../src/img/snippets_thumbs/s_image_text.svg       |  53 +++++++++
 .../src/img/snippets_thumbs/s_images_wall.svg      |  91 +++++++++++++++
 .../src/img/snippets_thumbs/s_masonry_block.svg    | 126 +++++++++++++++++++++
 .../src/img/snippets_thumbs/s_media_list.svg       |  90 +++++++++++++++
 .../s_mega_menu_menu_image_menu.svg                |  73 ++++++++++++
 .../snippets_thumbs/s_mega_menu_multi_menus.svg    |  71 ++++++++++++
 .../s_newsletter_subscribe_form.svg                |  40 +++++++
 .../static/src/img/snippets_thumbs/s_numbers.svg   |  53 +++++++++
 .../static/src/img/snippets_thumbs/s_parallax.svg  |  52 +++++++++
 .../static/src/img/snippets_thumbs/s_picture.svg   |  53 +++++++++
 .../static/src/img/snippets_thumbs/s_popup.svg     |  39 +++++++
 .../src/img/snippets_thumbs/s_process_steps.svg    |  28 +++++
 .../src/img/snippets_thumbs/s_product_catalog.svg  |  61 ++++++++++
 .../src/img/snippets_thumbs/s_product_list.svg     |  88 ++++++++++++++
 .../src/img/snippets_thumbs/s_progress_bar.svg     |  27 +++++
 .../src/img/snippets_thumbs/s_quotes_carousel.svg  |  47 ++++++++
 .../static/src/img/snippets_thumbs/s_rating.svg    |  47 ++++++++
 .../src/img/snippets_thumbs/s_references.svg       | 111 ++++++++++++++++++
 .../static/src/img/snippets_thumbs/s_share.svg     |  26 +++++
 .../static/src/img/snippets_thumbs/s_showcase.svg  |  86 ++++++++++++++
 .../src/img/snippets_thumbs/s_table_of_content.svg |  71 ++++++++++++
 .../static/src/img/snippets_thumbs/s_tabs.svg      |  93 +++++++++++++++
 .../src/img/snippets_thumbs/s_text_block.svg       |  19 ++++
 .../src/img/snippets_thumbs/s_text_highlight.svg   |  36 ++++++
 .../src/img/snippets_thumbs/s_text_image.svg       |  53 +++++++++
 .../src/img/snippets_thumbs/s_three_columns.svg    | 109 ++++++++++++++++++
 .../static/src/img/snippets_thumbs/s_timeline.svg  |  88 ++++++++++++++
 .../static/src/img/snippets_thumbs/s_title.svg     |   8 ++
 .../src/img/snippets_thumbs/s_twitter_scroll.svg   |  74 ++++++++++++
 .../src/img/snippets_thumbs/s_website_form.svg     |  36 ++++++
 55 files changed, 2974 insertions(+)
 create mode 100644 addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_alert.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_badge.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_banner.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_blockquote.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_call_to_action.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_card.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_carousel.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_channel.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_chart.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_company_team.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_comparisons.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_countdown.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_cover.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_facebook_page.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_faq_collapse.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_features.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_features_grid.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_google_map.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_hr.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_image_gallery.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_image_text.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_images_wall.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_masonry_block.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_media_list.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_numbers.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_parallax.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_picture.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_popup.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_process_steps.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_product_catalog.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_product_list.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_progress_bar.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_rating.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_references.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_share.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_showcase.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_table_of_content.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_tabs.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_text_block.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_text_highlight.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_text_image.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_three_columns.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_timeline.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_title.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_website_form.svg

(limited to 'addons/website/static/src/img/snippets_thumbs')

diff --git a/addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg b/addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg
new file mode 100644
index 00000000..e903fb09
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="40.816%" y2="59.184%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="15" height="2" x="23" y="10"/>
+    <filter id="filter-3" width="106.7%" height="200%" x="-3.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M3 11v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V11a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1zm7.445 3.63L5 11h12l-5.445 3.63a1 1 0 0 1-1.11 0zM4 21v-9.5l6.428 4.485a1 1 0 0 0 1.144 0L18 11.5V21H4z"/>
+    <filter id="filter-5" width="106.2%" height="116.7%" x="-3.1%" y="-4.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-6" d="M49 23.571V22.43a.55.55 0 0 0-.17-.402.55.55 0 0 0-.401-.17h-2.286v-2.286a.55.55 0 0 0-.17-.401.55.55 0 0 0-.402-.17H44.43a.55.55 0 0 0-.402.17.55.55 0 0 0-.17.401v2.286h-2.286a.55.55 0 0 0-.401.17.55.55 0 0 0-.17.402v1.142a.55.55 0 0 0 .17.402.55.55 0 0 0 .401.17h2.286v2.286a.55.55 0 0 0 .17.401.55.55 0 0 0 .402.17h1.142a.55.55 0 0 0 .402-.17.55.55 0 0 0 .17-.401v-2.286h2.286a.55.55 0 0 0 .401-.17.55.55 0 0 0 .17-.402zM52 23c0 1.27-.313 2.441-.939 3.514a6.969 6.969 0 0 1-2.547 2.547A6.848 6.848 0 0 1 45 30a6.848 6.848 0 0 1-3.514-.939 6.969 6.969 0 0 1-2.547-2.547A6.848 6.848 0 0 1 38 23c0-1.27.313-2.441.939-3.514a6.969 6.969 0 0 1 2.547-2.547A6.848 6.848 0 0 1 45 16c1.27 0 2.441.313 3.514.939a6.969 6.969 0 0 1 2.547 2.547A6.848 6.848 0 0 1 52 23z"/>
+    <filter id="filter-8" width="107.1%" height="114.3%" x="-3.6%" y="-3.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-9" d="M31 18v1h-8v-1h8zm2-3v1H23v-1h10z"/>
+    <filter id="filter-10" width="110%" height="150%" x="-5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="newsletter_subscribe_popup">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 15)">
+        <g fill="url(#linearGradient-1)" class="image_1" opacity=".4" transform="translate(0 6)">
+          <rect width="49" height="21" class="rectangle"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-4"/>
+        </g>
+        <mask id="mask-7" fill="#fff">
+          <use xlink:href="#path-6"/>
+        </mask>
+        <g class="plus_circle">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-6"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-6"/>
+        </g>
+        <path fill="#FFF" fill-opacity=".78" d="M49 0v6H0V0h49zm-1.538 1L46 2.461 44.538 1l-.53.537 1.459 1.46L44 4.464l.529.537L46 3.53 47.471 5 48 4.463l-1.467-1.465 1.458-1.461L47.462 1z" class="combined_shape"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-9"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_alert.svg b/addons/website/static/src/img/snippets_thumbs/s_alert.svg
new file mode 100644
index 00000000..c6a1acbd
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_alert.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="22" height="2" x="3" y="3"/>
+    <filter id="filter-3" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M19 11v1H3v-1h16zm4-3v1H3V8h20z"/>
+    <filter id="filter-5" width="105%" height="150%" x="-2.5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_alert">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(19 22)">
+        <rect width="44" height="17" fill="url(#linearGradient-1)" fill-opacity=".4" class="rectangle_2" rx="1"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_badge.svg b/addons/website/static/src/img/snippets_thumbs/s_badge.svg
new file mode 100644
index 00000000..27bab86e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_badge.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="12" height="2" x="10" y="3"/>
+    <filter id="filter-3" width="108.3%" height="200%" x="-4.2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <circle id="path-4" cx="4" cy="4" r="2"/>
+    <filter id="filter-5" width="125%" height="150%" x="-12.5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_badge">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(28 26)">
+        <rect width="27" height="8" fill="url(#linearGradient-1)" class="rectangle" opacity=".4" rx="1"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="oval">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_banner.svg b/addons/website/static/src/img/snippets_thumbs/s_banner.svg
new file mode 100644
index 00000000..276923f8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_banner.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="23.23%" y2="76.77%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="21" height="2" x="3" y="3"/>
+    <filter id="filter-3" width="104.8%" height="200%" x="-2.4%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944   0 0 0 0 0.259629577   0 0 0 0 0.259574831  0 0 0 0.525895979 0"/>
+    </filter>
+    <path id="path-4" d="M18 11v1H3v-1h15zm2-3v1H3V8h17z"/>
+    <filter id="filter-5" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_banner">
+      <rect width="82" height="60" class="bg"/>
+      <g fill="url(#linearGradient-1)" class="group" opacity=".4">
+        <g class="image_1">
+          <rect width="82" height="60" class="rectangle"/>
+        </g>
+      </g>
+      <g class="group" transform="translate(13 22)">
+        <rect width="28" height="16" fill="#FFF" class="rectangle"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#000" fill-opacity=".697" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#000" fill-opacity=".348" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_blockquote.svg b/addons/website/static/src/img/snippets_thumbs/s_blockquote.svg
new file mode 100644
index 00000000..d583795e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_blockquote.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="12" height="2" x="11" y="0"/>
+    <filter id="filter-2" width="108.3%" height="200%" x="-4.2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-3" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-4" d="M32 8v1H11V8h21zm-5-3v1H11V5h16z"/>
+    <filter id="filter-5" width="104.8%" height="150%" x="-2.4%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_blockquote">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(20 24)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <path fill="url(#linearGradient-3)" d="M1.706 5c.349 0 .652-.114.909-.342C2.872 4.43 3 4.164 3 3.86c0-.147-.024-.29-.071-.427a.98.98 0 0 0-.243-.377 1.215 1.215 0 0 0-.472-.278 2.383 2.383 0 0 0-.755-.1h-.42c.05-.494.235-.914.555-1.26.319-.347.76-.651 1.324-.912L2.588 0A4.93 4.93 0 0 0 .76 1.318C.253 1.897 0 2.472 0 3.04c0 .613.147 1.092.441 1.44.295.346.716.519 1.265.519zm4 0c.349 0 .652-.114.909-.342C6.872 4.43 7 4.164 7 3.86c0-.147-.024-.29-.071-.427a.98.98 0 0 0-.243-.377 1.215 1.215 0 0 0-.472-.278 2.383 2.383 0 0 0-.755-.1h-.42c.05-.494.235-.914.555-1.26.319-.347.76-.651 1.324-.912L6.588 0A4.93 4.93 0 0 0 4.76 1.318C4.253 1.897 4 2.472 4 3.04c0 .613.147 1.092.441 1.44.295.346.716.519 1.265.519z"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-4"/>
+        </g>
+        <path fill="url(#linearGradient-3)" d="M36.411 12a4.93 4.93 0 0 0 1.83-1.318c.506-.579.759-1.154.759-1.723 0-.613-.147-1.092-.441-1.44-.295-.346-.716-.519-1.265-.519-.349 0-.652.114-.909.342-.257.228-.385.494-.385.798 0 .147.024.29.071.427a.98.98 0 0 0 .243.377c.12.12.277.212.472.278.194.067.446.1.755.1h.42c-.05.494-.235.914-.555 1.26-.319.347-.76.651-1.324.912l.33.506zm4 0a4.93 4.93 0 0 0 1.83-1.318c.506-.579.759-1.154.759-1.723 0-.613-.147-1.092-.441-1.44-.295-.346-.716-.519-1.265-.519-.349 0-.652.114-.909.342-.257.228-.385.494-.385.798 0 .147.024.29.071.427a.98.98 0 0 0 .243.377c.12.12.277.212.472.278.194.067.446.1.755.1h.42c-.05.494-.235.914-.555 1.26-.319.347-.76.651-1.324.912l.33.506z"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_call_to_action.svg b/addons/website/static/src/img/snippets_thumbs/s_call_to_action.svg
new file mode 100644
index 00000000..8fd18dfa
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_call_to_action.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="44.17%" y2="55.83%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="22" height="2" x="0" y="0"/>
+    <filter id="filter-3" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M16 8v1H0V8h16zm4-3v1H0V5h20z"/>
+    <filter id="filter-5" width="105%" height="150%" x="-2.5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <path id="path-6" d="M53.22 11.566c.15.145.183.312.1.501-.081.193-.224.29-.427.29h-2.771l1.458 3.453a.47.47 0 0 1-.247.61l-1.284.544a.47.47 0 0 1-.61-.247l-1.385-3.279-2.263 2.263a.446.446 0 0 1-.5.102c-.194-.082-.291-.225-.291-.428V4.465c0-.204.097-.347.29-.429a.45.45 0 0 1 .5.102l7.43 7.428z"/>
+    <filter id="filter-8" width="112%" height="115.4%" x="-6%" y="-3.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 1 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_call_to_action">
+      <rect width="82" height="60" class="bg"/>
+      <g fill="url(#linearGradient-1)" class="group" opacity=".4" transform="translate(0 16)">
+        <g class="image_1">
+          <rect width="82" height="28" class="rectangle"/>
+        </g>
+      </g>
+      <g class="center_group" transform="translate(15 25)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-4"/>
+        </g>
+        <rect width="16" height="7" x="36.5" y=".5" fill="#1C1C1C" stroke="#FFF" class="rectangle" opacity=".703"/>
+        <mask id="mask-7" fill="#fff">
+          <use xlink:href="#path-6"/>
+        </mask>
+        <g fill-rule="nonzero" class="mouse_pointer">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-6"/>
+          <use fill="#FFF" xlink:href="#path-6"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_card.svg b/addons/website/static/src/img/snippets_thumbs/s_card.svg
new file mode 100644
index 00000000..69e95a9e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_card.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M44 4v14H0V4h44zM25 7H3v2h22V7z"/>
+    <filter id="filter-2" width="102.3%" height="114.3%" x="-1.1%" y="-3.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <rect id="path-3" width="20" height="1" x="3" y="11"/>
+    <filter id="filter-4" width="105%" height="300%" x="-2.5%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_card">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(19 21)">
+        <g class="rectangle_2">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-1"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#000" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <rect width="44" height="4" fill="#FFF" fill-opacity=".78" class="combined_shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_carousel.svg b/addons/website/static/src/img/snippets_thumbs/s_carousel.svg
new file mode 100644
index 00000000..aa1b9576
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_carousel.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="82" height="60" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="44.674%" y2="25.975%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="38.481%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="15" height="2" x="13" y="2"/>
+    <filter id="filter-6" width="106.7%" height="200%" x="-3.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944   0 0 0 0 0.259629577   0 0 0 0 0.259574831  0 0 0 0.525895979 0"/>
+    </filter>
+    <path id="path-7" d="M25 10v1H13v-1h12zm5-3v1H13V7h17z"/>
+    <filter id="filter-8" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-9" d="M28 30v2h-5v-2h5zm14 0v2h-5v-2h5zm7 0v2h-5v-2h5zm-14 0v2h-5v-2h5z"/>
+    <filter id="filter-10" width="103.8%" height="200%" x="-1.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_carousel">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group">
+        <g class="oval___oval_mask" opacity=".5">
+          <mask id="mask-2" fill="#fff">
+            <use xlink:href="#path-1"/>
+          </mask>
+          <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+          <circle cx="65.5" cy="11.5" r="7.5" fill="#F3EC60" class="oval" mask="url(#mask-2)"/>
+          <ellipse cx="68.5" cy="62" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="26.5" ry="20"/>
+          <ellipse cx="18" cy="67" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="51" ry="32"/>
+        </g>
+        <g class="center_group" transform="translate(6 20)">
+          <rect width="21" height="14" x="11" fill="#FFF" class="rectangle"/>
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+            <use fill="#000" fill-opacity=".697" xlink:href="#path-5"/>
+          </g>
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+            <use fill="#000" fill-opacity=".348" xlink:href="#path-7"/>
+          </g>
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+          </g>
+          <path fill="#FFF" stroke="#FFF" d="M3.5 2.648v9.704L-.659 7.5 3.5 2.648zm64-1L71.659 6.5 67.5 11.352V1.648z" class="combined_shape"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_channel.svg b/addons/website/static/src/img/snippets_thumbs/s_channel.svg
new file mode 100644
index 00000000..0e4f3d32
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_channel.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M12 0a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm0 1.292L7.844 4.11a2 2 0 0 1-2.168.05L1 1.29V8h11V1.292zM11.426 1h-9.67L5.64 3.534a2 2 0 0 0 2.245-.04L11.425 1z"/>
+    <filter id="filter-2" width="107.7%" height="122.2%" x="-3.8%" y="-5.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M43 0v9H16V0h27zm-1 1H17v7h25V1z"/>
+    <filter id="filter-4" width="103.7%" height="122.2%" x="-1.9%" y="-5.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_channel">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(12 26)">
+        <g class="shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+        <path fill="url(#linearGradient-5)" d="M57 3.556c0 .643-.245 1.238-.734 1.784-.49.547-1.158.978-2.004 1.295-.847.318-1.767.476-2.762.476-.448 0-.906-.037-1.375-.111a6.978 6.978 0 0 1-2.172.889 7.31 7.31 0 0 1-.672.111h-.023a.262.262 0 0 1-.16-.056.224.224 0 0 1-.09-.145.128.128 0 0 1-.008-.046c0-.016.001-.03.004-.045a.136.136 0 0 1 .016-.041l.02-.035.026-.038.032-.035.035-.035.031-.03c.026-.029.086-.087.18-.175.093-.088.161-.156.203-.204l.176-.202a1.75 1.75 0 0 0 .195-.267c.055-.093.108-.195.16-.306-.646-.333-1.154-.743-1.523-1.229-.37-.486-.555-1.005-.555-1.555 0-.644.245-1.239.734-1.785.49-.546 1.158-.978 2.004-1.295A7.816 7.816 0 0 1 51.5 0c.995 0 1.915.159 2.762.476.846.317 1.514.749 2.004 1.295.49.546.734 1.141.734 1.785zm3 1.558c0 .61-.181 1.182-.543 1.714-.363.531-.86.98-1.493 1.347.051.122.104.234.157.336.054.102.118.2.191.294l.173.221c.04.053.107.128.199.225a5.34 5.34 0 0 1 .271.302.344.344 0 0 1 .027.042l.02.038.015.046.003.05-.007.049a.283.283 0 0 1-.1.168.231.231 0 0 1-.168.053 6.45 6.45 0 0 1-.658-.122 6.444 6.444 0 0 1-2.128-.977 7.745 7.745 0 0 1-1.347.122c-1.382 0-2.586-.336-3.612-1.007a8.104 8.104 0 0 0 3.038-.313 6.782 6.782 0 0 0 2.02-.985c.638-.468 1.128-1.007 1.47-1.618A3.91 3.91 0 0 0 57.865 2c.658.361 1.178.814 1.561 1.359.383.544.574 1.13.574 1.755z" class="comments"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_chart.svg b/addons/website/static/src/img/snippets_thumbs/s_chart.svg
new file mode 100644
index 00000000..f5c06dd2
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_chart.svg
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-2" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-3" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-6" width="22" height="2" x="0" y="0"/>
+    <filter id="filter-7" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_chart">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(22 22)">
+        <rect width="6" height="12" y="5" fill="url(#linearGradient-1)" class="rectangle" rx="1"/>
+        <rect width="6" height="7" x="8" y="10" fill="url(#linearGradient-2)" class="rectangle" rx="1"/>
+        <rect width="6" height="9" x="16" y="8" fill="url(#linearGradient-3)" class="rectangle" rx="1"/>
+        <rect width="6" height="4" x="25" y="13" fill="url(#linearGradient-4)" class="rectangle" rx="1"/>
+        <rect width="6" height="13" x="33" y="4" fill="url(#linearGradient-5)" class="rectangle" rx="1"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-6"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg b/addons/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg
new file mode 100644
index 00000000..48b7b20c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="27.778%" x2="72.222%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00E2FF"/>
+      <stop offset="100%" stop-color="#00A09D"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-2" x1="27.778%" x2="72.222%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-3" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-4" d="M27 50.429V52H13v-1.571h14zm-1.556-4.715v1.572h-9.333v-1.572h9.333zM27 41v1.571H13V41h14z"/>
+    <filter id="filter-5" width="107.1%" height="118.2%" x="-3.6%" y="-4.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <rect id="path-6" width="27" height="3" x="7" y="33"/>
+    <filter id="filter-7" width="103.7%" height="166.7%" x="-1.9%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-8" d="M69 50.429V52H55v-1.571h14zm-1.556-4.715v1.572h-9.333v-1.572h9.333zM69 41v1.571H55V41h14z"/>
+    <filter id="filter-9" width="107.1%" height="118.2%" x="-3.6%" y="-4.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <rect id="path-10" width="27" height="3" x="49" y="33"/>
+    <filter id="filter-11" width="103.7%" height="166.7%" x="-1.9%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_color_blocks_2">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group">
+        <path fill="url(#linearGradient-1)" d="M82 0v60H42V0h40zM63 6c-5.523 0-10 4.494-10 10.038 0 5.544 4.477 10.038 10 10.038s10-4.494 10-10.038C73 10.494 68.523 6 63 6z" class="combined_shape" opacity=".4"/>
+        <path fill="url(#linearGradient-2)" d="M40 0v60H0V0h40zM20 6c-5.523 0-10 4.494-10 10.038 0 5.544 4.477 10.038 10 10.038s10-4.494 10-10.038C30 10.494 25.523 6 20 6z" class="combined_shape" opacity=".4"/>
+        <path fill="url(#linearGradient-3)" d="M20 7a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm43 0a9 9 0 1 1 0 18 9 9 0 0 1 0-18z" class="combined_shape"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-4"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-6"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-9)" xlink:href="#path-8"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-8"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-11)" xlink:href="#path-10"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-10"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_company_team.svg b/addons/website/static/src/img/snippets_thumbs/s_company_team.svg
new file mode 100644
index 00000000..c62a9e65
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_company_team.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M43 16v2H16v-2h27zm5-16v2H16V0h32z"/>
+    <filter id="filter-2" width="103.1%" height="111.1%" x="-1.6%" y="-2.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M28 24v1H16v-1h12zm13-3v1H16v-1h25zM39 8v1H16V8h23zm7-3v1H16V5h30z"/>
+    <filter id="filter-4" width="103.3%" height="110%" x="-1.7%" y="-2.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_company_team">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(17 17)">
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <path fill="url(#linearGradient-5)" d="M5 16a5 5 0 1 1 0 10 5 5 0 0 1 0-10zM5 0a5 5 0 1 1 0 10A5 5 0 0 1 5 0z" class="combined_shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_comparisons.svg b/addons/website/static/src/img/snippets_thumbs/s_comparisons.svg
new file mode 100644
index 00000000..8178f99e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_comparisons.svg
@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="45.918%" y2="54.082%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-2" x1="0%" x2="100%" y1="42.969%" y2="57.031%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-3" d="M12 9v2H3V9h9zm37 0v2h-9V9h9z"/>
+    <filter id="filter-4" width="102.2%" height="200%" x="-1.1%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-5" d="M8 22v1H3v-1h5zm4-2v1H3v-1h9zm-3-3v1H3v-1h6zm2-3v1H3v-1h8z"/>
+    <filter id="filter-6" width="111.1%" height="122.2%" x="-5.6%" y="-5.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-7" d="M27 20v1h-7v-1h7zm5-3v1H20v-1h12zm-4-3v1h-8v-1h8zm3-3v1H20v-1h11z"/>
+    <filter id="filter-8" width="108.3%" height="120%" x="-4.2%" y="-5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-9" d="M49 22v1h-9v-1h9zm-5-2v1h-4v-1h4zm4-3v1h-8v-1h8zm-2-3v1h-6v-1h6z"/>
+    <filter id="filter-10" width="111.1%" height="122.2%" x="-5.6%" y="-5.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-11" width="12" height="2" x="20" y="6"/>
+    <filter id="filter-12" width="108.3%" height="200%" x="-4.2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_comparisons">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 12)">
+        <path fill="#D8D8D8" d="M14 3a1 1 0 0 1 1 1v29a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h13zm0 4H1v26h13V7zm37-4a1 1 0 0 1 1 1v29a1 1 0 0 1-1 1H38a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h13zm0 4H38v26h13V7zM34 0a1 1 0 0 1 1 1v34a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h16zm0 4H18v31h16V4z" class="combined_shape"/>
+        <rect width="7" height="2" x="4" y="28" fill="url(#linearGradient-1)" class="rectangle"/>
+        <rect width="7" height="2" x="41" y="28" fill="url(#linearGradient-1)" class="rectangle"/>
+        <rect width="8" height="3" x="22" y="29" fill="url(#linearGradient-2)" class="rectangle"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-9"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-11"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_countdown.svg b/addons/website/static/src/img/snippets_thumbs/s_countdown.svg
new file mode 100644
index 00000000..cb7a9980
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_countdown.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1=".245%" y2="99.755%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_countdown">
+      <rect width="82" height="60" class="bg"/>
+      <g class="countdown" transform="translate(24 12)">
+        <path fill="url(#linearGradient-1)" d="M17 5.396a14.66 14.66 0 0 1 10.71 4.628l-2.02 1.244A12.34 12.34 0 0 0 17 7.708c-6.828 0-12.364 5.522-12.364 12.334 0 6.811 5.536 12.333 12.364 12.333 6.828 0 12.364-5.522 12.364-12.333 0-.398.036-1.154 0-1.542h2.238c.053.507.08 1.021.08 1.542 0 8.088-6.573 14.645-14.682 14.645S2.318 28.13 2.318 20.043c0-8.09 6.573-14.647 14.682-14.647z" class="icon_fore"/>
+        <path fill="#84848C" d="M18.546 29.945V37h-3.091v-7.055a10.147 10.147 0 0 0 3.09 0zM26.927 18.5H34v3.083h-7.073a10.073 10.073 0 0 0 0-3.083zM6.955 20.042c0 .524.04 1.04.118 1.542H0V18.5h7.073a10.073 10.073 0 0 0-.118 1.542zM19.09 0a1 1 0 0 1 1 1v2.854h-1.546v6.285a10.147 10.147 0 0 0-3.09 0V3.854h-1.546V1a1 1 0 0 1 1-1h4.182z" class="combined_shape"/>
+        <path fill="#FFF" fill-opacity=".78" d="M17 30.063c5.548 0 10.045-4.487 10.045-10.021 0-5.535-4.497-10.021-10.045-10.021S6.955 14.507 6.955 20.04c0 5.535 4.497 10.021 10.045 10.021zm2.438-10.036a2.3 2.3 0 0 1 .633.554c.175.222.31.477.405.766.095.288.142.598.142.928 0 .445-.09.844-.27 1.199-.18.354-.438.657-.775.907a3.77 3.77 0 0 1-1.215.582 5.733 5.733 0 0 1-1.593.206c-1.44 0-2.568-.421-3.383-1.263l1.222-1.617c.256.265.548.466.875.603.327.137.718.206 1.173.206 1.07 0 1.606-.392 1.606-1.177 0-.426-.159-.747-.476-.965-.318-.217-.818-.326-1.5-.326h-.427V19h.47c.53 0 .945-.11 1.244-.327a1.02 1.02 0 0 0 .447-.865c0-.312-.109-.549-.327-.71-.218-.16-.507-.24-.867-.24a2.07 2.07 0 0 0-1.059.276 2.356 2.356 0 0 0-.803.787l-1.436-1.645c.151-.199.35-.383.597-.553.246-.17.526-.314.839-.433a6.138 6.138 0 0 1 2.119-.376c.501 0 .961.06 1.378.178.417.118.773.288 1.066.51.294.223.522.487.683.795.16.307.242.65.242 1.028 0 .284-.045.553-.135.808a2.47 2.47 0 0 1-.377.695c-.161.208-.353.38-.576.518a2.06 2.06 0 0 1-.732.276c.294.057.564.159.81.305z" class="xmlid_900__copy_2"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_cover.svg b/addons/website/static/src/img/snippets_thumbs/s_cover.svg
new file mode 100644
index 00000000..6fb7174f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_cover.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="23.23%" y2="76.77%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="21" height="2" x="0" y="0"/>
+    <filter id="filter-3" width="104.8%" height="200%" x="-2.4%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M18 8v1H3V8h15zm1-3v1H2V5h17z"/>
+    <filter id="filter-5" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_cover">
+      <rect width="82" height="60" class="bg"/>
+      <g fill="url(#linearGradient-1)" class="group" opacity=".4">
+        <g class="image_1">
+          <rect width="82" height="60" class="rectangle"/>
+        </g>
+      </g>
+      <g class="center_group" transform="translate(31 26)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg b/addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg
new file mode 100644
index 00000000..d47d35d8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M27 30v2h-5v-2h5zm14 0v2h-5v-2h5zm7 0v2h-5v-2h5zm-14 0v2h-5v-2h5z"/>
+    <filter id="filter-2" width="103.8%" height="200%" x="-1.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-3" width="20.208" height="13.176" x="0" y="0"/>
+    <linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="47.143%" y2="37.112%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="47.295%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-7" width="20.208" height="13.176" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_dynamic_carousel">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(6 14)">
+        <g class="center_group" transform="translate(0 9)">
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <path fill="#FFF" stroke="#FFF" d="M3.5-.352v9.704L-.659 4.5 3.5-.352zm64-1L71.659 3.5 67.5 8.352v-9.704z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(38)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-4" fill="#fff">
+                <use xlink:href="#path-3"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-3"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-4)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-4)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(10)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-7"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(43 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(15 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg b/addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg
new file mode 100644
index 00000000..30321cbf
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg
@@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="20.208" height="13.176" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="47.143%" y2="37.112%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="47.295%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="20.208" height="13.176" x="0" y="0"/>
+    <rect id="path-7" width="20.208" height="13.176" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_dynamic_snippet">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(5 14)">
+        <g class="group_2" transform="translate(52)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g class="group_2">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-6" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-6)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-6)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(26)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-7"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-8)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-8)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(57 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(5 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(31 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_facebook_page.svg b/addons/website/static/src/img/snippets_thumbs/s_facebook_page.svg
new file mode 100644
index 00000000..daf20630
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_facebook_page.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M52 0v17H0V0h52zM14.391 2H4.61a.59.59 0 0 0-.43.179.586.586 0 0 0-.179.43v9.782c0 .167.06.31.179.43.12.12.263.179.43.179h5.263V8.739H8.44V7.077h1.432V5.853c0-.697.195-1.237.584-1.619.39-.382.908-.573 1.558-.573a9.6 9.6 0 0 1 1.274.065v1.482l-.873.007c-.325 0-.543.067-.656.201-.112.134-.168.334-.168.602v1.06h1.64l-.215 1.66h-1.425V13h2.8a.59.59 0 0 0 .43-.179.586.586 0 0 0 .179-.43V2.61a.59.59 0 0 0-.179-.43.586.586 0 0 0-.43-.179z"/>
+    <filter id="filter-2" width="101.9%" height="111.8%" x="-1%" y="-2.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <rect id="path-3" width="22" height="2" x="21" y="3"/>
+    <filter id="filter-4" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944   0 0 0 0 0.259629577   0 0 0 0 0.259574831  0 0 0 0.525895979 0"/>
+    </filter>
+    <path id="path-5" d="M37 11v1H21v-1h16zm4-3v1H21V8h20z"/>
+    <filter id="filter-6" width="105%" height="150%" x="-2.5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_facebook_page">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 22)">
+        <g class="rectangle_2">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-1"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#000" fill-opacity=".697" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#000" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_faq_collapse.svg b/addons/website/static/src/img/snippets_thumbs/s_faq_collapse.svg
new file mode 100644
index 00000000..ea9bff39
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_faq_collapse.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-2" d="M38 8v1H8V8h30zm-7-3v1H8V5h23zm12-3v1H8V2h35z"/>
+    <filter id="filter-3" width="102.9%" height="128.6%" x="-1.4%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-4" width="26" height="1" x="8" y="17"/>
+    <filter id="filter-5" width="103.8%" height="300%" x="-1.9%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-6" width="33" height="1" x="8" y="24"/>
+    <filter id="filter-7" width="103%" height="300%" x="-1.5%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-8" width="28" height="1" x="8" y="31"/>
+    <filter id="filter-9" width="103.6%" height="300%" x="-1.8%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_faq_collapse">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 13)">
+        <rect width="53" height="13" fill="#D8D8D8" class="rectangle" opacity=".219"/>
+        <rect width="53" height="5" y="16" fill="#D8D8D8" class="rectangle" opacity=".219"/>
+        <rect width="53" height="5" y="23" fill="#D8D8D8" class="rectangle" opacity=".219"/>
+        <rect width="53" height="5" y="30" fill="#D8D8D8" class="rectangle" opacity=".219"/>
+        <rect width="3" height="3" x="2" y="31" fill="url(#linearGradient-1)" class="rectangle" rx="1"/>
+        <rect width="3" height="3" x="2" y="24" fill="url(#linearGradient-1)" class="rectangle" rx="1"/>
+        <rect width="3" height="3" x="2" y="17" fill="url(#linearGradient-1)" class="rectangle" rx="1"/>
+        <rect width="3" height="3" x="2" y="2" fill="url(#linearGradient-1)" class="rectangle" rx="1"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-4"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-6"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-9)" xlink:href="#path-8"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-8"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_features.svg b/addons/website/static/src/img/snippets_thumbs/s_features.svg
new file mode 100644
index 00000000..fcfa1fe7
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_features.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-2" d="M15 16v2H0v-2h15zm19 0v2H19v-2h15zm19 0v2H38v-2h15z"/>
+    <filter id="filter-3" width="101.9%" height="200%" x="-.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-4" d="M14 28v1H0v-1h14zm19 0v1H19v-1h14zm19 0v1H38v-1h14zm-41-3v1H0v-1h11zm19 0v1H19v-1h11zm19 0v1H38v-1h11zm-35-3v1H0v-1h14zm19 0v1H19v-1h14zm19 0v1H38v-1h14z"/>
+    <filter id="filter-5" width="101.9%" height="128.6%" x="-1%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_features">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 13)">
+        <path fill="url(#linearGradient-1)" d="M7 0a6 6 0 1 1 0 12A6 6 0 0 1 7 0zm19 0a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm19 0a6 6 0 1 1 0 12 6 6 0 0 1 0-12z" class="combined_shape"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_features_grid.svg b/addons/website/static/src/img/snippets_thumbs/s_features_grid.svg
new file mode 100644
index 00000000..874ef6c0
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_features_grid.svg
@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="21.12" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="104.7%" height="200%" x="-2.4%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M19 20v1H8v-1h11zm2-2v1H8v-1h13zm-5-9v1H8V9h8zm5-2v1H8V7h13z"/>
+    <filter id="filter-4" width="107.7%" height="114.3%" x="-3.8%" y="-3.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-6" width="24.038" height="2" x="0" y="0"/>
+    <filter id="filter-7" width="104.2%" height="200%" x="-2.1%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-8" d="M19 20v1H8v-1h11zm3-2v1H8v-1h14zm-3-9v1H8V9h11zm-1-2v1H8V7h10z"/>
+    <filter id="filter-9" width="107.1%" height="114.3%" x="-3.6%" y="-3.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_features_grid">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_3" transform="translate(15 18)">
+        <g class="group_2">
+          <g class="group">
+            <g class="rectangle">
+              <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+              <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+            </g>
+            <g class="combined_shape">
+              <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+              <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+            </g>
+          </g>
+          <path fill="url(#linearGradient-5)" d="M3 18a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM3 7a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(28)">
+          <g class="group">
+            <g class="rectangle">
+              <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+              <use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
+            </g>
+            <g class="combined_shape">
+              <use fill="#000" filter="url(#filter-9)" xlink:href="#path-8"/>
+              <use fill="#FFF" fill-opacity=".348" xlink:href="#path-8"/>
+            </g>
+          </g>
+          <path fill="url(#linearGradient-5)" d="M3 18a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM3 7a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" class="combined_shape"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_google_map.svg b/addons/website/static/src/img/snippets_thumbs/s_google_map.svg
new file mode 100644
index 00000000..e69fb2d2
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_google_map.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="23.231%" y2="76.769%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-2" d="M10 6.5c0-.966-.342-1.791-1.025-2.475A3.372 3.372 0 0 0 6.5 3c-.966 0-1.791.342-2.475 1.025A3.372 3.372 0 0 0 3 6.5c0 .966.342 1.791 1.025 2.475A3.372 3.372 0 0 0 6.5 10c.966 0 1.791-.342 2.475-1.025A3.372 3.372 0 0 0 10 6.5zm3 .167c0 .946-.14 1.723-.419 2.33L7.96 19.076a1.566 1.566 0 0 1-.603.677 1.6 1.6 0 0 1-1.714 0 1.488 1.488 0 0 1-.59-.677L.419 8.997C.139 8.39 0 7.613 0 6.667c0-1.84.635-3.412 1.904-4.714C3.174.651 4.706 0 6.5 0s3.326.651 4.596 1.953S13 4.826 13 6.667z"/>
+    <filter id="filter-4" width="107.7%" height="110%" x="-3.8%" y="-2.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_google_map">
+      <g fill="url(#linearGradient-1)" class="image_1" opacity=".4">
+        <path d="M23.033 36.864L32.38 60H0V44.348l23.033-7.484zM60.346 24.74L74.592 60H55.05L43.071 30.353l17.275-5.613zM82 17.705V60h-4.567L62.858 23.924 82 17.704zM40.56 31.169l11.65 28.83H35.22l-9.677-23.951 15.015-4.88zM27.966-.001L39.57 28.722 0 41.579V0h27.966zM50.35 0l9.006 22.293-17.274 5.613L30.807 0H50.35zM82 0v14.935l-20.132 6.54L53.191 0H82z" class="combined_shape"/>
+      </g>
+      <g class="group" transform="translate(17 14)">
+        <mask id="mask-3" fill="#fff">
+          <use xlink:href="#path-2"/>
+        </mask>
+        <g class="map_marker">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png b/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png
new file mode 100644
index 00000000..cbfec358
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_hr.svg b/addons/website/static/src/img/snippets_thumbs/s_hr.svg
new file mode 100644
index 00000000..b9197424
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_hr.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="44" height="1" x="0" y="5.5"/>
+    <filter id="filter-2" width="102.3%" height="300%" x="-1.1%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_hr">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(19 24)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <path fill="#FFF" stroke="#FFF" d="M25.925 10.5L22 13.64l-3.925-3.14h7.85zm0-8h-7.85L22-.64l3.925 3.14z" class="combined_shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_image_gallery.svg b/addons/website/static/src/img/snippets_thumbs/s_image_gallery.svg
new file mode 100644
index 00000000..3dceedfb
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_image_gallery.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="82" height="60" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="44.674%" y2="25.975%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="38.481%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_image_gallery">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" opacity=".5">
+        <g class="oval___oval_mask">
+          <mask id="mask-2" fill="#fff">
+            <use xlink:href="#path-1"/>
+          </mask>
+          <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+          <circle cx="65.5" cy="11.5" r="7.5" fill="#F3EC60" class="oval" mask="url(#mask-2)"/>
+          <ellipse cx="68.5" cy="62" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="26.5" ry="20"/>
+          <ellipse cx="18" cy="67" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="51" ry="32"/>
+        </g>
+      </g>
+      <g fill="#FFF" stroke="#FFF" class="center_group" transform="translate(9 27)">
+        <path d="M61.5-1.352L65.659 3.5 61.5 8.352v-9.704zm-58 0v9.704L-.659 3.5 3.5-1.352z" class="combined_shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_image_text.svg b/addons/website/static/src/img/snippets_thumbs/s_image_text.svg
new file mode 100644
index 00000000..9353ed75
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_image_text.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="23.077" height="18.116" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="46.509%" y2="34.249%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="39.469%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="25" height="2" x="28" y="0"/>
+    <filter id="filter-6" width="104%" height="200%" x="-2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-7" d="M51 12v1H28v-1h23zm-4-3v1H28V9h19zm4-3v1H28V6h23z"/>
+    <filter id="filter-8" width="104.3%" height="128.6%" x="-2.2%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_image_text">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 21)">
+        <g class="image_1_border">
+          <rect width="24" height="19" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.462 .442)">
+            <mask id="mask-2" fill="#fff">
+              <use xlink:href="#path-1"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+            <ellipse cx="17.769" cy="4.64" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.462" ry="3.314"/>
+            <ellipse cx="23.308" cy="19.884" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="10.846" ry="6.628"/>
+            <ellipse cx=".231" cy="20.105" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="17.308" ry="10.384"/>
+          </g>
+          <path fill="#FFF" d="M24 0v19H0V0h24zm-1 1H1v17h22V1z" class="rectangle_2"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_images_wall.svg b/addons/website/static/src/img/snippets_thumbs/s_images_wall.svg
new file mode 100644
index 00000000..22acc70d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_images_wall.svg
@@ -0,0 +1,91 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="24.057" height="15.059" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="47.367%" y2="38.122%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="46.899%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="24.057" height="15.059" x="0" y="0"/>
+    <rect id="path-7" width="12.5" height="9.535" x="0" y="0"/>
+    <linearGradient id="linearGradient-9" x1="72.875%" x2="40.332%" y1="46.704%" y2="35.129%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-10" x1="88.517%" x2="50%" y1="40.057%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-11" width="12.5" height="10.488" x="0" y="0"/>
+    <linearGradient id="linearGradient-13" x1="72.875%" x2="40.332%" y1="46.011%" y2="32.006%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-14" x1="88.517%" x2="50%" y1="37.969%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_images_wall">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(21 13)">
+        <g class="image_1_border">
+          <rect width="25" height="16" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.472 .47)">
+            <mask id="mask-2" fill="#fff">
+              <use xlink:href="#path-1"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+            <ellipse cx="20.519" cy="4.394" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.594" ry="2.394"/>
+            <ellipse cx="23.821" cy="16.706" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="11.085" ry="5.882"/>
+            <ellipse cx="-10.982" cy="16" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="26.018" ry="8.471"/>
+          </g>
+          <path fill="#FFF" d="M25 0v16H0V0h25zm-.472.47H.472v15.06h24.056V.47z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(15 18)">
+          <rect width="25" height="16" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.472 .47)">
+            <mask id="mask-6" fill="#fff">
+              <use xlink:href="#path-5"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+            <ellipse cx="20.519" cy="4.394" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="2.594" ry="2.394"/>
+            <ellipse cx="23.821" cy="16.706" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-6)" rx="11.085" ry="5.882"/>
+            <ellipse cx="-10.982" cy="16" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-6)" rx="26.018" ry="8.471"/>
+          </g>
+          <path fill="#FFF" d="M25 0v16H0V0h25zm-.472.47H.472v15.06h24.056V.47z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(27)">
+          <rect width="13" height="10" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .233)">
+            <mask id="mask-8" fill="#fff">
+              <use xlink:href="#path-7"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
+            <ellipse cx="9.625" cy="2.442" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="1.875" ry="1.744"/>
+            <ellipse cx="12.625" cy="10.465" fill="url(#linearGradient-9)" class="oval" mask="url(#mask-8)" rx="5.875" ry="3.488"/>
+            <ellipse cx=".125" cy="10.581" fill="url(#linearGradient-10)" class="oval" mask="url(#mask-8)" rx="9.375" ry="5.465"/>
+          </g>
+          <path fill="#FFF" d="M13 0v10H0V0h13zm-1 1H1v8h11V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(0 18)">
+          <rect width="13" height="11" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .256)">
+            <mask id="mask-12" fill="#fff">
+              <use xlink:href="#path-11"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-11"/>
+            <ellipse cx="9.625" cy="2.686" fill="#F3EC60" class="oval" mask="url(#mask-12)" rx="1.875" ry="1.919"/>
+            <ellipse cx="12.625" cy="11.512" fill="url(#linearGradient-13)" class="oval" mask="url(#mask-12)" rx="5.875" ry="3.837"/>
+            <ellipse cx=".125" cy="11.64" fill="url(#linearGradient-14)" class="oval" mask="url(#mask-12)" rx="9.375" ry="6.012"/>
+          </g>
+          <path fill="#FFF" d="M13 0v11H0V0h13zm-1 1H1v9h11V1z" class="rectangle_2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_masonry_block.svg b/addons/website/static/src/img/snippets_thumbs/s_masonry_block.svg
new file mode 100644
index 00000000..36c6e1b8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_masonry_block.svg
@@ -0,0 +1,126 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="33.944%" y2="66.056%">
+      <stop offset="0%" stop-color="#00E2FF"/>
+      <stop offset="100%" stop-color="#00A09D"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-2" x1="0%" x2="100%" y1="31.569%" y2="68.431%">
+      <stop offset="0%" stop-color="#00E2FF"/>
+      <stop offset="100%" stop-color="#00A09D"/>
+    </linearGradient>
+    <path id="path-3" d="M20 12v1H4v-1h16zm-6-3v1H4V9h10zm6-3v1H4V6h16z"/>
+    <filter id="filter-4" width="106.2%" height="128.6%" x="-3.1%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <rect id="path-5" width="21" height="1" x="4" y="3"/>
+    <filter id="filter-6" width="104.8%" height="300%" x="-2.4%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-7" d="M52 29v1H34v-1h18zm-6-3v1H34v-1h12zm6-3v1H34v-1h18z"/>
+    <filter id="filter-8" width="105.6%" height="128.6%" x="-2.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+    <rect id="path-9" width="19" height="1" x="34" y="19"/>
+    <filter id="filter-10" width="105.3%" height="300%" x="-2.6%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-11" d="M52 12v1H34v-1h18zm-6-3v1H34V9h12zm6-3v1H34V6h18z"/>
+    <filter id="filter-12" width="105.6%" height="128.6%" x="-2.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-13" width="21" height="1" x="34" y="3"/>
+    <filter id="filter-14" width="104.8%" height="300%" x="-2.4%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-15" d="M20 29v1H4v-1h16zm-6-3v1H4v-1h10zm6-3v1H4v-1h16z"/>
+    <filter id="filter-16" width="106.2%" height="128.6%" x="-3.1%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-17" width="15" height="1" x="4" y="19"/>
+    <filter id="filter-18" width="106.7%" height="300%" x="-3.3%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-19" width="23.442" height="33" x="0" y="0"/>
+    <linearGradient id="linearGradient-21" x1="72.875%" x2="40.332%" y1="46.301%" y2="33.313%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-22" x1="88.517%" x2="50%" y1="38.842%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_masonry_block">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(0 15)">
+        <g class="group_2" transform="translate(24)">
+          <rect width="58" height="33" fill="#D8D8D8" class="rectangle" opacity=".058"/>
+          <rect width="30" height="17" fill="url(#linearGradient-1)" class="rectangle" opacity=".4"/>
+          <rect width="28" height="17" x="30" y="16" fill="url(#linearGradient-2)" class="rectangle" opacity=".4"/>
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".8" xlink:href="#path-3"/>
+          </g>
+          <g class="rectangle_copy">
+            <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-5"/>
+          </g>
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+            <use fill="#FFF" fill-opacity=".8" xlink:href="#path-7"/>
+          </g>
+          <g class="rectangle_copy">
+            <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-9"/>
+          </g>
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+          </g>
+          <g class="rectangle_copy">
+            <use fill="#000" filter="url(#filter-14)" xlink:href="#path-13"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-13"/>
+          </g>
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-16)" xlink:href="#path-15"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-15"/>
+          </g>
+          <g class="rectangle_copy">
+            <use fill="#000" filter="url(#filter-18)" xlink:href="#path-17"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-17"/>
+          </g>
+        </g>
+        <g class="image_1_border">
+          <rect width="24" height="33" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask">
+            <mask id="mask-20" fill="#fff">
+              <use xlink:href="#path-19"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-19"/>
+            <ellipse cx="16.465" cy="6.325" fill="#F3EC60" class="oval" mask="url(#mask-20)" rx="4.186" ry="4.125"/>
+            <ellipse cx="19.256" cy="34.1" fill="url(#linearGradient-21)" class="oval" mask="url(#mask-20)" rx="13.116" ry="8.25"/>
+            <ellipse cx="-8.651" cy="34.375" fill="url(#linearGradient-22)" class="oval" mask="url(#mask-20)" rx="20.93" ry="12.925"/>
+          </g>
+          <path fill="#FFF" d="M24 0v33H0V0h24zm-1 1H1v31h22V1z" class="rectangle_2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_media_list.svg b/addons/website/static/src/img/snippets_thumbs/s_media_list.svg
new file mode 100644
index 00000000..c059743f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_media_list.svg
@@ -0,0 +1,90 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M32 15v1H21v-1h11zm-4-3v1h-7v-1h7zm4-3v1H21V9h11z"/>
+    <filter id="filter-2" width="109.1%" height="128.6%" x="-4.5%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-3" width="23" height="2" x="21" y="5"/>
+    <filter id="filter-4" width="104.3%" height="200%" x="-2.2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944   0 0 0 0 0.259629577   0 0 0 0 0.259574831  0 0 0 0.525895979 0"/>
+    </filter>
+    <path id="path-5" d="M42 33v1H21v-1h21zm-7-3v1H21v-1h14zm7-3v1H21v-1h21z"/>
+    <filter id="filter-6" width="104.8%" height="128.6%" x="-2.4%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-7" width="13" height="2" x="21" y="23"/>
+    <filter id="filter-8" width="107.7%" height="200%" x="-3.8%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944   0 0 0 0 0.259629577   0 0 0 0 0.259574831  0 0 0 0.525895979 0"/>
+    </filter>
+    <rect id="path-9" width="17.308" height="14.302" x="0" y="0"/>
+    <linearGradient id="linearGradient-11" x1="72.875%" x2="40.332%" y1="46.131%" y2="32.548%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-12" x1="88.517%" x2="50%" y1="38.331%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-13" width="17.308" height="14.302" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_media_list">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 11)">
+        <rect width="53" height="39" class="rectangle"/>
+        <rect width="36" height="15" x="17" y="21" fill="#FFF" class="rectangle"/>
+        <rect width="36" height="15" x="17" y="3" fill="#FFF" class="rectangle"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#000" fill-opacity=".348" xlink:href="#path-1"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#000" fill-opacity=".697" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#000" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#000" fill-opacity=".697" xlink:href="#path-7"/>
+        </g>
+        <g class="image_1_border" transform="translate(0 3)">
+          <rect width="18" height="15" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.346 .349)">
+            <mask id="mask-10" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="13.327" cy="3.663" fill="#F3EC60" class="oval" mask="url(#mask-10)" rx="2.596" ry="2.616"/>
+            <ellipse cx="17.481" cy="15.698" fill="url(#linearGradient-11)" class="oval" mask="url(#mask-10)" rx="8.135" ry="5.233"/>
+            <ellipse cx=".173" cy="15.872" fill="url(#linearGradient-12)" class="oval" mask="url(#mask-10)" rx="12.981" ry="8.198"/>
+          </g>
+          <path fill="#FFF" d="M18 0v15H0V0h18zm-1 1H1v13h16V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(0 21)">
+          <rect width="18" height="15" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.346 .349)">
+            <mask id="mask-14" fill="#fff">
+              <use xlink:href="#path-13"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-13"/>
+            <ellipse cx="13.327" cy="3.663" fill="#F3EC60" class="oval" mask="url(#mask-14)" rx="2.596" ry="2.616"/>
+            <ellipse cx="17.481" cy="15.698" fill="url(#linearGradient-11)" class="oval" mask="url(#mask-14)" rx="8.135" ry="5.233"/>
+            <ellipse cx=".173" cy="15.872" fill="url(#linearGradient-12)" class="oval" mask="url(#mask-14)" rx="12.981" ry="8.198"/>
+          </g>
+          <path fill="#FFF" d="M18 0v15H0V0h18zm-1 1H1v13h16V1z" class="rectangle_2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg
new file mode 100644
index 00000000..2dd08e55
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg
@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="13" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="107.7%" height="200%" x="-3.8%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M12 12v1H0v-1h12zm-2-3v1H0V9h10zm2-3v1H0V6h12z"/>
+    <filter id="filter-4" width="108.3%" height="128.6%" x="-4.2%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="15.059" height="19.07" x="0" y="0"/>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.279%" y2="33.212%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="38.775%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-9" width="14" height="2" x="39" y="0"/>
+    <filter id="filter-10" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-11" d="M52 12v1H39v-1h13zm-2-3v1H39V9h11zm2-3v1H39V6h13z"/>
+    <filter id="filter-12" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_menu_image_menu">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 20)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="image_1_border" transform="translate(19)">
+          <rect width="16" height="20" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.47 .465)">
+            <mask id="mask-6" fill="#fff">
+              <use xlink:href="#path-5"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+            <ellipse cx="9.647" cy="4.884" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="3.529" ry="3.488"/>
+            <ellipse cx="15.294" cy="20.93" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-6)" rx="11.059" ry="6.977"/>
+            <ellipse cx="-8.235" cy="21.163" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-6)" rx="17.647" ry="10.93"/>
+          </g>
+          <path fill="#FFF" d="M16 0v20H0V0h16zm-1 1H1v18h14V1z" class="rectangle_2"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg
new file mode 100644
index 00000000..57244e37
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="14" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M13 12v1H0v-1h13zm-2-3v1H0V9h11zm2-3v1H0V6h13z"/>
+    <filter id="filter-4" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="14" height="2" x="20" y="0"/>
+    <filter id="filter-6" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-7" d="M33 12v1H20v-1h13zm-2-3v1H20V9h11zm2-3v1H20V6h13z"/>
+    <filter id="filter-8" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-9" width="14" height="2" x="39" y="0"/>
+    <filter id="filter-10" width="107.1%" height="200%" x="-3.6%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-11" d="M52 12v1H39v-1h13zm-2-3v1H39V9h11zm2-3v1H39V6h13z"/>
+    <filter id="filter-12" width="107.7%" height="128.6%" x="-3.8%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_mega_menu_multi_menus">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 24)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg b/addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg
new file mode 100644
index 00000000..152e61f8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M12 0a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm0 1.292L7.844 4.11a2 2 0 0 1-2.168.05L1 1.29V8h11V1.292zM11.426 1h-9.67L5.64 3.534a2 2 0 0 0 2.245-.04L11.425 1z"/>
+    <filter id="filter-2" width="107.7%" height="122.2%" x="-3.8%" y="-5.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M37 0v9H16V0h21zm-.677 1H16.677v7h19.646V1z"/>
+    <filter id="filter-4" width="104.8%" height="122.2%" x="-2.4%" y="-5.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-6" d="M45.5 9a.377.377 0 0 1-.27-.105L41.4 5.367a1.991 1.991 0 0 1-.17-.152 6.108 6.108 0 0 1-.34-.384 5.188 5.188 0 0 1-.417-.571 3.47 3.47 0 0 1-.329-.71A2.461 2.461 0 0 1 40 2.743c0-.86.26-1.531.78-2.015C41.3.242 42.017 0 42.934 0c.254 0 .513.042.777.126.264.084.51.197.736.34.227.142.423.276.586.401.164.125.32.258.467.399.147-.141.303-.274.467-.399.163-.125.359-.259.586-.401.227-.143.472-.256.736-.34.264-.084.523-.126.777-.126.917 0 1.635.242 2.154.727.52.484.78 1.156.78 2.015 0 .863-.469 1.742-1.406 2.637L45.77 8.895A.377.377 0 0 1 45.5 9z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_newsletter_subscribe_form">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(16 26)">
+        <g class="shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+        <mask id="mask-7" fill="#fff">
+          <use xlink:href="#path-6"/>
+        </mask>
+        <use fill="url(#linearGradient-5)" class="heart" xlink:href="#path-6"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_numbers.svg b/addons/website/static/src/img/snippets_thumbs/s_numbers.svg
new file mode 100644
index 00000000..49c90148
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_numbers.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M14 26v1H5v-1h9zm-1-3v1H7v-1h6zm1-3v1H5v-1h9z"/>
+    <filter id="filter-2" width="111.1%" height="128.6%" x="-5.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-3" width="17" height="2" x="1" y="14"/>
+    <filter id="filter-4" width="105.9%" height="200%" x="-2.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-5" d="M40 26v1h-9v-1h9zm-1-3v1h-6v-1h6zm1-3v1h-9v-1h9z"/>
+    <filter id="filter-6" width="111.1%" height="128.6%" x="-5.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-7" width="17" height="2" x="27" y="14"/>
+    <filter id="filter-8" width="105.9%" height="200%" x="-2.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_numbers">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(19 16)">
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-1"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-7"/>
+        </g>
+        <path fill="#E4E4E4" fill-rule="nonzero" d="M7.41 10.522v-2.59h1.47V6.489H7.41V.46H5.504L.595 6.674v1.258h4.526v2.59h2.29zM5.12 6.49H1.642l3.48-4.395V6.49zm7.89 4.033c1.207 0 2.2-.317 2.976-.953.777-.636 1.166-1.455 1.166-2.458 0-.57-.116-1.047-.349-1.432a2.858 2.858 0 0 0-.861-.92 3.482 3.482 0 0 0-1.152-.502 5.439 5.439 0 0 0-1.2-.133c-.524 0-.98.07-1.367.212-.387.141-.704.29-.95.444l.28-2.256h5.284V.638h-5.776l-.663 5.03.533.179c.228-.278.486-.503.773-.674.287-.17.642-.256 1.066-.256.547 0 .992.206 1.336.619.345.412.517.94.517 1.582 0 .442-.053.838-.158 1.186-.104.349-.26.65-.465.906a1.803 1.803 0 0 1-1.408.684c-.127 0-.264-.01-.41-.031a1.814 1.814 0 0 1-.383-.092c.05-.142.114-.347.192-.616.077-.269.116-.517.116-.745a.964.964 0 0 0-.345-.776c-.23-.193-.526-.29-.886-.29-.346 0-.623.111-.83.335a1.16 1.16 0 0 0-.311.82c0 .547.312 1.02.936 1.422.625.4 1.404.601 2.338.601z" class="45"/>
+        <path fill="#E4E4E4" fill-rule="nonzero" d="M29.128 10.563c1.941-.255 3.473-.91 4.594-1.965 1.12-1.055 1.681-2.412 1.681-4.07 0-1.254-.353-2.252-1.06-2.995C33.638.79 32.686.42 31.487.42c-1.107 0-2.03.316-2.768.947-.739.63-1.108 1.427-1.108 2.389 0 .451.072.87.216 1.254.143.385.343.715.598.988.25.269.547.48.889.636.341.155.708.232 1.1.232.47 0 .892-.056 1.268-.167.376-.112.765-.343 1.166-.694-.064.406-.16.8-.287 1.183A4.04 4.04 0 0 1 32 8.274c-.237.333-.54.625-.91.875-.368.251-.833.456-1.394.616l-.724.123.157.676zM31.54 5.99c-.42 0-.758-.216-1.015-.65-.258-.432-.386-1.013-.386-1.742 0-.834.126-1.472.379-1.914.253-.442.582-.663.988-.663.42 0 .76.29 1.022.871s.393 1.419.393 2.512c0 .087-.002.176-.007.267a4.767 4.767 0 0 0-.007.232 2.9 2.9 0 0 1-.007.222 1.756 1.756 0 0 0-.006.12c-.192.287-.4.483-.623.588a1.7 1.7 0 0 1-.731.157zM42.574 8v-.52a7.37 7.37 0 0 1-.615-.082c-.278-.045-.476-.095-.595-.15a.69.69 0 0 1-.304-.277.831.831 0 0 1-.106-.427V2.538c0-.314.007-.67.02-1.066.014-.397.028-.743.042-1.04h-1.203a3.585 3.585 0 0 1-.298.363 2.502 2.502 0 0 1-.482.396 2.842 2.842 0 0 1-.721.315 3.61 3.61 0 0 1-1.029.13h-.376v.65h1.73v4.333c0 .192-.039.342-.116.451a.623.623 0 0 1-.322.233 3.68 3.68 0 0 1-.612.11c-.298.036-.516.058-.652.067V8h5.64z" class="91"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_parallax.svg b/addons/website/static/src/img/snippets_thumbs/s_parallax.svg
new file mode 100644
index 00000000..aea38151
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_parallax.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="82" height="60" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="44.674%" y2="25.975%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="38.481%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <path id="path-5" d="M13.5 34.998a.367.367 0 0 1-.13.277L7.3 40.88A.429.429 0 0 1 7 41a.429.429 0 0 1-.3-.12L.63 35.275a.367.367 0 0 1-.13-.277c0-.104.043-.196.13-.276l.652-.602a.429.429 0 0 1 .3-.12.43.43 0 0 1 .299.12L7 38.847l5.12-4.727a.429.429 0 0 1 .299-.12.43.43 0 0 1 .3.12l.65.602c.088.08.131.172.131.276z"/>
+    <path id="path-7" d="M13.5.998a.367.367 0 0 1-.13.277L7.3 6.88A.429.429 0 0 1 7 7a.429.429 0 0 1-.3-.12L.63 1.275A.367.367 0 0 1 .5.998C.5.894.543.802.63.722L1.282.12a.429.429 0 0 1 .3-.12.43.43 0 0 1 .299.12L7 4.847 12.12.12a.429.429 0 0 1 .299-.12.43.43 0 0 1 .3.12l.65.602c.088.08.131.172.131.276z"/>
+    <linearGradient id="linearGradient-9" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFF"/>
+      <stop offset="32.744%" stop-color="#F0F0F0"/>
+      <stop offset="100%" stop-color="#F3F3F3"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-10" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#757575"/>
+      <stop offset="100%" stop-color="#414141"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_parallax">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" opacity=".5">
+        <g class="oval___oval_mask">
+          <mask id="mask-2" fill="#fff">
+            <use xlink:href="#path-1"/>
+          </mask>
+          <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+          <circle cx="65.5" cy="11.5" r="7.5" fill="#F3EC60" class="oval" mask="url(#mask-2)"/>
+          <ellipse cx="68.5" cy="62" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="26.5" ry="20"/>
+          <ellipse cx="18" cy="67" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="51" ry="32"/>
+        </g>
+      </g>
+      <g class="center_group" transform="translate(34 10)">
+        <mask id="mask-6" fill="#fff">
+          <use xlink:href="#path-5"/>
+        </mask>
+        <use fill="#FFF" fill-rule="nonzero" class="angle_down" xlink:href="#path-5"/>
+        <mask id="mask-8" fill="#fff">
+          <use xlink:href="#path-7"/>
+        </mask>
+        <use fill="#FFF" fill-rule="nonzero" class="angle_down" transform="matrix(1 0 0 -1 0 7)" xlink:href="#path-7"/>
+        <rect width="13" height="20" x=".5" y="10.5" fill="url(#linearGradient-9)" stroke="#E4E4E4" class="rectangle" rx="5"/>
+        <rect width="2" height="5" x="6" y="12" fill="url(#linearGradient-10)" class="rectangle" rx="1"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_picture.svg b/addons/website/static/src/img/snippets_thumbs/s_picture.svg
new file mode 100644
index 00000000..d33e7670
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_picture.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="35.604" height="22.588" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="47.295%" y2="37.799%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="45.065%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <path id="path-5" d="M27 8v1H10V8h17zm-3-3v1H13V5h11z"/>
+    <filter id="filter-6" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-7" width="29" height="2" x="4" y="0"/>
+    <filter id="filter-8" width="103.4%" height="200%" x="-1.7%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_picture">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(23 13)">
+        <g class="image_1_border" transform="translate(0 11)">
+          <rect width="37" height="24" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.698 .706)">
+            <mask id="mask-2" fill="#fff">
+              <use xlink:href="#path-1"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+            <ellipse cx="30.368" cy="5.775" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.84" ry="3.775"/>
+            <ellipse cx="35.255" cy="25.059" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="16.406" ry="8.824"/>
+            <ellipse cx="-6.061" cy="24" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="30.939" ry="12.706"/>
+          </g>
+          <path fill="#FFF" d="M37 0v24H0V0h37zm-.698.706H.698v22.588h35.604V.706z" class="rectangle_2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-7"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_popup.svg b/addons/website/static/src/img/snippets_thumbs/s_popup.svg
new file mode 100644
index 00000000..e34e6f71
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_popup.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="44.009%" y2="55.991%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="22" height="2" x="4" y="10"/>
+    <filter id="filter-3" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M20 18v1H4v-1h16zm4-3v1H4v-1h20z"/>
+    <filter id="filter-5" width="105%" height="150%" x="-2.5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_popup">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 18)">
+        <g fill="url(#linearGradient-1)" class="image_1" opacity=".4" transform="translate(0 6)">
+          <rect width="52" height="18" class="rectangle"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <path fill="#FFF" fill-opacity=".78" d="M52 0v6H0V0h52zm-1.538 1L49 2.461 47.538 1l-.53.537 1.459 1.46L47 4.464l.529.537L49 3.53 50.471 5 51 4.463l-1.467-1.465 1.458-1.461L50.462 1z" class="combined_shape"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_process_steps.svg b/addons/website/static/src/img/snippets_thumbs/s_process_steps.svg
new file mode 100644
index 00000000..d4117bdd
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_process_steps.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="31" height="1" x="11" y="5"/>
+    <filter id="filter-2" width="103.2%" height="300%" x="-1.6%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-3" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_process_steps">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 25)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-1"/>
+        </g>
+        <circle cx="47.5" cy="5.5" r="5.5" fill="url(#linearGradient-3)" class="oval" opacity=".426"/>
+        <circle cx="5.5" cy="5.5" r="5.5" fill="#FFF" fill-opacity=".78" class="oval"/>
+        <circle cx="26.5" cy="5.5" r="5.5" fill="url(#linearGradient-3)" class="oval"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_product_catalog.svg b/addons/website/static/src/img/snippets_thumbs/s_product_catalog.svg
new file mode 100644
index 00000000..1c0d8263
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_product_catalog.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="37" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="102.7%" height="200%" x="-1.4%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M17 27.813V29H0v-1.188h17zm0-5.938v1.188H0v-1.188h17zm0-5.938v1.188H0v-1.188h17zM17 10v1.188H0V10h17z"/>
+    <filter id="filter-4" width="105.9%" height="110.5%" x="-2.9%" y="-2.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-5" d="M24 27.813V29h-2v-1.188h2zm0-5.938v1.188h-2v-1.188h2zm0-5.938v1.188h-2v-1.188h2zM24 10v1.188h-2V10h2z"/>
+    <filter id="filter-6" width="150%" height="110.5%" x="-25%" y="-2.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-7" d="M51 27.813V29H34v-1.188h17zm0-5.938v1.188H34v-1.188h17zm0-5.938v1.188H34v-1.188h17zM51 10v1.188H34V10h17z"/>
+    <filter id="filter-8" width="105.9%" height="110.5%" x="-2.9%" y="-2.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-9" d="M58 27.813V29h-2v-1.188h2zm0-5.938v1.188h-2v-1.188h2zm0-5.938v1.188h-2v-1.188h2zM58 10v1.188h-2V10h2z"/>
+    <filter id="filter-10" width="150%" height="110.5%" x="-25%" y="-2.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_product_catalog">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(12 15)">
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-5"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-9"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_product_list.svg b/addons/website/static/src/img/snippets_thumbs/s_product_list.svg
new file mode 100644
index 00000000..cc162fc3
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_product_list.svg
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <polygon id="path-2" points="0 10.447 6.5 13.16 6.5 5.5 0 3"/>
+    <filter id="filter-3" width="115.4%" height="119.7%" x="-7.7%" y="-4.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <polygon id="path-4" points="7.5 13.16 14 10.447 14 3 7.5 5.5"/>
+    <filter id="filter-5" width="115.4%" height="119.7%" x="-7.7%" y="-4.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <polygon id="path-6" points="0 10.447 6.5 13.16 6.5 5.5 0 3"/>
+    <filter id="filter-7" width="115.4%" height="119.7%" x="-7.7%" y="-4.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <polygon id="path-8" points="7.5 13.16 14 10.447 14 3 7.5 5.5"/>
+    <filter id="filter-9" width="115.4%" height="119.7%" x="-7.7%" y="-4.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <polygon id="path-10" points="0 10.447 6.5 13.16 6.5 5.5 0 3"/>
+    <filter id="filter-11" width="115.4%" height="119.7%" x="-7.7%" y="-4.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <polygon id="path-12" points="7.5 13.16 14 10.447 14 3 7.5 5.5"/>
+    <filter id="filter-13" width="115.4%" height="119.7%" x="-7.7%" y="-4.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_product_list">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 20)">
+        <path fill="url(#linearGradient-1)" d="M13 18v2H1v-2h12zm20 0v2H20v-2h13zm20 0v2H38v-2h15z" class="combined_shape"/>
+        <g class="box_solid">
+          <rect width="14" height="13" class="rectangle"/>
+          <polygon fill="#FFF" fill-opacity=".78" points="7 .5 0 2.405 7 5 14 2.405" class="path"/>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+          </g>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-4"/>
+          </g>
+        </g>
+        <g class="box_solid" transform="translate(38)">
+          <rect width="14" height="13" class="rectangle"/>
+          <polygon fill="#FFF" fill-opacity=".78" points="7 .5 0 2.405 7 5 14 2.405" class="path"/>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-6"/>
+          </g>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-9)" xlink:href="#path-8"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-8"/>
+          </g>
+        </g>
+        <g class="box_solid" transform="translate(19)">
+          <rect width="14" height="13" class="rectangle"/>
+          <polygon fill="#FFF" fill-opacity=".78" points="7 .5 0 2.405 7 5 14 2.405" class="path"/>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-10"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-10"/>
+          </g>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-13)" xlink:href="#path-12"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-12"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_progress_bar.svg b/addons/website/static/src/img/snippets_thumbs/s_progress_bar.svg
new file mode 100644
index 00000000..ecff924a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_progress_bar.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="22" height="2" x="0" y="0"/>
+    <filter id="filter-3" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_progress_bar">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(19 24)">
+        <path fill="#FFF" fill-opacity=".641" d="M20 5h23a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H20V5z" class="rectangle" opacity=".433"/>
+        <path fill="url(#linearGradient-1)" d="M1 5h18v8H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" class="rectangle"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg b/addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg
new file mode 100644
index 00000000..4c57f1bc
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="44.17%" y2="55.83%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-2" d="M11.193 7c.449 0 .839-.16 1.169-.479.33-.319.495-.691.495-1.116 0-.207-.03-.406-.091-.599a1.391 1.391 0 0 0-.313-.528 1.541 1.541 0 0 0-.606-.39c-.25-.092-.574-.139-.971-.139h-.539c.064-.691.301-1.28.712-1.765.41-.485.978-.91 1.702-1.276L12.328 0a6.386 6.386 0 0 0-2.352 1.845C9.326 2.655 9 3.46 9 4.258c0 .857.19 1.529.568 2.014.378.485.92.728 1.625.728zm5.143 0c.449 0 .838-.16 1.169-.479.33-.319.495-.691.495-1.116 0-.207-.03-.406-.091-.599a1.391 1.391 0 0 0-.313-.528 1.541 1.541 0 0 0-.606-.39c-.25-.092-.574-.139-.971-.139h-.54c.065-.691.302-1.28.713-1.765.41-.485.978-.91 1.702-1.276L17.471 0a6.386 6.386 0 0 0-2.352 1.845c-.65.81-.976 1.615-.976 2.413 0 .857.189 1.529.567 2.014.379.485.92.728 1.626.728z"/>
+    <filter id="filter-3" width="111.1%" height="128.6%" x="-5.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-4" width="19" height="3" x="22" y="6"/>
+    <filter id="filter-5" width="105.3%" height="166.7%" x="-2.6%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-6" d="M47.549 14a6.593 6.593 0 0 0 2.439-1.845C50.663 11.345 51 10.54 51 9.742c0-.857-.196-1.529-.589-2.014C50.02 7.243 49.457 7 48.726 7c-.466 0-.87.16-1.212.479-.343.319-.514.691-.514 1.116 0 .207.032.406.095.599.063.193.171.369.324.528.16.166.369.296.628.39.26.092.596.139 1.008.139h.558c-.066.691-.312 1.28-.738 1.765-.425.485-1.014.91-1.765 1.276l.439.708zm5 0a6.593 6.593 0 0 0 2.439-1.845C55.663 11.345 56 10.54 56 9.742c0-.857-.196-1.529-.589-2.014C55.02 7.243 54.457 7 53.726 7c-.466 0-.87.16-1.212.479-.343.319-.514.691-.514 1.116 0 .207.032.406.095.599.063.193.171.369.324.528.16.166.369.296.628.39.26.092.596.139 1.008.139h.558c-.066.691-.312 1.28-.738 1.765-.425.485-1.014.91-1.765 1.276l.439.708z"/>
+    <filter id="filter-7" width="111.1%" height="128.6%" x="-5.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_quotes_carousel">
+      <rect width="82" height="60" class="bg"/>
+      <g fill="url(#linearGradient-1)" class="group" opacity=".4" transform="translate(0 17)">
+        <g class="image_1">
+          <rect width="82" height="28" class="rectangle"/>
+        </g>
+      </g>
+      <g class="group" transform="translate(8 22)">
+        <path fill="#FFF" stroke="#FFF" d="M62.5 3.648L66.659 8.5 62.5 13.352V3.648zm-59 0v9.704L-.659 8.5 3.5 3.648z" class="combined_shape"/>
+        <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+        <use fill="#FFF" fill-opacity=".78" xlink:href="#path-2"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-4"/>
+        </g>
+        <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+        <use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_rating.svg b/addons/website/static/src/img/snippets_thumbs/s_rating.svg
new file mode 100644
index 00000000..911434f4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_rating.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="22" height="2" x="0" y="0"/>
+    <filter id="filter-2" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-3" d="M43 8.1c0 .074-.047.155-.14.242l-1.964 1.785.465 2.52a.71.71 0 0 1 .006.101c0 .07-.02.13-.057.179-.038.049-.093.073-.165.073a.461.461 0 0 1-.217-.06L38.5 11.75l-2.428 1.19a.485.485 0 0 1-.217.06c-.076 0-.132-.024-.17-.073a.283.283 0 0 1-.057-.179c0-.02.004-.054.01-.1l.466-2.521-1.969-1.785c-.09-.09-.135-.171-.135-.242 0-.124.101-.201.303-.232l2.715-.368 1.217-2.293c.068-.138.157-.207.265-.207.108 0 .197.069.265.207L39.982 7.5l2.715.368c.202.03.303.108.303.232z"/>
+    <filter id="filter-4" width="111.1%" height="125%" x="-5.6%" y="-6.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-5" d="M31 8.1c0 .074-.047.155-.14.242l-1.964 1.785.465 2.52a.71.71 0 0 1 .006.101c0 .07-.02.13-.057.179-.038.049-.093.073-.165.073a.461.461 0 0 1-.217-.06L26.5 11.75l-2.428 1.19a.485.485 0 0 1-.217.06c-.076 0-.132-.024-.17-.073a.283.283 0 0 1-.057-.179c0-.02.004-.054.01-.1l.466-2.521-1.969-1.785c-.09-.09-.135-.171-.135-.242 0-.124.101-.201.303-.232l2.715-.368 1.217-2.293c.068-.138.157-.207.265-.207.108 0 .197.069.265.207L27.982 7.5l2.715.368c.202.03.303.108.303.232z"/>
+    <filter id="filter-6" width="111.1%" height="125%" x="-5.6%" y="-6.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-7" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_rating">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(20 24)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-1"/>
+        </g>
+        <g class="mask">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="mask">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <path fill="url(#linearGradient-7)" d="M19 8.1c0 .074-.042.155-.125.242l-1.745 1.785.413 2.52a.799.799 0 0 1 .005.101c0 .07-.017.13-.05.179a.167.167 0 0 1-.147.073.376.376 0 0 1-.192-.06L15 11.75l-2.159 1.19a.395.395 0 0 1-.192.06c-.067 0-.118-.024-.151-.073a.307.307 0 0 1-.05-.179c0-.02.002-.054.009-.1l.413-2.521-1.75-1.785c-.08-.09-.12-.171-.12-.242 0-.124.09-.201.27-.232l2.413-.368 1.081-2.293c.061-.138.14-.207.236-.207.096 0 .175.069.236.207L16.317 7.5l2.414.368c.18.03.269.108.269.232z" class="star_copy"/>
+        <path fill="url(#linearGradient-7)" d="M8 8.1c0 .074-.042.155-.125.242L6.13 10.127l.413 2.52a.799.799 0 0 1 .005.101c0 .07-.017.13-.05.179A.167.167 0 0 1 6.35 13a.376.376 0 0 1-.192-.06L4 11.75l-2.159 1.19a.395.395 0 0 1-.192.06c-.067 0-.118-.024-.151-.073a.307.307 0 0 1-.05-.179c0-.02.002-.054.009-.1l.413-2.521L.12 8.342C.04 8.252 0 8.171 0 8.1c0-.124.09-.201.27-.232L2.682 7.5l1.081-2.293C3.825 5.069 3.904 5 4 5s.175.069.236.207L5.317 7.5l2.414.368c.18.03.269.108.269.232z" class="star"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_references.svg b/addons/website/static/src/img/snippets_thumbs/s_references.svg
new file mode 100644
index 00000000..dbb24930
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_references.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="10.577" height="8.581" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="46.271%" y2="33.176%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="38.751%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="9.615" height="8.581" x="0" y="0"/>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="45.488%" y2="29.644%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="36.389%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-9" width="11.538" height="8.581" x="0" y="0"/>
+    <linearGradient id="linearGradient-11" x1="72.875%" x2="40.332%" y1="46.866%" y2="35.864%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-12" x1="88.517%" x2="50%" y1="40.548%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-13" width="10.577" height="8.581" x="0" y="0"/>
+    <rect id="path-15" width="22" height="2" x="17" y="0"/>
+    <filter id="filter-16" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-17" width="14" height="1" x="21" y="5"/>
+    <filter id="filter-18" width="107.1%" height="300%" x="-3.6%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_references">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(14 20)">
+        <g class="image_1_border" transform="translate(30 11)">
+          <rect width="11" height="9" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.212 .21)">
+            <mask id="mask-2" fill="#fff">
+              <use xlink:href="#path-1"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+            <ellipse cx="8.144" cy="2.198" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="1.587" ry="1.57"/>
+            <ellipse cx="10.683" cy="9.419" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="4.971" ry="3.14"/>
+            <ellipse cx=".106" cy="9.523" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="7.933" ry="4.919"/>
+          </g>
+          <path fill="#FFF" d="M11 0v9H0V0h11zm-1 1H1v7h9V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(45 11)">
+          <rect width="10" height="9" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.192 .21)">
+            <mask id="mask-6" fill="#fff">
+              <use xlink:href="#path-5"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+            <ellipse cx="7.404" cy="2.198" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="1.442" ry="1.57"/>
+            <ellipse cx="9.712" cy="9.419" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-6)" rx="4.519" ry="3.14"/>
+            <ellipse cx=".096" cy="9.523" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-6)" rx="7.212" ry="4.919"/>
+          </g>
+          <path fill="#FFF" d="M10 0v9H0V0h10zM9 1H1v7h8V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(0 11)">
+          <rect width="12" height="9" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.23 .21)">
+            <mask id="mask-10" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="8.885" cy="2.198" fill="#F3EC60" class="oval" mask="url(#mask-10)" rx="1.731" ry="1.57"/>
+            <ellipse cx="11.654" cy="9.419" fill="url(#linearGradient-11)" class="oval" mask="url(#mask-10)" rx="5.423" ry="3.14"/>
+            <ellipse cx=".115" cy="9.523" fill="url(#linearGradient-12)" class="oval" mask="url(#mask-10)" rx="8.654" ry="4.919"/>
+          </g>
+          <path fill="#FFF" d="M12 0v9H0V0h12zm-1 1H1v7h10V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(15 11)">
+          <rect width="11" height="9" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.212 .21)">
+            <mask id="mask-14" fill="#fff">
+              <use xlink:href="#path-13"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-13"/>
+            <ellipse cx="8.144" cy="2.198" fill="#F3EC60" class="oval" mask="url(#mask-14)" rx="1.587" ry="1.57"/>
+            <ellipse cx="10.683" cy="9.419" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-14)" rx="4.971" ry="3.14"/>
+            <ellipse cx=".106" cy="9.523" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-14)" rx="7.933" ry="4.919"/>
+          </g>
+          <path fill="#FFF" d="M11 0v9H0V0h11zm-1 1H1v7h9V1z" class="rectangle_2"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-16)" xlink:href="#path-15"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-15"/>
+        </g>
+        <g class="rectangle_copy">
+          <use fill="#000" filter="url(#filter-18)" xlink:href="#path-17"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-17"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_share.svg b/addons/website/static/src/img/snippets_thumbs/s_share.svg
new file mode 100644
index 00000000..a80bd232
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_share.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M0 17.71V4.29C0 3.577.597 3 1.336 3h27.162l-1.91 1.843H1.909v12.313h32.184v-2.475L36 12.837v4.873c-.001.712-.598 1.29-1.336 1.29H1.336C.598 19 0 18.423 0 17.71z"/>
+    <filter id="filter-2" width="102.8%" height="112.5%" x="-1.4%" y="-3.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-3" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_share">
+      <rect width="82" height="60" class="bg"/>
+      <g class="noun_share_3132" transform="translate(21 21)">
+        <g class="path">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <path fill="url(#linearGradient-3)" d="M33.852 2.409V0L40 6.234l-6.174 6.262V9.99s-3.621-.254-6.218 1.377C25.883 12.45 24.854 13.535 24 15c0 0 .233-3.89 2.44-7.433 2.76-4.43 7.412-5.158 7.412-5.158z" class="path"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_showcase.svg b/addons/website/static/src/img/snippets_thumbs/s_showcase.svg
new file mode 100644
index 00000000..40dcdf57
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_showcase.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="1" height="19" x="26" y="0"/>
+    <filter id="filter-2" width="200%" height="110.5%" x="-50%" y="-2.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-3" d="M13 16v1H2v-1h11zm0-11v1H5V5h8z"/>
+    <filter id="filter-4" width="109.1%" height="116.7%" x="-4.5%" y="-4.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-5" d="M13 12v2H0v-2h13zm0-11v2H0V1h13z"/>
+    <filter id="filter-6" width="107.7%" height="115.4%" x="-3.8%" y="-3.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-7" width="13" height="5" x="20" y="22"/>
+    <filter id="filter-8" width="107.7%" height="140%" x="-3.8%" y="-10%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-9" width="11" height="3" x="21" y="23"/>
+    <filter id="filter-10" width="109.1%" height="166.7%" x="-4.5%" y="-16.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-11" d="M51 16v1H40v-1h11zm0-11v1H40V5h11z"/>
+    <filter id="filter-12" width="109.1%" height="116.7%" x="-4.5%" y="-4.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-13" d="M54 12v2H40v-2h14zM50 1v2H40V1h10z"/>
+    <filter id="filter-14" width="107.1%" height="115.4%" x="-3.6%" y="-3.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-15" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_showcase">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(14 17)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-7"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#000" fill-opacity=".348" xlink:href="#path-9"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-14)" xlink:href="#path-13"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-13"/>
+        </g>
+        <path fill="url(#linearGradient-15)" d="M18 12a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0-11a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm17 11a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0-11a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" class="combined_shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_table_of_content.svg b/addons/website/static/src/img/snippets_thumbs/s_table_of_content.svg
new file mode 100644
index 00000000..944a6f22
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_table_of_content.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M44 16v2H17v-2h27zm5-16v2H17V0h32z"/>
+    <filter id="filter-2" width="103.1%" height="111.1%" x="-1.6%" y="-2.8%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M29 24v1H17v-1h12zm13-3v1H17v-1h25zM40 8v1H17V8h23zm7-3v1H17V5h30z"/>
+    <filter id="filter-4" width="103.3%" height="110%" x="-1.7%" y="-2.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="1" height="29" x="13" y="0"/>
+    <filter id="filter-6" width="200%" height="106.9%" x="-50%" y="-1.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-7" width="10" height="1" x="0" y="0"/>
+    <filter id="filter-8" width="110%" height="300%" x="-5%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-9" width="10" height="1" x="0" y="3"/>
+    <filter id="filter-10" width="110%" height="300%" x="-5%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-11" width="10" height="1" x="0" y="6"/>
+    <filter id="filter-12" width="110%" height="300%" x="-5%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_table_of_content">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(17 16)">
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-9"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_tabs.svg b/addons/website/static/src/img/snippets_thumbs/s_tabs.svg
new file mode 100644
index 00000000..0c221024
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_tabs.svg
@@ -0,0 +1,93 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M39 23v1H20v-1h19zm6-3v1H20v-1h25z"/>
+    <filter id="filter-2" width="104%" height="150%" x="-2%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-3" width="15" height="2" x="20" y="15"/>
+    <filter id="filter-4" width="106.7%" height="200%" x="-3.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-5" width="12.5" height="10.488" x="0" y="0"/>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.011%" y2="32.006%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="37.969%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <path id="path-9" d="M53 7v26H0V7h53zm-1 1H1v24h51V8z"/>
+    <filter id="filter-10" width="101.9%" height="107.7%" x="-.9%" y="-1.9%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-11" width="10" height="5" x="12" y="0"/>
+    <filter id="filter-12" width="110%" height="140%" x="-5%" y="-10%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-13" width="10" height="5" x="0" y="0"/>
+    <filter id="filter-14" width="110%" height="140%" x="-5%" y="-10%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-15" width="10" height="5" x="24" y="0"/>
+    <filter id="filter-16" width="110%" height="140%" x="-5%" y="-10%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_tabs">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 14)">
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-1"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+        <g class="image_1_border" transform="translate(4 14)">
+          <rect width="13" height="11" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.25 .256)">
+            <mask id="mask-6" fill="#fff">
+              <use xlink:href="#path-5"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+            <ellipse cx="9.625" cy="2.686" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="1.875" ry="1.919"/>
+            <ellipse cx="12.625" cy="11.512" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-6)" rx="5.875" ry="3.837"/>
+            <ellipse cx=".125" cy="11.64" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-6)" rx="9.375" ry="6.012"/>
+          </g>
+          <path fill="#FFF" d="M13 0v11H0V0h13zm-1 1H1v9h11V1z" class="rectangle_2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-14)" xlink:href="#path-13"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-13"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-16)" xlink:href="#path-15"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-15"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_text_block.svg b/addons/website/static/src/img/snippets_thumbs/s_text_block.svg
new file mode 100644
index 00000000..a91d5d58
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_text_block.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M53 37v1H15v-1h38zm14-3v1H15v-1h52zm0-3v1H15v-1h52zm-24-5v1H15v-1h28zm24-3v1H15v-1h52z"/>
+    <filter id="filter-2" width="101.9%" height="113.3%" x="-1%" y="-3.3%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_text_block">
+      <rect width="82" height="60" class="bg"/>
+      <g class="combined_shape">
+        <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+        <use fill="#FFF" fill-opacity=".348" xlink:href="#path-1"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_text_highlight.svg b/addons/website/static/src/img/snippets_thumbs/s_text_highlight.svg
new file mode 100644
index 00000000..77c432f5
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_text_highlight.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="22" height="2" x="11" y="3"/>
+    <filter id="filter-3" width="104.5%" height="200%" x="-2.3%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M28 11v1H16v-1h12zm2-3v1H14V8h16z"/>
+    <filter id="filter-5" width="106.2%" height="150%" x="-3.1%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_text_highlight">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group_2" transform="translate(19 22)">
+        <rect width="44" height="17" fill="url(#linearGradient-1)" fill-opacity=".4" class="rectangle_2" rx="1"/>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".8" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_text_image.svg b/addons/website/static/src/img/snippets_thumbs/s_text_image.svg
new file mode 100644
index 00000000..7f335fc3
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_text_image.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="23.077" height="18.116" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="46.509%" y2="34.249%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="39.469%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="25" height="2" x="0" y="0"/>
+    <filter id="filter-6" width="104%" height="200%" x="-2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-7" d="M23 12v1H0v-1h23zm-4-3v1H0V9h19zm4-3v1H0V6h23z"/>
+    <filter id="filter-8" width="104.3%" height="128.6%" x="-2.2%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_text_image">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 21)">
+        <g class="image_1_border" transform="translate(29)">
+          <rect width="24" height="19" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.462 .442)">
+            <mask id="mask-2" fill="#fff">
+              <use xlink:href="#path-1"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+            <ellipse cx="17.769" cy="4.64" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.462" ry="3.314"/>
+            <ellipse cx="23.308" cy="19.884" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="10.846" ry="6.628"/>
+            <ellipse cx=".231" cy="20.105" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="17.308" ry="10.384"/>
+          </g>
+          <path fill="#FFF" d="M24 0v19H0V0h24zm-1 1H1v17h22V1z" class="rectangle_2"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_three_columns.svg b/addons/website/static/src/img/snippets_thumbs/s_three_columns.svg
new file mode 100644
index 00000000..7b2fdafb
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_three_columns.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="14.423" height="11.442" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="46.435%" y2="33.916%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="39.246%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="15.385" height="11.442" x="0" y="0"/>
+    <linearGradient id="linearGradient-7" x1="72.875%" x2="40.332%" y1="46.866%" y2="35.864%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-8" x1="88.517%" x2="50%" y1="40.548%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-9" width="14.423" height="11.442" x="0" y="0"/>
+    <path id="path-11" d="M15 16v2H0v-2h15zm19 0v2H19v-2h15zm19 0v2H38v-2h15z"/>
+    <filter id="filter-12" width="101.9%" height="200%" x="-.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-13" d="M33 28v1H19v-1h14zm-3-3v1H19v-1h11zm3-3v1H19v-1h14z"/>
+    <filter id="filter-14" width="107.1%" height="128.6%" x="-3.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-15" d="M52 28v1H38v-1h14zm-3-3v1H38v-1h11zm3-3v1H38v-1h14z"/>
+    <filter id="filter-16" width="107.1%" height="128.6%" x="-3.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-17" d="M14 28v1H0v-1h14zm-3-3v1H0v-1h11zm3-3v1H0v-1h14z"/>
+    <filter id="filter-18" width="107.1%" height="128.6%" x="-3.6%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_three_columns">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(15 16)">
+        <g class="image_1_border">
+          <rect width="15" height="12" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.288 .28)">
+            <mask id="mask-2" fill="#fff">
+              <use xlink:href="#path-1"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+            <ellipse cx="11.106" cy="2.93" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.163" ry="2.093"/>
+            <ellipse cx="14.567" cy="12.558" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="6.779" ry="4.186"/>
+            <ellipse cx=".144" cy="12.698" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="10.817" ry="6.558"/>
+          </g>
+          <path fill="#FFF" d="M15 0v12H0V0h15zm-1 1H1v10h13V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(18)">
+          <rect width="16" height="12" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.308 .28)">
+            <mask id="mask-6" fill="#fff">
+              <use xlink:href="#path-5"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+            <ellipse cx="11.846" cy="2.93" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="2.308" ry="2.093"/>
+            <ellipse cx="15.538" cy="12.558" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-6)" rx="7.231" ry="4.186"/>
+            <ellipse cx=".154" cy="12.698" fill="url(#linearGradient-8)" class="oval" mask="url(#mask-6)" rx="11.538" ry="6.558"/>
+          </g>
+          <path fill="#FFF" d="M16 0v12H0V0h16zm-1 1H1v10h14V1z" class="rectangle_2"/>
+        </g>
+        <g class="image_1_border" transform="translate(38)">
+          <rect width="15" height="12" fill="#FFF" class="rectangle"/>
+          <g class="oval___oval_mask" transform="translate(.288 .28)">
+            <mask id="mask-10" fill="#fff">
+              <use xlink:href="#path-9"/>
+            </mask>
+            <use fill="#79D1F2" class="mask" xlink:href="#path-9"/>
+            <ellipse cx="11.106" cy="2.93" fill="#F3EC60" class="oval" mask="url(#mask-10)" rx="2.163" ry="2.093"/>
+            <ellipse cx="14.567" cy="12.558" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-10)" rx="6.779" ry="4.186"/>
+            <ellipse cx=".144" cy="12.698" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-10)" rx="10.817" ry="6.558"/>
+          </g>
+          <path fill="#FFF" d="M15 0v12H0V0h15zm-1 1H1v10h13V1z" class="rectangle_2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-11"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-14)" xlink:href="#path-13"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-13"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-16)" xlink:href="#path-15"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-15"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-18)" xlink:href="#path-17"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-17"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_timeline.svg b/addons/website/static/src/img/snippets_thumbs/s_timeline.svg
new file mode 100644
index 00000000..d66bf71e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_timeline.svg
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="10" height="2" x="4" y="25"/>
+    <filter id="filter-2" width="110%" height="200%" x="-5%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-3" width="13" height="2" x="1" y="1"/>
+    <filter id="filter-4" width="107.7%" height="200%" x="-3.8%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-5" d="M14 33v1H3v-1h11zm0-3v1H0v-1h14z"/>
+    <filter id="filter-6" width="107.1%" height="150%" x="-3.6%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-7" d="M37 21v1h-7v-1h7zm7-3v1H30v-1h14z"/>
+    <filter id="filter-8" width="107.1%" height="150%" x="-3.6%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-9" width="16" height="2" x="30" y="13"/>
+    <filter id="filter-10" width="106.2%" height="200%" x="-3.1%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-11" width="1" height="34" x="22" y="0"/>
+    <filter id="filter-12" width="200%" height="105.9%" x="-50%" y="-1.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <path id="path-13" d="M14 9v1H4V9h10zm0-3v1H4V6h10z"/>
+    <filter id="filter-14" width="110%" height="150%" x="-5%" y="-12.5%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-15" x1="0%" x2="100%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_timeline">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(18 13)">
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-5"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-9"/>
+        </g>
+        <g class="rectangle">
+          <use fill="#000" filter="url(#filter-12)" xlink:href="#path-11"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-11"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-14)" xlink:href="#path-13"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-13"/>
+        </g>
+        <circle cx="22.5" cy="2.5" r="2.5" fill="url(#linearGradient-15)" class="oval"/>
+        <circle cx="22.5" cy="14.5" r="2.5" fill="url(#linearGradient-15)" class="oval"/>
+        <circle cx="22.5" cy="26.5" r="2.5" fill="url(#linearGradient-15)" class="oval"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_title.svg b/addons/website/static/src/img/snippets_thumbs/s_title.svg
new file mode 100644
index 00000000..ca12e48d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_title.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="82" height="60" viewBox="0 0 82 60">
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_title">
+      <rect width="82" height="60" class="bg"/>
+      <path fill="#E4E4E4" fill-rule="nonzero" d="M19.076 33.364v-.381c-.415-.015-.71-.066-.887-.154-.302-.156-.454-.456-.454-.9V28.47h3.575v3.457c0 .43-.14.723-.418.88-.18.102-.486.16-.915.175v.38h5.105v-.38c-.4-.015-.686-.068-.857-.161-.298-.156-.447-.454-.447-.894V24.67c0-.43.134-.72.403-.872.16-.092.461-.156.9-.19v-.38h-5.104v.38c.454.03.764.09.93.183.268.151.403.444.403.879v3.105h-3.575V24.67c0-.435.142-.73.425-.886.171-.093.476-.152.916-.176v-.38H14v.38c.444.044.742.11.894.198.249.151.373.44.373.864v7.258c0 .435-.14.73-.417.886-.166.093-.45.15-.85.169v.38h5.076zm9.697.212c.513 0 .967-.095 1.362-.285.61-.298 1.148-.828 1.612-1.59l-.345-.212c-.283.312-.52.534-.71.666-.313.22-.645.33-.996.33-.738 0-1.253-.413-1.546-1.238-.16-.44-.258-.96-.293-1.56h3.824c0-.137-.017-.334-.052-.593-.068-.552-.19-1.001-.366-1.348a2.605 2.605 0 0 0-1.003-1.077 2.675 2.675 0 0 0-1.392-.388c-.864 0-1.603.319-2.215.956-.613.637-.92 1.532-.92 2.684 0 1.275.323 2.203.967 2.784.645.58 1.336.871 2.073.871zm1.062-4.446h-2.014c.02-.776.101-1.367.245-1.772s.412-.608.802-.608c.381 0 .635.176.762.527.127.352.195.97.205 1.853zm7.859 4.446c.249 0 .486-.044.71-.132.357-.136.681-.376.974-.717l-.227-.315a.981.981 0 0 1-.216.18.363.363 0 0 1-.157.032c-.069 0-.13-.038-.187-.114a.448.448 0 0 1-.084-.274v-3.633c0-.889-.283-1.499-.85-1.831-.571-.327-1.282-.49-2.131-.49-.791 0-1.458.168-2 .505-.542.337-.813.793-.813 1.37 0 .322.102.568.304.739.203.17.448.256.736.256.25 0 .468-.077.656-.23.188-.154.282-.373.282-.656a.824.824 0 0 0-.062-.318 1.08 1.08 0 0 0-.165-.275l-.088-.103a.588.588 0 0 1-.088-.124.326.326 0 0 1-.03-.147c0-.151.087-.277.26-.377.174-.1.395-.15.664-.15.478 0 .811.106 1 .319.187.212.281.54.281.985v1.091c-1.386.4-2.404.798-3.054 1.194-.65.395-.974.93-.974 1.604 0 .552.178.958.535 1.22.356.26.74.391 1.15.391.307 0 .62-.054.937-.161.523-.17.991-.464 1.406-.879.054.288.14.506.257.652.205.259.53.388.974.388zm-2.351-1.07c-.186 0-.353-.083-.502-.252-.149-.168-.223-.416-.223-.743 0-.552.256-1.006.769-1.363.302-.21.654-.363 1.054-.461v2.19c-.16.186-.3.322-.417.41-.21.147-.437.22-.681.22zm9.294 1.07c.615-.17 1.045-.277 1.29-.318.243-.042.785-.104 1.625-.187v-.344c-.342-.03-.571-.104-.688-.224-.117-.12-.176-.336-.176-.648v-8.628h-3.23v.366c.459.02.762.075.908.165.147.09.22.324.22.7v2.746c-.288-.303-.527-.513-.718-.63a1.925 1.925 0 0 0-1.055-.293c-.79 0-1.468.343-2.032 1.03-.564.685-.846 1.622-.846 2.808 0 1.065.271 1.907.813 2.527.542.62 1.18.93 1.912.93.43 0 .83-.112 1.2-.337.235-.141.494-.359.777-.652v.99zm-1.304-.85c-.512 0-.859-.353-1.04-1.061-.097-.391-.146-.972-.146-1.744 0-.722.051-1.281.154-1.677.19-.737.552-1.106 1.084-1.106.361 0 .652.12.871.36.22.238.33.419.33.541v3.648c0 .117-.128.32-.385.607-.256.289-.545.433-.868.433zm6.629-7.397c.317 0 .59-.113.817-.34.227-.228.34-.502.34-.824a1.12 1.12 0 0 0-.34-.824 1.116 1.116 0 0 0-.817-.341c-.322 0-.597.114-.824.34-.227.228-.34.502-.34.825 0 .322.113.596.34.824.227.227.502.34.824.34zm1.75 8.035v-.36c-.268-.053-.451-.126-.549-.219-.098-.093-.146-.303-.146-.63v-5.698h-2.879v.366c.303.054.506.136.608.246.103.11.154.316.154.619v4.409c0 .341-.073.578-.22.71-.097.088-.278.154-.542.198v.359h3.574zm4.205 0v-.36c-.27-.053-.452-.126-.55-.219-.097-.093-.146-.303-.146-.63v-4.013c.117-.19.284-.38.501-.568.218-.188.456-.282.715-.282.346 0 .578.154.695.461.069.171.103.428.103.77v3.632c0 .327-.049.537-.147.63-.097.093-.28.166-.549.22v.359h3.523v-.36c-.269-.033-.46-.1-.575-.197-.115-.098-.172-.315-.172-.652V28.53c0-.835-.177-1.419-.531-1.75-.354-.333-.853-.499-1.498-.499-.45 0-.858.119-1.227.355a3.073 3.073 0 0 0-.912.898v-1.077h-2.841v.366c.322.04.536.117.64.235.106.117.158.327.158.63v4.409c0 .341-.065.57-.194.684-.13.115-.33.19-.604.224v.359h3.61zm7.91 3.113c.859 0 1.572-.096 2.138-.286 1.075-.366 1.612-1.038 1.612-2.014 0-.757-.36-1.282-1.077-1.575-.376-.151-.84-.232-1.392-.242l-.974-.014c-.132 0-.317-.004-.556-.011a5.941 5.941 0 0 1-.47-.026.579.579 0 0 1-.343-.154.475.475 0 0 1-.125-.351c0-.19.083-.354.25-.491a1.01 1.01 0 0 1 .46-.234c.093 0 .163.002.21.007.046.005.145.007.296.007.698 0 1.282-.093 1.75-.278.894-.347 1.34-.989 1.34-1.926 0-.298-.052-.574-.157-.828a1.975 1.975 0 0 0-.45-.666h1.216v-.799h-1.978a3.807 3.807 0 0 0-.681-.212 4.256 4.256 0 0 0-.967-.103c-.932 0-1.672.222-2.219.667-.547.444-.82 1.008-.82 1.692 0 .542.156 1.003.468 1.384.313.38.723.674 1.23.879v.102c-.35.118-.71.325-1.08.623-.368.298-.552.657-.552 1.077 0 .351.117.632.351.842.132.117.344.232.637.344v.103c-.44.068-.748.216-.926.443-.178.227-.268.448-.268.663 0 .551.42.942 1.26 1.171.508.137 1.114.206 1.817.206zm.102-5.838c-.415 0-.696-.22-.842-.659-.098-.278-.147-.706-.147-1.282 0-.63.066-1.11.198-1.439.132-.33.396-.494.791-.494.362 0 .617.153.766.461.149.308.223.798.223 1.472 0 .635-.07 1.117-.212 1.447-.142.33-.4.494-.777.494zm.066 5.347c-.625 0-1.102-.088-1.432-.264-.33-.176-.494-.417-.494-.725 0-.18.06-.351.183-.513.068-.088.18-.195.337-.322h2.46c.509 0 .859.065 1.052.194.193.13.29.324.29.582 0 .445-.34.75-1.019.916-.361.088-.82.132-1.377.132z" class="heading"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg b/addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg
new file mode 100644
index 00000000..6cf17fa1
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg
@@ -0,0 +1,74 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M0 1v27a1 1 0 0 0 1 1h40V1a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1zm1 27.188V1h39v13.797l1 1.217V29H23l-1.5-.812H1z"/>
+    <filter id="filter-2" width="102.4%" height="106.9%" x="-1.2%" y="-1.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M17 11v1h-4v-1h4zm6-3v1H13V8h10zm7-3v1H13V5h17z"/>
+    <filter id="filter-4" width="105.9%" height="128.6%" x="-2.9%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <rect id="path-5" width="16" height="2" x="13" y="0"/>
+    <filter id="filter-6" width="106.2%" height="200%" x="-3.1%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-7" width="10.353" height="13.349" x="0" y="0"/>
+    <linearGradient id="linearGradient-9" x1="72.875%" x2="40.332%" y1="46.142%" y2="32.596%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-10" x1="88.517%" x2="50%" y1="38.363%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-11" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-12" d="M44 20.781a7.843 7.843 0 0 1-1.85 1.957 11.013 11.013 0 0 1-.423 3.533 11.124 11.124 0 0 1-1.319 2.913c-.59.93-1.293 1.752-2.107 2.466-.815.715-1.797 1.286-2.947 1.711-1.15.426-2.38.639-3.689.639-2.063 0-3.952-.566-5.665-1.7.266.032.563.048.89.048 1.714 0 3.24-.54 4.58-1.618a3.539 3.539 0 0 1-2.146-.755 3.701 3.701 0 0 1-1.302-1.87c.25.04.483.06.696.06.328 0 .651-.044.971-.13a3.614 3.614 0 0 1-2.119-1.306c-.56-.692-.839-1.495-.839-2.409v-.047a3.59 3.59 0 0 0 1.667.48 3.747 3.747 0 0 1-1.199-1.347 3.764 3.764 0 0 1-.445-1.804c0-.688.167-1.325.502-1.91a10.515 10.515 0 0 0 3.364 2.794c1.321.7 2.735 1.088 4.243 1.166a4.31 4.31 0 0 1-.091-.867c0-1.047.36-1.94 1.079-2.678.72-.738 1.59-1.107 2.61-1.107 1.066 0 1.964.398 2.695 1.195a7.123 7.123 0 0 0 2.341-.914 3.66 3.66 0 0 1-1.621 2.086A7.204 7.204 0 0 0 44 20.781z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_twitter_scroll">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(19 13)">
+        <g class="shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="group_2" transform="translate(5 6)">
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+            <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+          </g>
+          <g class="rectangle">
+            <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
+          </g>
+          <g class="image_1_border">
+            <rect width="11" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.324 .326)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-7"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
+              <ellipse cx="6.632" cy="3.419" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.426" ry="2.442"/>
+              <ellipse cx="10.515" cy="14.651" fill="url(#linearGradient-9)" class="oval" mask="url(#mask-8)" rx="7.603" ry="4.884"/>
+              <ellipse cx="-5.662" cy="14.814" fill="url(#linearGradient-10)" class="oval" mask="url(#mask-8)" rx="12.132" ry="7.651"/>
+            </g>
+            <path fill="#FFF" d="M11 0v14H0V0h11zm-1 1H1v12h9V1z" class="rectangle_2"/>
+          </g>
+        </g>
+        <mask id="mask-13" fill="#fff">
+          <use xlink:href="#path-12"/>
+        </mask>
+        <use fill="url(#linearGradient-11)" class="twitter" xlink:href="#path-12"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_website_form.svg b/addons/website/static/src/img/snippets_thumbs/s_website_form.svg
new file mode 100644
index 00000000..ab3bda26
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_website_form.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M19 21v4h-5v-4h5zm7 0v4h-5v-4h5zm-8 1h-3v2h3v-2zm7 0h-3v2h3v-2zm23-8v4H14v-4h34zm-1 1H15v2h32v-2zm1-8v4H14V7h34zm-1 1H15v2h32V8zm1-8v4H14V0h34zm-1 1H15v2h32V1z"/>
+    <filter id="filter-2" width="102.9%" height="108%" x="-1.5%" y="-2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-3" d="M10 21v2H2v-2h8zm0-7v2H2v-2h8zm0-7v2H3V7h7zm0-7v2H0V0h10z"/>
+    <filter id="filter-4" width="110%" height="108.7%" x="-5%" y="-2.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-5" x1="0%" x2="100%" y1="45.675%" y2="54.325%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_website_form">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(17 13)">
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-3"/>
+        </g>
+        <rect width="17" height="5" x="14" y="30" fill="url(#linearGradient-5)" class="rectangle"/>
+      </g>
+    </g>
+  </g>
+</svg>
-- 
cgit v1.2.3