enguerrandbusiness/obc-terrassement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refonte complète landing page - nouveau copywriting + 3 démos

Browse Source 
- SEO: nouveau title/description optimisé artisans BTP Nord (59)
- Navbar: CTA téléphone cliquable + menu simplifié
- Hero: fond sombre, H1 percutant "aussi solide que vos ouvrages"
- Nouvelle section Problématique (identification pain points)
- System: redesign sombre "Dossier de Confiance" avec 3 piliers tech
- Démos Live: 3 cards vers /macon, /paysagiste, /plombier
- FAQ: nouvelles questions orientées objections (Facebook, site gratuit)
- Footer: SEO avec expertises + zone d'intervention étendue
- /macon: galerie Avant/Après + bouton Urgence Fuite
- /paysagiste: design épuré + filtrage Création vs Entretien
- /plombier: tarifs clairs + formulaire diagnostic rapide

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
This commit is contained in:
Claude
2026-02-15 19:14:01 +00:00
parent 45f5cc0e9e
commit a845b47316
12 changed files with 760 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
components/marketing/DemosLive.tsx Normal file
View File

@@ -0,0 +1,115 @@
import Card from "@/components/ui/Card";
import Link from "next/link";
const demos = [
{
title: "Le Pack \u00ab\u00a0Gros \u0152uvre\u00a0\u00bb",
subtitle: "Ma\u00e7on / Couvreur",
pourQui: "Ma\u00e7ons, Couvreurs, Charpentiers.",
pointFort: "La galerie \u00ab\u00a0Avant / Apr\u00e8s\u00a0\u00bb qui prouve votre technique et justifie vos devis.",
fonctionnalite: "Bouton \u00ab\u00a0Urgence Fuite\u00a0\u00bb qui d\u00e9clenche l\u2019appel imm\u00e9diat.",
cta: "Voir la D\u00e9mo Ma\u00e7onnerie",
href: "/macon",
icon: (
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
),
},
{
title: "Le Pack \u00ab\u00a0Esth\u00e9tique\u00a0\u00bb",
subtitle: "Paysagiste / Peintre",
pourQui: "Paysagistes, Peintres, D\u00e9corateurs.",
pointFort: "Un design \u00e9pur\u00e9 qui laisse toute la place \u00e0 la beaut\u00e9 de vos r\u00e9alisations.",
fonctionnalite: "Filtrage \u00ab\u00a0Cr\u00e9ation vs Entretien\u00a0\u00bb pour ne recevoir que les projets \u00e0 forte valeur.",
cta: "Voir la D\u00e9mo Paysagiste",
href: "/paysagiste",
icon: (
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
),
},
{
title: "Le Pack \u00ab\u00a0Urgence & Service\u00a0\u00bb",
subtitle: "Plombier / \u00c9lec",
pourQui: "Plombiers, \u00c9lectriciens, Serruriers.",
pointFort: "Vitesse de chargement \u00e9clair et rassurance imm\u00e9diate (Avis + Tarifs clairs).",
fonctionnalite: "Formulaire de diagnostic rapide pour qualifier la panne avant de vous d\u00e9placer.",
cta: "Voir la D\u00e9mo Plombier",
href: "/plombier",
icon: (
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
),
},
];
export default function DemosLive() {
return (
<section id="demos" className="py-16 md:py-24 bg-bg" aria-label="D\u00e9mos 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&eacute;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&rsquo;ai construit 3 mod&egrave;les
de &laquo;&nbsp;Dossiers de Confiance&nbsp;&raquo; optimis&eacute;s pour vos m&eacute;tiers.
Cliquez, naviguez, et imaginez votre logo &agrave; la place.
</p>
</div>
<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&eacute; cl&eacute;</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 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>
))}
</div>
</div>
</section>
);
}

49
components/marketing/FAQ.tsx
View File

@@ -4,36 +4,28 @@ import { useState } from "react";
const faqs = [
{
q: "Combien co\u00fbte un site avec HookLab ?",
q: "J\u2019ai d\u00e9j\u00e0 une page Facebook, \u00e7a suffit non\u00a0?",
a: "Facebook, c\u2019est pour les amis. Google, c\u2019est pour les clients qui ont un carnet de ch\u00e8ques et une urgence. Un site professionnel inspire 56% plus de confiance qu\u2019une simple page sociale.",
},
{
q: "Est-ce que je pourrai changer mes photos moi-m\u00eame\u00a0?",
a: "Oui. Je vous donne acc\u00e8s \u00e0 une interface simplifi\u00e9e (Sanity). C\u2019est aussi simple que d\u2019envoyer un SMS. Vous changez une photo, le site se met \u00e0 jour tout seul.",
},
{
q: "C\u2019est quoi la diff\u00e9rence avec un site gratuit\u00a0?",
a: "Un site gratuit, c\u2019est comme construire une maison sans fondations. \u00c7a ne tient pas, Google ne le voit pas, et \u00e7a fait fuir les gros chantiers. Je vous construis un actif num\u00e9rique durable.",
},
{
q: "Combien co\u00fbte un site avec HookLab\u00a0?",
a: "Chaque projet est diff\u00e9rent. Je propose un audit gratuit pour comprendre votre situation et vous faire une proposition adapt\u00e9e \u00e0 votre activit\u00e9. Pas d\u2019abonnement cach\u00e9, pas de surprise.",
},
{
q: "C\u2019est quoi la diff\u00e9rence avec une \u00ab agence web \u00bb classique ?",
a: "Je ne vous vends pas un site pour faire joli. Je construis un syst\u00e8me complet : site + Google + preuves sociales. L\u2019objectif : que votre t\u00e9l\u00e9phone sonne avec des vrais clients, pas des curieux.",
},
{
q: "Je me suis d\u00e9j\u00e0 fait avoir par un call center, pourquoi vous faire confiance ?",
a: "Je suis bas\u00e9 \u00e0 Flines-lez-Raches, pas dans un bureau \u00e0 Paris. On peut se voir en vrai. Je travaille avec des artisans du coin, vous pouvez v\u00e9rifier mes r\u00e9alisations et appeler mes clients.",
},
{
q: "J\u2019ai d\u00e9j\u00e0 une page Facebook, c\u2019est pas suffisant ?",
a: "Facebook c\u2019est bien pour montrer vos chantiers, mais personne ne cherche \u00ab couvreur Douai \u00bb sur Facebook. 90% des gens passent par Google. Sans site optimis\u00e9, vos concurrents r\u00e9cup\u00e8rent vos clients.",
},
{
q: "Combien de temps pour avoir des r\u00e9sultats ?",
q: "Combien de temps pour avoir des r\u00e9sultats\u00a0?",
a: "Le site est en ligne en 2-3 semaines. Les premiers r\u00e9sultats Google arrivent en 4 \u00e0 8 semaines selon votre zone et votre m\u00e9tier. Mais le site commence \u00e0 travailler pour vous d\u00e8s le jour 1.",
},
{
q: "J\u2019y connais rien en informatique, c\u2019est un probl\u00e8me ?",
a: "C\u2019est justement mon m\u00e9tier. Je m\u2019occupe de tout : cr\u00e9ation, mise en ligne, r\u00e9f\u00e9rencement. Vous, vous continuez vos chantiers. Et si vous voulez modifier quelque chose, un simple message suffit.",
},
{
q: "Est-ce que je pourrai modifier le site moi-m\u00eame ?",
a: "Oui. J\u2019utilise un syst\u00e8me de gestion de contenu (CMS) simple. Vous pouvez ajouter des photos de chantier ou modifier un texte aussi facilement qu\u2019un post Facebook.",
},
{
q: "Vous intervenez uniquement dans le Nord ?",
a: "Ma zone principale c\u2019est le Douaisis, l\u2019Orch\u00e9sien, le Valenciennois et l\u2019Arrageois. Mais je peux travailler avec des artisans partout en Hauts-de-France.",
q: "J\u2019y connais rien en informatique, c\u2019est un probl\u00e8me\u00a0?",
a: "C\u2019est justement mon m\u00e9tier. Je m\u2019occupe de tout\u00a0: cr\u00e9ation, mise en ligne, r\u00e9f\u00e9rencement. Vous, vous continuez vos chantiers. Et si vous voulez modifier quelque chose, un simple message suffit.",
},
];
@@ -64,12 +56,9 @@ export default function FAQ() {
<span className="inline-block px-3 py-1.5 bg-navy/5 border border-navy/10 rounded-full text-navy text-xs font-semibold mb-4">
FAQ
</span>
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
Questions fr&eacute;quentes
</h2>
<p className="text-text-light text-base">
Les questions que les artisans me posent le plus souvent.
</p>
<h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
Questions Franches
</h3>
</div>
{/* Accordion */}

53
components/marketing/Footer.tsx
View File

@@ -16,45 +16,23 @@ export default function Footer() {
</span>
</Link>
<p className="text-text-light text-sm leading-relaxed max-w-xs">
Agence web sp&eacute;cialis&eacute;e dans la visibilit&eacute; locale des artisans
du b&acirc;timent dans le Nord.
Cr&eacute;ation de sites pour le B&acirc;timent et l&rsquo;Artisanat.
</p>
<p className="text-text-muted text-xs mt-3">
Flines-lez-Raches, Nord (59)
59148 Flines-lez-Raches
</p>
</div>
{/* Links */}
{/* Expertises SEO */}
<div>
<h4 className="text-navy font-semibold text-sm mb-4">
Navigation
Expertises
</h4>
<ul className="space-y-2">
<li>
<a href="#systeme" className="text-text-light hover:text-navy text-sm transition-colors">
Le Syst&egrave;me
</a>
</li>
<li>
<a href="#portfolio" className="text-text-light hover:text-navy text-sm transition-colors">
R&eacute;alisations
</a>
</li>
<li>
<a href="#qui-suis-je" className="text-text-light hover:text-navy text-sm transition-colors">
Qui suis-je
</a>
</li>
<li>
<a href="#faq" className="text-text-light hover:text-navy text-sm transition-colors">
FAQ
</a>
</li>
<li>
<a href="#contact" className="text-text-light hover:text-navy text-sm transition-colors">
Contact
</a>
</li>
<ul className="space-y-2 text-text-light text-sm">
<li>Site internet Couvreur</li>
<li>SEO Ma&ccedil;onnerie</li>
<li>Webmaster Paysagiste</li>
<li>Visibilit&eacute; Menuisier</li>
</ul>
</div>
@@ -69,20 +47,25 @@ export default function Footer() {
</li>
<li>
<Link href="/confidentialite" className="text-text-light hover:text-navy text-sm transition-colors">
Confidentialit&eacute;
Politique de Confidentialit&eacute;
</Link>
</li>
<li>
<Link href="/plan-du-site" className="text-text-light hover:text-navy text-sm transition-colors">
Plan du site
</Link>
</li>
</ul>
</div>
</div>
{/* Bottom */}
{/* Bottom SEO */}
<div className="border-t border-border mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-3">
<p className="text-text-muted text-xs">
&copy; {new Date().getFullYear()} HookLab &mdash; Enguerrand Ozano &middot; SIREN 994 538 932
</p>
<p className="text-text-muted text-xs">
Douai &middot; Orchies &middot; Valenciennes &middot; Arleux
<p className="text-text-muted text-xs text-center md:text-right">
Intervention : Douai &middot; Orchies &middot; Arleux &middot; Valenciennes &middot; Saint-Amand-les-Eaux
</p>
</div>
</div>

42
components/marketing/Hero.tsx
View File

@@ -2,43 +2,43 @@ import Button from "@/components/ui/Button";
export default function Hero() {
return (
<section className="py-16 md:py-24 bg-bg-white" aria-label="Introduction">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto text-center">
<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/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-6">
Agence web locale &mdash; Flines-lez-Raches, Nord (59)
<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-navy leading-tight tracking-[-0.02em] mb-6">
Artisans du Nord : Transformez votre bouche-&agrave;-oreille en{" "}
<span className="text-orange">syst&egrave;me automatique</span>.
<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 &ecirc;tre aussi solide que{" "}
<span className="text-orange">vos ouvrages.</span>
</h1>
{/* Subtitle */}
<p className="text-text-light text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl mx-auto">
Arr&ecirc;tez de courir apr&egrave;s les chantiers. Laissez votre site
filtrer et convaincre les bons clients pour vous.
<p className="text-white/70 text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl">
Couvreurs, Ma&ccedil;ons, Paysagistes : Arr&ecirc;tez de perdre des chantiers
&agrave; cause d&rsquo;une image &laquo;&nbsp;bricol&eacute;e&nbsp;&raquo;. Depuis Flines-lez-Raches, je vous
construis une forteresse num&eacute;rique inviolable qui filtre les curieux
et attire les vrais projets &agrave; Douai, Orchies et Valenciennes.
</p>
{/* CTA */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex flex-col sm:flex-row gap-4">
<a href="#contact">
<Button size="lg" className="w-full sm:w-auto pulse-glow">
R&eacute;server mon Audit &agrave; Flines-lez-Raches
</Button>
</a>
<a href="#systeme">
<Button size="lg" variant="outline" className="w-full sm:w-auto">
D&eacute;couvrir le syst&egrave;me
<Button size="lg" className="w-full sm:w-auto pulse-glow text-base">
D&Eacute;MARRER MON AUDIT GRATUIT
</Button>
</a>
</div>
{/* Trust line */}
<p className="mt-8 text-text-muted text-sm">
Audit gratuit &middot; Sans engagement &middot; R&eacute;ponse sous 24h
<p className="mt-5 text-white/50 text-sm">
R&eacute;ponse sous 24h &middot; Pas de jargon &middot; 100% G&eacute;r&eacute; pour vous.
</p>
</div>
</div>

38
components/marketing/Navbar.tsx
View File

@@ -2,7 +2,6 @@
import { useState } from "react";
import Link from "next/link";
import Button from "@/components/ui/Button";
export default function Navbar() {
const [open, setOpen] = useState(false);
@@ -26,23 +25,24 @@ export default function Navbar() {
<a href="#systeme" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
Le Syst&egrave;me
</a>
<a href="#portfolio" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
<a href="#demos" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
R&eacute;alisations
</a>
<a href="#qui-suis-je" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
Qui suis-je
</a>
<a href="#faq" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
FAQ
</a>
</div>
{/* CTA desktop */}
{/* CTA desktop - Phone */}
<div className="hidden md:block">
<a href="#contact">
<Button size="sm" className="pulse-glow">
R&eacute;server mon Audit
</Button>
<a
href="tel:+33600000000"
className="inline-flex items-center gap-2 bg-orange text-white font-bold text-sm px-5 py-2.5 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
06 XX XX XX XX
</a>
</div>
@@ -71,19 +71,21 @@ export default function Navbar() {
<a href="#systeme" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
Le Syst&egrave;me
</a>
<a href="#portfolio" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
<a href="#demos" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
R&eacute;alisations
</a>
<a href="#qui-suis-je" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
Qui suis-je
</a>
<a href="#faq" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
FAQ
</a>
<a href="#contact" onClick={() => setOpen(false)}>
<Button size="sm" className="w-full mt-2">
R&eacute;server mon Audit
</Button>
<a
href="tel:+33600000000"
onClick={() => setOpen(false)}
className="flex items-center justify-center gap-2 bg-orange text-white font-bold text-sm px-5 py-3 rounded-xl mt-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
06 XX XX XX XX
</a>
</div>
)}

57
components/marketing/Problematique.tsx Normal file
View File

@@ -0,0 +1,57 @@
export default function Problematique() {
return (
<section className="py-16 md:py-24 bg-bg" aria-label="La probl&eacute;matique">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-4">
Vous &ecirc;tes un pro sur le chantier.{" "}
<span className="text-orange">Pourquoi votre pr&eacute;sence en ligne dit-elle le contraire&nbsp;?</span>
</h3>
<p className="text-text-light text-base md:text-lg">
Marc, je sais ce que vous vivez&nbsp;:
</p>
</div>
<div className="space-y-5 mb-12">
{[
{
title: "Le temps perdu",
text: "Vos soir\u00e9es passent \u00e0 faire des devis pour des gens qui cherchent \u00ab\u00a0le moins cher\u00a0\u00bb sur Leboncoin.",
},
{
title: "L\u2019invisibilit\u00e9",
text: "Des concurrents moins qualifi\u00e9s que vous sortent avant vous sur Google Maps.",
},
{
title: "La peur de la technique",
text: "On vous a parl\u00e9 de WordPress, de mises \u00e0 jour, de piratage\u2026 Vous voulez un outil, pas un deuxi\u00e8me travail.",
},
].map((item, i) => (
<div key={i} className="flex items-start gap-4 bg-bg-white border border-border rounded-xl p-5">
<div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center shrink-0 mt-0.5">
<svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<div>
<p className="text-navy font-bold text-base mb-1">{item.title}</p>
<p className="text-text-light text-sm leading-relaxed">{item.text}</p>
</div>
</div>
))}
</div>
{/* Stat choc */}
<div className="bg-navy rounded-2xl p-6 md:p-8 text-center">
<p className="text-white text-base md:text-lg leading-relaxed">
<strong className="text-orange text-2xl md:text-3xl font-extrabold block mb-2">93%</strong>
des acheteurs jugent votre cr&eacute;dibilit&eacute; sur le design de votre site.{" "}
<span className="text-white/70">
Si votre site est lent ou &laquo;&nbsp;moche&nbsp;&raquo;, le client pense que votre travail l&rsquo;est aussi.
</span>
</p>
</div>
</div>
</section>
);
}

84
components/marketing/System.tsx
View File

@@ -1,17 +1,16 @@
import Card from "@/components/ui/Card";
const steps = [
const features = [
{
icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
),
step: "01",
title: "On vous trouve",
subtitle: "Visibilit\u00e9 Google",
title: "Vitesse Supersonique",
subtitle: "Google adore",
description:
"Votre fiche Google optimis\u00e9e + un site r\u00e9f\u00e9renc\u00e9 sur les bons mots-cl\u00e9s locaux. Quand quelqu\u2019un cherche \u00ab couvreur Douai \u00bb ou \u00ab menuisier Orchies \u00bb, c\u2019est vous qui sortez.",
"Votre site se charge instantan\u00e9ment sur mobile. C\u2019est crucial pour le r\u00e9f\u00e9rencement et pour vos clients press\u00e9s. La technologie des g\u00e9ants (Netflix, Airbnb) adapt\u00e9e aux artisans du Nord.",
},
{
icon: (
@@ -19,76 +18,59 @@ const steps = [
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
),
step: "02",
title: "On vous choisit",
subtitle: "Site rassurant",
title: "S\u00e9curit\u00e9 Militaire",
subtitle: "HTTPS inclus",
description:
"Un site pro qui montre vos r\u00e9alisations, vos avis clients et votre s\u00e9rieux. Le visiteur se dit \u00ab c\u2019est lui qu\u2019il me faut \u00bb en 10 secondes, pas \u00ab c\u2019est quoi ce site bricol\u00e9 \u00bb.",
"Pas de base de donn\u00e9es \u00e0 pirater. Votre site est statique, blind\u00e9 et s\u00e9curis\u00e9 par d\u00e9faut (cadenas vert HTTPS obligatoire). Vos clients sont rassur\u00e9s.",
},
{
icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
),
step: "03",
title: "On vous contacte",
subtitle: "Filtrage intelligent",
title: "100% Mobile First",
subtitle: "Con\u00e7u pour le pouce",
description:
"Fini les devis pour des \u00ab touristes \u00bb. Le site filtre naturellement : seuls les gens s\u00e9rieux, avec le bon budget et le bon projet, d\u00e9crochent le t\u00e9l\u00e9phone.",
"Vos clients vous cherchent sur leur smartphone. Votre site est con\u00e7u pour le pouce, avec des boutons d\u2019appel \u00e9normes et accessibles.",
},
];
export default function System() {
return (
<section id="systeme" className="py-16 md:py-24 bg-bg" aria-label="Le syst\u00e8me">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<section id="systeme" className="relative py-16 md:py-24 bg-navy" aria-label="Le syst\u00e8me">
{/* Subtle pattern */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(255,255,255,0.03),transparent_60%)]" />
<div className="relative 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">
Le Syst&egrave;me
<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-4">
La Solution HookLab
</span>
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
Pas juste un site vitrine.{" "}
<span className="text-orange">Un dossier de confiance.</span>
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-3">
Le &laquo;&nbsp;Dossier de Confiance&nbsp;&raquo; :{" "}
<span className="text-orange">Plus qu&rsquo;un site, une infrastructure.</span>
</h2>
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
Je ne vous vends pas &ldquo;un beau site&rdquo;. Je construis un syst&egrave;me
qui filtre les demandes inutiles et transforme votre r&eacute;putation en
machine &agrave; clients.
<p className="text-white/60 text-base md:text-lg max-w-2xl mx-auto">
Je ne fais pas de sites &laquo;&nbsp;bricol&eacute;s&nbsp;&raquo; sur WordPress qui plantent si on ne les
met pas &agrave; jour. J&rsquo;utilise la technologie des g&eacute;ants adapt&eacute;e aux artisans du Nord.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{steps.map((s, i) => (
<Card key={i} hover className="text-center relative pt-10">
<div className="absolute top-4 right-4 text-text-muted/20 text-4xl font-black">
{s.step}
{features.map((f, i) => (
<Card key={i} hover className="text-center bg-white/5 border-white/10 backdrop-blur-sm">
<div className="w-16 h-16 bg-orange/20 rounded-2xl flex items-center justify-center mx-auto mb-5 text-orange">
{f.icon}
</div>
<div className="w-16 h-16 bg-orange/10 rounded-2xl flex items-center justify-center mx-auto mb-5 text-orange">
{s.icon}
</div>
<h3 className="text-navy font-bold text-lg mb-1">{s.title}</h3>
<p className="text-orange text-sm font-semibold mb-3">{s.subtitle}</p>
<p className="text-text-light text-sm leading-relaxed">
{s.description}
<h3 className="text-white font-bold text-lg mb-1">{f.title}</h3>
<p className="text-orange text-sm font-semibold mb-3">{f.subtitle}</p>
<p className="text-white/60 text-sm leading-relaxed">
{f.description}
</p>
</Card>
))}
</div>
<div className="flex justify-center mt-10">
<div className="flex items-center gap-3 bg-navy/5 border border-navy/10 rounded-full px-6 py-3">
<span className="text-navy font-semibold text-sm">Trouv&eacute;</span>
<svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
</svg>
<span className="text-navy font-semibold text-sm">Choisi</span>
<svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
</svg>
<span className="text-navy font-semibold text-sm">Contact&eacute;</span>
</div>
</div>
</div>
</section>
);