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-image: url('../images/bg/dessin-3.png'); 
+    background-position: top center;
+    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;
                 }
             }
         }