[REF] website: snippets layout/style improvements

* s_banner
    - Remove text-container hardcoded style (user will be able to use the
        new transparent color palette instead)
    - Improve indicators visibility on both dark or light bg
    - Cursor: pointer for navigation buttons
* s_cover
* s_quote: remove the whole snippet
* s_three_columns
* s_reference
    - Remove Quotes
    - Add new logo demo images
* s_button: rename from "Button" to "Call to Action" + some design
* s_feature_grid

9 files changed, 101 insertions, 86 deletions

diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 0c03688f9e7..11b34bb6ec1 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -332,7 +332,7 @@
             <field name="name">Cover Snippet - Default Image</field>
             <field name="datas_fname">s_cover_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/web/image/website.s_background_image_01</field>
+            <field name="url">/web/image/website.s_background_image_03</field>
         </record>
 
         <record id="website.s_parallax_slider_default_image" model="ir.attachment">
@@ -383,5 +383,53 @@
             <field name="url">/website/static/src/img/snippets_demo/s_big_picture.png</field>
         </record>
 
+        <record id="website.s_reference_demo_image_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Reference Snippet - Demo Image 1</field>
+            <field name="datas_fname">s_reference_demo_image_1.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_references_1.png</field>
+        </record>
+
+        <record id="website.s_reference_demo_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Reference Snippet - Demo Image 2</field>
+            <field name="datas_fname">s_reference_demo_image_2.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_references_2.png</field>
+        </record>
+
+        <record id="website.s_reference_demo_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Reference Snippet - Demo Image 3</field>
+            <field name="datas_fname">s_reference_demo_image_3.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_references_3.png</field>
+        </record>
+
+        <record id="website.s_reference_demo_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Reference Snippet - Demo Image 4</field>
+            <field name="datas_fname">s_reference_demo_image_4.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_references_4.png</field>
+        </record>
+
+        <record id="website.s_reference_demo_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Reference Snippet - Demo Image 5</field>
+            <field name="datas_fname">s_reference_demo_image_5.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_references_5.png</field>
+        </record>
+
+        <record id="website.s_reference_demo_image_6" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Reference Snippet - Demo Image 6</field>
+            <field name="datas_fname">s_reference_demo_image_6.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_references_6.png</field>
+        </record>
+
     </data>
 </odoo>
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 00000000000..9790446aa04
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_1.png
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 00000000000..a1fc7a53d01
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_2.png
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 00000000000..6169ff45837
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_3.png
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 00000000000..08a7777f55e
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_4.png
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 00000000000..122542479d8
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_5.png
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 100755
index 00000000000..d0dff1da902
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_references_6.png
diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
index 173bd9335fd..098990e3b4c 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.snippets.less
@@ -375,19 +375,19 @@ div.carousel .container {
 
 // Parallax Theme
 div.carousel {
-    .carousel-indicators {
-        li { border: 1px solid grey; }
-        .active { background-color: grey; }
+    .carousel-indicators li {
+        box-shadow: 0 0 0 1px grey;
+        &:hover:not(.active) {
+            background-color: @color-white-50;
+        }
     }
     span.carousel-img img,
     div.carousel-content {
         max-height: 95%;
         padding: 10px;
     }
-    div.carousel-content {
-        background-color: black;
-        color: white;
-        background: rgba(0, 0, 0, 0.3);
+    .carousel-control {
+        cursor: pointer;
     }
 }
 
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 9a53f71fd24..7f17fb12ff2 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <template id="s_cover" name="Cover">
-    <section class="s_text_block_image_fw oe_img_bg" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 50%">
+    <section class="s_text_block_image_fw oe_img_bg oe_custom_bg" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 100%">
         <div class="container">
             <div class="row">
-                <div class="col-md-6 mt64 mb64 bg-white">
-                    <h2>Headline</h2>
-                    <h4 class="text-primary">With a great subtitle</h4>
+                <div class="col-md-6 mt64 mb64 bg-black-25">
+                    <h2 style="font-size:62px">Headline</h2>
+                    <h4 class="text-muted">With a great subtitle</h4>
                     <p>Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
                 </div>
             </div>
@@ -21,13 +21,13 @@
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
         </ol>
         <div class="carousel-inner">
-            <div class="item oe_img_bg active" style="background-image: url(/web/image/website.s_background_image_05); background-position: 50% 50%">
+            <div class="item oe_img_bg active bg-alpha">
                 <div class="container">
                     <div class="row content">
-                        <div class="carousel-content col-md-4 col-md-offset-1 mt96 mb96">
+                        <div class="carousel-content col-md-4 col-md-offset-1 mt128 mb96">
                             <h2>Your Banner Title</h2>
                             <h4>Click to customize this text</h4>
-                            <p><a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a></p>
+                            <p><a href="/page/website.contactus" class="btn btn-warning btn-large">Contact us</a></p>
                         </div>
                         <div class="carousel-img col-md-6 col-md-offset-1 hidden-sm hidden-xs mt48">
                             <img class="img-responsive" src="/web/image/website.s_banner_default_image" alt="Banner Odoo Image"/>
@@ -195,8 +195,8 @@
     <section class="s_three_columns">
         <div class="container">
             <div class="row">
-                <div class="col-md-4 mt16">
-                    <img class="img img-rounded img-responsive" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
+                <div class="col-md-4 mt32 mb48">
+                    <img class="img img-responsive" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
                     <h4 class="mt16">Feature One</h4>
                     <p>
                         Adapt these three columns to fit you design need.
@@ -204,8 +204,8 @@
                         column and use the top icons to perform your action.
                     </p>
                 </div>
-                <div class="col-md-4 mt16">
-                    <img class="img img-rounded img-responsive" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
+                <div class="col-md-4 mt32 mb48">
+                    <img class="img img-responsive" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
                     <h4 class="mt16">Feature Two</h4>
                     <p>
                         To add a fourth column, reduce the size of these
@@ -214,8 +214,8 @@
                         one as a copy.
                     </p>
                 </div>
-                <div class="col-md-4 mt16">
-                    <img class="img img-rounded img-responsive" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
+                <div class="col-md-4 mt32 mb48">
+                    <img class="img img-responsive" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
                     <h4 class="mt16">Feature Three</h4>
                     <p>
                         Delete the above image or replace it with a picture
@@ -237,16 +237,6 @@
     </div>
 </template>
 
-<template id="s_quote" name="Quote">
-    <blockquote class="s_quote">
-        <p>
-            Write a quote here from one of your customers. Quotes are a
-            great way to build confidence in your products or services.
-        </p>
-        <p><small>Author of this quote</small></p>
-    </blockquote>
-</template>
-
 <template id="s_panel" name="Panel">
     <div class="panel panel-default o_panel s_panel">
         <div class="panel-heading ">
@@ -373,11 +363,11 @@
     </section>
 </template>
 
-<template id="s_button" name="Button">
-    <section class="jumbotron s_button">
+<template id="s_button" name="Call to Action">
+    <section class="jumbotron s_button bg-gray-lighter">
         <div class="container">
             <div class="row">
-                <div class="col-md-9 text-muted">
+                <div class="col-md-9">
                     <p class="mb0">
                         <strong>50,000+ companies run Odoo to grow their businesses.</strong>
                     </p><p class="mb0">
@@ -386,8 +376,8 @@
                 </div>
                 <div class="col-md-3">
                     <a href="/page/website.contactus" class="btn btn-primary btn-lg pull-right mt8">
-                        <i class="fa fa-arrow-right"></i>
                         Contact Us Now
+                        <i class="fa fa-chevron-right"></i>
                     </a>
                 </div>
             </div>
@@ -460,47 +450,25 @@
 <template id="s_references" name="References">
     <section class="s_references">
         <div class="container">
-            <h1 class="text-center">Our References</h1>
-            <h3 class="text-center text-muted">More than 500 happy customers.</h3>
-
-            <div class="row">
-                <div class="col-md-4 col-xs-12 col-md-offset-1 mt16 mb32">
-                    <blockquote>
-                        <p>
-                            Write a quote here from one of your customers. Quotes are a
-                            great way to build confidence in your products or services.
-                        </p>
-                        <small>Author of this quote</small>
-                    </blockquote>
-                </div>
-                <div class="col-md-4 col-xs-12 col-md-offset-2 mt16 mb32">
-                    <blockquote>
-                        <p>
-                            Odoo provides essential platform for our project management.
-                            Things are better organized and more visible with it.
-                        </p>
-                        <small>John Doe, CEO</small>
-                    </blockquote>
-                </div>
-            </div>
+            <h2 class="text-center">Our References</h2>
             <div class="row">
                 <div class="col-md-2 col-sm-4 col-xs-6">
-                  <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-4 col-xs-6">
-                  <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-4 col-xs-6">
-                  <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-4 col-xs-6">
-                  <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-4 col-xs-6">
-                  <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_5" class="img img-responsive " alt="Demo Logo"/>
                 </div>
                 <div class="col-md-2 col-sm-4 col-xs-6">
-                  <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
+                  <img src="/web/image/website.s_reference_demo_image_6" class="img img-responsive " alt="Demo Logo"/>
                 </div>
             </div>
         </div>
@@ -511,45 +479,45 @@
     <section class="s_feature_grid">
         <div class="container">
             <div class="row">
-                <div class="col-md-5">
+                <div class="col-md-5 col-md-offset-1">
                     <div class="col-md-12 mt16 mb16">
-                        <h2>List of Features</h2>
-                        <h4 class="text-muted">Add a great slogan</h4>
+                        <h3 class="mb0">List of Features</h3>
+                        <h5 class="text-muted mb16">Add a great slogan</h5>
                     </div>
                     <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-3x fa-comment pull-left mb16"></span>
-                        <h3 class="mt0 mb0">Change Icons</h3>
-                        <p>Click on the icon to adapt it to your feature</p>
+                        <span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16"></span>
+                        <h4 class="mt0 mb0">Change Icons</h4>
+                        <p>Click on the icon to adapt it to your feature</p><br/>
                     </div>
                     <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-3x fa-columns pull-left mb16"></span>
-                        <h3 class="mt0 mb0">Duplicate</h3>
-                        <p>Duplicate blocks to add more features.</p>
+                        <span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16"></span>
+                        <h4 class="mt0 mb0">Duplicate</h4>
+                        <p>Duplicate blocks to add more features.</p><br/>
                     </div>
                     <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-3x fa-user pull-left mb16"></span>
-                        <h3 class="mt0 mb0">Delete Blocks</h3>
-                        <p class="text-muted">Select and delete blocks to remove some features.</p>
+                        <span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16"></span>
+                        <h4 class="mt0 mb0">Delete Blocks</h4>
+                        <p>Select and delete blocks to remove some features.</p><br/>
                     </div>
                 </div>
-                <div class="col-md-5 col-md-offset-2">
+                <div class="col-md-5">
                     <div class="col-md-12 mt16 mb16">
-                        <h2>Second List</h2>
-                        <h4 class="text-muted">Add a great slogan</h4>
+                        <h3 class="mb0">Second List</h3>
+                        <h5 class="text-muted mb16">Add a great slogan</h5>
                     </div>
                     <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-3x fa-magic pull-left mb16"></span>
-                        <h3 class="mt0 mb0">Great Value</h3>
+                        <span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16"></span>
+                        <h4 class="mt0 mb0">Great Value</h4>
                         <p>Tell features the visitor would like to know, not what you'd like to say.</p>
                     </div>
                     <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-3x fa-bolt pull-left mb16"></span>
-                        <h3 class="mt0 mb0">Change Background</h3>
+                        <span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16"></span>
+                        <h4 class="mt0 mb0">Change Background</h4>
                         <p>From the main container, you can change the background to highlight features.</p>
                     </div>
                     <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-3x fa-picture-o pull-left mb16"></span>
-                        <h3 class="mt0 mb0">Sample images</h3>
+                        <span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16"></span>
+                        <h4 class="mt0 mb0">Sample images</h4>
                         <p>All these icons are licensed under creative commons so that you can use them.</p>
                     </div>
                 </div>
@@ -649,7 +617,6 @@
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
-                    <t t-snippet="website.s_quote" t-thumbnail="/website/static/src/img/blocks/block_quote.png"/>
                     <t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
                     <t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
                     <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>