suite

assets/images/svg/curve-2.svg

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg version="1.1" width="1440" height="150" preserveAspectRatio="none" viewBox="0 0 1440 150" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
+  <defs id="defs2" />
-     id="defs2" />
   <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"
@@ -10,7 +9,4 @@
        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)" />
   </g>
-</svg>
+</svg>
-<!--
-    
--->

assets/images/svg/curve-3.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="1440"
+   height="96"
+   preserveAspectRatio="none"
+   viewBox="0 0 1440 96"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <g
+     mask="url(&quot;#SvgjsMask1900&quot;)"
+     fill="none"
+     id="g1">
+    <path
+       d="M 0,0 80,5.3 C 160,11 320,21 480,32 640,43 800,53 960,53.3 1120,53 1280,43 1360,37.3 L 1440,32 V 96 H 0 Z"
+       fill="#0d242e"
+       id="path1" />
+  </g>
+</svg>

assets/scss/custom.scss

@@ -21,14 +21,14 @@ $icon-yellow: #fcc958;
 // Pattern
 // hugo needs to precompile images in public dir, and make it automatically with images called from content.
 // here we need to use it in css, then need to generate it, calling it first from a content md file.
-@mixin apply-bgpattern-01() {
+@mixin add-bg-pattern($id) {
     background-repeat: repeat;
     background-position: top center;
-    background-image: url('../images/bg/pattern-1.png'); 
+    background-image: url('../images/bg/pattern-#{$id}.png'); 
 }
 
 // Sections bg transitions
-@mixin curve-bottom($id) {
+@mixin add-horizontal-curve($id, $pos) {
     position: relative;
     &:before {
         content: '';
@@ -37,26 +37,31 @@ $icon-yellow: #fcc958;
         height: 100%;
         background-image: url('../images/svg/curve-#{$id}.svg');
         background-size: contain;
-        background-position: bottom center;
+        background-position: $pos center;
         background-repeat: no-repeat;
         z-index: 10;
     }
 }
 
-// Title design element, with colored circle
+// Colored design element: square or circle
-@mixin circle-in-title($color) {
+@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
     position: relative;
     z-index: 1;
     &:before {
         content: '';
         position: absolute;
-        width: 45px; 
+        width: 45px * $scale; 
-        height: 45px;
+        height: 45px * $scale;
         left: -70px; 
         top: -20px;
-        border-radius: 25px;
         background-color: $color;
         z-index: 0;
+        @if $shape == 'circle' {
+            border-radius: 25px;
+          }
+        @else {
+            border-radius: 0;
+        }
     }
 }
 
@@ -67,18 +72,13 @@ header.header {
 main > section {
     &.hero {
         background-color: $bg-dark-blue;
-        @include apply-bgpattern-01();
+        @include add-bg-pattern(1);
-        @include curve-bottom(1);        
+        @include add-horizontal-curve(1, bottom);        
         h1 {
             color: $text-green;
         }
-        p {
-            color: white;
-            font-weight: bolder;
-        }
     }
     &.section-1 {
-        @include curve-bottom(2);
         li {
             font-weight: 600;
         }
@@ -89,25 +89,33 @@ main > section {
     &.section-3 {
         background-color: $text-green;
         h2 {
-            @include circle-in-title($icon-red);
+            @include add-decorative-shape($icon-red, 'circle');
         }
     }
     &.section-4 {
+        @include add-horizontal-curve(2, bottom);
     }
     &.section-5 {
         background-color: transparentize($color: $text-green, $amount: 0.7)
     }
     &.section-6 {
         background-color: $bg-dark-blue;
-        @include apply-bgpattern-01();        
+        @include add-bg-pattern(1);        
     }
     &.section-7 {
         background-color: $bg-light-blue;
         h2 {
-            @include circle-in-title($icon-yellow);
+            @include add-decorative-shape($icon-yellow);
         }
     }
 }
+.dark > footer {
+    @include add-horizontal-curve(3, top);
+    &:before {
+        top: -70px;
+    }
+}
+
 
 // Change bulletlists rendering in flex bloc
 section.section-1,
@@ -150,4 +158,9 @@ section.section-7 {
         border: 1px solid $btn-orange;
         border-radius: 2em;
     }
+
+    p {
+        color: white;
+        font-weight: bolder;
+    }
 }

config/_default/params.toml

@@ -15,7 +15,7 @@ logo_height = "32px"
 logo_webp = true
 
 # logo text will only show when logo is missing.
-logo_text = "Hugoplate"
+logo_text = "CHILL logo"
 
 # navbar fixed to top
 navbar_fixed = false
@@ -40,6 +40,7 @@ custom_script = ""
 
 # copyright
 copyright = "Designed & Developed by [Zeon Studio](https://zeon.studio)"
+#copyright = "Designed & Developed by [Yellow Studio]() and [Champs Libres]()"
 
 # Preloader
 # preloader module: https://github.com/gethugothemes/hugo-modules/tree/master/components/preloader

content/francais/_index.md

@@ -5,7 +5,7 @@ banner:
   image: /images/banner.png
   title: Le compagnon du travailleur social
   content: > 
-    CHILL est une application web open source, un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social.
+    CHILL est une application web open source, <br>un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social.
   bulletpoints: 
   button:
     enable: true
@@ -16,7 +16,7 @@ features:
 
   - #1
     class: 
-    image: /images/svg/curve-10.svg
+    image: /images/svg/curve-10.svg ##
     title: 
     content:
     bulletpoints: 
@@ -60,7 +60,7 @@ features:
 
   - #4
     class: 
-    image: /images/service-3.png
+    image: /images/bg/pattern-10.png ##
     title:
     content: > 
       Via les divers supports et manuels pédagogiques mis à disposition, CHILL permet l’autonomie des utilisateurs et des administrateurs, que ce soit pour l'utiliser ou pour le configurer.
@@ -71,8 +71,8 @@ features:
       link: start/user
 
   - #5
-    class: dark
+    class: 
-    image: /images/svg/curve-20.svg
+    image: /images/svg/curve-30.svg ##
     title: 
     content: 
     bulletpoints: 
@@ -86,7 +86,7 @@ features:
       link: #
 
   - #6
-    class: 
+    class: dark
     image: /images/service-3.png
     title: 
     content: > 
@@ -102,7 +102,7 @@ features:
 
   - #7
     class: 
-    image: /images/service-00.png 
+    image: /images/svg/curve-20.svg ##
     title: Ce qu'il faut retenir
     content:
     bulletpoints: