From 275231775e34ee171af15d7f402ecbacf53caddc Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:28:49 +0000
Subject: [PATCH] Update components/hero.tsx

---
 components/hero.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 components/hero.tsx

diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..94cb2f9
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Phone } from "lucide-react";
+
+export function Hero() {
+  return (
+    <section className="relative py-20 md:py-32 overflow-hidden bg-slate-50">
+      <div className="absolute inset-0 bg-grid-slate-200 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]" />
+      <Container className="relative">
+        <div className="max-w-3xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-sm font-medium mb-6">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
+            </span>
+            Disponible pour les Urgences
+          </div>
+          <Heading as="h1" className="text-4xl md:text-6xl font-bold tracking-tight text-slate-900">
+            Dépannage Chauffage & Plomberie d'Urgence
+          </Heading>
+          <Subheading className="mt-6 text-lg text-slate-600 max-w-2xl mx-auto">
+            Intervention rapide et assistance professionnelle pour toutes vos urgences de chauffage et plomberie. Nos 6 techniciens qualifiés sont prêts à intervenir quand vous en avez le plus besoin.
+          </Subheading>
+          <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8" onClick={() => document.getElementById('emergency-form')?.scrollIntoView({ behavior: 'smooth' })}>
+              Demander une Intervention
+            </Button>
+            <Button size="lg" variant="outline" className="gap-2 border-slate-300 text-slate-700">
+              <Phone className="w-4 h-4" />
+              01 23 45 67 89
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}