diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 77a799871d8..748433ad809 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1,6 +1,726 @@
 <?xml version="1.0" encoding="utf-8"?>
 <openerp>
 <data>
+
+<template id="s_banner" name="Banner">
+    <div id="myCarousel" class="carousel slide s_banner" data-interval="10000" style="height: 320px;">
+        <!-- Indicators -->
+        <ol class="carousel-indicators hidden">
+            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        </ol>
+        <div class="carousel-inner">
+            <div class="item active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
+                <div class="container">
+                    <div class="row content">
+                        <div class="carousel-content col-md-6 col-sm-12 mt64">
+                                <h2>Your Banner Title</h2>
+                                <h3>Click to customize this text</h3>
+                                <p>
+                                    <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
+                                </p>
+                        </div>
+                        <div class="carousel-img col-md-6 hidden-sm hidden-xs">
+                            <img class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%"><i class="fa fa-chevron-left"></i></div>
+        <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%"><i class="fa fa-chevron-right"></i></div>
+    </div>
+</template>
+
+<template id="s_text_image" name="Text-Image">
+    <section class="s_text_image">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 mt16">
+                    <h3>A Section Subtitle</h3>
+                    <p>
+                        Write one or two paragraphs describing your product or
+                        services. To be successful your content needs to be
+                        useful to your readers.
+                    </p><p>
+                        Start with the customer – find out what they want
+                        and give it to them.
+                    </p>
+                </div>
+                <div class="col-md-6 mt16">
+                    <img class="img img-responsive shadow mb16" src="/website/static/src/img/text_image.png"/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_image_text" name="Image-Text">
+    <section class="s_image_text">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 mt16">
+                    <img class="img img-responsive shadow mb16" src="/website/static/src/img/image_text.jpg"/>
+                </div>
+                <div class="col-md-6 mt16">
+                    <h3>A Section Subtitle</h3>
+                    <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><p>
+                        Start with the customer – find out what they want
+                        and give it to them.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_text_image_floating" name="Image Float">
+    <section class="s_text_image_floating">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12 mb16 mt16">
+                    <div class="o_image_floating o_margin_l pull-right">
+                        <div class="o_container">
+                            <img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"/>
+                            <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
+                        </div>
+                        <div class="o_footer">
+                            <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+                        </div>
+                    </div>
+                    <h3>What a day it was yesterday - such a big day for us!</h3>
+                    <p style="text-align: justify;">
+                        In case you still feel a bit puzzled about all
+                        of our yesterday's announcements, here is a little
+                        summary for you. <br/>
+                        We have decided to change the
+                        name because <b>"OpenERP"</b> didn't reflect the offering
+                        of the company anymore. With our newest apps, such
+                        as Website Builder, PoS or eCommerce, we have
+                        moved beyond the ERP territory. <br/>
+                        But <u>don't worry</u>, <b>Odoo</b> is and always will be
+                        fully open source. You can read more about the new name here.
+                        We have also prepared a short FAQ to explain all these changes
+                        to all of you. <br/>
+                    </p>
+                    <h3>Discover more about Odoo</h3>
+                    <p style="text-align: justify;">
+                        With Odoo's fully integrated software, you can easily manage your
+                        meetings, schedule business calls, create recurring meetings,
+                        synchronize your agenda and easily keep in touch with your colleagues,
+                        partners and other people involved in projects or business discussions.
+                        <br/><br/><a href="#">Check now and discover more today!</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_big_message" name="Big message">
+    <section class="jumbotron s_big_message">
+        <div class="container">
+            <h1>Sell Online. Easily.</h1>
+            <p>
+                Write one sentence to convince visitor about your message.
+            </p>
+            <p>
+                <a class="btn btn-primary btn-lg" href="/page/website.contactus">
+                    Contact us
+                </a>
+            </p>
+        </div>
+    </section>
+</template>
+
+<template id="s_text_block" name="Text Block">
+    <section class="s_text_block">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12 text-center mt16 mb32">
+                    <h2>
+                        A Great Headline
+                    </h2>
+                    <h3 class="text-muted">A good subtitle</h3>
+                </div>
+                <div class="col-md-12 mb16 mt16">
+                    <p>
+                        A great way to catch your reader's attention is to tell a story.
+                        Everything you consider writing can be told as a story.
+                    </p><p>
+                        <b>Great stories have personality.</b> Consider telling
+                        a great story that provides personality. Writing a story
+                        with personality for potential clients will asist with
+                        making a relationship connection. This shows up in small
+                        quirks like word choices or phrases. Write from your point
+                        of view, not from someone else's experience.
+                    </p><p>
+                        <b>Great stories are for everyone even when only written for
+                        just one person.</b> If you try to write with a wide general
+                        audience in mind, your story will ring false and be bland.
+                        No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_title" name="Title">
+    <section class="s_title">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <h1 class="text-center">Your Website Title</h1>
+                    <h3 class="text-muted text-center">And a great subtitle too</h3>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_features" name="Features">
+    <section class="s_features">
+        <div class="container">
+            <div class="row mt16 mb16">
+                <div class="col-md-4 text-center">
+                    <span class="fa fa-suitcase fa-5x"></span>
+                    <h3 class="mt8 mb0">First Feature</h3>
+                    <p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p>
+                </div>
+                <div class="col-md-4 text-center">
+                    <span class="fa fa-lock fa-5x"></span>
+                    <h3 class="mt8 mb0">Second Feature</h3>
+                    <p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p>
+                </div>
+                <div class="col-md-4 text-center">
+                    <span class="fa fa-heart fa-5x"></span>
+                    <h3 class="mt8 mb0">Third Feature</h3>
+                    <p class="text-muted">A small explanation of this great<br/>feature, in clear words.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_big_picture" name="Big Picture">
+    <section class="oe_dark s_big_picture">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12 text-center mt32 mb32">
+                    <h2>A Punchy Headline</h2>
+                </div>
+                <div class="col-md-12">
+                    <img class="img img-responsive" src="/website/static/src/img/big_picture.png" style="margin: 0 auto;"/>
+                </div>
+                <div class="col-md-6 col-md-offset-3 mb16 mt16">
+                    <p class="text-center">
+                        <b>A Small Subtitle</b>
+                    </p>
+                    <p class="text-center">
+                        Choose a vibrant image and write an inspiring paragraph
+                        about it. It does not have to be long, but it should
+                        reinforce your image.
+                    </p>
+                    <p class="text-center">
+                        <a href="/page/website.contactus">Contact us »</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_three_columns" name="Three Columns">
+    <section class="s_three_columns">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <img class="img img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
+                    <h4 class="mt16">Feature One</h4>
+                    <p>
+                        Adapt these three columns to fit you design need.
+                        To duplicate, delete or move columns, select the
+                        column and use the top icons to perform your action.
+                    </p>
+                </div>
+                <div class="col-md-4">
+                    <img class="img img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
+                    <h4 class="mt16">Feature Two</h4>
+                    <p>
+                        To add a fourth column, reduce the size of these
+                        three columns using the right icon of each block.
+                        Then, duplicate one of the column to create a new
+                        one as a copy.
+                    </p>
+                </div>
+                <div class="col-md-4">
+                    <img class="img img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
+                    <h4 class="mt16">Feature Three</h4>
+                    <p>
+                        Delete the above image or replace it with a picture
+                        that illustrates your message. Click on the picture to
+                        change it's <em>rounded corner</em> style.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_well" name="Well">
+    <div class="well s_well">
+        <p>
+            Explain the benefits you offer. Don't write about products or
+            services here, write about solutions.
+        </p>
+    </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="o_panel s_panel">
+        <div class="panel-heading">
+            <h3 class="panel-title">Feature Title</h3>
+        </div>
+        <div class="panel-body">
+            <p>
+                Panels are a great tool to compare offers or to emphasize on
+                key features. To compare products, use the inside columns.
+            </p>
+        </div>
+    </div>
+</template>
+
+<template id="s_image_floating" name="Image Floating">
+    <div class="o_image_floating o_margin_l pull-right s_image_floating">
+        <div class="o_container">
+            <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
+            <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
+        </div>
+        <div class="o_footer">
+            <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+        </div>
+    </div>
+</template>
+
+<template id="s_separator" name="Separator">
+    <hr class="s_separator"/>
+</template>
+
+<template id="s_share" name="Share">
+    <div class="oe_share s_share">
+        <h3>
+            Share
+            <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
+            <a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&amp;url={url}"><i class="fa fa-twitter"></i></a>
+            <a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;"><i class="fa fa-linkedin"></i></a>
+            <a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}"><i class="fa fa-google-plus-square"></i></a>
+            <a href="mailto:?body={url}&amp;subject={title}"><i class="fa fa-envelope-o"></i></a>
+        </h3>
+    </div>
+</template>
+
+<template id="s_image_gallery" name="Image Gallery">
+    <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
+        <div class="container">
+            <div class="alert alert-info css_editable_mode_display">Add Images from the 'Customize' menu</div>
+        </div>
+    </section>
+</template>
+
+<template id="s_comparisons" name="Comparisons">
+    <section class="s_comparisons">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 text-center mt16 mb32">
+                <h2>Our Offers</h2>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+                <div class="panel panel-info">
+
+                  <div class="panel-heading text-center">
+                      <h3 style="margin: 0">Beginner</h3>
+                      <p style="margin: 0" class="text-muted">
+                          Starter package
+                      </p>
+                  </div>
+                  <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                    <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">450</b><small>.00</small></h3>
+                    <div>per month</div>
+                  </div>
+
+
+                  <ul class="list-group">
+                    <li class="list-group-item active">Battery: 8 hours</li>
+                    <li class="list-group-item">Screen: 2.5 inch</li>
+                    <li class="list-group-item">Weight: 1.1 ounces</li>
+                    <li class="list-group-item">No support</li>
+                  </ul>
+                  <div class="panel-footer text-center">
+                      <p class="text-muted">
+                          <i>Free shipping, satisfied or reimbursed.</i>
+                      </p>
+                      <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
+                  </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="panel panel-primary">
+
+                  <div class="panel-heading text-center">
+                      <h3 style="margin: 0">Professional</h3>
+                      <p style="margin: 0">
+                          Enterprise package
+                      </p>
+                  </div>
+                  <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                    <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">590</b><small>.00</small></h3>
+                    <div>per month</div>
+                  </div>
+
+
+                  <ul class="list-group">
+                    <li class="list-group-item active">Battery: 12 hours</li>
+                    <li class="list-group-item">Screen: 2.8 inch</li>
+                    <li class="list-group-item">Weight: 1.2 ounces</li>
+                    <li class="list-group-item">Limited support</li>
+                  </ul>
+                  <div class="panel-footer text-center">
+                      <p class="text-muted">
+                          <i>Free shipping, satisfied or reimbursed.</i>
+                      </p>
+                      <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
+                  </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="panel panel-info">
+
+                  <div class="panel-heading text-center">
+                      <h3 style="margin: 0">Expert</h3>
+                      <p style="margin: 0" class="text-muted">
+                          The top of the top
+                      </p>
+                  </div>
+                  <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                    <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">890</b><small>.00</small></h3>
+                    <div>per month</div>
+                  </div>
+
+
+                  <ul class="list-group">
+                    <li class="list-group-item active">Battery: 20 hours</li>
+                    <li class="list-group-item">Screen: 2.8 inch</li>
+                    <li class="list-group-item">Weight: 1.2 ounces</li>
+                    <li class="list-group-item">Unlimited support</li>
+                  </ul>
+                  <div class="panel-footer text-center">
+                      <p class="text-muted">
+                          <i>Free shipping, satisfied or reimbursed.</i>
+                      </p>
+                      <a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
+                  </div>
+                </div>
+
+            </div>
+          </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_button" name="Button">
+    <section class="jumbotron s_button">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-9 text-muted">
+                    <p class="mb0">
+                        <strong>50,000+ companies run Odoo to grow their businesses.</strong>
+                    </p><p class="mb0">
+                        Join us and make your company a better place.
+                    </p>
+                </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
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_faq" name="FAQ">
+    <section class="s_faq">
+        <div class="container">
+            <h2 class="page-header">
+                Point of Sale Questions <small>v7</small>
+            </h2>
+            <h3>
+                Which hardware does Odoo POS support?
+            </h3>
+            <p>
+                Odoo's POS is a web application that can run on any device that
+                can display websites with little to no setup required.
+            </p><p>
+                The Point of Sale works perfectly on any kind of touch enabled
+                device, whether it's multi-touch tablets like an iPad or
+                keyboardless resistive touchscreen terminals.
+            </p>
+            <h3>
+                Does it works offline?
+            </h3>
+            <p>
+                Deploy new stores with just an internet connection: no
+                installation, no specific hardware required. It works with any
+                iPad, Tablet PC, laptop or industrial POS machine.
+            </p><p>
+                While an internet connection is required to start the Point of
+                Sale, it will stay operational even after a complete disconnection.
+            </p>
+
+            <h2 class="page-header">
+                Project Management Questions <small>v7</small>
+            </h2>
+            <h3>
+                Can I use it to manage projects based on agile methodologies?
+            </h3>
+            <p>
+                Yes.
+            </p>
+        </div>
+    </section>
+</template>
+
+<template id="s_references" name="References">
+    <section class="s_references">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <h1 class="text-center">
+                        Our References
+                    </h1>
+                    <h3 class="text-muted text-center">
+                        More than 500 happy customers.
+                    </h3>
+                </div>
+                <div class="col-md-4 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-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 class="col-md-2 col-md-offset-1">
+                    <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
+                </div>
+                <div class="col-md-2">
+                    <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
+                </div>
+                <div class="col-md-2">
+                    <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
+                </div>
+                <div class="col-md-2">
+                    <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
+                </div>
+                <div class="col-md-2">
+                    <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_quotes_slider" name="Quotes Slider">
+    <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider" data-interval="10000">
+        <!-- Indicators -->
+        <ol class="carousel-indicators mb0">
+            <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
+            <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
+        </ol>
+        <div class="carousel-inner">
+
+            <div class="item text_only active">
+                <div class="container">
+                    <div class="content">
+
+                        <div class="row">
+                            <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                    <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>
+                </div>
+            </div>
+
+            <div class="item text_only">
+                <div class="container">
+                    <div class="content">
+
+                        <div class="row">
+                            <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                    <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>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="s_feature_grid" name="Feature Grid">
+    <section class="s_feature_grid">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-5 text-center">
+                    <div class="col-md-12 mt16 mb16">
+                        <h2>List of Features</h2>
+                        <h4 class="text-muted">Add a great slogan</h4>
+                    </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>
+                    </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>
+                    </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>
+                    </div>
+                </div>
+                <div class="col-md-5 text-center col-md-offset-2">
+                    <div class="col-md-12 mt16 mb16">
+                        <h2>Second List</h2>
+                        <h4 class="text-muted">Add a great slogan</h4>
+                    </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>
+                        <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>
+                        <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>
+                        <p>All these icons are licensed under creative commons so that you can use them.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_parallax" name="Parallax">
+    <section class="parallax s_parallax"
+            style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
+            data-scroll-background-ratio="0.3">
+            <div><div class="oe_structure"/></div>
+    </section>
+</template>
+
+<template id="s_parallax_slider" name="Parallax Slider">
+    <section class="parallax s_parallax_slider"
+             style="background-image: url('/website/static/src/img/parallax/quote.png')"
+            data-scroll-background-ratio="0.3">
+        <div><div><div class="oe_structure">
+                <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
+                    <!-- Indicators -->
+                    <ol class="carousel-indicators mb0">
+                        <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
+                        <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
+                    </ol>
+                    <div class="carousel-inner">
+
+                        <div class="item text_only active">
+                            <div class="container">
+                                <div class="content">
+
+                                    <div class="row">
+                                        <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                            <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>
+                            </div>
+                        </div>
+
+                        <div class="item text_only">
+                            <div class="container">
+                                <div class="content">
+
+                                    <div class="row">
+                                        <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
+                                            <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>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+        </div></div></div>
+    </section>
+</template>
+
+
 <template id="snippets">
 <ul>
     <li class="active">
