feat: animated hero with parallax rocket + scroll reveal animations
- Add animated hero section with parallax rocket SVG that descends on scroll - Add floating decorative particles and gradient layers in hero - Add staggered text reveal animation on hero h1 - Create ScrollReveal component (IntersectionObserver-based fade/slide) - Create AnimatedCounter component for stat numbers - Add scroll animations to all sections (Problematique, System, Demos, AboutMe, FAQ, Contact, Footer) - Add smooth FAQ accordion transitions - Add extensive CSS keyframe animations (float, flame, particles, stat glow) https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo
This commit is contained in:
Claude
@@ -1,14 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import Card from "@/components/ui/Card";
|
||||
import Link from "next/link";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
|
||||
const demos = [
|
||||
{
|
||||
title: "L\u2019Expertise Solide",
|
||||
subtitle: "Pour ceux dont le travail doit durer 100 ans.",
|
||||
pourQui: "Ma\u00e7ons, Couvreurs, Charpentiers.",
|
||||
pointFort: "Slider \u00ab\u00a0Avant / Apr\u00e8s\u00a0\u00bb interactif + badges garanties (D\u00e9cennale, Qualibat, RGE) immanquables.",
|
||||
fonctionnalite: "Formulaire intelligent : si Urgence Fuite \u2192 bouton rouge \u00ab\u00a0APPELER LE PATRON\u00a0\u00bb.",
|
||||
cta: "Voir la D\u00e9mo Ma\u00e7onnerie",
|
||||
pourQui: "Maçons, Couvreurs, Charpentiers.",
|
||||
pointFort: "Slider «\u00a0Avant / Après\u00a0» interactif + badges garanties (Décennale, Qualibat, RGE) immanquables.",
|
||||
fonctionnalite: "Formulaire intelligent : si Urgence Fuite \u2192 bouton rouge «\u00a0APPELER LE PATRON\u00a0».",
|
||||
cta: "Voir la Démo Maçonnerie",
|
||||
href: "/macon",
|
||||
icon: (
|
||||
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -17,12 +20,12 @@ const demos = [
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "L\u2019Artisan Cr\u00e9ateur",
|
||||
title: "L\u2019Artisan Créateur",
|
||||
subtitle: "Pour ceux qui vendent du beau et du confort.",
|
||||
pourQui: "Paysagistes, Peintres, D\u00e9corateurs.",
|
||||
pointFort: "Galerie filtrable par type + saisonnalit\u00e9 intelligente (le site change selon la saison).",
|
||||
fonctionnalite: "Bouton WhatsApp flottant \u00ab\u00a0Je veux le m\u00eame jardin\u00a0\u00bb + immersion locale par ville.",
|
||||
cta: "Voir la D\u00e9mo Paysagiste",
|
||||
pourQui: "Paysagistes, Peintres, Décorateurs.",
|
||||
pointFort: "Galerie filtrable par type + saisonnalité intelligente (le site change selon la saison).",
|
||||
fonctionnalite: "Bouton WhatsApp flottant «\u00a0Je veux le même jardin\u00a0» + immersion locale par ville.",
|
||||
cta: "Voir la Démo Paysagiste",
|
||||
href: "/paysagiste",
|
||||
icon: (
|
||||
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -31,12 +34,12 @@ const demos = [
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "L\u2019Intervention \u00c9clair",
|
||||
subtitle: "Pour ceux qui sauvent la mise (et veulent \u00eatre pay\u00e9s vite).",
|
||||
pourQui: "Plombiers, \u00c9lectriciens, Serruriers.",
|
||||
title: "L\u2019Intervention Éclair",
|
||||
subtitle: "Pour ceux qui sauvent la mise (et veulent être payés vite).",
|
||||
pourQui: "Plombiers, Électriciens, Serruriers.",
|
||||
pointFort: "Avis Google en haut + tarifs transparents + bouton d\u2019appel sticky sur mobile.",
|
||||
fonctionnalite: "Diagnostic en 3 clics : qualifie la panne + d\u00e9tecte si hors zone.",
|
||||
cta: "Voir la D\u00e9mo Plombier",
|
||||
fonctionnalite: "Diagnostic en 3 clics : qualifie la panne + détecte si hors zone.",
|
||||
cta: "Voir la Démo Plombier",
|
||||
href: "/plombier",
|
||||
icon: (
|
||||
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -48,65 +51,69 @@ const demos = [
|
||||
|
||||
export default function DemosLive() {
|
||||
return (
|
||||
<section id="demos" className="py-16 md:py-24 bg-bg" aria-label="D\u00e9mos live">
|
||||
<section id="demos" className="py-16 md:py-24 bg-bg" aria-label="Démos live">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-14">
|
||||
<span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
|
||||
Démos Live
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
|
||||
Ne signez pas sans voir.{" "}
|
||||
<span className="text-orange">Testez votre futur site maintenant.</span>
|
||||
</h2>
|
||||
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
|
||||
Je ne vous demande pas de me croire sur parole. J’ai construit 3 modèles
|
||||
de « Dossiers de Confiance » optimisés pour vos métiers.
|
||||
Cliquez, naviguez, et imaginez votre logo à la place.
|
||||
</p>
|
||||
</div>
|
||||
<ScrollReveal direction="up">
|
||||
<div className="text-center mb-14">
|
||||
<span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
|
||||
Démos Live
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
|
||||
Ne signez pas sans voir.{" "}
|
||||
<span className="text-orange">Testez votre futur site maintenant.</span>
|
||||
</h2>
|
||||
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
|
||||
Je ne vous demande pas de me croire sur parole. J’ai construit 3 modèles
|
||||
de « Dossiers de Confiance » optimisés pour vos métiers.
|
||||
Cliquez, naviguez, et imaginez votre logo à la place.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{demos.map((demo, i) => (
|
||||
<Card key={i} hover className="flex flex-col p-0 overflow-hidden">
|
||||
{/* Header visuel */}
|
||||
<div className="bg-navy p-6 text-center">
|
||||
<div className="w-16 h-16 bg-orange/20 rounded-2xl flex items-center justify-center mx-auto mb-3 text-orange">
|
||||
{demo.icon}
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-lg">{demo.title}</h3>
|
||||
<p className="text-orange text-sm font-semibold">{demo.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-5 flex-1 flex flex-col">
|
||||
<div className="space-y-3 flex-1">
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Pour qui ?</p>
|
||||
<p className="text-text-light text-sm">{demo.pourQui}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Le point fort</p>
|
||||
<p className="text-text-light text-sm">{demo.pointFort}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Fonctionnalité clé</p>
|
||||
<p className="text-text-light text-sm">{demo.fonctionnalite}</p>
|
||||
<ScrollReveal key={i} direction="up" delay={i * 200}>
|
||||
<Card hover className="flex flex-col p-0 overflow-hidden h-full">
|
||||
{/* Header visuel */}
|
||||
<div className="bg-navy p-6 text-center">
|
||||
<div className="w-16 h-16 bg-orange/20 rounded-2xl flex items-center justify-center mx-auto mb-3 text-orange">
|
||||
{demo.icon}
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-lg">{demo.title}</h3>
|
||||
<p className="text-orange text-sm font-semibold">{demo.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<Link
|
||||
href={demo.href}
|
||||
className="mt-5 flex items-center justify-center gap-2 bg-orange text-white font-bold text-sm px-5 py-3 rounded-xl hover:bg-orange/90 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
{demo.cta}
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
{/* Content */}
|
||||
<div className="p-5 flex-1 flex flex-col">
|
||||
<div className="space-y-3 flex-1">
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Pour qui ?</p>
|
||||
<p className="text-text-light text-sm">{demo.pourQui}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Le point fort</p>
|
||||
<p className="text-text-light text-sm">{demo.pointFort}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Fonctionnalité clé</p>
|
||||
<p className="text-text-light text-sm">{demo.fonctionnalite}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<Link
|
||||
href={demo.href}
|
||||
className="mt-5 flex items-center justify-center gap-2 bg-orange text-white font-bold text-sm px-5 py-3 rounded-xl hover:bg-orange/90 hover:scale-[1.02] transition-all duration-300"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
{demo.cta}
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user