Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -10,9 +10,15 @@ import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCa
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import MediaAbout from "@/components/sections/about/MediaAbout";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { Zap } from "lucide-react";
+import { Zap, Phone } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [hoveredTrust, setHoveredTrust] = useState<string | null>(null);
+
+  const trustDescriptions: Record<string, string> = {
+    "1": "Notre équipe se déplace en moins de 30 minutes pour résoudre vos urgences plomberie, 24h/24, 7j/7. Pas d'attente inutile.",    "2": "Avant tout travail, vous recevez un devis détaillé et transparent. Aucune surprise sur la facture finale, tous les prix sont convenus d'avance.",    "3": "Sacha possède plus de 15 ans d'expérience en plomberie générale, sanitaire et chauffage. Expert reconnu à Paris et région Île-de-France.",    "4": "Nous assurons une permanence 24h/24, 7j/7, y compris les dimanches et jours fériés. Vos urgences plomberie ne nous arrêtent pas."};
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -46,7 +52,7 @@ export default function LandingPage() {
         <HeroSplitKpi
           title="Plombier à Paris 18 – Intervention rapide 24h/24"
           description="Dépannage plomberie urgent à Paris. Intervention rapide, prix transparents et travail garanti."
-          background={{ variant: "glowing-orb" }}
+          background={{ variant: "radial-gradient" }}
           kpis={[
             { value: "4.9/5", label: "Note Google" },
             { value: "62", label: "Avis clients" },
@@ -67,28 +73,41 @@ export default function LandingPage() {
       </div>
 
       <div id="trust" data-section="trust">
-        <FeatureCardTwentySeven
-          title="Pourquoi nous faire confiance"
-          description="Un plombier local de confiance avec une expertise reconnue et une réactivité sans égal"
-          features={[
-            {
-              id: "1",              title: "Intervention rapide",              description: "Nous nous déplaçons rapidement à votre domicile pour résoudre votre problème en urgence.",              imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990703.jpg?_wi=1",              imageAlt: "Intervention rapide plomberie"
-            },
-            {
-              id: "2",              title: "Devis transparent",              description: "Pas de surprise ! Vous recevez un devis clair avant le début des travaux.",              imageSrc: "http://img.b2bpic.net/free-photo/watering-can_23-2148006090.jpg?_wi=1",              imageAlt: "Devis professionnel"
-            },
-            {
-              id: "3",              title: "Artisan expérimenté",              description: "Sacha est un plombier professionnel avec des années d'expérience à Paris.",              imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990698.jpg?_wi=1",              imageAlt: "Artisan professionnel"
-            },
-            {
-              id: "4",              title: "Disponible 24h/24",              description: "Urgence le dimanche ou la nuit ? Nous sommes là pour vous, même hors horaires.",              imageSrc: "http://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg?_wi=1",              imageAlt: "Service 24h/24"
-            },
-          ]}
-          gridVariant="four-items-2x2-equal-grid"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
+        <div className="relative py-20 px-4">
+          <div className="container mx-auto max-w-6xl">
+            <div className="mb-16">
+              <h2 className="text-4xl md:text-5xl font-bold text-center mb-4">Pourquoi nous faire confiance</h2>
+              <p className="text-center text-lg text-gray-600 max-w-2xl mx-auto">Un plombier local de confiance avec une expertise reconnue et une réactivité sans égal</p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {[
+                { id: "1", title: "Intervention rapide", image: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990703.jpg?_wi=1" },
+                { id: "2", title: "Devis transparent", image: "http://img.b2bpic.net/free-photo/watering-can_23-2148006090.jpg?_wi=1" },
+                { id: "3", title: "Artisan expérimenté", image: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990698.jpg?_wi=1" },
+                { id: "4", title: "Disponible 24h/24", image: "http://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg?_wi=1" },
+              ].map((item) => (
+                <div
+                  key={item.id}
+                  className="relative group cursor-pointer h-64 rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"
+                  onMouseEnter={() => setHoveredTrust(item.id)}
+                  onMouseLeave={() => setHoveredTrust(null)}
+                >
+                  <img
+                    src={item.image}
+                    alt={item.title}
+                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex flex-col justify-end p-6">
+                    <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
+                    <div className={`overflow-hidden transition-all duration-300 ${hoveredTrust === item.id ? 'max-h-32 opacity-100' : 'max-h-0 opacity-0'}`}>
+                      <p className="text-white text-sm leading-relaxed">{trustDescriptions[item.id]}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="services" data-section="services">
@@ -170,6 +189,21 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
+        <div className="py-20">
+          <div className="container mx-auto">
+            <div className="mb-12 text-center">
+              <h2 className="text-4xl font-bold mb-6">Appelez-nous maintenant</h2>
+              <a
+                href="tel:+33609767695"
+                className="inline-flex items-center justify-center gap-3 px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors text-lg"
+              >
+                <Phone className="w-6 h-6" />
+                📞 06 09 76 76 95
+              </a>
+              <p className="text-gray-600 mt-4 text-sm">Appelez directement pour une intervention immédiate</p>
+            </div>
+          </div>
+        </div>
         <ContactSplitForm
           title="Demander un devis gratuit"
           description="Remplissez le formulaire ci-dessous et nous vous recontacterons dans les plus brefs délais pour estimer votre intervention."

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfaff;
-  --card: #f7f5ff;
-  --foreground: #0f0022;
-  --primary-cta: #8b5cf6;
+  --background: #e6f2ff;
+  --card: #d9ecff;
+  --foreground: #001f4d;
+  --primary-cta: #0052cc;
   --primary-cta-text: #fbfaff;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #0f0022;
-  --accent: #d8cef5;
-  --background-accent: #c4a8f9;
+  --accent: #4d94ff;
+  --background-accent: #99c7ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);