test svg curve between sections

assets/images/svg/curve-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="96" preserveAspectRatio="none" viewBox="0 0 1440 96">
+  <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none">
+    <path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z" fill="#0d242e"></path>
+  </g>
+</svg>

assets/images/svg/curve-2.svg

@@ -0,0 +1,16 @@
+<?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
+     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"
+       fill="#184a7e" 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)" />
+  </g>
+</svg>
+<!--
+    
+-->

assets/scss/custom.scss

@@ -23,12 +23,44 @@ $icon-yellow: #fcc958;
 // 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() {
     background-repeat: repeat;
-    background-position: bottom center;
+    background-position: top center;
-    background-image: url('../images/bg/dessin-3.png'); 
+    background-image: url('../images/bg/pattern-1.png'); 
 }
 
+// Sections bg transitions
+@mixin curve-bottom($id) {
+    position: relative;
+    &:before {
+        content: '';
+        position: absolute;
+        width: 100%; 
+        height: 100%;
+        background-image: url('../images/svg/curve-#{$id}.svg');
+        background-size: contain;
+        background-position: bottom center;
+        background-repeat: no-repeat;
+        z-index: 10;
+    }
+}
 
-// Theme Custom sections
+// Title design element, with colored circle
+@mixin circle-in-title($color) {
+    position: relative;
+    z-index: 1;
+    &:before {
+        content: '';
+        position: absolute;
+        width: 45px; 
+        height: 45px;
+        left: -70px; 
+        top: -20px;
+        border-radius: 25px;
+        background-color: $color;
+        z-index: 0;
+    }
+}
+
+// Theme custom sections
 header.header {
     background-color: $bg-dark-blue;
 }
@@ -36,6 +68,7 @@ main > section {
     &.hero {
         background-color: $bg-dark-blue;
         @include apply-bgpattern-01();
+        @include curve-bottom(1);        
         h1 {
             color: $text-green;
         }
@@ -45,12 +78,19 @@ main > section {
         }
     }
     &.section-1 {
-        background-color: $bg-light-blue;
+        @include curve-bottom(2);
+        li {
+            font-weight: 600;
+        }
     }
     &.section-2 {
+        background-color: $bg-light-blue;
     }
     &.section-3 {
         background-color: $text-green;
+        h2 {
+            @include circle-in-title($icon-red);
+        }
     }
     &.section-4 {
     }
@@ -63,6 +103,9 @@ main > section {
     }
     &.section-7 {
         background-color: $bg-light-blue;
+        h2 {
+            @include circle-in-title($icon-yellow);
+        }
     }
 }
 
@@ -76,7 +119,7 @@ section.section-7 {
                 width: 100%;
             }
             h2, p {
-                text-align: center;
+                //text-align: center;
             }
             ul {
                 display: flex;
@@ -88,8 +131,9 @@ section.section-7 {
                     margin: 0.5em;
                     padding: 1.5em;
                     text-align: center;
-                    border: 1px solid #767676;
+                    //border: 1px solid #767676;
                     border-radius: 4px;    
+                    background-color: white;
                 }
             }
         }    

content/francais/_index.md

@@ -1,65 +1,78 @@
 ---
-# Banner
 banner:
+
   class: dark
-  image: "/images/banner.png"
+  image: /images/banner.png
-  title: "Le compagnon du travailleur social"
+  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."
+  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.
+  bulletpoints: 
   button:
     enable: true
-    label: "Essayer la démo"
+    label: Essayer la démo
-    link: "http://demo.chill.social"
+    link: http://demo.chill.social
 
-# Features
 features:
-  - 
+
-    class: section-1
+  - #1
-    image: "/images/service-10.png"
+    class: 
+    image: /images/svg/curve-10.svg
     title: 
     content:
     bulletpoints: 
-    - "Conservez les traces de vos interactions au quotidien"
+    - Conservez les traces de vos interactions au quotidien
-    - "Recherchez et partagez les infos à propos des personnes que vous accompagnez"
+    - Recherchez et partagez les infos à propos des personnes que vous accompagnez
-    - "Communiquez pour interagir en équipe"
+    - Communiquez pour interagir en équipe
-    - "Disposez à tout moment des statistiques"
+    - Disposez à tout moment des statistiques
-
-  - 
-    class: section-2
-    image: "/images/service-20.png"
-    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."
     button:
       enable: false
-      label: "Test button style"
+      label: Button label
-      link: "#"
+      link: #
 
-  - 
+  - #2
-    class: section-3
+    class: 
-    image: "/images/service-1.png"
+    image: /images/service-2.png
-    title: "Efficace, efficient et intuitif"
+    title: 
-    content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics:"
+    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.
     bulletpoints: 
-    - "de **retrouver** toutes les informations sur les personnes accompagnées ;"
-    - "de **générer** automatiquement une grande variété de documents et formulaires : attestation de rendez-vous, imprimés uniques, etc."
-    - "de **fixer** des rendez-vous aux personnes accompagnées avec des rappels par sms, et de synchroniser les agendas en ligne ;"
-    - "d’**effectuer** un suivi des décisions sur des documents et formulaires relevant de la décision de plusieurs membres du personnel ;"
-    - "de **joindre** des pièces et documents à n’importe quel dossier par simple glisser-déposer depuis sa boîte mail, son ordinateur, etc."
-    - "de **gérer** les droits d’accès aux dossiers d’usagers par service et localisation, voire de rendre complètement confidentielles certains dossiers ;"
-
-  - 
-    class: section-4
-    image: "/images/service-3.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."
     button:
       enable: false
-      label: "Support et manuels"
+      label: Button label
-      link: "start/user"
+      link: #
 
-  - 
+  - #3
-    class: section-5 dark
+    class: 
-    image: "/images/service-20.png"
+    image: /images/service-1.png
+    title: Efficace, efficient et intuitif
+    content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics :"
+    bulletpoints: 
+    - de **retrouver** toutes les informations sur les personnes accompagnées ;
+    - "de **générer** automatiquement une grande variété de documents et formulaires : attestation de rendez-vous, imprimés uniques, etc ;"
+    - de **fixer** des rendez-vous aux personnes accompagnées avec des rappels par sms, et de synchroniser les agendas en ligne ;
+    - d’**effectuer** un suivi des décisions sur des documents et formulaires relevant de la décision de plusieurs membres du personnel ;
+    - de **joindre** des pièces et documents à n’importe quel dossier par simple glisser-déposer depuis sa boîte mail, son ordinateur, etc ;
+    - de **gérer** les droits d’accès aux dossiers d’usagers par service et localisation, voire de rendre complètement confidentielles certains dossiers.
+    button:
+      enable: false
+      label: Button label
+      link: #
+
+  - #4
+    class: 
+    image: /images/service-3.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.
+    bulletpoints: 
+    button:
+      enable: true
+      label: Support et manuels
+      link: start/user
+
+  - #5
+    class: dark
+    image: /images/svg/curve-20.svg
     title: 
     content: 
     bulletpoints: 
@@ -67,27 +80,39 @@ features:
     - "**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."
     - "**Respecte les principes du RGPD** de *privacy by design* et *security by design*, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus."
     - "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public."
+    button:
+      enable: false
+      label: Button label
+      link: #
 
-  - 
+  - #6
-    class: section-6
+    class: 
-    image: "/images/service-30.png"
+    image: /images/service-3.png
     title: 
-    content: "
+    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>
+      <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. 
+      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>
+      <br><br>
-    "
+    bulletpoints: 
+    button:
+      enable: false
+      label: Button label
+      link: #
 
-  - 
+  - #7
-    class: section-7
+    class: 
-    image: "/images/service-30.png" 
+    image: /images/service-00.png 
-    title: "Ce qu'il faut retenir"
+    title: Ce qu'il faut retenir
     content:
     bulletpoints: 
-    - "une application qui facilite et améliore l’accompagnement social"
+    - 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 logiciel libre et clé en main, flexible et adaptable à de nombreuses réalités
-    - "un compagnon efficace, efficient et intuitif"
+    - un compagnon efficace, efficient et intuitif
-    - "une interface intuitive, rapide et facile au quotidien "
+    - une interface intuitive, rapide et facile au quotidien
+    button:
+      enable: false
+      label: Button label
+      link: #
 
 ---

content/notes.off/theme.txt

@@ -40,3 +40,9 @@
     }
   }
 }
+
+
+
+<svg class="curve" preserveAspectRatio="none" viewBox="0 0 1440 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z"></path>
+</svg>

themes/hugoplate/layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <!-- Banner -->
   {{ with .Params.banner }}
-    <section class="section pt-14 hero {{ with .class }}{{ . }}{{ end }}">
+    <section class="section section-0 pt-14 hero {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row justify-center">
           <div class="lg:col-7 mb-8 text-center">
@@ -31,7 +31,7 @@
 
   <!-- Features -->
   {{ range $i, $e:= .Params.features }}
-    <section class="section-sm sn-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
+    <section class="section-sm section-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row items-center justify-between">
           <div