Converti chill-theme en dossier classique

2026-01-28 09:40:37 +01:00
parent 577786f22d
commit cc60b64505
118 changed files with 11868 additions and 1 deletions
@@ -0,0 +1,81 @@
+{{/* 
+  Usage :
+  {{< features-carousel title="Vos fonctionnalités clés" >}}
+  {
+    "features": [
+      {
+        "title": "Performance",
+        "titleBtn": "Performance",
+        "description": "Leverage Hugo's blazing-fast build times and optimized output.",
+        "badge": "Performance",
+        "badgeColor": "#2563eb",
+        "image": "/images/feature-1.svg",
+        "buttonText": "Learn More",
+        "buttonLink": "/features/performance/",
+        "features": "Sub-second page loads,Optimized assets,Minimal JavaScript,CDN-ready output",
+        "imagePosition": "right"
+      },
+    ]
+  }
+  {{< /features-carousel >}}
+*/}}
+
+{{ $title := .Get "title" | default "" }}
+{{ $data := .Inner | transform.Unmarshal }}
+{{ $background_color := .Get "background-color" }}
+<section id="features-carousel" class="section{{ if not $background_color }} bg-gray-50{{ end }}" {{ if $background_color }}style="background-color:{{ $background_color }};"{{ end }}>
+  <div class="container">
+    {{ if $title }}
+      <h1 class="text-3xl font-bold mb-4 text-center">{{ $title }}</h1>
+    {{ end }}
+    <div class="features-carousel__nav"></div>
+    <div class="features-carousel__slides">
+      {{ range $i, $f := $data.features }}
+        <div class="feature" data-title-btn="{{ $f.titleBtn }}">
+          {{ partial "shortcodes/feature.html" (dict
+            "title" $f.title
+            "titleBtn" $f.titleBtn
+            "description" $f.description
+            "badge" $f.badge
+            "badgeColor" $f.badgeColor
+            "image" $f.image
+            "buttonText" $f.buttonText
+            "buttonLink" $f.buttonLink
+            "features" $f.features
+            "imagePosition" $f.imagePosition
+          ) }}
+        </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+<script>
+  (function() {
+    const carousel = document.getElementById('features-carousel');
+    if (!carousel) return;
+    const slides = carousel.querySelectorAll('.feature');
+    const nav = carousel.querySelector('.features-carousel__nav');
+    let current = 0;
+
+    slides.forEach((slide, i) => {
+      const btn = document.createElement('button');
+      btn.innerText = slide.dataset.titleBtn || `Feature ${i+1}`;
+      btn.onclick = () => {
+        current = i;
+        showSlide(current);
+      };
+      nav.appendChild(btn);
+    });
+
+    function showSlide(idx) {
+      slides.forEach((slide, i) => {
+        slide.style.display = i === idx ? 'block' : 'none';
+      });
+      Array.from(nav.children).forEach((btn, i) => {
+        btn.classList.toggle('active', i === idx);
+      });
+    }
+
+    showSlide(current);
+  })();
+</script>