Update components/hero.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:28:49 +00:00
parent 5f9543ac6a
commit 275231775e
1 changed files with 40 additions and 0 deletions

40
components/hero.tsx Normal file
View File

@ -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>
);
}