From 60550fe1b83c1269296252f04fbc8891f83f6672 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@digitalternative.be>
Date: Mon, 9 Feb 2026 15:56:33 +0100
Subject: [PATCH] =?UTF-8?q?feat(layout):=20am=C3=A9liorer=20la=20mise=20en?=
 =?UTF-8?q?=20page=20des=20fonctionnalit=C3=A9s=20avec=20des=20ajustements?=
 =?UTF-8?q?=20de=20style=20et=20de=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/style.css                           | 18 ++++++++++++++++++
 .../chill-theme/layouts/features/single.html   | 12 ++++++------
 .../layouts/partials/shortcodes/feature.html   | 12 ++++++------
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 9fefd87..1d4cf0c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2930,6 +2930,11 @@ body {
   --tw-gradient-to: #fff var(--tw-gradient-to-position);
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -4531,6 +4536,11 @@ body {
     padding-right: 1.5rem;
   }
 
+  .sm\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
   .sm\:py-32 {
     padding-top: 8rem;
     padding-bottom: 8rem;
@@ -4645,6 +4655,14 @@ body {
     order: 2;
   }
 
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .lg\:mb-12 {
     margin-bottom: 3rem;
   }
diff --git a/themes/chill-theme/layouts/features/single.html b/themes/chill-theme/layouts/features/single.html
index e0d83be..052f00b 100644
--- a/themes/chill-theme/layouts/features/single.html
+++ b/themes/chill-theme/layouts/features/single.html
@@ -67,16 +67,16 @@
 
                 <!-- Demo Section -->
                 {{ if .Params.demo }}
-                <div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
+                <div class="bg-gray-50 -mx-6 px-6 py-10 sm:py-20">
                     <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 "seeItInAction" }}</h2>
-                        <p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
+                        <p class="mt-6 mb-3 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
                     </div>
-                    <div class="mt-16 flex justify-center">
-                        <div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
-                            <img src="{{ .Params.demo.image }}" alt="Demo" class="rounded-lg">
-                        </div>
+
+                    <div class="relative rounded-xl">
+                        <img src="{{ .Params.demo.image }}" alt="Demo" class="rounded-lg">
                     </div>
+       
                 </div>
                 {{ end }}
             </div>
diff --git a/themes/chill-theme/layouts/partials/shortcodes/feature.html b/themes/chill-theme/layouts/partials/shortcodes/feature.html
index 636e4c5..ef6cb13 100644
--- a/themes/chill-theme/layouts/partials/shortcodes/feature.html
+++ b/themes/chill-theme/layouts/partials/shortcodes/feature.html
@@ -11,14 +11,14 @@
 
 {{ $features := split (.features) "," }}
 
-<div class="grid lg:grid-cols-2 gap-12 items-center badge-{{ $badgeColor }}">
+<div class="grid lg:grid-cols-3 gap-12 items-center badge-{{ $badgeColor }}">
     {{ if eq $imagePosition "left" }}
-    <div class="order-2 lg:order-1">
-        <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation">
+    <div class="order-2 lg:order-1 lg:col-span-2">
+        <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation w-full object-contain bg-white">
     </div>
     {{ end }}
 
-    <div class="space-y-6 {{ if eq $imagePosition "left" }}order-1 lg:order-2{{ end }}">
+    <div class="space-y-6 {{ if eq $imagePosition "left" }}order-1 lg:order-2{{ end }} lg:col-span-1">
         <style>
             .badge {
                 background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
@@ -50,8 +50,8 @@
     </div>
 
     {{ if ne $imagePosition "left" }}
-    <div>
-        <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation">
+    <div class="lg:col-span-2">
+        <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation w-full object-contain bg-white">
     </div>
     {{ end }}
 </div>