réglages

assets/images/svg/curve-2.svg

@@ -4,9 +4,9 @@
   <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none" id="g2" transform="matrix(1,0,0,0.99256931,0,1.1145986)" style="display:inline">
     <path
        d="m 0,90.877057 c 144,11.800003 432,56.400003 719.99999,59.000003 288.00001,2.6 576.00001,-36.8 720.00001,-46 V -1.1229428 H 0 Z"
-       fill="#184a7e" id="path1" />
+       fill="#43b29d" id="path1" />
     <path
        d="M 0,7.4984182 C 279.30004,136.66106 461.78548,-19.058828 1440,16.877057 V -0.56147279 H 0 Z"
-       fill="#ffffff" id="path2" transform="translate(0,-0.56147001)" />
+       fill="white" id="path2" transform="translate(0,-0.56147001)" />
   </g>
 </svg>

assets/images/svg/curve-4.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="1440"
+   height="180"
+   preserveAspectRatio="none"
+   viewBox="0 0 1440 180"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <g
+     mask="url(&quot;#SvgjsMask1900&quot;)"
+     fill="none"
+     id="g4"
+     transform="matrix(-1,0,0,0.99256931,1440,1.114599)"
+     style="display:inline;fill:#ffffff">
+    <path
+       d="M 1440,54.288803 C 1029.7929,-51.934711 370.34866,55.72286 0,44.910164 V 180.22459 h 1440 z"
+       fill="white"
+       id="path2" />
+  </g>
+</svg>

assets/scss/custom.scss

@@ -44,7 +44,7 @@ $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: -70px) {
     position: relative;
     z-index: 1;
     &:before {
@@ -52,7 +52,7 @@ $icon-yellow: #fcc958;
         position: absolute;
         width: 45px * $scale; 
         height: 45px * $scale;
-        left: -70px; 
+        left: $pos; 
         top: -20px;
         background-color: $color;
         z-index: 0;
@@ -70,24 +70,24 @@ header.header {
     background-color: $bg-dark-blue;
 }
 main > section {
+    h2 {
+        width: fit-content;
+    }
     &.hero {
         background-color: $bg-dark-blue;
         @include add-bg-pattern(1);
         @include add-horizontal-curve(1, bottom);        
-        h1 {
+        h1 { color: $text-green; }
-            color: $text-green;
-        }
     }
     &.section-1 {
-        li {
+        li { font-weight: 600; }
-            font-weight: 600;
-        }
     }
     &.section-2 {
-        background-color: $bg-light-blue;
+        background-color: transparentize($color: $text-green, $amount: 0.7)
     }
     &.section-3 {
         background-color: $text-green;
+        @include add-horizontal-curve(4, bottom);
         h2 {
             @include add-decorative-shape($icon-red, 'circle');
         }
@@ -96,55 +96,78 @@ main > section {
         @include add-horizontal-curve(2, bottom);
     }
     &.section-5 {
-        background-color: transparentize($color: $text-green, $amount: 0.7)
+        background-color: transparentize($color: $text-green, $amount: 0.5)
     }
     &.section-6 {
         background-color: $bg-dark-blue;
         @include add-bg-pattern(1);        
     }
     &.section-7 {
-        background-color: $bg-light-blue;
+        background-color: $text-green;
         h2 {
             @include add-decorative-shape($icon-yellow);
         }
     }
 }
 .dark > footer {
+    margin-top: 4rem;
     @include add-horizontal-curve(3, top);
     &:before {
         top: -70px;
     }
 }
 
-
+section {
-// Change bulletlists rendering in flex bloc
+    // Change bulletlists rendering in flex bloc
-section.section-1,
+    &.li-block {
-section.section-5,
+        .container .row {
-section.section-7 {
+            & > div {
-    .container .row {
+                &:last-child {
-        & > div {
+                    width: 100%;
-            &:last-child {
+                }
-                width: 100%;
+                h2, p {
-            }
+                    margin-left: auto;
-            h2, p {
+                    margin-right: auto;
-                //text-align: center;
+                }
-            }
+                ul {
-            ul {
+                    display: flex;
-                display: flex;
+                    li {
-                li {
+                        i:first-child {
-                    i:first-child {
+                            display: none;
-                        display: none;
+                        }
+                        flex: 1 0 0;
+                        margin: 0.5em;
+                        padding: 1.5em;
+                        text-align: center;
+                        border-radius: 4px;    
+                        background-color: #ffffff3b;
                     }
-                    flex: 1 0 0;
-                    margin: 0.5em;
-                    padding: 1.5em;
-                    text-align: center;
-                    //border: 1px solid #767676;
-                    border-radius: 4px;    
-                    background-color: white;
                 }
             }    
         }
+        // Add custom colored icons on each item 
+        &.section-1 {
+            ul li {
+                &:nth-child(1) {
+                    @include add-decorative-shape($text-green, 'square', 0.7, 110px);
+                }
+                &:nth-child(2) {
+                    @include add-decorative-shape($icon-red, 'circle', 0.7, 110px);
+                }
+                &:nth-child(3) {
+                    @include add-decorative-shape($chill-orange, 'square', 0.7, 110px);
+                }
+                &:nth-child(4) {
+                    @include add-decorative-shape($icon-yellow, 'circle', 0.7, 110px);
+                }
+            }
+        }    
+    }
+    // Only big centered text
+    &.big-text {
+        p.text-xl {
+            font-size: 1.4rem;
+        }
     }
 }
 
@@ -158,9 +181,16 @@ section.section-7 {
         border: 1px solid $btn-orange;
         border-radius: 2em;
     }
+}
 
+// Dark but only in sections
+section.dark {
     p {
         color: white;
         font-weight: bolder;
     }
 }
+
+.btn {
+    text-transform: unset;
+}

content/francais/_index.md

@@ -15,7 +15,7 @@ banner:
 features:
 
   - #1
-    class: 
+    class: section-sm li-block
     image: /images/svg/curve-10.svg ##
     title: 
     content:
@@ -30,8 +30,8 @@ features:
       link: #
 
   - #2
-    class: 
+    class: section-sm big-text
-    image: /images/service-2.png
+    image: /images/svg/curve-20.svg ##
     title: 
     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.
@@ -59,7 +59,7 @@ features:
       link: #
 
   - #4
-    class: 
+    class: big-text
     image: /images/bg/pattern-10.png ##
     title:
     content: > 
@@ -71,10 +71,11 @@ features:
       link: start/user
 
   - #5
-    class: 
+    class: li-block
     image: /images/svg/curve-30.svg ##
-    title: 
+    title: Mais aussi...
-    content: 
+    content: > 
+      my-content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu lobortis elementum nibh tellus molestie nunc. Vestibulum lorem sed risus ultricies tristique nulla aliquet.
     bulletpoints: 
     - "**Responsive et accessible depuis n’importe quel support informatique** (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs."
     - "**Propose une solution clé en main** *backend-frontend* aux nombreuses possibilités de paramétrage, qui peut être adaptée et installée dans différentes infrastructures techniques."
@@ -86,11 +87,11 @@ features:
       link: #
 
   - #6
-    class: dark
+    class: dark big-text
     image: /images/service-3.png
     title: 
     content: > 
-      **Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**
+      Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.
       <br><br>
       CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain.
       <br><br>
@@ -101,8 +102,8 @@ features:
       link: #
 
   - #7
-    class: 
+    class: li-block
-    image: /images/svg/curve-20.svg ##
+    image: /images/svg/curve-40.svg ##
     title: Ce qu'il faut retenir
     content:
     bulletpoints: 

themes/hugoplate/layouts/index.html

@@ -8,7 +8,7 @@
             <h1 class="mb-4">
               {{ .title | markdownify }}
             </h1>
-            <p class="mb-8">
+            <p class="mb-8 text-lg">
               {{ .content | markdownify }}
             </p>
             {{ with .button }}
@@ -31,7 +31,7 @@
 
   <!-- Features -->
   {{ range $i, $e:= .Params.features }}
-    <section class="section-sm section-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
+    <section class="section section-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row items-center justify-between">
           <div
@@ -47,7 +47,7 @@
             <h2 class="mb-4">
               {{ .title | markdownify }}
             </h2>
-            <p class="mb-8 text-lg">
+            <p class="mb-8 {{ if and .class (in .class "big-text") }}text-xl{{ else }}text-lg{{ end }}">
               {{ .content | markdownify }}
             </p>
             <ul>