From 0cdfbc0fbe6aabb9745bbef341c61462c256aa67 Mon Sep 17 00:00:00 2001
From: stefanorigano <stefano.rigano@gmail.com>
Date: Wed, 31 Aug 2016 11:49:21 +0200
Subject: [PATCH] [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
---
 addons/website/data/website_data.xml          |  50 ++++++-
 .../src/img/snippets_demo/s_references_1.png  | Bin 0 -> 1487 bytes
 .../src/img/snippets_demo/s_references_2.png  | Bin 0 -> 1746 bytes
 .../src/img/snippets_demo/s_references_3.png  | Bin 0 -> 5408 bytes
 .../src/img/snippets_demo/s_references_4.png  | Bin 0 -> 3264 bytes
 .../src/img/snippets_demo/s_references_5.png  | Bin 0 -> 8965 bytes
 .../src/img/snippets_demo/s_references_6.png  | Bin 0 -> 4082 bytes
 .../static/src/less/website.snippets.less     |  14 +-
 addons/website/views/snippets.xml             | 123 +++++++-----------
 9 files changed, 101 insertions(+), 86 deletions(-)
 create mode 100755 addons/website/static/src/img/snippets_demo/s_references_1.png
 create mode 100755 addons/website/static/src/img/snippets_demo/s_references_2.png
 create mode 100755 addons/website/static/src/img/snippets_demo/s_references_3.png
 create mode 100755 addons/website/static/src/img/snippets_demo/s_references_4.png
 create mode 100755 addons/website/static/src/img/snippets_demo/s_references_5.png
 create mode 100755 addons/website/static/src/img/snippets_demo/s_references_6.png

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 0000000000000000000000000000000000000000..9790446aa04f4ae936be901bbbe4f632c8dd9b5d
GIT binary patch
literal 1487
zcmZ{kdr;C@6vu&|;UiFdhO`={r8!!-ij(C76~T&OtSs?`Aet}ol_i=cl#aOND^0Ua
zm$1@VxAK*bj1~#W#!~Z<wrj~q<3h`tshhfL>`$9*|7bch_ndP-^F7~tXYR}`2%wUY
zdKf(j1cE%^PdoyFKzZOo>i{4roOw_U7Ipw7&=0H{jYc34fO%?a3d~@%wzgVXSy3pI
zoSd8uu%2)@9GGb|+7|*gK0ZE0MMYra=H~X9vskRBPoE|wC4G_E+1Y_T27^ho&7y<n
zS*IPL9))nOZR3VhOBbItr0qdY+e(iS3{6Lc?AO}S4+~n*FxQzwUVBnELm*o34-mZr
zIlrm9yL7oY6NuOyUyUVx2<3NZie^e^Z^B`q<+p;H<LLH|-AN$}N3%&6!={O4o)6ml
zTO$5M8D>zj)YY$3r*Me8?E12C{oFxUuaZH@$F<3n7H8~hhy9QBEwA)1CwBI232lxt
z0e~&Cw<@uWYZSv+oZ=TiPtU&NU*YB9pk0O5$Khtz%=6R9zaSiPP2=qwaRM9rr6eFQ
zS$p!8SSS}Kvzdfo<{$i9JluR3Ba&dwGaw@nI^-E&8C-&>P&pv%4D+nvaFgAz1faB3
zJWiNpD2625%gL$IA;J?Hn?-<nS~R&d!n$N_@SSG)myl`C$c4yDh#ptCiP#Xs!Nkg`
zvGOP0K)Mg$rH|<-i@}NKxr(Z#Dn_`HTGI_ls4ZIK#hmwO-k$*j)W%!4>eOchNk#~L
zVI!;k6E6*Y0Y^pS9iF^Xi;c7)K|=uxW2;c0d)|Q&j}4r-078>hucli(DHa3^-^DZH
z<zY+##22WJK{UFcG6iqdhn)fD9Gat#b4KkPusU@H?xXGwt|Y<xS?<Rn@tzuOv_C3R
zVYSq+_-UjI56t?$By3`;1%Zx<PA0!nukTpE0ZfwW)2!ZPYift%;5MgO$ANqqPZn_(
zQ*reIMg6<M)yy`FQ^Hb?G}`{T{^*!q&)-3<rU%K*H#!3zsy%*$?dm-`DM@E{MftV7
z$Ym<b-Xu_(cXb*)0`gs>eUT0eb{{M6*t*V*911MW%c+ZU!JZw!JSzCUy_s-u@9e(T
zl0LB{*m!%6Cp}`d9pjj<nkFE1nitFK&!=U#6RuaGbj`ts;-qX|fr;K^(H@frVjZGz
z0!pPQ##xSbKUgS}pC($>LPaTaP$`MN3Tvp)EiD=4syz}I<y$oK+;UnCYR<eP_~zM$
zV6a06V2Xz$jD;_b@=Ch7+mG>Kqd|F+@JiwnFKwM=#Ki8QEA=7g<len;1TWP*z4oL#
z{nforZ&zRlI}S_HdZ`{;J@FoqX#|(pT{SR^leXCjjttj-&}hglhyUrF(Y>5qS5+2c
z8`qXZ>yR)7mMSG)DB=l2ZYLJC*U+s)Feu;pkTdt1R4Tmi7BnT}<ATQ8LPT=GW2Yl;
z){g01<YoR}_!V$s<qxGrpXcm<-XS8jx?n$j8peRO<`<w%dr12-3vuW{o<C?Jiz2Wu
zf?}3yKylgvre(v4gWxZwf{uHU^&#<Kr6HB^y!EM3?p?E35R4;6w1vIeLcB=EB4kAr
zr)_K6Ka}tc{tk3f-~|nvGAdVI$(+~S!)iR%Op2EkqW{c0kPZViPE+L(<tqFM;6cc&
zX<TnUHnZ?KA^Se|^s-+SUEzeK_V}mY9^)WKf;KBRRLSE#*ViX@0+GiqeYxmfq;kc}
zWynH_w*(^jX#7x5StfGe#%;Kip1yLtZ<1wm&TP@rv#z5mI#*dYi2Z<4kEEweNbj&^
zJ(Ej9XJtm=*FVzINdtY|b*#0P^Ovsm*MbdF2FV&eeBbENNt^ZU0Y577t`Fn<zjWfE
A>i_@%

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..a1fc7a53d01ad76536dd13b51dc67b96cbf738d0
GIT binary patch
literal 1746
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
J-R4Ef_!EAWMlJvV

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..6169ff4583719ce1f064fe8e7efd978739e021ae
GIT binary patch
literal 5408
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

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..08a7777f55ee44a9b4d90345a2f57788750ea7e0
GIT binary patch
literal 3264
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
U<BgW4t-*i&2rHyzEzCFhe+U{8E&u=k

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..122542479d84321a5a9802a297b5407012b9da41
GIT binary patch
literal 8965
zcmZ9SRZtwzvaV+s9D)URcXwxScY-?v8G^gJOK^9G;1Jw{1c%`68r&^#Id@l`Q?<Kl
zb$@?XKlQ354;`tZB>f2y9}xfme3F%sPy+yffgcMO9`uokJ#WwX5L_w>8j>IK{rw#T
z0)6=ZHE3w)|8RSI`~CerEG+DQBq}QE;o+gHt1Af!$=cf5<>lqe%L_k0e_vnU$jHcl
zYH)CHC@3gCn2?ZAQ&Y3Dvhst^&dxqO4GoQ`sAy<tC_Fs8x3~9y>ZhltKL8mSnVXxN
zjg1Wp3kx3~UrtW$Be}D)gMfg*!op%;U|?!$8W0eWmzOs`KQAdMsidUzQNX~!5EB!V
zkdW}f78Vx8#l;_hfr0Vio0^(*b#*`B!ypg{Iy$<LkdVE-eO+DMf0AlyY9El9nfV`?
znwt6__%Dx$i1=TbkB(j4<(7X03l}vdb%4jK3`h>{`4eu8_oFJprC-HXkdNnhRJbDX
z;X1)iTcWZr+VW7reW^BeD8}{V%*lQqUBK;JQ$tZ|$ggh3h1@K?x@7EA&A1jMikh>L
zAMqM29qj4cWEs4qn8t=?;2TQ;CtDkKk@k21fDBJoLR7<J<+Sf(GXa2r{C^cV6;S_!
z|7Yn!FW=-Skaqxn?*eg7w{det56pk`s?ga?MXTtjrykzn+lp{SIU(#xeQOs~&d9&c
zg~x=WCCC$GC@~`cH$3&^y!fvfaLCDBe}80iD=VaYhemQ%ul-E`M7@J*NFGg+p^OVJ
z)Ko4>R!tNk4<3|)cELMRol0QH5vPumcFTx1RiUBUsm{igjFeG@O{XcUrEkD(bnszP
zi}j&Lq96L5Djth)pwEwD|0gJc+RR1$Q>w1m2pCf)Zge}orB>Mn6W{9^Tao|JmgL#g
ztq~telZtA49wUPGw+2Ok0Uwug8ZLnKvc6P6E{SG3O27G!tS+GL59%`mUBYc*Mioc|
z!&wOODWFIl-j}RLvZEoZ6XuaM8Fp1`rtpBA;|ad*Z?fW89?&=fvlFpFL8EqY)_fx^
zb`%|ORx%fBxQ*||lQDxy2+;m6$Hn|EWMtT=a_pr=>(gL;x)8@3w>w2XB*#JMbbQfR
zycsbMtW!fVWRCL+TU)(ap2y|T;84AeANqPD+3FgNbyEcl?ovm{D!gqX%DIFDBsg7~
z>Ov!Owk@{!R$jf9pXUB$6F75XibObQ+Q0o)R#T&qYiRS^*z_N*8?O+1$@uT6Rdu;*
zF-8>~+J~ouq)B22G^-vewd>)ZOlfda;ct%E{4hyD@SGXU4mtUhEVH1=wLOF;@1z!}
zE2OC#@i@DVeYki+tZNChiEqGQ(mRx6waJkDvghayz&z7<H?0mi<S#yel@20Dy{V-n
z^yXurjMPgw1{p|FcK|TnO&06w3ie{F``b&7TFRM=@^``++d3_N;g2puKB&VPMzE9<
zcK>zs1Y{sNj}{@$V|<J++(_8v1#s|GN`<VCr?w*Dy2CB6PGWEkdxBz6+<$}qv7-9$
zrbaW&U^hmyMHl2|v+J>LlT4mb+~WcC)maR$;{ah^EVuwSv!xDoHTZ#?@vz!a(caUZ
zZGXH+oEvW>2RQDQTx<!0WkfiAoY12O?TAFn`iau&v&pG+?tT)~N(yfP)V<&%15$%2
z;TC~4S#%zN>5iGQ#)N3ui8G^U$=ZLfDnL`RD@*|?olV>4Cl=h?K~YUU^$?d~vTY-p
z_UX_smF{Bg=Fd?F3K{H{fdN;i?{Zh4>Qb<X>!=)=$~1GGaLT`0Hz;rtRDgoVw9Ic9
z#ubx5l8_m!VDBpW-*H8obbDNTp7^!39NnYVQ-_n^7^Nf9h8I)vA~D?ScnW7(vYaiU
z2{!a2$J6OiwhpxK8~SKaTogk>9Lw~b1YK4q$HwH9Rs1So=A_{=h_2cB^hz}0>{wjp
z<}Ok0>w<0t7~W~hu_M|_>xGXU{z63aC+AV{&vhIRlsy2a_x4jS%_Lj+JF7>yQFH2h
zrqb*LjlS3TMx7IlSC_Y2N189i=Fnbqi0TC!Drl<Zy2FGwnu8KaY+cnhz`BDOA&&Rk
zf!0(SlL^;c<Y=c)0QbbQ5j8|b***3Wd8$~`w*s{eNN+8${E?_Layn(c8xL7EW3Em0
zla)7JjsoeXvS-{s03*d}lZy4lK>{$Kr@T1TG3xs&k3kYGG4<7#ZoxOd-f5wjMClOp
z3R?lTTt{HSAO?KZ#k?sA>S`%m7G&kiK|t1y3ul)UySz*vl*rEp4F?Z|NbU(hM~})J
zJ$A1lhr3bWJ`+d4y8U4v+;++tT=Y1Tu`q)|-t7?J><{#BTw|ey(h>5m3dd<zV>*yM
zV~7(z`#eho4+0GrH+V}z^xMG~r9J?KVh!jqc#M4E8Q_5R;LGC1^8+PfK^RpzI&$GM
zXmBZm1vBR?Kk0G9>tw+sHk5c!BqygB8+5NXmXsJB5=^^j;2DK;3V;IPT!msbx^UeC
zs-2pjI7(&Rd{YQ!l<y})=o~4dc3;W1G4~L8g7l#fX-RpUD)Zq#j{PKWJIB)-iOJ_U
zN?KEuX1Ai7A1jpx?$jK2h7TPbFL3xof`&brhV=_wxe5+$UIH$vEtY)+467fP%DDu;
zut0uZ#^AayoU6Ke*OBk1FyQ<1Q_k~G>nI@_+=jOx&#%{I$uvXn=k{x@$8{*o85*kZ
zfXq?PFbL7~@=bxk2L45+?Ys|zE+OW1O18K7q|R|=&Y5I)YWY*r)E>)b8*Wsdx&Etu
zvfejYcwo<z;PZgeT-1`oDy)C6U8!#`Plg7WzVq9;kKW?RRQN&I#SgAoYMS>$4-(bx
z$0x>lL`f#VZzl9M*u%7jggGk_>YqvFM`$P<>%T6P*N130DRG;EFIPstT^(NgA@X_;
zX3|MTW}<mA7lIaWPC6OFnGV!E%#IvjF()JH5!Wi={d}$us0vgAOd5$kd82TLsJ06v
zGrLs*F#EKi-Qnqb1eo4+2M{~Ws&qX)QJa39F79!|`JH~(*b-T8?Jqc;ZFH@H1LF~C
z&4{(ET!i~702^)DOwYk72k3E>LW6O1fcOi>%CG05KW(c-95!Q^X51gOT8Q$>wT0k*
zN(H9T-bZ>?@3edKzbd5ZJo#6p8(LPcNXhdkz$9-v7RjmcCi;F#hS(p}uEN1oc(e;m
zSs^=r#S7*V$$>hQ3lM%}OY(S&a7tm5yq0rYqELAQe`nrNxDP+%EXZjFpIZS$;zYU;
zZ^3i}KDEt}xOy+J^CC+FZKtTSgoTabNGhRcWAw!ao4=O6l5>1_D~E!KvEhDwrgxKJ
z4FA?lN%;-tc5E~!8|<4^I^i}D_C9aOB-dqIflQp2cfnR_P)(W2@$=|%TK%+C;j8gF
zsUG5nw3RbwSE-~kZz;bvgFG)Wc{3)O*w8}?NzJqM#4VDb5RzZdq9NROmb^)WY^W4A
zTm}V)RTJkxCY9ql^Ib9!0&G#2FfOv!O!KdDQ1I+s!l0a!fH8g>9~39oh0aYlZoS`t
z9=U<mBz~dm0#>p(#!qo+C2$$nvgWWNUE2wzi|Q$|9((2k+*u%|5J6k@4Y9uh)V<8u
zVn_YfVmB$zQN>Ya=)YXzK^2`S#j!CXR&3iJEb_M9i7>n|J&g~+quK0+WC5inGs_*|
z4WaXLsBFYeOa+l+a{%Hp`n2+{AvN257PzUj(6at7-BO^1R9magOKfL$uJ}1-k3sYq
zU34rGL@&R&Rd-~Qwr1KI5puA&wD`J|B#Ve~R6KNT8Kay|_SJBIYJo_D{};w}zln+j
z^W5Ip<fW`*L4`QT#Uzl3fOM$i&<MBui1sB(yy=@qvPJ?YtPKMj{i3%IRS_04{}0u%
zTZ_+T=yoCUKvHb2ZaPY_e66!)Fc96QjKIrqQS-^gfw>NbT-`zeDNUgc3HCNHNA*ZJ
z<{#|Mm*f1v1@1)u2D<^w<Q^>nyazQWY9_$-qgC7^%U!3tE1Ak?7jg<*6hn<%caMIZ
znFJ&ty#&(Lwya81iGwH&9rRbFwc^<LY1&<L-I4`d*t{Z%7}8`tJQ%>qt*M&&Qq5d7
z;P&u^Bay40HCwa(2&^!9`2=mV9<m8xK>+{tE)CYusX}Zv&O^b1sGk9Fs_0e*ULykL
zwbIl!4TBXetf>&Czy;a!iH?|SYp)j1mB`qk)K*(JM~+?mt1{<S1$fd-RDmPMYVZx4
z(Zc|5FZUIaG|5clPp=3=bjz?>B|kKyo_=S-gdOjh(e$m5VVoI)<+8xv?<3owc`dzI
z7V+Y__BC5YBQNvKilrbPtwKFM9u7f)4Qt4HN1+M4UB404>V+>H4A{0fY4UVOb>hjn
z>KaZ6Hn~iM6o0ri%$f@SnwN^}7Y61WW4^E-JD|Q(pBvdb@BvRMcMb+pSs&nR`&y%B
zws{oWhv6tHIA==u#IQ{UoYz8J9mJ51;3Om^AiO?A0K_zRt7-i8!>mI%g=_3gc9>UJ
z{juWUYk`B+oqQ<pGUfQv-YS`1dnO5H<rlq)i82fefuJgTKE+G6Xp+Ayg`0GFx+Q3s
zU(BI0cg3Fut|$!GbTMBEOy=o|(k|-6bt%s9@AMpH^ilK88qUVY>QNFC6cH67cX8A@
zYrG!c*2=gOKFta`efIk;vE_w9=`gTf{UG^{EA^dbjP~G?<Nh?*TM?{P^8$&~S#I>1
zw`kClcAij@@RVGp^~q8-oW=?{)<yU$e}dzJVZhCjw19#((K1s&A^l5hRmWhPvbEs^
z<>@5Lm~{SE-OSPU!{FExOn2sxNi$<b=7I#7iL}(cHCbHE$Q7^iK=PCp!?BMa+LdLW
zLo*Mt?`#nb4sLqm;;0))v@>(4$ceAswfD1>!hHqVTuqs{!e{Sx&6^B$&)D4fCb55`
zVTGiu5|z)1mCuwbt1GqBHCm9k2RnO`^yC0Ow`x_TvHW3zNABN?X$)UV_!dT|8R?p9
zsHrqF^w_20FJng#&kwmBoH(WZWSe*KQ&q&}BqK|TzzHlOHt2aaY^QLYW6dnbfL{J6
z6Im>(RAe9#3H;NB_F{O%<;J6_EL$gVsLq84SU;#h@#Z>`t$cm{W3vqgKU)Qrd)w<r
z?2x4e!f+zF8V$K{q#YDXBpv2rG^!k!bT*o2Hw*c6)kmVeSTR3@Z8Kpj5dZE>$atPz
z{g`p^&oMRb!UMK?KaZ#-<4oWB>Zf*WBd~5NjYA=N;9Sj?S`t8ReGTZodv=n^WHe>k
zC(hij!in4|L<uO;+2USE+m9~R%t%TAlj_P(PklVE<f)Q1X_Ur_j<O3_n5GLqWVN$c
z8R>|Vw7*WePW|3w^xtn@jaDbhXN}+#BdQ4@8jZRN6YZm3vSJ)_L;JG=q*Tewc2cg|
z|1*CgNo9F3Rd=x>$KP9l{__#`HYB(8yh#00kNyuK?<=h$w2z3iTTv>@S2nT3a-3)V
zU|z0v6$+V7>i}mTZfa&igu>H<aTT3P^%fEnlCrj|!Eh}g;5j@zoF<f*@!reB``g^a
z6Uv6*a|aAui?f>P4`eS5zNE$Y%f3f<=g5U42NoNMOl{(i07D~UsN^EcT-@^FiYgFz
zqasqPhifYYZ?I%ZY!Zt{X%U7Gzq>Wgh&{vPK=*U9xy8>d;<~wXZJ*wDz5OcKdM@_1
zV_Cn%n3xNnXqz|-<k4yhs&uPWj4be#GuBT)4U4Qof&Zw_N#k|Zl2VI!S?yY>Vx2FW
z!FuWzW!4EdH(gy-5^9Tb@n^sYRgv8!{4qE}DgTc?h9zFt@9kO~?@%!YUHjG8-m*3o
z$4L`uq)a{Mi{#5gae8L%71{mhH+E|6DwXSt$r!qb+SozWY#%+pFEuUC#1AJ!mo&S2
zJc?P5dmW_rL*(k`zHkjZ^R}YO4E5M@E0ya=dhB}{`c|djT%@zr>4=tKAB_6OUzGb|
zn(k^TQ?<b5g{-GkccOr+upTKH8Djqt?EqmK*&1HDN%V0g*d!ra?n{`ecwXd1B|v*t
zknLd`HoXV#8=`jWEw^l-c7CEo7MqVbM+%!nJxw+8gONlA8BitehavCb#@6DAHt2<S
zze?67p$HGP{Ld6G9t!OVOAnr~KW95`h&)>^mMstYj9rUO)LboLk<%m*ezvYQ4=Faz
zR#DkfH6-vLujCyca?$o#ozSUmJv|Ag@)zZ_ZUIbrA`$65Op@7E%%6ph-SM+C+k?lI
zAGx?mO~(2wq$>#8zUtfGSD`seIG<kMMYmLbVM_EQm?F=Lsky!WJIu&)FOc9Kn0FuG
zH)V-04b=ce_}*{5Q;qq990P<Ldk*bgLaAjo67RA8kPPRKyx!Gyzg@a?Kfa9X`6T&C
zo}#CEr)zLd$)P6lzchS9b`&aA8Nitdf<4PivbsiOc9iUM3p!w16qP-GT)f`;i-PUX
znWscG+if^-k>3l39SpyVjTBwR*2?S_Ur@NA9P@b9uxDTjp@uc5NckyipiraBCu1N%
zsJX@3T?f0i>k>d3@x*;3b`<P7?Y|8DD1*9m!!i{y(xR>^00>pn(APN>^MYefQ$~&2
zPFM^dLw>JJM?0L$*rmS<^>sMFVSEB*n#p}$O-bZ6OBPKg-kmXlmsG{w?YyHm8m|bk
zitGN;-;(5uDWt-wjM(1>A=71i?B}~tesc|oz;bAZzrsICF6@ey<JB4qWti8zmCAyN
z7PC5-GT!-Oz~Q$|bV-zYCC(|ra5vGrr(-NHplhJ6crL^96&U|Ap#Leo^=-T_EGmWh
zP+du|`SnXGMmI~#U@2<na^jpV?U*E}$8s)KZnY2mmJ+FK7{QrJznV0$ee-<-f%M=k
z(6hYxMN$Cf$Y58-rT4w|w^ld914h?2JF3lcopg1!VB#pHr4nG@P*E6f6%u={HARTt
zSf+I1^!!Qb+aNod0CBUkVCU!QKGK&4pI|oGS(}6e<5JZIK3(q2m933Gb}25q)>uCi
zNu?gP&>Cd(3?+LaAroaVllq8#pY(r}87(1k@D{k15kBT*RFl%6S(VY)>AcOVM<%=C
z76FjxbU|j$EeK)7#*i+$mp=n_)`J-)=QBYQL6*V(Jmb63O+-2jl7WR)Iz;d_vUG6+
zp&*oVZ<@GT-XFZ7eoCT=98y;L9vGa%LrS#E7iBO1%#UDe9KW6iU`Gr5*?$vasyBJ}
z4{kwn$SjlYRl6>+V7vj|x1KavX{=!{&C6YdExZGE?1;c%f(k+Z3GVN!s^Qe}yXpaX
z=ei=NHm<+6vjx}|MJR#GBm*W63C490#qBkG4()Qakqm!L#N9xq#0xbqeC!`66fT-(
z71KNy-Pn~<J#M5;w4?Tp7>xU~KTK!l*s-Ex6|Hi={|kvRR=xcGP9R^sh9DFS8ZIM|
z)#pDQd$ZiyvOs)z6q^deUQ<O4Qt^7npIpsx`}o3t<M-LO;oX>;>1H6F(zn=gOw%1I
zF<%oj1G!Ief7b%$6Z#f_W^tHDm<UXGPqIwb5Ne6x(*<YQR1pl9Nm7H=R4!{()7zY7
zdbQD{n(Rh$y57ROIBex85&AE?IcZ&-H-E>jA@dZHLP14&<nQdn?4omg?s$FAt5f80
zNfUEEI+gmid*iyCkv>{eRaG_4^A57e!(Oxx<4d7`+H?g5!jefn_asKVJ*axaVUi3`
zZqA7F^!{X}ZXsXJuJ#POVx}e>Ab4eEm7Yrc?tlv`SQF{C>78i;foG=2nn>(|%X83Q
zgL2TU{SH}HD44EM@H#3_`pN$%M1_V$r(<k0cjPTgSvzqmV0O+uNvp)EPhvG-0sIuF
ziF}4O2qWz#e){;rIQw;Z9vB$p-JJBd$;T4}cI}3cxk!^iR*!_4>gegW>WtHkstQ@n
z<M2oyTXhBTuhH#}d|;4nmzp+)W<%%qaxMOiy}7Nqw2>fW&5G&oRwM`5sr5uL{R^oI
zl+y(izk6atclKK6t;HcuV3cZuN-4HwseO*OFsYKq7;t`utkuj-(W%DNyk{gY^|c80
zya~aT?Oa;c3wz|Z8`rzM<{q#A#QxeUdxYc;r2|C&yJh+mx&D|}N&Y5v(t5D)m-)_X
zBSlSp5m?9BI19nLS;u4fTae*;c|z13PYZv2r`lrmjHdj?!PkYv@Hcrv9DJDLn}`6_
zT$%s3fVD*cn*gxxd%fpFA6!Hyyrv{i-MQ9EoU4zBZ%u`u_GbJ`wQu{FWaq22?qZQM
zr9#1s7kOz#rL+w)Z}w&-a`GBk7F8}wN204&*wks03{?0y`F>d6=Pk}<e|S};6~g83
zxr*bx#ZXs<BDHsyh+pY7nj>p=kSYp<pQdo|q1GF&;*IQqVcp1|gD`Z(ClB#<$M9OI
z-uuSZa(|tCR)#_-;czP3<5tr<XSzWWwVZE0GQ8J#?5B#-)L>00qM$>VYGFAoA3c=+
zhavNmsTW-c@zA0g&6$T9HK~JkUveIcp!ocggdcv-ZeZLBv^aeiDguC8x@i&hklOvg
zR$N$LfLF<c|B+lq!8GbqLE>+D_-=Yd|IT2p3;=h@>5+V5KW_AH6~Dz&K@Jt5P$?&~
zN}eVBApC{7F!JK4XqKnj4Y<-IdKl@%^MnQ+`FHAKfFI5TA3<i^^clrVZ>LE+%^b-A
zvtdFpy5hFuyCKR%k(Z5>q}CcV-{I@NV!lF%g2#Kx8y>F!d$RSne!e<-ekbAfoQ&0V
zUuBoIVvs|ZJr9au0GO=wXgPlA_7)?OSRpK1emV1jKy8D?%)GjZTaO;_tJ`ExICT+L
z#m?4uu0U-d>EF>w*hiC;qHP3gZ7r~RH8{Mh{t-UXWmVQD?SMkr=6q*fHV)cbZXyYW
zGWJ5y*dzU9S`1~dp~WWHy)%bVz8#J3Auk9v_4X&rA@jOCWV*l3T3EW^uqwkFNxQjZ
zp)T?vD(QpiGWQ!+udl$b&^sP1iB}#CZq1F|5FpZ>Fa@-#;%Di;&bB;=_E<=(j`i2i
z+0ek<lJIDYGo{yLX}7GM_Pc&qw#_=B)HGqU$Ap%@H)78P+Mktg62&d83!{7`4T6b?
zR3JBrul1lG3WD*}K)td$p0d@kSrl#Hx^BDtpkvg~i(JbumBB`*N$VL+G-~*22W%fj
zK!uy#!1fC@jv^-(c(G|`IBy~Grja8BGhdI-bypF<UH<OS1+jC5vrwpWEr4P-7uP{l
zj#f0V2R4a_T-mzO7@BVfCL@I0J16a<ENW9FL*|-{#@a(6SVk{sGILsvQXQfJaRZJ5
zZ~Y7*WX`~TblYR)R*Q0#CP8vmckE9aYSenWe=m+XeIOj{=tU}TA!ZFIPyYxCbq959
zk(AlnDB!ed@0?1S)Gi>&BxU52??HKtL8n{R4vvmwzr#YHvfYqm+ig>#z9rKGEPYM%
zo+_QLz-B+K{6LQ@Qp_WoYgg2NAL#u^XGJ}Ba!mi#bM#l=N?`cb!)Vv|eja4sClRPy
zk*z34A(c5?lNj8mu|~G7D!9FQey%2(QKvtp6C9Dmbok?Md87kK3oF-Dbq*G*R^0Bm
z!RqFF((8XZ-McMD>Rs-(PfR|bFZ&|n`P-oP1dh8X#f>GAOa6q!%7#cuLi+vS+2&vB
zOqBP2K*EenkO3>#{VEcmFDWB*z8nCJSQf-8N0ti}eO^$m`nP51$i2%Ik#R_F4}$S@
zn+<=R#=OEqu38t9dil$+-ibqY_?n5)NFVT-<+H#LBMIt&C>d4_-qmSJZorP!3ucg#
z`cuAh1kY0TaOkUf>>n8XSq}EVtl62BZ!cbf7!olltkx}la@1_`y-Z@-E@WLYfFTQ`
zY_THORqv~~Msq?lM-4^y9gttU6bPXf_ZqcUYD{&Um%_PkP8P2^CZ%5A8*|U!dTay~
z`2d7i6T>R0b4x2(^G;+9x7J2j6Lu5FYWb&M!_1dZFEO{Q7wOzP9Y|3pd7cgXT#tYf
zzA?Q^b|LkeMD4ZU$fOU(g2|tr{e5&Tg1Quv11UIkBd?egnAxUR$}c+f%a;8Xs&fpa
zjEcoT4xX0Z9)jYOSN=VoLjf@AnzeXY?@@5qM#)ic>+R%iARe9?lSbB_N)tLg6=o&@
z0|Bj!@g2R}85h25p+{twg452C=r8OEoQ>bE!6bn_RDc+&{rq8GHL5JqLwdTR)SNHN
zqlD0m0GG|DB5ELEIL=Bha|iBG7wx<N2ur5CU8+|9(Z#;YyRkJ&3IM(o>s*`nhf4XT
ztCn@%OWlKeL_vFZ!a~?_Qk_y*J*p@2UPOr6HOfUt7jV2bA;Re+t}_IFC)#|6T2JSL
z8~39r3wdp&LiFFN({W(15S-pFgL@`DM9_YCuqYz%o<qR?;^bavQ3gUgxg8Y-UCEj7
zu9Bh_ubDpakPBn6GJdykl-_ZH2M6I>O)mF5y^6u4PAjS_*jaK*e%7q5P~XZYjuPnc
z2Dd%H6xi%s%Qv6DFrZx4nU(z=+zCeM{kc`6KrrJuHKx;#&5kdQ%&TEE-{Vcdi=>P2
z)lGS?!P%-wEMO!W5<ox-D$#QM_iIsFr*ZX+;laDqJ`OFwPW3&v?7eUIRqO||LsG2l
zMtsZq_M7Sy=3#jxJ{G&@cm08Xn{}EO61LWU#KQ)&Bd(6MdY%u+Bhy!fFocai!~W(+
zKqYtb^i6(7V;Vkq3=>?GtG%hw@y2X5rzH6K{)(_#muff+l|jqHC)SNuK#E4Iyxu65
zr8FFYRJGvlKpSVKJE?@Eu*w=GKjz6m2WT=veoia8)7Jx(@97lyy+KEd4As7Uxu4W1
zIaa#8o@743JiNCi*z(e++Bk-?)G-vlGI!k68c9~HwS$(N^dAB+<Hf}Yyd!;?GT)fu
z`h+guYo6y<ruDM`{RkyBL~4Y2>+)s_cs2;!Q$p+gq({T2o6+>I75d1W=SO}7??n=U
zBCO0Sy;qOV3?*Dokg@DwS$Ju)<1w^@URpa9ZCk3@VRx2MwIL#nyxRH$QvkxLr4~;R
zxsNA&)5*1ylx%m?*_=7FhLNGslpRoSi<ZY#Y8JVFa(9(#I#0#8jZVRD72Y_7GbjwI
zcX}r15c0);?>-NxGD64BKipbBrv$3u!#cnONVC+Y8)lJHOGjMfzIqidG{y{<yyNW=
zBP(P?-iB<0X}h$;5;>q^CgoUm_~z|ujU!y%d7;-vf8(jvnGfYSbo`kgO>L#6Gr4^H
zZcSmR&L6!RTD{{ARpVN`Mi;>IOL2DZ!m{5YH%w^fyT_V{h1p)+2tpHVgQJvaor?Uy
z0m=xyxOkDna;IzxBewhq9<SYEe?R;FIbm<L#kv~M^|~*#O*?GyE#}E~F8RS3Ki<i+
zsSM0?k9T6k0;b0&lNU16vfIRMA(QgSPUD>REel>!%k!yzFVtVR%+<rWi-rUay8X`N
z`{QuYRXJ{@8<-!HJtK0qHlfrHM(cG<MJyyUw$+W|rlW(7^vDkk@gSq~E0)tp#OFHe
zd+<kc*8>?w;8cXX`A^je2sCnZ^mu5MHK4aD`Kp&Qzs!VZYDUWYR~CekW6d_&!=WyC
zc6It0nwA@Dq)#D3GUGc_?W#@tM@?o`vBY(oZGY{mRz;2vpp-5gACa%ZtJ2=rODwGs
z#4(7m3$)wty{W6WJ$R=Iz=zJowRmz9|8BCWid0}|jWj2yX1s{0`J|fsrdYZ1FE@$x
z)S-e9l}0Sn-|!$QlM`ZTf7TY?X;LQQ>n0`Su9Ht}L2Xk~ZM|EZTx<8Liyq~PaetQv
z_3zt_GZVG@=$EseKTdcl*qJg|cBrR`kcRY$`{Ts_8glr*afkm;q%1~Z$4Qz9v-`OJ
Oqh%$PBx=NrgZ>`}b57j=

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..d0dff1da902be60702f4e6a3be01898db05c2cd9
GIT binary patch
literal 4082
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
MY+M<Qn^~Oy0he+H%K!iX

literal 0
HcmV?d00001

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"/>