Update src/app/page.tsx

Merge version_2 into main

src/app/layout.tsx

@@ -1420,4 +1420,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -9,6 +9,7 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Award, Star, Heart, Sparkles, MapPin, Phone, Clock, Navigation, Instagram, MessageCircle, Calendar } from 'lucide-react';
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import './starRatings.css';
 
 export default function LandingPage() {
   return (
@@ -119,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">

src/app/starRatings.css

@@ -0,0 +1,116 @@
+/* Golden Yellow Star Ratings Styling */
+:root {
+  --star-color: #FFC107;
+  --star-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Apply to all star rating elements throughout the site */
+.star,
+.star-icon,
+[class*="star"],
+[class*="rating"],
+svg[class*="star"],
+svg[class*="rating"] {
+  fill: var(--star-color);
+  color: var(--star-color);
+  filter: drop-shadow(var(--star-shadow));
+  transition: transform 0.2s ease-in-out;
+}
+
+/* Hover animation for interactive star ratings */
+.star:hover,
+.star-icon:hover,
+[class*="star"]:hover,
+[class*="rating"]:hover,
+svg[class*="star"]:hover,
+svg[class*="rating"]:hover {
+  transform: scale(1.08);
+  filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.3));
+}
+
+/* Google Rating Stars */
+[aria-label*="rating"],
+[data-rating],
+.google-rating,
+.rating-badge,
+.rating-stars {
+  color: var(--star-color);
+}
+
+/* Star SVG Elements */
+svg.star-fill,
+svg[class*="star"] {
+  fill: var(--star-color);
+  stroke: none;
+}
+
+svg[class*="star"]:not([class*="empty"]):not([class*="outline"]) {
+  fill: var(--star-color);
+}
+
+/* Empty/outline stars (gray background) */
+svg[class*="star"][class*="empty"],
+svg[class*="star"][class*="outline"],
+[class*="star-empty"],
+[class*="star-outline"] {
+  fill: rgba(255, 193, 7, 0.2);
+  stroke: rgba(255, 193, 7, 0.4);
+}
+
+/* 4.9/5 Rating Display */
+.rating-display,
+.rating-value,
+.rating-count,
+[class*="satisfaction"],
+[class*="satisfaction-badge"] {
+  color: var(--star-color);
+  font-weight: 600;
+}
+
+/* Premium soft shadow effect */
+.testimonial-rating,
+.product-rating,
+.review-rating,
+.rating-container,
+[class*="rating-container"],
+[class*="testimonial-rating"],
+[class*="product-rating"] {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Mobile responsive - ensure stars remain visible */
+@media (max-width: 768px) {
+  .star,
+  .star-icon,
+  [class*="star"],
+  [class*="rating"],
+  svg[class*="star"],
+  svg[class*="rating"] {
+    min-width: 1rem;
+    min-height: 1rem;
+    width: auto;
+    height: auto;
+  }
+
+  .star:hover,
+  .star-icon:hover,
+  [class*="star"]:hover,
+  [class*="rating"]:hover,
+  svg[class*="star"]:hover,
+  svg[class*="rating"]:hover {
+    transform: scale(1.05);
+  }
+}
+
+/* Ensure proper proportions on all breakpoints */
+@media (max-width: 480px) {
+  .star,
+  .star-icon,
+  [class*="star"],
+  [class*="rating"],
+  svg[class*="star"],
+  svg[class*="rating"] {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}