@@ -45,277 +765,16 @@
         </span> Structure
     </div>
     <div class="o_panel_body">
-
-        <div name="Banner" class="o_block_banner">
-            <div id="myCarousel" class="carousel slide s_banner" data-interval="10000" style="height: 320px;">
-                <!-- Indicators -->
-                <ol class="carousel-indicators hidden">
-                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-                </ol>
-                <div class="carousel-inner">
-                    <div class="item active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
-                        <div class="container">
-                            <div class="row content">
-                                <div class="carousel-content col-md-6 col-sm-12 mt64">
-                                        <h2>Your Banner Title</h2>
-                                        <h3>Click to customize this text</h3>
-                                        <p>
-                                            <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
-                                        </p>
-                                </div>
-                                <div class="carousel-img col-md-6 hidden-sm hidden-xs">
-                                    <img class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%"><i class="fa fa-chevron-left"></i></div>
-                <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%"><i class="fa fa-chevron-right"></i></div>
-            </div>
-        </div>
-
-        <div name="Text-Image" class="o_block_text_image">
-            <section class="s_text_image">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-6 mt16">
-                            <h3>A Section Subtitle</h3>
-                            <p>
-                                Write one or two paragraphs describing your product or
-                                services. To be successful your content needs to be
-                                useful to your readers.
-                            </p><p>
-                                Start with the customer – find out what they want
-                                and give it to them.
-                            </p>
-                        </div>
-                        <div class="col-md-6 mt16">
-                            <img class="img img-responsive shadow mb16" src="/website/static/src/img/text_image.png"/>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-
-        <div name="Image-Text" class="o_block_image_text">
-            <section class="s_image_text">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-6 mt16">
-                            <img class="img img-responsive shadow mb16" src="/website/static/src/img/image_text.jpg"/>
-                        </div>
-                        <div class="col-md-6 mt16">
-                            <h3>A Section Subtitle</h3>
-                            <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><p>
-                                Start with the customer – find out what they want
-                                and give it to them.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Image-Floating" class="o_block_image_float">
-            <section class="s_image_floating">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-12 mb16 mt16">
-                            <div class="o_image_floating o_margin_l pull-right">
-                                <div class="o_container">
-                                    <img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"/>
-                                    <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
-                                </div>
-                                <div class="o_footer">
-                                    <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
-                                </div>
-                            </div>
-                            <h3>What a day it was yesterday - such a big day for us!</h3>
-                            <p style="text-align: justify;">
-                                In case you still feel a bit puzzled about all
-                                of our yesterday's announcements, here is a little
-                                summary for you. <br/>
-                                We have decided to change the
-                                name because <b>"OpenERP"</b> didn't reflect the offering
-                                of the company anymore. With our newest apps, such
-                                as Website Builder, PoS or eCommerce, we have
-                                moved beyond the ERP territory. <br/>
-                                But <u>don't worry</u>, <b>Odoo</b> is and always will be
-                                fully open source. You can read more about the new name here.
-                                We have also prepared a short FAQ to explain all these changes
-                                to all of you. <br/>
-                            </p>
-                            <h3>Discover more about Odoo</h3>
-                            <p style="text-align: justify;">
-                                With Odoo's fully integrated software, you can easily manage your
-                                meetings, schedule business calls, create recurring meetings,
-                                synchronize your agenda and easily keep in touch with your colleagues,
-                                partners and other people involved in projects or business discussions.
-                                <br/><br/><a href="#">Check now and discover more today!</a>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Big Message" class="o_block_jumbotron">
-            <section class="jumbotron s_big_message">
-                <div class="container">
-                    <h1>Sell Online. Easily.</h1>
-                    <p>
-                        Write one sentence to convince visitor about your message.
-                    </p>
-                    <p>
-                        <a class="btn btn-primary btn-lg" href="/page/website.contactus">
-                            Contact us
-                        </a>
-                    </p>
-                </div>
-            </section>
-        </div>
-
-        <div name="Text Block" class="o_block_text_block">
-            <section class="s_text_block">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-12 text-center mt16 mb32">
-                            <h2>
-                                A Great Headline
-                            </h2>
-                            <h3 class="text-muted">A good subtitle</h3>
-                        </div>
-                        <div class="col-md-12 mb16 mt16">
-                            <p>
-                                A great way to catch your reader's attention is to tell a story.
-                                Everything you consider writing can be told as a story.
-                            </p><p>
-                                <b>Great stories have personality.</b> Consider telling
-                                a great story that provides personality. Writing a story
-                                with personality for potential clients will asist with
-                                making a relationship connection. This shows up in small
-                                quirks like word choices or phrases. Write from your point
-                                of view, not from someone else's experience.
-                            </p><p>
-                                <b>Great stories are for everyone even when only written for
-                                just one person.</b> If you try to write with a wide general
-                                audience in mind, your story will ring false and be bland.
-                                No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Title" class="o_block_title">
-            <section class="s_title">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h1 class="text-center">Your Website Title</h1>
-                            <h3 class="text-muted text-center">And a great subtitle too</h3>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Features" class="o_block_features">
-            <section class="s_features">
-                <div class="container">
-                    <div class="row mt16 mb16">
-                        <div class="col-md-4 text-center">
-                            <span class="fa fa-suitcase fa-5x"></span>
-                            <h3 class="mt8 mb0">First Feature</h3>
-                            <p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p>
-                        </div>
-                        <div class="col-md-4 text-center">
-                            <span class="fa fa-lock fa-5x"></span>
-                            <h3 class="mt8 mb0">Second Feature</h3>
-                            <p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p>
-                        </div>
-                        <div class="col-md-4 text-center">
-                            <span class="fa fa-heart fa-5x"></span>
-                            <h3 class="mt8 mb0">Third Feature</h3>
-                            <p class="text-muted">A small explanation of this great<br/>feature, in clear words.</p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Big Picture" class="o_block_big_picture">
-            <section class="oe_dark s_big_picture">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-12 text-center mt32 mb32">
-                            <h2>A Punchy Headline</h2>
-                        </div>
-                        <div class="col-md-12">
-                            <img class="img img-responsive" src="/website/static/src/img/big_picture.png" style="margin: 0 auto;"/>
-                        </div>
-                        <div class="col-md-6 col-md-offset-3 mb16 mt16">
-                            <p class="text-center">
-                                <b>A Small Subtitle</b>
-                            </p>
-                            <p class="text-center">
-                                Choose a vibrant image and write an inspiring paragraph
-                                about it. It does not have to be long, but it should
-                                reinforce your image.
-                            </p>
-                            <p class="text-center">
-                                <a href="/page/website.contactus">Contact us »</a>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Three Columns" class="o_block_three_columns">
-            <section class="s_three_columns">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img class="img img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
-                            <h4 class="mt16">Feature One</h4>
-                            <p>
-                                Adapt these three columns to fit you design need.
-                                To duplicate, delete or move columns, select the
-                                column and use the top icons to perform your action.
-                            </p>
-                        </div>
-                        <div class="col-md-4">
-                            <img class="img img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
-                            <h4 class="mt16">Feature Two</h4>
-                            <p>
-                                To add a fourth column, reduce the size of these
-                                three columns using the right icon of each block.
-                                Then, duplicate one of the column to create a new
-                                one as a copy.
-                            </p>
-                        </div>
-                        <div class="col-md-4">
-                            <img class="img img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
-                            <h4 class="mt16">Feature Three</h4>
-                            <p>
-                                Delete the above image or replace it with a picture
-                                that illustrates your message. Click on the picture to
-                                change it's <em>rounded corner</em> style.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
+        <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
+        <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
+        <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
+        <t t-snippet="website.s_text_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
+        <t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
+        <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/blocks/block_text_block.png"/>
+        <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
+        <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
+        <t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
+        <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
     </div>
 </div>
 
@@ -326,69 +785,12 @@
         </span> Content
     </div>
     <div class="o_panel_body">
-
-        <div name="Well" class="o_block_well">
-            <div class="well s_well">
-                <p>
-                    Explain the benefits you offer. Don't write about products or
-                    services here, write about solutions.
-                </p>
-            </div>
-        </div>
-
-        <div name="Quote" class="o_block_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>
-        </div>
-
-        <div name="Panel" class="o_block_panel">
-            <div class="o_panel s_panel">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Feature Title</h3>
-                </div>
-                <div class="panel-body">
-                    <p>
-                        Panels are a great tool to compare offers or to emphasize on
-                        key features. To compare products, use the inside columns.
-                    </p>
-                </div>
-            </div>
-        </div>
-
-        <div name="Image Floating" class="o_block_image_floating">
-            <div class="o_image_floating o_margin_l pull-right s_image_floating">
-                <div class="o_container">
-                    <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
-                    <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
-                </div>
-                <div class="o_footer">
-                    <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
-                </div>
-            </div>
-        </div>
-
-        <div name="Separator" class="o_block_separator">
-            <hr class="s_separator"/>
-        </div>
-
-        <div name="Share" class="o_block_button">
-            <div class="oe_share s_share">
-                <h3>
-                    Share 
-                    <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
-                    <a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&amp;url={url}"><i class="fa fa-twitter"></i></a>
-                    <a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;"><i class="fa fa-linkedin"></i></a>
-                    <a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}"><i class="fa fa-google-plus-square"></i></a>
-                    <a href="mailto:?body={url}&amp;subject={title}"><i class="fa fa-envelope-o"></i></a>
-                </h3>
-            </div>
-        </div>
-
+        <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_separator" t-thumbnail="/website/static/src/img/blocks/block_separator.png"/>
+        <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
     </div>
 </div>
 
