summaryrefslogtreecommitdiff
path: root/addons/website/static/src/img
diff options
context:
space:
mode:
authorstephanchrst <stephanchrst@gmail.com>2022-05-10 21:51:50 +0700
committerstephanchrst <stephanchrst@gmail.com>2022-05-10 21:51:50 +0700
commit3751379f1e9a4c215fb6eb898b4ccc67659b9ace (patch)
treea44932296ef4a9b71d5f010906253d8c53727726 /addons/website/static/src/img
parent0a15094050bfde69a06d6eff798e9a8ddf2b8c21 (diff)
initial commit 2
Diffstat (limited to 'addons/website/static/src/img')
-rw-r--r--addons/website/static/src/img/SEO-keywords.gifbin0 -> 87903 bytes
-rw-r--r--addons/website/static/src/img/apps_thumbs/website_slide.svg1
-rw-r--r--addons/website/static/src/img/backgrounds/building-profile.jpgbin0 -> 119398 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/city.jpgbin0 -> 141295 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/cubes.jpgbin0 -> 139745 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/la.jpgbin0 -> 234135 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/panama-sky.jpgbin0 -> 163607 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/peak.jpgbin0 -> 133894 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/people.jpgbin0 -> 146971 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/sails.jpgbin0 -> 99204 bytes
-rw-r--r--addons/website/static/src/img/backgrounds/type.jpgbin0 -> 122855 bytes
-rw-r--r--addons/website/static/src/img/image-search.gifbin0 -> 43886 bytes
-rwxr-xr-xaddons/website/static/src/img/library/bridge.jpgbin0 -> 62356 bytes
-rw-r--r--addons/website/static/src/img/library/business_conference.jpgbin0 -> 173527 bytes
-rwxr-xr-xaddons/website/static/src/img/library/clock.jpgbin0 -> 71200 bytes
-rwxr-xr-xaddons/website/static/src/img/library/compass.jpgbin0 -> 58106 bytes
-rw-r--r--addons/website/static/src/img/library/deliver.jpgbin0 -> 139214 bytes
-rw-r--r--addons/website/static/src/img/library/firework.jpgbin0 -> 142871 bytes
-rwxr-xr-xaddons/website/static/src/img/library/gift.jpgbin0 -> 138072 bytes
-rw-r--r--addons/website/static/src/img/library/ice_coffe.jpgbin0 -> 114933 bytes
-rw-r--r--addons/website/static/src/img/library/manufacturing.jpgbin0 -> 62860 bytes
-rw-r--r--addons/website/static/src/img/library/marketing.jpgbin0 -> 89326 bytes
-rwxr-xr-xaddons/website/static/src/img/library/mobile.jpgbin0 -> 70449 bytes
-rwxr-xr-xaddons/website/static/src/img/library/mobile_device.jpgbin0 -> 102131 bytes
-rw-r--r--addons/website/static/src/img/library/office.jpgbin0 -> 100994 bytes
-rwxr-xr-xaddons/website/static/src/img/library/rocket.jpgbin0 -> 152304 bytes
-rwxr-xr-xaddons/website/static/src/img/library/sell.jpgbin0 -> 120927 bytes
-rw-r--r--addons/website/static/src/img/library/shop.jpgbin0 -> 116971 bytes
-rwxr-xr-xaddons/website/static/src/img/library/sign.jpgbin0 -> 138391 bytes
-rwxr-xr-xaddons/website/static/src/img/library/sweet.jpgbin0 -> 52801 bytes
-rwxr-xr-xaddons/website/static/src/img/library/wine.jpgbin0 -> 78058 bytes
-rw-r--r--addons/website/static/src/img/phone.pngbin0 -> 20595 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpgbin0 -> 19105 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_banner.jpgbin0 -> 219456 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_blockquote_cover.jpgbin0 -> 52618 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_carousel_1.jpgbin0 -> 135349 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_carousel_2.jpgbin0 -> 155802 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_carousel_3.jpgbin0 -> 116453 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_cover.jpgbin0 -> 132843 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_image_text.jpgbin0 -> 65170 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_masonry_block_1.jpgbin0 -> 100994 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_media_list_1.jpgbin0 -> 89828 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_media_list_2.jpgbin0 -> 135106 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_media_list_3.jpgbin0 -> 122321 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_parallax.jpgbin0 -> 233982 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_picture.jpgbin0 -> 89469 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_popup.jpgbin0 -> 115943 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_product_catalog.jpgbin0 -> 129600 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_product_list_1.jpgbin0 -> 3533 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpgbin0 -> 115303 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpgbin0 -> 206031 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_references_1.pngbin0 -> 3586 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_references_2.pngbin0 -> 6204 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_references_3.pngbin0 -> 2574 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_references_4.pngbin0 -> 6314 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_references_5.pngbin0 -> 3278 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_references_6.pngbin0 -> 3785 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_team_member_1.pngbin0 -> 27167 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_team_member_2.pngbin0 -> 38588 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_team_member_3.pngbin0 -> 33107 bytes
-rw-r--r--addons/website/static/src/img/snippets_demo/s_team_member_4.pngbin0 -> 36359 bytes
-rwxr-xr-xaddons/website/static/src/img/snippets_demo/s_text_image.jpgbin0 -> 48688 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/align_bottom.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/align_bottom_right.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/align_middle.svg12
-rw-r--r--addons/website/static/src/img/snippets_options/align_middle_right.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/align_stretch.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/align_top.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/align_top_right.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/content_width_full.svg9
-rw-r--r--addons/website/static/src/img/snippets_options/content_width_normal.svg12
-rw-r--r--addons/website/static/src/img/snippets_options/content_width_small.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg32
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_centered.svg34
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_contact.svg61
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_default.svg44
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_descriptive.svg34
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_headline.svg54
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_links.svg44
-rw-r--r--addons/website/static/src/img/snippets_options/footer_template_minimalist.svg44
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_disappears.gifbin0 -> 339547 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_disappears.pngbin0 -> 6306 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_fade_out.gifbin0 -> 333032 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_fade_out.pngbin0 -> 6114 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_fixed.gifbin0 -> 334481 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_fixed.pngbin0 -> 6177 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_scroll.gifbin0 -> 334827 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_scroll.pngbin0 -> 6295 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_standard.gifbin0 -> 333816 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_effect_standard.pngbin0 -> 6311 bytes
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_boxed.svg68
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_centered_logo.svg38
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_contact.svg74
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_default.svg28
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_hamburger.svg26
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg43
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_image.svg53
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_magazine.svg55
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_minimalist.svg43
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_sidebar.svg36
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_slogan.svg42
-rw-r--r--addons/website/static/src/img/snippets_options/header_template_vertical.svg35
-rw-r--r--addons/website/static/src/img/snippets_options/image_left.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/image_right.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/media_layout_1_2.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/media_layout_1_3.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/media_layout_1_4.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/pos_bottom.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/pos_left.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/pos_right.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/pos_top.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/shadow_in.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/shadow_out.svg11
-rw-r--r--addons/website/static/src/img/snippets_options/size_large.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/size_medium.svg10
-rw-r--r--addons/website/static/src/img/snippets_options/size_small.svg10
-rw-r--r--addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg62
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_alert.svg36
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_badge.svg36
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_banner.svg41
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_blockquote.svg37
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_call_to_action.svg53
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_card.svg32
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_carousel.svg63
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_channel.svg36
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_chart.svg46
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg66
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_company_team.svg36
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_comparisons.svg73
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_countdown.svg18
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_cover.svg40
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg76
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg85
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_facebook_page.svg41
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_faq_collapse.svg63
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_features.svg36
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_features_grid.svg65
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_google_map.svg30
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_google_map_marker.pngbin0 -> 977 bytes
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_hr.svg22
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_image_gallery.svg32
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_image_text.svg53
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_images_wall.svg91
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_masonry_block.svg126
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_media_list.svg90
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg73
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg71
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg40
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_numbers.svg53
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_parallax.svg52
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_picture.svg53
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_popup.svg39
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_process_steps.svg28
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_product_catalog.svg61
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_product_list.svg88
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_progress_bar.svg27
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg47
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_rating.svg47
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_references.svg111
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_share.svg26
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_showcase.svg86
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_table_of_content.svg71
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_tabs.svg93
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_text_block.svg19
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_text_highlight.svg36
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_text_image.svg53
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_three_columns.svg109
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_timeline.svg88
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_title.svg8
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg74
-rw-r--r--addons/website/static/src/img/snippets_thumbs/s_website_form.svg36
-rw-r--r--addons/website/static/src/img/theme_loader.gifbin0 -> 985597 bytes
-rw-r--r--addons/website/static/src/img/website-visitors.gifbin0 -> 48709 bytes
-rw-r--r--addons/website/static/src/img/website_dashboard_visit_demo.pngbin0 -> 43181 bytes
-rw-r--r--addons/website/static/src/img/website_logo.pngbin0 -> 11384 bytes
178 files changed, 4148 insertions, 0 deletions
diff --git a/addons/website/static/src/img/SEO-keywords.gif b/addons/website/static/src/img/SEO-keywords.gif
new file mode 100644
index 00000000..86b26d12
--- /dev/null
+++ b/addons/website/static/src/img/SEO-keywords.gif
Binary files differ
diff --git a/addons/website/static/src/img/apps_thumbs/website_slide.svg b/addons/website/static/src/img/apps_thumbs/website_slide.svg
new file mode 100644
index 00000000..98a4ea0d
--- /dev/null
+++ b/addons/website/static/src/img/apps_thumbs/website_slide.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70"><defs><path id="a" d="M4 0h61c4 0 5 1 5 5v60c0 4-1 5-5 5H4c-3 0-4-1-4-5V5c0-4 1-5 4-5z"/><linearGradient id="c" x1="100%" x2="0%" y1="0%" y2="100%"><stop offset="0%" stop-color="#B06161"/><stop offset="45.785%" stop-color="#984E4E"/><stop offset="100%" stop-color="#7C3838"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path fill="#FFF" d="M33.875 44H15a2 2 0 0 1-2-2V22a2 2 0 0 1 2-2h26a2 2 0 0 1 2 2v4.865a7.499 7.499 0 0 0-4 6.635c0 1.946.74 3.718 1.956 5.051a4.099 4.099 0 0 0-.387-.021c-2.049 0-1.256-.22-3.073-2.05-3.187 1.066-6.105 4.876-6.105 5.55.625.317 1.453.973 2.484 1.97zM43 43.132c2.348-1.51 8.09-1.51 10.439 0 1.565 1.007 3.392 3.775 5.48 8.304-1.549 1.77-2.593 2.525-3.132 2.265-1.044-1.51-1.826-2.768-2.348-3.775v5.284c-3.653 1.007-7.306 1.007-10.96 0v-5.284C38.16 45.976 35.334 43.666 34 43c0-.573 0-1 1-2 .667-.667 1.667-1.333 3-2 1.768 3.761 3.434 5.139 5 4.132zm4.74.868l-1.13 4.578 1.695 2.29L50 48.578 48.87 44h-1.13zM22 51l6-7 6 7h-2l-4-5-4 5h-2zm6-31v-2 2zm19.5 21a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z"/></g></g></svg> \ No newline at end of file
diff --git a/addons/website/static/src/img/backgrounds/building-profile.jpg b/addons/website/static/src/img/backgrounds/building-profile.jpg
new file mode 100644
index 00000000..7ab869f0
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/building-profile.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/city.jpg b/addons/website/static/src/img/backgrounds/city.jpg
new file mode 100644
index 00000000..31b9a8ce
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/city.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/cubes.jpg b/addons/website/static/src/img/backgrounds/cubes.jpg
new file mode 100644
index 00000000..b97efc7b
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/cubes.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/la.jpg b/addons/website/static/src/img/backgrounds/la.jpg
new file mode 100644
index 00000000..38bba3bb
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/la.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/panama-sky.jpg b/addons/website/static/src/img/backgrounds/panama-sky.jpg
new file mode 100644
index 00000000..72431366
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/panama-sky.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/peak.jpg b/addons/website/static/src/img/backgrounds/peak.jpg
new file mode 100644
index 00000000..825d313f
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/peak.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/people.jpg b/addons/website/static/src/img/backgrounds/people.jpg
new file mode 100644
index 00000000..bd11d9b1
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/people.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/sails.jpg b/addons/website/static/src/img/backgrounds/sails.jpg
new file mode 100644
index 00000000..73c80bd8
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/sails.jpg
Binary files differ
diff --git a/addons/website/static/src/img/backgrounds/type.jpg b/addons/website/static/src/img/backgrounds/type.jpg
new file mode 100644
index 00000000..4e86d075
--- /dev/null
+++ b/addons/website/static/src/img/backgrounds/type.jpg
Binary files differ
diff --git a/addons/website/static/src/img/image-search.gif b/addons/website/static/src/img/image-search.gif
new file mode 100644
index 00000000..530264a6
--- /dev/null
+++ b/addons/website/static/src/img/image-search.gif
Binary files differ
diff --git a/addons/website/static/src/img/library/bridge.jpg b/addons/website/static/src/img/library/bridge.jpg
new file mode 100755
index 00000000..707280e4
--- /dev/null
+++ b/addons/website/static/src/img/library/bridge.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/business_conference.jpg b/addons/website/static/src/img/library/business_conference.jpg
new file mode 100644
index 00000000..41aa570a
--- /dev/null
+++ b/addons/website/static/src/img/library/business_conference.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/clock.jpg b/addons/website/static/src/img/library/clock.jpg
new file mode 100755
index 00000000..50aa8bbb
--- /dev/null
+++ b/addons/website/static/src/img/library/clock.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/compass.jpg b/addons/website/static/src/img/library/compass.jpg
new file mode 100755
index 00000000..9ccab364
--- /dev/null
+++ b/addons/website/static/src/img/library/compass.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/deliver.jpg b/addons/website/static/src/img/library/deliver.jpg
new file mode 100644
index 00000000..d016b6ba
--- /dev/null
+++ b/addons/website/static/src/img/library/deliver.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/firework.jpg b/addons/website/static/src/img/library/firework.jpg
new file mode 100644
index 00000000..b9c178fe
--- /dev/null
+++ b/addons/website/static/src/img/library/firework.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/gift.jpg b/addons/website/static/src/img/library/gift.jpg
new file mode 100755
index 00000000..5150b40f
--- /dev/null
+++ b/addons/website/static/src/img/library/gift.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/ice_coffe.jpg b/addons/website/static/src/img/library/ice_coffe.jpg
new file mode 100644
index 00000000..6659c3e6
--- /dev/null
+++ b/addons/website/static/src/img/library/ice_coffe.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/manufacturing.jpg b/addons/website/static/src/img/library/manufacturing.jpg
new file mode 100644
index 00000000..a863799e
--- /dev/null
+++ b/addons/website/static/src/img/library/manufacturing.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/marketing.jpg b/addons/website/static/src/img/library/marketing.jpg
new file mode 100644
index 00000000..f94c9c68
--- /dev/null
+++ b/addons/website/static/src/img/library/marketing.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/mobile.jpg b/addons/website/static/src/img/library/mobile.jpg
new file mode 100755
index 00000000..b048d414
--- /dev/null
+++ b/addons/website/static/src/img/library/mobile.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/mobile_device.jpg b/addons/website/static/src/img/library/mobile_device.jpg
new file mode 100755
index 00000000..f5691750
--- /dev/null
+++ b/addons/website/static/src/img/library/mobile_device.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/office.jpg b/addons/website/static/src/img/library/office.jpg
new file mode 100644
index 00000000..b46aba6e
--- /dev/null
+++ b/addons/website/static/src/img/library/office.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/rocket.jpg b/addons/website/static/src/img/library/rocket.jpg
new file mode 100755
index 00000000..973012aa
--- /dev/null
+++ b/addons/website/static/src/img/library/rocket.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/sell.jpg b/addons/website/static/src/img/library/sell.jpg
new file mode 100755
index 00000000..6b66910d
--- /dev/null
+++ b/addons/website/static/src/img/library/sell.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/shop.jpg b/addons/website/static/src/img/library/shop.jpg
new file mode 100644
index 00000000..40a59923
--- /dev/null
+++ b/addons/website/static/src/img/library/shop.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/sign.jpg b/addons/website/static/src/img/library/sign.jpg
new file mode 100755
index 00000000..9b8f84c2
--- /dev/null
+++ b/addons/website/static/src/img/library/sign.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/sweet.jpg b/addons/website/static/src/img/library/sweet.jpg
new file mode 100755
index 00000000..1a5f9539
--- /dev/null
+++ b/addons/website/static/src/img/library/sweet.jpg
Binary files differ
diff --git a/addons/website/static/src/img/library/wine.jpg b/addons/website/static/src/img/library/wine.jpg
new file mode 100755
index 00000000..a1a7c553
--- /dev/null
+++ b/addons/website/static/src/img/library/wine.jpg
Binary files differ
diff --git a/addons/website/static/src/img/phone.png b/addons/website/static/src/img/phone.png
new file mode 100644
index 00000000..0570c4d8
--- /dev/null
+++ b/addons/website/static/src/img/phone.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpg b/addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpg
new file mode 100644
index 00000000..06a5d90d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_banner.jpg b/addons/website/static/src/img/snippets_demo/s_banner.jpg
new file mode 100644
index 00000000..e71228e9
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_banner.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_blockquote_cover.jpg b/addons/website/static/src/img/snippets_demo/s_blockquote_cover.jpg
new file mode 100644
index 00000000..c54b0378
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_blockquote_cover.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_carousel_1.jpg b/addons/website/static/src/img/snippets_demo/s_carousel_1.jpg
new file mode 100755
index 00000000..18675e7f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_carousel_1.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_carousel_2.jpg b/addons/website/static/src/img/snippets_demo/s_carousel_2.jpg
new file mode 100755
index 00000000..b3426890
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_carousel_2.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_carousel_3.jpg b/addons/website/static/src/img/snippets_demo/s_carousel_3.jpg
new file mode 100755
index 00000000..82c7b99c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_carousel_3.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_cover.jpg b/addons/website/static/src/img/snippets_demo/s_cover.jpg
new file mode 100755
index 00000000..6b6934e4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_cover.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_image_text.jpg b/addons/website/static/src/img/snippets_demo/s_image_text.jpg
new file mode 100755
index 00000000..bca5e194
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_image_text.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_masonry_block_1.jpg b/addons/website/static/src/img/snippets_demo/s_masonry_block_1.jpg
new file mode 100644
index 00000000..b46aba6e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_masonry_block_1.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_media_list_1.jpg b/addons/website/static/src/img/snippets_demo/s_media_list_1.jpg
new file mode 100755
index 00000000..afd6981a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_media_list_1.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_media_list_2.jpg b/addons/website/static/src/img/snippets_demo/s_media_list_2.jpg
new file mode 100755
index 00000000..721b7d17
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_media_list_2.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_media_list_3.jpg b/addons/website/static/src/img/snippets_demo/s_media_list_3.jpg
new file mode 100644
index 00000000..8c9d2b5c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_media_list_3.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_parallax.jpg b/addons/website/static/src/img/snippets_demo/s_parallax.jpg
new file mode 100755
index 00000000..4e8419ae
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_parallax.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_picture.jpg b/addons/website/static/src/img/snippets_demo/s_picture.jpg
new file mode 100755
index 00000000..eb58ef41
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_picture.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_popup.jpg b/addons/website/static/src/img/snippets_demo/s_popup.jpg
new file mode 100644
index 00000000..3043903e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_popup.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_product_catalog.jpg b/addons/website/static/src/img/snippets_demo/s_product_catalog.jpg
new file mode 100644
index 00000000..3f668b58
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_product_catalog.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_product_list_1.jpg b/addons/website/static/src/img/snippets_demo/s_product_list_1.jpg
new file mode 100644
index 00000000..7dd29701
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_product_list_1.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg
new file mode 100755
index 00000000..17d82a52
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg
new file mode 100755
index 00000000..2b7dc05d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_references_1.png b/addons/website/static/src/img/snippets_demo/s_references_1.png
new file mode 100755
index 00000000..cfced4e5
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_1.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_references_2.png b/addons/website/static/src/img/snippets_demo/s_references_2.png
new file mode 100755
index 00000000..75f56c0c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_2.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_references_3.png b/addons/website/static/src/img/snippets_demo/s_references_3.png
new file mode 100755
index 00000000..ee28c154
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_3.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_references_4.png b/addons/website/static/src/img/snippets_demo/s_references_4.png
new file mode 100755
index 00000000..a9d30a83
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_4.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_references_5.png b/addons/website/static/src/img/snippets_demo/s_references_5.png
new file mode 100755
index 00000000..e4801a37
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_5.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_references_6.png b/addons/website/static/src/img/snippets_demo/s_references_6.png
new file mode 100644
index 00000000..896d3d7e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_6.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_team_member_1.png b/addons/website/static/src/img/snippets_demo/s_team_member_1.png
new file mode 100644
index 00000000..a7a887c5
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_team_member_1.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_team_member_2.png b/addons/website/static/src/img/snippets_demo/s_team_member_2.png
new file mode 100644
index 00000000..52316d52
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_team_member_2.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_team_member_3.png b/addons/website/static/src/img/snippets_demo/s_team_member_3.png
new file mode 100644
index 00000000..45bc32e6
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_team_member_3.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_team_member_4.png b/addons/website/static/src/img/snippets_demo/s_team_member_4.png
new file mode 100644
index 00000000..7b1dcb48
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_team_member_4.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_demo/s_text_image.jpg b/addons/website/static/src/img/snippets_demo/s_text_image.jpg
new file mode 100755
index 00000000..09721c73
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_text_image.jpg
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/align_bottom.svg b/addons/website/static/src/img/snippets_options/align_bottom.svg
new file mode 100644
index 00000000..d54b039c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_bottom.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy" transform="translate(-202 -5)">
+ <g class="align_bottom" transform="translate(202 5)">
+ <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
+ <polygon fill="#B8B8B8" points="0 0 9 0 9 1 0 1" class="o_subdle"/>
+ <rect width="9" height="6" y="6" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_bottom_right.svg b/addons/website/static/src/img/snippets_options/align_bottom_right.svg
new file mode 100644
index 00000000..9cea3be7
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_bottom_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_4" transform="translate(-203 -5)">
+ <g class="align_bottom_right" transform="translate(203 5)">
+ <rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="9" height="6" x="11" y="6" fill="#FFF" class="o_graphic"/>
+ <polygon fill="#B8B8B8" points="11 0 20 0 20 1 11 1" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_middle.svg b/addons/website/static/src/img/snippets_options/align_middle.svg
new file mode 100644
index 00000000..a2aaa6c3
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_middle.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy" transform="translate(-172 -5)">
+ <g class="align_middle" transform="translate(172 5)">
+ <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
+ <polygon fill="#B8B8B8" points="0 0 9 0 9 1 0 1" class="o_subdle"/>
+ <rect width="9" height="6" y="3" fill="#FFF" class="o_graphic"/>
+ <polygon fill="#B8B8B8" points="0 11 9 11 9 12 0 12" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_middle_right.svg b/addons/website/static/src/img/snippets_options/align_middle_right.svg
new file mode 100644
index 00000000..9ee12c3b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_middle_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_4" transform="translate(-173 -5)">
+ <g class="align_middle_right" transform="translate(173 5)">
+ <rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
+ <path fill="#B8B8B8" d="M20 11v1h-9v-1h9zM11 0h9v1h-9V0z" class="o_subdle"/>
+ <rect width="9" height="6" x="11" y="3" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_stretch.svg b/addons/website/static/src/img/snippets_options/align_stretch.svg
new file mode 100644
index 00000000..026e0486
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_stretch.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy" transform="translate(-234 -5)">
+ <g class="align_stretch" transform="translate(234 5)">
+ <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="8" height="12" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_top.svg b/addons/website/static/src/img/snippets_options/align_top.svg
new file mode 100644
index 00000000..5e5be9a1
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_top.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy" transform="translate(-139 -5)">
+ <g class="align_top" transform="translate(139 5)">
+ <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
+ <polygon fill="#B8B8B8" points="0 11 9 11 9 12 0 12" class="o_subdle"/>
+ <rect width="9" height="6" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_top_right.svg b/addons/website/static/src/img/snippets_options/align_top_right.svg
new file mode 100644
index 00000000..ed84020e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_top_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_4" transform="translate(-139 -5)">
+ <g class="align_top_right" transform="translate(139 5)">
+ <rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="9" height="1" x="11" y="11" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="9" height="6" x="11" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_full.svg b/addons/website/static/src/img/snippets_options/content_width_full.svg
new file mode 100644
index 00000000..4620dce4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_full.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g fill="#FFF" class="3_buttons_copy_2" transform="translate(-228 -7)">
+ <g class="content_width_full" transform="translate(228 7)">
+ <path d="M23 0v8H0V0h23zm-5 1v2.5h-3v1h3V7l3-3-3-3zM5 1L2 4l3 3V4.5h3v-1H5V1z" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_normal.svg b/addons/website/static/src/img/snippets_options/content_width_normal.svg
new file mode 100644
index 00000000..2a6b08a8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_normal.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_2" transform="translate(-185 -7)">
+ <g class="content_width_normal" transform="translate(185 7)">
+ <rect width="23" height="8" class="spacer"/>
+ <rect width="13" height="8" x="5" fill="#FFF" class="o_graphic"/>
+ <polygon fill="#D8D8D8" points="2 0 2 8 3 8 3 0" class="o_subdle"/>
+ <polygon fill="#D8D8D8" points="20 0 20 8 21 8 21 0" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_small.svg b/addons/website/static/src/img/snippets_options/content_width_small.svg
new file mode 100644
index 00000000..f52d357b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_small.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g fill="#FFF" class="3_buttons_copy_2" transform="translate(-141 -7)">
+ <g class="content_width_small" transform="translate(141 7)">
+ <rect width="7" height="8" x="8" class="o_graphic"/>
+ <polygon fill-rule="nonzero" points="3 1 6 4 3 7 3 4.5 0 4.5 0 3.5 3 3.5" class="o_graphic"/>
+ <polygon fill-rule="nonzero" points="20 1 17 4 20 7 20 4.5 23 4.5 23 3.5 20 3.5" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg b/addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg
new file mode 100644
index 00000000..b7e41925
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_call_to_action">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 14)">
+ <g class="link">
+ <rect width="85" height="8" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 37)">
+ <g class="link">
+ <rect width="120" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(178 13)">
+ <rect width="36" height="13" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(195 37)">
+ <rect width="19" height="7" class="rectangle" rx="3.5"/>
+ </g>
+ <rect width="194" height="1" x="20" y="31" fill="#FFF" class="rectangle" opacity=".324"/>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_centered.svg b/addons/website/static/src/img/snippets_options/footer_template_centered.svg
new file mode 100644
index 00000000..c822787b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_centered.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_centered">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(71 25)">
+ <g class="link">
+ <rect width="101" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(104 34)">
+ <g class="logo_ver">
+ <path d="M6.868 11.47V9.605H3.16V3.891H.786v7.58h6.082zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964V7.148h-3.67v1.577h1.589v.714a4.133 4.133 0 0 1-.828.388 2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.343 3.343 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491z" class="logo"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(103 11)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(117 11)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(131 11)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_contact.svg b/addons/website/static/src/img/snippets_options/footer_template_contact.svg
new file mode 100644
index 00000000..66e9b4f1
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_contact.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_contact">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(67 15)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(67 22)">
+ <g class="link">
+ <rect width="15" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(119 22)">
+ <g class="link">
+ <rect width="18" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(119 15)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 15)">
+ <g class="link">
+ <rect width="28" height="13" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(172 41)">
+ <g class="link">
+ <rect width="13" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(145 41)">
+ <g class="link">
+ <rect width="21" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <rect width="194" height="1" x="20" y="32" fill="#FFF" class="rectangle" opacity=".324"/>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(191 41)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(190 15)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(205 15)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(20 35)">
+ <g class="logo_ver">
+ <path d="M6.868 11.47V9.605H3.16V3.891H.786v7.58h6.082zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964V7.148h-3.67v1.577h1.589v.714a4.133 4.133 0 0 1-.828.388 2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.343 3.343 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491z" class="logo"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_default.svg b/addons/website/static/src/img/snippets_options/footer_template_default.svg
new file mode 100644
index 00000000..c6a82ccf
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_default.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_default">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 17)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(66 17)">
+ <g class="link">
+ <rect width="101" height="28" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 25)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(191 17)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(191 25)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(191 36)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(205 36)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 33)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 41)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_descriptive.svg b/addons/website/static/src/img/snippets_options/footer_template_descriptive.svg
new file mode 100644
index 00000000..0109498f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_descriptive.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_descriptive">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 17)">
+ <g class="link">
+ <rect width="101" height="28" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(133 17)">
+ <g class="link">
+ <rect width="46" height="28" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(191 17)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(191 33)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(191 25)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_headline.svg b/addons/website/static/src/img/snippets_options/footer_template_headline.svg
new file mode 100644
index 00000000..84395481
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_headline.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_headline">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(99 16)">
+ <g class="link">
+ <rect width="67" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 16)">
+ <g class="link">
+ <rect width="50" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(99 27)">
+ <g class="link">
+ <rect width="34" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(99 38)">
+ <g class="link">
+ <rect width="34" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 27)">
+ <g class="link">
+ <rect width="34" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(20 38)">
+ <g class="link">
+ <rect width="34" height="6" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(177 36)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(191 36)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ <g fill="#FFF" class="link" transform="translate(205 36)">
+ <rect width="9" height="9" class="rectangle" rx="4.5"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_links.svg b/addons/website/static/src/img/snippets_options/footer_template_links.svg
new file mode 100644
index 00000000..de15305a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_links.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_links">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group_2" opacity=".804" transform="translate(20 17)">
+ <g class="group_copy_3" transform="translate(128)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+ </g>
+ <g class="group_copy_2" transform="translate(85)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+ </g>
+ <g class="group_copy" transform="translate(43)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+ </g>
+ <g class="group">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+ </g>
+ <g class="link" transform="translate(171)">
+ <rect width="23" height="22" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_minimalist.svg b/addons/website/static/src/img/snippets_options/footer_template_minimalist.svg
new file mode 100644
index 00000000..3ca27f4f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_minimalist.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-2" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="footer_template_minimalist">
+ <g class="rectangle">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+ </g>
+ <g fill="#FFF" class="group_2" transform="translate(19 23)">
+ <g class="group" opacity=".804" transform="translate(155 6)">
+ <g class="link">
+ <rect width="10" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g class="group" opacity=".804" transform="translate(109 6)">
+ <g class="link">
+ <rect width="10" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g class="group" opacity=".804" transform="translate(38 6)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g class="group" opacity=".804" transform="translate(65 6)">
+ <g class="link">
+ <rect width="13" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g class="group" opacity=".804" transform="translate(82 6)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <rect width="20" height="9" class="rectangle" rx="4.5" transform="translate(172 3)"/>
+ <g fill-rule="nonzero" class="group">
+ <g class="logo_ver">
+ <path d="M6.868 11.47V9.605H3.16V3.891H.786v7.58h6.082zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964V7.148h-3.67v1.577h1.589v.714a4.133 4.133 0 0 1-.828.388 2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.343 3.343 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491z" class="logo"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_effect_disappears.gif b/addons/website/static/src/img/snippets_options/header_effect_disappears.gif
new file mode 100644
index 00000000..75fe9ee4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_disappears.gif
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_disappears.png b/addons/website/static/src/img/snippets_options/header_effect_disappears.png
new file mode 100644
index 00000000..abf6f008
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_disappears.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_fade_out.gif b/addons/website/static/src/img/snippets_options/header_effect_fade_out.gif
new file mode 100644
index 00000000..1619ab31
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_fade_out.gif
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_fade_out.png b/addons/website/static/src/img/snippets_options/header_effect_fade_out.png
new file mode 100644
index 00000000..1485dccf
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_fade_out.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_fixed.gif b/addons/website/static/src/img/snippets_options/header_effect_fixed.gif
new file mode 100644
index 00000000..a564094e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_fixed.gif
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_fixed.png b/addons/website/static/src/img/snippets_options/header_effect_fixed.png
new file mode 100644
index 00000000..4e60b048
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_fixed.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_scroll.gif b/addons/website/static/src/img/snippets_options/header_effect_scroll.gif
new file mode 100644
index 00000000..9e6bdd60
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_scroll.gif
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_scroll.png b/addons/website/static/src/img/snippets_options/header_effect_scroll.png
new file mode 100644
index 00000000..73db49c1
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_scroll.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_standard.gif b/addons/website/static/src/img/snippets_options/header_effect_standard.gif
new file mode 100644
index 00000000..f34f1925
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_standard.gif
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_standard.png b/addons/website/static/src/img/snippets_options/header_effect_standard.png
new file mode 100644
index 00000000..878fa298
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_effect_standard.png
Binary files differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_boxed.svg b/addons/website/static/src/img/snippets_options/header_template_boxed.svg
new file mode 100644
index 00000000..b1675c3d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_boxed.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+ <stop stop-color="#00A09D" offset="0%"></stop>
+ <stop stop-color="#00E2FF" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="header_template_boxed" fill-rule="nonzero">
+ <g id="Group">
+ <g id="path-23-link" fill="#000000" fill-opacity="0.14">
+ <rect id="path-23" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ <g id="path-23-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+ <polygon id="path-23" points="0 0 234 0 234 37 224 37 224 50 11 50 10.9978527 37 0 37"></polygon>
+ </g>
+ </g>
+ <g id="Group-3" transform="translate(11, 6)" fill="#FFFFFF">
+ <g id="Group" opacity="0.804" transform="translate(181, 3)">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group-2" transform="translate(0, 3)" opacity="0.804">
+ <g id="Rectangle" transform="translate(27, 0)">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ <g id="Rectangle" transform="translate(18, 0)">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ <g id="Rectangle" transform="translate(9, 0)">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Rectangle" transform="translate(204, 0)">
+ <rect x="0" y="0" width="9" height="9" rx="4.5"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.4" transform="translate(11, 21)" fill="#FFFFFF">
+ <rect id="Rectangle" x="0" y="0" width="213" height="29"></rect>
+ </g>
+ <g id="Group" transform="translate(18, 31)" fill="#FFFFFF">
+ <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+ </g>
+ <g id="Group" transform="translate(83, 32)" fill="#FFFFFF">
+ <g id="Group-4" transform="translate(0, 3)" opacity="0.804">
+ <g id="Group">
+ <rect id="Rectangle" x="0" y="0" width="11" height="4" rx="1"></rect>
+ </g>
+ <g id="Group" transform="translate(16, 0)">
+ <rect id="Rectangle" x="0" y="0" width="23" height="4" rx="1"></rect>
+ </g>
+ <g id="Group" transform="translate(71, 0)">
+ <rect id="Rectangle" x="0" y="0" width="13" height="4" rx="1"></rect>
+ </g>
+ <g id="Group" transform="translate(44, 0)">
+ <rect id="Rectangle" x="0" y="0" width="22" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <rect id="Rectangle" x="112" y="0" width="20" height="9" rx="4.5"></rect>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_centered_logo.svg b/addons/website/static/src/img/snippets_options/header_template_centered_logo.svg
new file mode 100644
index 00000000..10bf9804
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_centered_logo.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-29b" width="234" height="25" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="header_template_centered_logo">
+ <g class="bg_1lev">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-29b"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-29b"/>
+ </g>
+ <g fill="#FFF" class="group_2" transform="translate(10 9)">
+ <g fill-rule="nonzero" class="group" transform="translate(88)">
+ <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+ </g>
+ <g class="group" opacity=".804" transform="translate(0 7)">
+ <g class="link">
+ <rect width="15" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(18)">
+ <rect width="15" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(37)">
+ <rect width="15" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(173)">
+ <rect width="15" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <rect width="20" height="9" class="rectangle" rx="4.5" transform="translate(194 4)"/>
+ </g>
+ <g fill="#FFF" class="page_content" opacity=".442" transform="translate(0 30)">
+ <rect width="234" height="25" class="rectangle_v1"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_contact.svg b/addons/website/static/src/img/snippets_options/header_template_contact.svg
new file mode 100644
index 00000000..3af85000
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_contact.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+ <stop stop-color="#00A09D" offset="0%"></stop>
+ <stop stop-color="#00E2FF" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="header_template_contact" fill-rule="nonzero">
+ <g id="Group">
+ <g id="path-27-link" fill="#000000" fill-opacity="0.14">
+ <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ <g id="path-27-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+ <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ </g>
+ <g id="Group" transform="translate(10.000000, 31.000000)" fill="#FFFFFF">
+ <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(56.000000, 34.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="13" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(18.000000, 0.000000)" id="Rectangle">
+ <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(46.000000, 0.000000)" id="Rectangle">
+ <rect x="0" y="0" width="16" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(67.000000, 0.000000)" id="Rectangle">
+ <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <rect id="Rectangle" fill="#FFFFFF" x="204" y="31" width="20" height="9" rx="4.5"></rect>
+ <g id="Group" opacity="0.804" transform="translate(21.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(43.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(218.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(209.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(200.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(191.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group-Copy" opacity="0.804" transform="translate(10.000000, 12.000000)" fill="#FFFFFF">
+ <g id="Group">
+ <rect id="Rectangle" x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_default.svg b/addons/website/static/src/img/snippets_options/header_template_default.svg
new file mode 100644
index 00000000..0f9ce829
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_default.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-22" width="234" height="25" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="header_template_default">
+ <g class="bg_def">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-22"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-22"/>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
+ <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(71 16)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(28)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(56)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(84)"/>
+ </g>
+ <rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 13)"/>
+ <g fill="#FFF" class="page_content_default" opacity=".442" transform="translate(0 30)">
+ <rect width="234" height="25" class="rectangle_default"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger.svg b/addons/website/static/src/img/snippets_options/header_template_hamburger.svg
new file mode 100644
index 00000000..b6f82dac
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_hamburger.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-24" width="234" height="25" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="header_template_hamburger">
+ <g class="bg_small_ham">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-24"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-24"/>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
+ <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+ </g>
+ <g fill="#FFF" class="group" transform="translate(208 12)">
+ <rect width="16" height="2" class="rectangle_ham" rx="1"/>
+ <rect width="16" height="2" y="4" class="rectangle_ham" rx="1"/>
+ <rect width="16" height="2" y="8" class="rectangle_ham" rx="1"/>
+ </g>
+ <g fill="#FFF" class="page_content" opacity=".442" transform="translate(0 30)">
+ <rect width="234" height="25" class="rectangle_ham"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg b/addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg
new file mode 100644
index 00000000..d859e88d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="0%" y1="47.716%" x2="100%" y2="52.284%" id="linearGradient-1">
+ <stop stop-color="#00A09D" offset="0%"></stop>
+ <stop stop-color="#00E2FF" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="header_template_hamburger" fill-rule="nonzero">
+ <g id="Group">
+ <g id="path-24-link" fill="#000000" fill-opacity="0.14">
+ <rect id="path-24" x="0" y="0" width="234" height="25"></rect>
+ </g>
+ <g id="path-24-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+ <rect id="path-24" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ </g>
+ <g id="Group" transform="translate(10, 8)" fill="#FFFFFF">
+ <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+ </g>
+ <g id="Group" transform="translate(208, 7)" fill="#FFFFFF">
+ <rect id="Rectangle" x="0" y="0" width="16" height="2" rx="1"></rect>
+ <rect id="Rectangle" x="0" y="4" width="16" height="2" rx="1"></rect>
+ <rect id="Rectangle" x="0" y="8" width="16" height="2" rx="1"></rect>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(73, 39)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="13" height="4" rx="1"></rect>
+ </g>
+ <g id="Rectangle" transform="translate(18, 0)">
+ <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+ </g>
+ <g id="Rectangle" transform="translate(46, 0)">
+ <rect x="0" y="0" width="16" height="4" rx="1"></rect>
+ </g>
+ <g id="Rectangle" transform="translate(67, 0)">
+ <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_image.svg b/addons/website/static/src/img/snippets_options/header_template_image.svg
new file mode 100644
index 00000000..6d7b6e66
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_image.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-28" width="234" height="25" x="0" y="30"/>
+ <rect id="path-38" width="234" height="25" x="0" y="0"/>
+ <linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="47.355%" y2="38.066%">
+ <stop offset="0%" stop-color="#008374"/>
+ <stop offset="100%" stop-color="#006A59"/>
+ </linearGradient>
+ <linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="43.259%" y2="50%">
+ <stop offset="0%" stop-color="#00AA89"/>
+ <stop offset="100%" stop-color="#009989"/>
+ </linearGradient>
+ <linearGradient id="linearGradient-7" x1="88.517%" x2="50%" y1="43.604%" y2="50%">
+ <stop offset="0%" stop-color="#00AA89"/>
+ <stop offset="100%" stop-color="#009989"/>
+ </linearGradient>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="header_template_image">
+ <g class="bg_top">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-28"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-28"/>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 33)">
+ <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(71 40)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(28)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(56)"/>
+ <rect width="23" height="4" class="rectangle" rx="1" transform="translate(84)"/>
+ </g>
+ <rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 37)"/>
+ <g class="image_1_border_long" transform="translate(0 5)">
+ <rect width="234" height="25" fill="#FFF" class="rectangle"/>
+ <g class="oval___oval_mask">
+ <mask id="mask-4" fill="#fff">
+ <use xlink:href="#path-38"/>
+ </mask>
+ <use fill="#79D1F2" class="mask" xlink:href="#path-38"/>
+ <ellipse cx="51.5" cy="29.5" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="23.5" ry="12.5"/>
+ <ellipse cx="3.5" cy="27" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-4)" rx="37.5" ry="18"/>
+ <ellipse cx="221.5" cy="25" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-4)" rx="38.5" ry="18"/>
+ <circle cx="129.5" cy="9.5" r="5.5" fill="#F3EC60" class="oval" mask="url(#mask-4)"/>
+ <ellipse cx="174.5" cy="27.5" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="23.5" ry="12.5"/>
+ </g>
+ </g>
+ <rect width="234" height="1" y="30" fill="#FFF" class="rectangle_topbar"/>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_magazine.svg b/addons/website/static/src/img/snippets_options/header_template_magazine.svg
new file mode 100644
index 00000000..0951eed8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_magazine.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+ <stop stop-color="#00A09D" offset="0%"></stop>
+ <stop stop-color="#00E2FF" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="header_template_contact" fill-rule="nonzero">
+ <g id="Group">
+ <g id="path-27-link" fill="#000000" fill-opacity="0.14">
+ <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ <g id="path-27-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+ <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ </g>
+ <g id="Group" transform="translate(10, 31)" fill="#FFFFFF">
+ <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(10, 8)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(218, 8)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(209, 8)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(200, 8)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <g id="Group" opacity="0.804" transform="translate(191, 8)" fill="#FFFFFF">
+ <g id="Rectangle">
+ <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+ </g>
+ </g>
+ </g>
+ <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" opacity="0.375" x="10" y="20" width="214" height="1"></rect>
+ <g id="Group" transform="translate(208, 31)" fill="#FFFFFF" fill-rule="nonzero">
+ <rect id="Rectangle" x="0" y="0" width="16" height="2" rx="1"></rect>
+ <rect id="Rectangle" x="0" y="4" width="16" height="2" rx="1"></rect>
+ <rect id="Rectangle" x="0" y="8" width="16" height="2" rx="1"></rect>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_minimalist.svg b/addons/website/static/src/img/snippets_options/header_template_minimalist.svg
new file mode 100644
index 00000000..a765b16c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_minimalist.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="0%" y1="49.429%" x2="100%" y2="50.571%" id="linearGradient-1">
+ <stop stop-color="#00A09D" offset="0%"></stop>
+ <stop stop-color="#00E2FF" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="header_template_minimalist" fill-rule="nonzero">
+ <g id="Group">
+ <g id="path-25-link" fill="#000000" fill-opacity="0.14">
+ <rect id="path-25" x="0" y="0" width="234" height="25"></rect>
+ </g>
+ <g id="path-25-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+ <rect id="path-25" x="0" y="0" width="234" height="25"></rect>
+ </g>
+ </g>
+ <g id="Group" transform="translate(10, 8)" fill="#FFFFFF">
+ <g id="Shape">
+ <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z"></path>
+ </g>
+ <g opacity="0.804" transform="translate(45, 3)" id="Rectangle">
+ <g>
+ <rect x="0" y="0" width="12" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(17, 0)">
+ <rect x="0" y="0" width="12" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(34, 0)">
+ <rect x="0" y="0" width="18" height="4" rx="1"></rect>
+ </g>
+ </g>
+ </g>
+ <g id="Group" opacity="0.442" transform="translate(0, 25)" fill="#FFFFFF">
+ <rect id="Rectangle" x="0" y="0" width="234" height="25"></rect>
+ </g>
+ </g>
+ <g id="Group" transform="translate(216, 8)" fill="#FFFFFF" fill-rule="nonzero">
+ <rect id="Rectangle" x="0" y="0" width="9" height="9" rx="4.5"></rect>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_sidebar.svg b/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
new file mode 100644
index 00000000..f1b7a202
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="18.506%" y2="81.494%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-26" width="63" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="header_template_sidebar">
+ <g class="side_bg_side">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-26"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-26"/>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
+ <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(10 34)">
+ <g class="link">
+ <rect width="23" height="3" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(0 6)">
+ <rect width="37" height="3" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(0 12)">
+ <rect width="30" height="3" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(0 18)">
+ <rect width="26" height="3" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <rect width="1" height="51" x="62" y="5" fill="#FFF" class="bar_side" opacity=".5"/>
+ <g fill="#FFF" class="page_content" opacity=".4" transform="translate(63 5)">
+ <rect width="171" height="50" class="rectangle_side"/>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_slogan.svg b/addons/website/static/src/img/snippets_options/header_template_slogan.svg
new file mode 100644
index 00000000..5bb81d4a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_slogan.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+ <stop stop-color="#00A09D" offset="0%"></stop>
+ <stop stop-color="#00E2FF" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="header_template_slogan" fill-rule="nonzero">
+ <g id="Group">
+ <g id="path-21-link" fill="#000000" fill-opacity="0.14">
+ <rect id="path-21" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ <g id="path-21-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+ <rect id="path-21" x="0" y="0" width="234" height="50"></rect>
+ </g>
+ </g>
+ <text id="LOGO" fill="#FFFFFF" font-family="Arial-Black, Arial Black" font-size="12" font-weight="700">
+ <tspan x="10" y="18">LOGO</tspan>
+ </text>
+ <rect id="Rectangle" fill="#FFFFFF" opacity="0.375" x="10" y="26" width="214" height="1"></rect>
+ <g id="Group" opacity="0.804" transform="translate(10, 36)" fill="#FFFFFF">
+ <rect id="Rectangle" x="0" y="0" width="23" height="4" rx="1"></rect>
+ <g transform="translate(28, 0)" id="Rectangle">
+ <rect x="0" y="0" width="9" height="4" rx="1"></rect>
+ </g>
+ <g id="Group-Copy" transform="translate(204, 0)">
+ <rect id="Rectangle" x="0" y="0" width="9" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(42, 0)" id="Rectangle">
+ <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+ </g>
+ <g transform="translate(70, 0)" id="Rectangle">
+ <rect x="0" y="0" width="16" height="4" rx="1"></rect>
+ </g>
+ </g>
+ <rect id="Rectangle" fill="#FFFFFF" x="204" y="11" width="20" height="9" rx="4.5"></rect>
+ <path d="M59.227,17 L59.699,15.7 L61.989,15.7 L62.489,17 L63.746,17 L61.453,11.273 L60.23,11.273 L58,17 L59.227,17 Z M61.617,14.734 L60.055,14.734 L60.828,12.609 L61.618,14.734 L61.617,14.734 Z M68.117,17 L68.82,14.332 L69.535,17 L70.59,17 L71.922,12.852 L70.84,12.852 L70.047,15.57 L69.355,12.852 L68.297,12.852 L67.582,15.57 L66.805,12.852 L65.738,12.852 L67.051,17 L68.117,17 Z M74.391,17.094 C75.005,17.094 75.515,16.887 75.92,16.474 C76.325,16.062 76.527,15.542 76.527,14.914 C76.527,14.292 76.327,13.777 75.926,13.369 C75.525,12.962 75.01,12.758 74.383,12.758 C73.977,12.758 73.609,12.848 73.279,13.028 C72.9516526,13.2048745 72.6856193,13.4768351 72.516,13.808 C72.336,14.15 72.246,14.503 72.246,14.868 C72.246,15.344 72.336,15.748 72.516,16.08 C72.696,16.412 72.958,16.664 73.303,16.836 C73.648,17.008 74.01,17.094 74.391,17.094 Z M74.387,16.199 C74.1090953,16.2031961 73.8438798,16.082877 73.664,15.871 C73.469,15.652 73.371,15.337 73.371,14.926 C73.371,14.514 73.469,14.199 73.664,13.98 C73.8438798,13.768123 74.1090953,13.6478039 74.387,13.652 C74.673,13.652 74.913,13.762 75.107,13.98 C75.301,14.2 75.398,14.512 75.398,14.918 C75.398,15.335 75.301,15.652 75.108,15.871 C74.9290044,16.0829098 74.6643566,16.2033044 74.387,16.199 L74.387,16.199 Z M78.477,17 L78.477,15.121 C78.477,14.658 78.505,14.34 78.561,14.168 C78.6147422,13.9990169 78.7239772,13.8531353 78.871,13.754 C79.0213295,13.6501005 79.2002756,13.5955778 79.383,13.598 C79.5179113,13.5939992 79.6507222,13.6320949 79.763,13.707 C79.8706854,13.7819375 79.9513416,13.889596 79.993,14.014 C80.039,14.145 80.063,14.434 80.063,14.883 L80.063,17 L81.16,17 L81.16,14.422 C81.16,14.102 81.14,13.855 81.1,13.684 C81.0618077,13.5168351 80.9885219,13.3596967 80.885,13.223 C80.7645517,13.0744203 80.6078461,12.9593881 80.43,12.889 C80.2202434,12.7994433 79.9940529,12.7548183 79.766,12.758 C79.216,12.758 78.76,12.992 78.398,13.461 L78.398,12.851 L77.378,12.851 L77.378,17 L78.477,17 L78.477,17 Z M83.762,17.094 C83.996,17.094 84.229,17.036 84.459,16.92 C84.689,16.804 84.889,16.628 85.059,16.39 L85.059,17 L86.079,17 L86.079,11.273 L84.98,11.273 L84.98,13.336 C84.642,12.951 84.24,12.758 83.777,12.758 C83.272,12.758 82.854,12.941 82.523,13.307 C82.193,13.673 82.027,14.207 82.027,14.91 C82.027,15.598 82.197,16.133 82.537,16.518 C82.877,16.902 83.285,17.094 83.762,17.094 L83.762,17.094 Z M84.074,16.227 C83.757,16.227 83.509,16.083 83.332,15.797 C83.21,15.599 83.148,15.279 83.148,14.836 C83.148,14.424 83.236,14.116 83.412,13.908 C83.5706199,13.7094553 83.8118901,13.5950917 84.066,13.598 C84.335,13.598 84.555,13.702 84.726,13.912 C84.898,14.122 84.984,14.465 84.984,14.942 C84.984,15.368 84.896,15.689 84.719,15.904 C84.542,16.119 84.327,16.227 84.074,16.227 L84.074,16.227 Z M88.852,17.094 C89.307,17.094 89.687,16.989 89.99,16.779 C90.294,16.569 90.516,16.264 90.656,15.863 L89.562,15.68 C89.502,15.888 89.414,16.04 89.297,16.133 C89.1730736,16.2288263 89.0195626,16.278346 88.863,16.273 C88.6227147,16.2785791 88.3918095,16.179724 88.23,16.002 C88.061,15.821 87.973,15.568 87.965,15.242 L90.715,15.242 C90.73,14.401 90.56,13.777 90.203,13.369 C89.846,12.962 89.359,12.758 88.743,12.758 C88.193,12.758 87.738,12.952 87.379,13.342 C87.019,13.732 86.839,14.27 86.839,14.957 C86.839,15.533 86.977,16.009 87.25,16.387 C87.596,16.858 88.13,17.094 88.852,17.094 L88.852,17.094 Z M89.625,14.57 L87.985,14.57 C87.982,14.27 88.059,14.034 88.215,13.86 C88.3640317,13.6884692 88.5818395,13.5923991 88.809,13.598 C89.033,13.598 89.223,13.68 89.379,13.846 C89.535,14.011 89.617,14.253 89.625,14.57 L89.625,14.57 Z M92.66,17 L92.66,15.719 C92.66,15.013 92.69,14.549 92.752,14.329 C92.813,14.107 92.897,13.954 93.004,13.869 C93.1154442,13.7829203 93.253238,13.7380489 93.394,13.742 C93.554,13.742 93.725,13.802 93.91,13.922 L94.25,12.965 C94.0325359,12.8310194 93.7824202,12.7594095 93.527,12.758 C93.3594604,12.7555439 93.1948061,12.8017444 93.053,12.891 C92.913,12.979 92.757,13.163 92.582,13.441 L92.582,12.851 L91.562,12.851 L91.562,17 L92.66,17 L92.66,17 Z M95.95,17 L95.95,13.715 L96.77,13.715 L96.77,12.852 L95.95,12.852 L95.95,12.559 C95.95,12.348 95.984,12.205 96.053,12.131 C96.122,12.057 96.236,12.02 96.395,12.02 C96.556,12.02 96.724,12.04 96.898,12.082 L97.047,11.316 C96.747,11.223 96.441,11.176 96.129,11.176 C95.824,11.176 95.572,11.23 95.373,11.338 C95.1922962,11.4269548 95.0475753,11.5752054 94.963,11.758 C94.889,11.93 94.852,12.19 94.852,12.539 L94.852,12.852 L94.242,12.852 L94.242,13.715 L94.852,13.715 L94.852,17 L95.949,17 L95.95,17 Z M98.742,17.094 C99.016,17.094 99.275,17.03 99.522,16.902 C99.768,16.775 99.966,16.6 100.117,16.379 L100.117,17 L101.137,17 L101.137,12.852 L100.039,12.852 L100.039,14.602 C100.039,15.195 100.012,15.568 99.957,15.721 C99.8987642,15.8779176 99.7918979,16.0121136 99.652,16.104 C99.5041371,16.2065674 99.3279381,16.2604059 99.148,16.258 C99.0038794,16.263829 98.8616554,16.2235439 98.742,16.143 C98.6356588,16.0662727 98.5581801,15.9560418 98.522,15.83 C98.482,15.699 98.461,15.341 98.461,14.758 L98.461,12.852 L97.363,12.852 L97.363,15.477 C97.363,15.867 97.413,16.173 97.512,16.395 C97.611,16.615 97.771,16.788 97.992,16.91 C98.214,17.033 98.464,17.094 98.742,17.094 L98.742,17.094 Z M103.372,17 L103.372,11.273 L102.273,11.273 L102.273,17 L103.371,17 L103.372,17 Z M108.32,17.094 C108.943,17.094 109.413,16.957 109.73,16.684 C110.048,16.41 110.207,16.084 110.207,15.704 C110.207,15.354 110.092,15.082 109.863,14.887 C109.632,14.694 109.223,14.531 108.639,14.398 C108.054,14.266 107.712,14.163 107.613,14.09 C107.54,14.035 107.503,13.969 107.503,13.89 C107.503283,13.7990563 107.551064,13.7148707 107.629,13.668 C107.754,13.588 107.961,13.547 108.25,13.547 C108.48,13.547 108.656,13.59 108.78,13.676 C108.905427,13.7651477 108.994535,13.8965022 109.031,14.046 L110.066,13.856 C109.962,13.493 109.772,13.22 109.496,13.036 C109.22,12.85 108.798,12.758 108.23,12.758 C107.634,12.758 107.194,12.88 106.91,13.125 C106.637097,13.3461006 106.480196,13.6797921 106.484,14.031 C106.484,14.43 106.648,14.741 106.977,14.965 C107.214,15.126 107.775,15.305 108.66,15.5 C108.85,15.544 108.973,15.592 109.027,15.645 C109.079519,15.7008657 109.107592,15.7753679 109.105,15.852 C109.10828,15.9674429 109.054401,16.0770728 108.961,16.145 C108.818,16.249 108.604,16.301 108.321,16.301 C108.063,16.301 107.862,16.245 107.719,16.135 C107.568493,16.01225 107.467303,15.8393392 107.434,15.648 L106.332,15.816 C106.434,16.21 106.649,16.521 106.979,16.75 C107.308,16.98 107.755,17.094 108.32,17.094 L108.32,17.094 Z M112.266,17 L112.266,11.273 L111.168,11.273 L111.168,17 L112.266,17 Z M115.281,17.094 C115.896,17.094 116.406,16.887 116.811,16.474 C117.215,16.062 117.418,15.542 117.418,14.914 C117.418,14.292 117.218,13.777 116.816,13.369 C116.416,12.962 115.901,12.758 115.273,12.758 C114.867,12.758 114.499,12.848 114.17,13.028 C113.84,13.207 113.586,13.468 113.406,13.808 C113.226,14.15 113.136,14.503 113.136,14.868 C113.136,15.344 113.226,15.748 113.406,16.08 C113.586,16.412 113.848,16.664 114.193,16.836 C114.538,17.008 114.901,17.094 115.281,17.094 L115.281,17.094 Z M115.277,16.199 C114.999443,16.2028959 114.734656,16.0826047 114.555,15.871 C114.359,15.652 114.262,15.337 114.262,14.926 C114.262,14.514 114.359,14.199 114.555,13.98 C114.734656,13.7683953 114.999443,13.6481041 115.277,13.652 C115.564,13.652 115.804,13.762 115.998,13.98 C116.192,14.2 116.289,14.512 116.289,14.918 C116.289,15.335 116.192,15.652 115.998,15.871 C115.819228,16.0826367 115.555008,16.2030032 115.278,16.199 L115.277,16.199 Z M120.109,18.684 C120.482,18.684 120.789,18.644 121.033,18.566 C121.249541,18.5032594 121.449155,18.3925148 121.617,18.242 C121.775667,18.0829942 121.892479,17.887163 121.957,17.672 C122.037,17.43 122.078,17.064 122.078,16.574 L122.078,12.852 L121.051,12.852 L121.051,13.434 C120.717,12.984 120.294,12.758 119.781,12.758 C119.304336,12.7487635 118.847803,12.9499597 118.533,13.308 C118.199,13.676 118.031,14.207 118.031,14.902 C118.031,15.457 118.159,15.921 118.414,16.293 C118.74,16.764 119.181,17 119.738,17 C120.238,17 120.652,16.776 120.98,16.328 L120.98,16.934 C120.98,17.178 120.964,17.346 120.93,17.437 C120.89068,17.5521335 120.813016,17.6502729 120.71,17.715 C120.568,17.801 120.353,17.844 120.066,17.844 C119.842,17.844 119.678,17.804 119.574,17.727 C119.499,17.672 119.451,17.572 119.43,17.426 L118.176,17.273 C118.173584,17.3172942 118.17225,17.3616407 118.172,17.406 C118.172,17.776 118.319,18.081 118.613,18.322 C118.908,18.563 119.406,18.684 120.109,18.684 L120.109,18.684 Z M120.043,16.114012 C119.796651,16.1153551 119.563735,16.0018549 119.413,15.807 C119.242,15.602 119.156,15.28 119.156,14.84 C119.156,14.42 119.242,14.109 119.412,13.904 C119.569108,13.7062377 119.809475,13.5930805 120.062,13.598 C120.333,13.598 120.557,13.702 120.734,13.91 C120.911,14.118 121,14.437 121,14.867 C121,15.279 120.908,15.589 120.723,15.799 C120.555117,16.0006405 120.305364,16.115968 120.043,16.113 L120.043,16.114012 Z M124.253,17.094 C124.496,17.094 124.724,17.048 124.938,16.957 C125.161938,16.8586276 125.36571,16.7196147 125.539,16.547 C125.547,16.567 125.559,16.611 125.579,16.676 C125.619,16.819 125.655,16.927 125.684,17 L126.77,17 C126.680857,16.823391 126.614333,16.6362491 126.572,16.443 C126.537,16.27 126.52,16.001 126.52,15.637 L126.531,14.355 C126.531,13.879 126.482,13.551 126.385,13.373 C126.287,13.195 126.118,13.048 125.879,12.932 C125.639,12.816 125.275,12.758 124.785,12.758 C124.246,12.758 123.84,12.854 123.566,13.047 C123.293,13.24 123.1,13.537 122.988,13.937 L123.984,14.117 C124.052,13.924 124.141,13.79 124.25,13.713 C124.36,13.636 124.512,13.598 124.707,13.598 C124.997,13.598 125.193,13.643 125.297,13.732 C125.401,13.822 125.453,13.972 125.453,14.184 L125.453,14.293 C125.255,14.376 124.9,14.466 124.387,14.563 C124.007,14.635 123.715,14.721 123.514,14.818 C123.318979,14.9093823 123.155171,15.0561485 123.043,15.24 C122.929485,15.4291845 122.871283,15.6464042 122.875,15.867 C122.875,16.221 122.998,16.514 123.245,16.747 C123.49,16.977 123.827,17.094 124.254,17.094 L124.253,17.094 Z M124.582,16.32 C124.419594,16.3254873 124.261907,16.2648662 124.145,16.152 C124.03438,16.0493311 123.971971,15.9049193 123.972987,15.754 C123.972987,15.598 124.044,15.469 124.187,15.367 C124.281,15.305 124.48,15.241 124.785,15.176 C125.09,15.111 125.313,15.055 125.453,15.008 L125.453,15.227 C125.453,15.49 125.439,15.668 125.41,15.762 C125.365576,15.9088245 125.273359,16.0365915 125.148,16.125 C124.985279,16.2492997 124.786752,16.3176969 124.582,16.32 L124.582,16.32 Z M128.703,17 L128.703,15.121 C128.703,14.658 128.731,14.34 128.787,14.168 C128.840742,13.9990169 128.949977,13.8531353 129.097,13.754 C129.247329,13.6501005 129.426276,13.5955778 129.609,13.598 C129.74425,13.5937898 129.877442,13.6318946 129.99,13.707 C130.097313,13.7820943 130.177605,13.8897353 130.219,14.014 C130.266,14.145 130.289,14.434 130.289,14.883 L130.289,17 L131.387,17 L131.387,14.422 C131.387,14.102 131.367,13.855 131.327,13.684 C131.288507,13.5167542 131.214878,13.3596098 131.111,13.223 C130.990552,13.0744203 130.833846,12.9593881 130.656,12.889 C130.446243,12.7994433 130.220053,12.7548183 129.992,12.758 C129.442,12.758 128.987,12.992 128.625,13.461 L128.625,12.851 L127.605,12.851 L127.605,17 L128.703,17 L128.703,17 Z" id="Shape" fill="#FFFFFF"></path>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_vertical.svg b/addons/website/static/src/img/snippets_options/header_template_vertical.svg
new file mode 100644
index 00000000..b38e7169
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_vertical.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+ <defs>
+ <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+ <stop offset="0%" stop-color="#00A09D"/>
+ <stop offset="100%" stop-color="#00E2FF"/>
+ </linearGradient>
+ <rect id="path-29" width="234" height="50" x="0" y="5"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" class="header_template_vertical">
+ <g class="bg_ver">
+ <use fill="#000" fill-opacity=".14" xlink:href="#path-29"/>
+ <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-29"/>
+ </g>
+ <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(98 10)">
+ <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+ </g>
+ <rect width="214" height="1" x="10" y="29" fill="#FFF" class="rectangle_ver" opacity=".375"/>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(64 39)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ <g class="link" transform="translate(28)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(56)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <g class="link" transform="translate(84)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ </g>
+ <g fill="#FFF" class="group" opacity=".804" transform="translate(10 17)">
+ <rect width="23" height="4" class="rectangle" rx="1"/>
+ </g>
+ <rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 12)"/>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/image_left.svg b/addons/website/static/src/img/snippets_options/image_left.svg
new file mode 100644
index 00000000..66fc80d9
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/image_left.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_5" transform="translate(-137 -5)">
+ <g class="image_left" transform="translate(137 5)">
+ <rect width="8" height="11" x="16" fill="#B8B8B8" class="o_subdle"/>
+ <path fill="#FFF" d="M0 0h13v11H0V0zm1 1h11v9H1V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375A1.275 1.275 0 0 1 2 3.286c0-.357.118-.661.355-.911S2.88 2 3.22 2c.338 0 .626.125.863.375s.356.554.356.91zm6.5 2.571v3H2V7.571L4.031 5.43 5.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/image_right.svg b/addons/website/static/src/img/snippets_options/image_right.svg
new file mode 100644
index 00000000..8cc4ddca
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/image_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_5" transform="translate(-171 -5)">
+ <g class="image_right" transform="translate(171 5)">
+ <rect width="8" height="11" fill="#B8B8B8" class="o_subdle"/>
+ <path fill="#FFF" d="M11 0h13v11H11V0zm1 1h11v9H12V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375a1.275 1.275 0 0 1-.355-.91c0-.357.118-.661.355-.911S13.88 2 14.22 2c.338 0 .626.125.863.375s.355.554.355.91zm6.5 2.571v3H13V7.571l2.031-2.142L16.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_2.svg b/addons/website/static/src/img/snippets_options/media_layout_1_2.svg
new file mode 100644
index 00000000..f83de7d4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_3" transform="translate(-170 -7)">
+ <g class="media_layout_1_2" transform="translate(170 7)">
+ <rect width="10" height="8" x="13" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="11" height="8" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg b/addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg
new file mode 100644
index 00000000..70519f1f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_6" transform="translate(-171 -7)">
+ <g class="media_layout_1_2_right" transform="translate(171 7)">
+ <rect width="10" height="8" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="11" height="8" x="12" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_3.svg b/addons/website/static/src/img/snippets_options/media_layout_1_3.svg
new file mode 100644
index 00000000..475877a2
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_3.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_3" transform="translate(-204 -7)">
+ <g class="media_layout_1_3" transform="translate(204 7)">
+ <rect width="14" height="8" x="9" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="7" height="8" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg b/addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg
new file mode 100644
index 00000000..215a3115
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_6" transform="translate(-204 -7)">
+ <g class="media_layout_1_3_right" transform="translate(204 7)">
+ <rect width="14" height="8" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="7" height="8" x="16" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_4.svg b/addons/website/static/src/img/snippets_options/media_layout_1_4.svg
new file mode 100644
index 00000000..dd6e24c7
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_4.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_3" transform="translate(-137 -7)">
+ <g class="media_layout_1_4" transform="translate(137 7)">
+ <rect width="18" height="8" x="5" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="3" height="8" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg b/addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg
new file mode 100644
index 00000000..219233dc
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_6" transform="translate(-137 -7)">
+ <g class="media_layout_1_4_right" transform="translate(137 7)">
+ <rect width="18" height="8" fill="#B8B8B8" class="o_subdle"/>
+ <rect width="3" height="8" x="20" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_bottom.svg b/addons/website/static/src/img/snippets_options/pos_bottom.svg
new file mode 100644
index 00000000..f4a83988
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_bottom.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_8" transform="translate(-240 -5)">
+ <g class="pos_bottom" transform="translate(240 5)">
+ <rect width="20" height="12" class="bg"/>
+ <polygon fill="#D8D8D8" points="9.426 2.444 6 2.444 6 5.556 9.426 5.556 9.426 8 14 4 9.426 0" class="o_graphic" transform="rotate(90 10 4)"/>
+ <rect width="16" height="1" x="2" y="10" fill="#D8D8D8" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_left.svg b/addons/website/static/src/img/snippets_options/pos_left.svg
new file mode 100644
index 00000000..446e392b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_left.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_8" transform="translate(-172 -5)">
+ <g class="pos_left" transform="translate(172 5)">
+ <rect width="20" height="12" class="bg"/>
+ <polygon fill="#D8D8D8" points="11.054 4.444 7 4.444 7 7.556 11.054 7.556 11.054 10 17 6 11.054 2" class="o_graphic" transform="matrix(-1 0 0 1 24 0)"/>
+ <rect width="1" height="12" x="4" fill="#D8D8D8" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_right.svg b/addons/website/static/src/img/snippets_options/pos_right.svg
new file mode 100644
index 00000000..8990d7cd
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_8" transform="translate(-138 -5)">
+ <g class="pos_right" transform="translate(138 5)">
+ <rect width="20" height="12" class="bg"/>
+ <polygon fill="#D8D8D8" points="7.054 4.444 3 4.444 3 7.556 7.054 7.556 7.054 10 13 6 7.054 2" class="o_graphic"/>
+ <rect width="1" height="12" x="15" fill="#D8D8D8" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_top.svg b/addons/website/static/src/img/snippets_options/pos_top.svg
new file mode 100644
index 00000000..df5adfe1
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_top.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_8" transform="translate(-204 -5)">
+ <g class="pos_top" transform="translate(204 5)">
+ <rect width="20" height="12" class="bg"/>
+ <polygon fill="#D8D8D8" points="9.426 5.444 6 5.444 6 8.556 9.426 8.556 9.426 11 14 7 9.426 3" class="o_graphic" transform="rotate(-90 10 7)"/>
+ <rect width="16" height="1" x="2" fill="#D8D8D8" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/shadow_in.svg b/addons/website/static/src/img/snippets_options/shadow_in.svg
new file mode 100644
index 00000000..fe9e273d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/shadow_in.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_shadow" transform="translate(-142 -5)">
+ <g class="shadow_in_s" transform="translate(142 5)">
+ <rect width="23" height="12" class="rectangle"/>
+ <path d="M6.5 9.5V3H17l2-3h1v12H3v-1l3.5-1.5z" class="o_graphic"/>
+ <polygon points="3.5 .5 17.5 .5 16.5 2 5.5 2 5.5 9 3.5 10" class="o_subdle"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/shadow_out.svg b/addons/website/static/src/img/snippets_options/shadow_out.svg
new file mode 100644
index 00000000..ee49026c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/shadow_out.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_shadow" transform="translate(-185 -5)">
+ <g class="shadow_out_s" transform="translate(185 5)">
+ <rect width="23" height="12" class="rectangle"/>
+ <polygon points="21 3.2 21 12 8.308 12 6 10.9 18.692 10.9 18.692 1" class="o_subdle"/>
+ <rect width="15" height="10" x="2" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/size_large.svg b/addons/website/static/src/img/snippets_options/size_large.svg
new file mode 100644
index 00000000..13541780
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/size_large.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_7" transform="translate(-203 -5)">
+ <g class="size_large" transform="translate(203 5)">
+ <path fill="#B8B8B8" d="M23 0v12H0V0h23zm-1 1H1v10h21V1z" class="o_subdle"/>
+ <rect width="19" height="8" x="2" y="2" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/size_medium.svg b/addons/website/static/src/img/snippets_options/size_medium.svg
new file mode 100644
index 00000000..00b3a3d4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/size_medium.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_7" transform="translate(-170 -5)">
+ <g class="size_medium" transform="translate(170 5)">
+ <path fill="#B8B8B8" d="M23 0v12H0V0h23zm-4 2H4v8h15V2z" class="o_subdle"/>
+ <rect width="13" height="6" x="5" y="3" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/size_small.svg b/addons/website/static/src/img/snippets_options/size_small.svg
new file mode 100644
index 00000000..aaa36a67
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/size_small.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+ <g fill="none" fill-rule="evenodd" class="symbols">
+ <g class="3_buttons_copy_7" transform="translate(-137 -5)">
+ <g class="size_small" transform="translate(137 5)">
+ <path fill="#B8B8B8" d="M23 0v12H0V0h23zm-8 3H8v6h7V3z" class="o_subdle"/>
+ <rect width="5" height="4" x="9" y="4" fill="#FFF" class="o_graphic"/>
+ </g>
+ </g>
+ </g>
+</svg>
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
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png
Binary files 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>
diff --git a/addons/website/static/src/img/theme_loader.gif b/addons/website/static/src/img/theme_loader.gif
new file mode 100644
index 00000000..a5c32657
--- /dev/null
+++ b/addons/website/static/src/img/theme_loader.gif
Binary files differ
diff --git a/addons/website/static/src/img/website-visitors.gif b/addons/website/static/src/img/website-visitors.gif
new file mode 100644
index 00000000..5d4aed82
--- /dev/null
+++ b/addons/website/static/src/img/website-visitors.gif
Binary files differ
diff --git a/addons/website/static/src/img/website_dashboard_visit_demo.png b/addons/website/static/src/img/website_dashboard_visit_demo.png
new file mode 100644
index 00000000..7945ac17
--- /dev/null
+++ b/addons/website/static/src/img/website_dashboard_visit_demo.png
Binary files differ
diff --git a/addons/website/static/src/img/website_logo.png b/addons/website/static/src/img/website_logo.png
new file mode 100644
index 00000000..16f69ed2
--- /dev/null
+++ b/addons/website/static/src/img/website_logo.png
Binary files differ