feat(layout): améliorer la mise en page des fonctionnalités avec des ajustements de style et de structure

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;
   }

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>

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>