@@ -399,334 +801,13 @@
         </span> Feature
     </div>
     <div class="o_panel_body">
-
-        <div name="Image Gallery" class="o_block_image_gallery">
-            <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
-                <div class="container">
-                    <div class="alert alert-info css_editable_mode_display">Add Images from the 'Customize' menu</div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Comparisons" class="o_block_comparison">
-            <section class="s_comparisons">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-md-12 text-center mt16 mb32">
-                        <h2>Our Offers</h2>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-md-4">
-                        <div class="panel panel-info">
-
-                          <div class="panel-heading text-center">
-                              <h3 style="margin: 0">Beginner</h3>
-                              <p style="margin: 0" class="text-muted">
-                                  Starter package
-                              </p>
-                          </div>
-                          <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">450</b><small>.00</small></h3>
-                            <div>per month</div>
-                          </div>
-
-
-                          <ul class="list-group">
-                            <li class="list-group-item active">Battery: 8 hours</li>
-                            <li class="list-group-item">Screen: 2.5 inch</li>
-                            <li class="list-group-item">Weight: 1.1 ounces</li>
-                            <li class="list-group-item">No support</li>
-                          </ul>
-                          <div class="panel-footer text-center">
-                              <p class="text-muted">
-                                  <i>Free shipping, satisfied or reimbursed.</i>
-                              </p>
-                              <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
-                          </div>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="panel panel-primary">
-
-                          <div class="panel-heading text-center">
-                              <h3 style="margin: 0">Professional</h3>
-                              <p style="margin: 0">
-                                  Enterprise package
-                              </p>
-                          </div>
-                          <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">590</b><small>.00</small></h3>
-                            <div>per month</div>
-                          </div>
-
-
-                          <ul class="list-group">
-                            <li class="list-group-item active">Battery: 12 hours</li>
-                            <li class="list-group-item">Screen: 2.8 inch</li>
-                            <li class="list-group-item">Weight: 1.2 ounces</li>
-                            <li class="list-group-item">Limited support</li>
-                          </ul>
-                          <div class="panel-footer text-center">
-                              <p class="text-muted">
-                                  <i>Free shipping, satisfied or reimbursed.</i>
-                              </p>
-                              <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
-                          </div>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="panel panel-info">
-
-                          <div class="panel-heading text-center">
-                              <h3 style="margin: 0">Expert</h3>
-                              <p style="margin: 0" class="text-muted">
-                                  The top of the top
-                              </p>
-                          </div>
-                          <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">890</b><small>.00</small></h3>
-                            <div>per month</div>
-                          </div>
-
-
-                          <ul class="list-group">
-                            <li class="list-group-item active">Battery: 20 hours</li>
-                            <li class="list-group-item">Screen: 2.8 inch</li>
-                            <li class="list-group-item">Weight: 1.2 ounces</li>
-                            <li class="list-group-item">Unlimited support</li>
-                          </ul>
-                          <div class="panel-footer text-center">
-                              <p class="text-muted">
-                                  <i>Free shipping, satisfied or reimbursed.</i>
-                              </p>
-                              <a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
-                          </div>
-                        </div>
-
-                    </div>
-                  </div>
-                </div>
-            </section>
-        </div>
-
-
-        <div name="Button" class="o_block_button">
-            <section class="jumbotron s_button">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-9 text-muted">
-                            <p class="mb0">
-                                <strong>50,000+ companies run Odoo to grow their businesses.</strong>
-                            </p><p class="mb0">
-                                Join us and make your company a better place.
-                            </p>
-                        </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
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-
-        <div name="FAQ" class="o_block_faq">
-            <section class="s_faq">
-                <div class="container">
-                    <h2 class="page-header">
-                        Point of Sale Questions <small>v7</small>
-                    </h2>
-                    <h3>
-                        Which hardware does Odoo POS support?
-                    </h3>
-                    <p>
-                        Odoo's POS is a web application that can run on any device that
-                        can display websites with little to no setup required.
-                    </p><p>
-                        The Point of Sale works perfectly on any kind of touch enabled
-                        device, whether it's multi-touch tablets like an iPad or
-                        keyboardless resistive touchscreen terminals.
-                    </p>
-                    <h3>
-                        Does it works offline?
-                    </h3>
-                    <p>
-                        Deploy new stores with just an internet connection: no
-                        installation, no specific hardware required. It works with any
-                        iPad, Tablet PC, laptop or industrial POS machine.
-                    </p><p>
-                        While an internet connection is required to start the Point of
-                        Sale, it will stay operational even after a complete disconnection.
-                    </p>
-
-                    <h2 class="page-header">
-                        Project Management Questions <small>v7</small>
-                    </h2>
-                    <h3>
-                        Can I use it to manage projects based on agile methodologies?
-                    </h3>
-                    <p>
-                        Yes.
-                    </p>
-                </div>
-            </section>
-        </div>
-
-
-        <div name="References" class="o_block_references">
-            <section class="s_references">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h1 class="text-center">
-                                Our References
-                            </h1>
-                            <h3 class="text-muted text-center">
-                                More than 500 happy customers.
-                            </h3>
-                        </div>
-                        <div class="col-md-4 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-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 class="col-md-2 col-md-offset-1">
-                            <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
-                        </div>
-                        <div class="col-md-2">
-                            <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
-                        </div>
-                        <div class="col-md-2">
-                            <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
-                        </div>
-                        <div class="col-md-2">
-                            <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
-                        </div>
-                        <div class="col-md-2">
-                            <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
-        <div name="Quotes Slider" class="o_block_quotes_slider">
-            <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider" data-interval="10000">
-                <!-- Indicators -->
-                <ol class="carousel-indicators mb0">
-                    <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
-                    <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
-                </ol>
-                <div class="carousel-inner">
-
-                    <div class="item text_only active">
-                        <div class="container">
-                            <div class="content">
-
-                                <div class="row">
-                                    <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                            <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>
-                        </div>
-                    </div>
-
-                    <div class="item text_only">
-                        <div class="container">
-                            <div class="content">
-
-                                <div class="row">
-                                    <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                            <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>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div name="Feature Grid" class="o_block_features">
-            <section class="s_feature_grid">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-5 text-center">
-                            <div class="col-md-12 mt16 mb16">
-                                <h2>List of Features</h2>
-                                <h4 class="text-muted">Add a great slogan</h4>
-                            </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>
-                            </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>
-                            </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>
-                            </div>
-                        </div>
-                        <div class="col-md-5 text-center col-md-offset-2">
-                            <div class="col-md-12 mt16 mb16">
-                                <h2>Second List</h2>
-                                <h4 class="text-muted">Add a great slogan</h4>
-                            </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>
-                                <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>
-                                <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>
-                                <p>All these icons are licensed under creative commons so that you can use them.</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-
+        <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/>
+        <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/blocks/block_comparison.png"/>
+        <t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
+        <t t-snippet="website.s_faq" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
+        <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
+        <t t-snippet="website.s_quotes_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
+        <t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
     </div>
 </div>
 
