e94a03f302
- Hero: replace aggressive "Arrêtez de perdre des chantiers" with professional "Un site à la hauteur de votre savoir-faire" - Macon: rewrite hero as client-facing (artisan's real site), add Unsplash before/after photos to MagicReveal sliders - Paysagiste: rewrite hero "Transformez votre extérieur" instead of "Ne vendez pas des travaux", add real photos to gallery - Plombier: rewrite hero "Votre plombier réactif et transparent" instead of "Convaincre en 3 secondes chrono" - MagicReveal: now accepts avantImage/apresImage URLs and renders real photos with the interactive slider https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
import Button from "@/components/ui/Button";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative py-20 md:py-32 bg-navy overflow-hidden" aria-label="Introduction">
|
|
{/* Overlay pattern */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.05),transparent_70%)]" />
|
|
|
|
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl">
|
|
{/* Badge */}
|
|
<span className="inline-block px-3 py-1.5 bg-orange/20 border border-orange/30 rounded-full text-orange text-xs font-semibold mb-6">
|
|
Flines-lez-Raches, Nord (59)
|
|
</span>
|
|
|
|
{/* H1 SEO */}
|
|
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-[3.25rem] font-extrabold text-white leading-tight tracking-[-0.02em] mb-6">
|
|
Artisans du Nord : Votre site web doit être aussi solide que{" "}
|
|
<span className="text-orange">vos ouvrages.</span>
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-white/70 text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl">
|
|
Un site professionnel à la hauteur de votre savoir-faire.
|
|
Depuis Flines-lez-Raches, je conçois des vitrines numériques
|
|
performantes qui inspirent confiance et génèrent des demandes
|
|
qualifiées à Douai, Orchies et Valenciennes.
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<a href="#contact">
|
|
<Button size="lg" className="w-full sm:w-auto pulse-glow text-base">
|
|
DÉMARRER MON AUDIT GRATUIT
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Trust line */}
|
|
<p className="mt-5 text-white/50 text-sm">
|
|
Réponse sous 24h · Pas de jargon · 100% Géré pour vous.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|