Update components/hero.tsx
This commit is contained in:
parent
5f9543ac6a
commit
275231775e
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue