Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -120,17 +120,32 @@ export default function LandingPage() {
       </div>
 
       <div id="about" data-section="about">
-        <AboutMetric
-          title="Pourquoi choisir SMH Coiffure? Une expertise reconnue et un service personnalisé depuis plus de 10 ans"
-          metrics={[
-            { icon: Award, label: "+10 ans d'expérience", value: "Expertise" },
-            { icon: Star, label: "4,9/5 Google", value: "14 avis" },
-            { icon: Heart, label: "Service chaleureux", value: "Personnel" },
-            { icon: Sparkles, label: "Coloration naturelle", value: "Spécialité" }
-          ]}
-          useInvertedBackground={true}
-          metricsAnimation="slide-up"
-        />
+        <div className="py-20">
+          <div className="w-full max-w-[var(--width-content-width)] mx-auto px-4">
+            <div className="flex flex-col items-center justify-center gap-8">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
+                <div className="flex flex-col items-center justify-center p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
+                  <Award className="w-12 h-12 text-yellow-500 mb-3" />
+                  <h3 className="text-2xl font-semibold text-center text-foreground mb-1">Plus de 10 ans d'expérience</h3>
+                </div>
+                <div className="flex flex-col items-center justify-center p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
+                  <div className="flex items-center gap-1 mb-3">
+                    <Star className="w-12 h-12 text-yellow-500 fill-yellow-500" />
+                  </div>
+                  <h3 className="text-2xl font-semibold text-center text-foreground mb-1">4,9 Google</h3>
+                </div>
+                <div className="flex flex-col items-center justify-center p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
+                  <Heart className="w-12 h-12 text-yellow-500 mb-3" />
+                  <h3 className="text-2xl font-semibold text-center text-foreground mb-1">Service chaleureux</h3>
+                </div>
+                <div className="flex flex-col items-center justify-center p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
+                  <Sparkles className="w-12 h-12 text-yellow-500 mb-3" />
+                  <h3 className="text-2xl font-semibold text-center text-foreground mb-1">Coloration naturelle</h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="why-us" data-section="why-us">
@@ -202,4 +217,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}