home features-box text

src/app/components/home/home.component.html

@@ -32,37 +32,42 @@
 
 
 <!--Section: Features v.1-->
-<section class="section feature-box" id="features">
+<section class="section feature-box wow fadeInUp" id="features">
 
   <!--Section heading-->
-  <h1 class="section-heading pt-4">Why is it so great?</h1>
+  <h1 class="section-heading pt-4">Comment ça marche ?</h1>
   <!--Section description-->
-  <p class="section-description lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+  <p class="section-description lead grey-text"><label class="font-bold">ParraineTesAmis.com</label> est le 1er site de parrainage en ligne !
+    <br>Les <label class="font-bold">Commerçants</label> créent des offres de parrainage et élisent des <label class="font-bold">Parrains</label>.
+    <br>Les parrains reçoivent leurs <label class="font-bold">Cartes de parrainage</label> numériques et les transfèrent à leurs Filleuls.
+    <br>Dès lors qu'un Filleul réalise un achat chez un Commerçant, la Carte de parrainage correspondante est créditée.
+  </p>
 
   <!--Grid row-->
   <div class="row features-big">
 
     <!--Grid column-->
-    <div class="col-md-4 mb-r">
-      <i class="fa fa-area-chart red-text"></i>
-      <h5 class="feature-title">Analytics</h5>
-      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
+    <div class="col-md-4 mb-r wow fadeInLeft">
+      <i class="fa fa-handshake-o blue-text"></i>
+      <h5 class="feature-title">Commercant</h5>
+      <p class="grey-text">Les Commerçants fixent leurs offres de parrainages.<br>Exemple: 5€ de remise pour le Filleul.<br>5€ de remise pour le Parrain</p>
+
     </div>
     <!--Grid column-->
 
     <!--Grid column-->
-    <div class="col-md-4 mb-r">
-      <i class="fa fa-book cyan-text"></i>
-      <h5 class="feature-title">Tutorials</h5>
-      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
+    <div class="col-md-4 mb-r wow fadeInUp">
+      <i class="fa fa-euro blue-text"></i>
+      <h5 class="feature-title">Parrain</h5>
+      <p class="grey-text">Les Parrains sont récompensés sur leur Carte à chaque fois qu'un parrainage aboutie.<br>Les filleuls profitent de bons plans.</p>
     </div>
     <!--Grid column-->
 
     <!--Grid column-->
-    <div class="col-md-4 mb-r">
-      <i class="fa fa-coffee orange-text"></i>
+    <div class="col-md-4 mb-r wow fadeInRight">
+      <i class="fa fa-line-chart blue-text"></i>
       <h5 class="feature-title">Relax</h5>
-      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
+      <p class="grey-text">Les Parrains cumulent des récompenses toute l'année.<br> Les Commerçants voient leurs fréquentation augmenter.</p>
     </div>
     <!--Grid column-->
 

src/app/components/home/home.component.scss

@@ -40,10 +40,18 @@ body {
 
 .feature-box {
   width: 98%;
-  padding-left: 3%;
+  padding-left: 5%;
   padding-right: 5%;
 }
 
+.feature-box > p {
+  font-size: 1.3rem;
+}
+
+.features-big p {
+  font-size: 1.25rem;
+}
+
 .features {
   align-items: center;
   display: flex;