Make adjustments to the homepage. Curved shapes for each section still posing a problem

assets/scss/custom.scss

@@ -42,21 +42,21 @@ $icon-yellow: #fcc958;
 }
 
 // Colored design element: square or circle
-@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
+@mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -35%, $pos-left: 50%) {
     position: relative;
     z-index: 1;
     &:before {
         content: '';
         position: absolute;
-        width: 45px * $scale;
+        width: 100px * $scale;
-        height: 45px * $scale;
+        height: 100px * $scale;
-        left: 50%;
+        left: $pos-left;
-        top: -7%;
+        top: $pos-top;
-        margin-left: -14px;
+        margin-left: -35px;
         background-color: $color;
         z-index: 0;
         @if $shape == 'circle' {
-            border-radius: 25px;
+            border-radius: 35px;
           }
         @else {
             border-radius: 0;
@@ -71,9 +71,13 @@ header.header {
 main > section {
     &.hero {
         background-color: $bg-dark-blue;
-        @include add-bg-pattern(1);
+        //@include add-bg-pattern(1);
-        @include add-horizontal-curve(1, bottom);        
+        //@include add-horizontal-curve(1, bottom);
         h1 { color: $text-green; }
+        #curve-1 {
+          position: absolute;
+          bottom: 0;
+        }
     }
     &.section-1 {
         li { font-weight: 600; }
@@ -85,7 +89,7 @@ main > section {
         background-color: $text-green;
         //@include add-horizontal-curve(4, bottom);
         h2 {
-            @include add-decorative-shape($icon-red, 'circle');
+            @include add-decorative-shape($icon-red, 'circle', .7, -30%, -10%);
         }
     }
     &.section-4 {
@@ -101,7 +105,7 @@ main > section {
     &.section-7 {
         background-color: $text-green;
         h2 {
-            @include add-decorative-shape($icon-yellow);
+            @include add-decorative-shape($icon-yellow, 'square', .7, -30%, -15%);
         }
     }
 }
@@ -109,11 +113,14 @@ main > section {
     margin-top: 4rem;
     @include add-horizontal-curve(3, top);
     &:before {
-        top: -70px;
+        top: -100px;
     }
 }
 
 section {
+    h2.title {
+      color: #0c362d;
+    }
     // Centered text
     &.big-text,
     &.li-block {
@@ -179,6 +186,10 @@ section {
                 }
             }
         }
+      // button styling
+      a.btn-chill {
+        background-color: #fc3636;
+      }
     }
 }
 

content/francais/_index.md

@@ -15,7 +15,7 @@ banner:
 features:
 
   - #1
-    class: section-sm li-block
+    class: section-md li-block
     image: /images/svg/curve-10.svg ##
     title: 
     content:
@@ -32,9 +32,9 @@ features:
   - #2
     class: section-sm big-text
     image: /images/svg/curve-20.svg ##
-    title: 
+    title: CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées.
     content: > 
-      CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées.
+#      CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées.
     bulletpoints: 
     button:
       enable: false
@@ -73,8 +73,8 @@ features:
   - #5
     class: li-block
     image: /images/svg/curve-30.svg ##
-    title: #Mais aussi...
+    title: Mais aussi...
-    content: texte #CHILL est un logiciel professionnel conçu selon les standards de développement actuels.
+    content: #CHILL est un logiciel professionnel conçu selon les standards de développement actuels.
     bulletpoints: 
     - <h4 class='mb-4'>Responsive et accessible depuis n’importe quel support informatique</h4> (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs.
     - <h4 class='mb-4'>Propose une solution clé en main</h4> <i>backend-frontend</i> aux nombreuses possibilités de paramétrage, qui peut être adaptée et installée dans différentes infrastructures techniques.
@@ -100,19 +100,4 @@ features:
       label: Button label
       link: #
 
-  - #7
-    class: li-block
-    image: /images/svg/curve-40.svg ##
-    title: Ce qu'il faut retenir
-    content:
-    bulletpoints: 
-    - une application qui facilite et améliore l’accompagnement social
-    - un logiciel libre et clé en main, flexible et adaptable à de nombreuses réalités
-    - un compagnon efficace, efficient et intuitif
-    - une interface intuitive, rapide et facile au quotidien
-    button:
-      enable: false
-      label: Button label
-      link: #
-
 ---

content/francais/sections/testimonial.md

@@ -1,7 +1,7 @@
 ---
 enable: true
 title: "Ce qu'en disent les utilisateurs"
-description: "description"
+description:
 
 # Testimonials
 testimonials:

themes/hugoplate/layouts/index.html

@@ -44,10 +44,10 @@
             class="{{ if not (modBool $i 2) }}
               md:order-1
             {{ end }} md:col-7 lg:col-6">
-            <h2 class="mb-4">
+            <h2 class="mb-4 title">
               {{ .title | markdownify }}
             </h2>
-            <p class="mb-8 {{ if and .class (in .class "big-text") }}text-xl{{ else }}text-lg{{ end }}">
+            <p class="mb-8">
               {{ .content | markdownify }}
             </p>
             <ul>