fix: Corriger des descriptions et améliorer le style des fonctionnalités

themes/chill-theme/i18n/en.toml

@@ -107,7 +107,7 @@ other = "Changer de langue"
 
 # Features
 [seeItInAction]
-other = "Voir en action"
+other = "Voir en images"
 
 # Pricing
 

themes/chill-theme/i18n/fr.toml

@@ -107,7 +107,7 @@ other = "Changer de langue"
 
 # Features
 [seeItInAction]
-other = "Voir en action"
+other = "Voir en images"
 
 # Pricing
 

themes/chill-theme/i18n/nl.toml

@@ -107,7 +107,7 @@ other = "Changer de langue"
 
 # Features
 [seeItInAction]
-other = "Voir en action"
+other = "Voir en images"
 
 # Pricing
 

themes/chill-theme/layouts/features/single.html

@@ -5,7 +5,10 @@
             background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
             color: #222;
         }
-
+        .see-in-image {
+            background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
+            color: #222;
+        }
         .gradient-bg {
             background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 25%, white), white);
         }
@@ -70,13 +73,12 @@
                         </div>
                         <!-- Demo Section -->
                         {{ if .Params.demo }}
-                        <div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
-                            <div class="mx-auto max-w-2xl lg:text-center">
-                                <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n
+                        <div class="relative text-white rounded-lg overflow-hidden bg-primary-400 cta-gradient px-6 py-8" style="background-color:#23627e;">
+                            <div class="mx-auto max-w-2xl lg:text-center py-8">
+                                <h2 class="text-3xl font-bold tracking-tight text-secondary sm:text-4xl">{{ i18n
                                     "seeItInAction" }}</h2>
-                                <p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
                             </div>
-                            <div class="mt-16 flex justify-center">
+                            <div class="flex justify-center">
                                 {{ partial "shortcodes/carousel.html" (dict "images" .Params.demo.images) }}
                             </div>
                         </div>

themes/chill-theme/layouts/partials/shortcodes/carousel.html

@@ -5,7 +5,7 @@ Author: Jeroen van der Schee
 */}}
 
 {{ $id := printf "carousel-%d" (now.UnixNano) }}
-<div id="{{ $id }}" class="carousel-container">
+<div id="{{ $id }}" class="carousel-container bg-white">
   <div class="carousel-slides">
     {{ range .images }}
     <div class="carousel-slide">
@@ -60,6 +60,7 @@ Author: Jeroen van der Schee
     cursor: pointer;
     border-radius: 50%;
     z-index: 2;
+    color:#0d242e;
   }
 
   .carousel-prev {