@@ -737,70 +818,8 @@
         </span> Effect
     </div>
     <div class="o_panel_body">
-
-        <div name="Parallax" class="o_block_parallax">
-            <section class="parallax s_parallax"
-                    style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
-                    data-scroll-background-ratio="0.3">
-                    <div><div class="oe_structure"/></div>
-            </section>
-        </div>
-
-        <div name="Parallax Slider" class="o_block_quotes_slider">
-            <section class="parallax s_parallax_slider"
-                     style="background-image: url('/website/static/src/img/parallax/quote.png')"
-                    data-scroll-background-ratio="0.3">
-                <div><div><div class="oe_structure">
-                        <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
-                            <!-- Indicators -->
-                            <ol class="carousel-indicators mb0">
-                                <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
-                                <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
-                            </ol>
-                            <div class="carousel-inner">
-
-                                <div class="item text_only active">
-                                    <div class="container">
-                                        <div class="content">
-
-                                            <div class="row">
-                                                <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                                    <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>
-                                    </div>
-                                </div>
-
-                                <div class="item text_only">
-                                    <div class="container">
-                                        <div class="content">
-
-                                            <div class="row">
-                                                <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
-                                                    <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>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
-                </div></div></div>
-            </section>
-        </div>
-
+        <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/>
+        <t t-snippet="website.s_parallax_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
     </div>
 </div>
 </div>
@@ -974,8 +993,8 @@
     </div>
 
     <div data-js='content'
-        data-selector="blockquote, .well, .panel-default, .oe_share, .o_image_floating"
-        data-drop-near="p, h1, h2, h3, blockquote, .well, .panel-default, .oe_share"
+        data-selector="blockquote, .well, .s_panel, .oe_share, .o_image_floating"
+        data-drop-near="p, h1, h2, h3, blockquote, .well, .s_panel, .oe_share"
         data-drop-in=".content">
     </div>