`` feat: Add french tech banner and styles ``

content/_index.fr.md

@@ -45,8 +45,59 @@ layout: hextra-home
 {{< /hextra/feature-grid >}}
 
 <div style="margin-top: 8rem; margin-bottom: 1.5rem;">
-  <h2 class="hx:text-right hx:text-3xl hx:font-semibold hx:text-gray-900 hx:dark:text-gray-100" style="margin-bottom: 1.5rem;">
-    Technologies utilisés
-  </h2>
-  <img src="images/tech-banner.png" alt="Technologies utilisées" class="hx:mx-auto hx:max-w-full hx:h-auto" />
+  <div style="text-align: center; margin-bottom: 3rem;">
+    <h2 class="tech-title" style="
+      font-size: clamp(2rem, 5vw, 3.5rem);
+      font-weight: 800;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 4s ease infinite;
+      letter-spacing: -0.02em;
+      margin: 0;
+      padding: 0.5rem 0;
+    ">
+      Technologies utilisées
+    </h2>
+    <p style="
+      color: #6b7280;
+      font-size: 1rem;
+      margin-top: 0.75rem;
+      font-weight: 400;
+    " class="dark:text-gray-400">
+      Les outils et plateformes avec lesquels je travaille
+    </p>
+  </div>
+  {{< tech-banner speed="30s" height="80px" gap="4rem" >}}
 </div>
+
+<style>
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    .tech-title {
+      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%) !important;
+      background-size: 200% 200% !important;
+      -webkit-background-clip: text !important;
+      -webkit-text-fill-color: transparent !important;
+      background-clip: text !important;
+    }
+  }
+  
+  [data-theme="dark"] .tech-title {
+    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%) !important;
+    background-size: 200% 200% !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+  }
+</style>