Merge pull request #153 from maboiteseo/main

Intégration pages principales

ui/src/main/resources/templates/compensation.html

@@ -47,9 +47,11 @@
             <div class="container">
                <div class="row justify-content-between align-items-center">
                   <div class="col-12 col-md-8 col-lg-8 text-center text-md-left">
-                        <h1 class="display-2 mb-4">Compensation écologique </h1>
-                        <p class="lead mb-4 text-muted">Nous compensons le poids écologique de votre achat en reversant <b>20% de notre chiffre d'affaire</b>. Vous trouverez ici plus d'explications sur ce principe de compensation carbone, ainsi que le total et l'historique des sommes reversées.</p>
-                    </div>
+                        <h1 class="display-2 mb-4">La compensation carbone expliquée</h1>
+                        <th:block th:with="path='WIDGETS/compensation-1/'">
+        <th:block th:insert="inc/wiki.html"></th:block>
+		</th:block> 
+						</div>
                   <div class="col-12 col-md-4 d-none d-md-block text-center"><img src="../../assets/img/illustrations/about-illustration.svg" alt=""></div>
                </div>
             </div>
@@ -63,16 +65,16 @@ <h1 class="display-2 mb-4">Compensation écologique </h1>
                         <img class="organic-radius img-fluid" src="../../assets/img/illustrations/compensation-carbone.jpg" alt="Compensation carbone">
                     </div>
                     <div class="col-lg-7 ">
-                        <h2 class="h1 mb-5">Principe</h2>
+                        <h2 class="h1 mb-5">Le principe de la compensation écologique et environnementale</h2>
 
                         <blockquote class="blockquote text-center">
                     "La compensation carbone consiste à essayer de contrebalancer ses propres émissions de CO₂ par le financement de projets de réduction d'autres émissions ou de séquestration de carbone."
 							<footer class="blockquote-footer mt-3 text-primary"><a href="https://fr.wikipedia.org/wiki/Compensation_carbone" target="_blank">Wikipedia</a></footer>
 			</blockquote>
-
-                        <p class="lead">Chez <a href="nudger.fr">nudger.fr</a>, nous reversons 20% de notre chiffre d'affaires à des associations ou organismes défendant et oeuvrant pour la cause environnementale. Nous étendons de ce fait 
-                        le principe de compensation carbone (les financements ne sont pas uniquement alloués à des organismes proposant de la séquestration carbone) car nous considerons que la problématique écologique est un sujet global (climat, biodiversité, etc.).</p>                       
-                    </div>
+					                        <th:block th:with="path='WIDGETS/compensation-2/'">
+        <th:block th:insert="inc/wiki.html"></th:block>
+		</th:block> 
+                       </div>
                 </div>
             </div>
         </section>
@@ -117,6 +119,29 @@ <h3 class="h5">Montant reversé</h3>
                 </div>
             </div>
         </section>
+		        <section class="section section-md">
+            <div class="container">
+                <div class="row d-flex flex-wrap align-items-center justify-content-around">
+
+                    <div class="col-">
+                        <h2 class="h1 mb-5">Pourquoi effectuer un acte de compensation carbone ?</h2>
+						<div>
+                        <th:block th:with="path='compensation-3'">
+							<th:block th:insert="inc/wiki.html"></th:block>
+						</th:block>   
+							</div>
+                    </div>
+					                    <div class="col-">
+                        <h2 class="h1 mb-5">À quelles associations ou organismes sont reversés les fonds de Nudger ?</h2>
+						<div>
+                        <th:block th:with="path='compensation-4'">
+							<th:block th:insert="inc/wiki.html"></th:block>
+						</th:block>   
+							</div>
+                    </div>
+					<button class="btn btn-secondary animate-up-2" type="button"><a href="https://nudger.fr/">Je nudge mes achats</button>
+            </div>
+        </section>