feat: pivot complet - agence web artisans BTP Nord + Sanity CMS
Transformation complète du site HookLab de formation TikTok Shop vers une landing page haute conversion pour agence web locale ciblant les artisans du bâtiment dans le Nord (Douai, Orchies, Valenciennes). - Nouveau design system : bleu nuit/orange sur fond clair (mobile-first) - Hero avec promesse artisan + CTA orange "Réserver mon Audit" - Section "Le Système" (3 étapes : Trouvé, Choisi, Contacté) - Portfolio connecté à Sanity.io (fallback data intégré) - Section "Qui suis-je" avec carte OpenStreetMap interactive - FAQ orientée artisans avec JSON-LD pour Google - Formulaire contact audit gratuit - SEO local : 12 keywords artisans, JSON-LD LocalBusiness - Sanity.io schemas (portfolio, siteSettings) + client conditionnel - Accessibilité : skip-to-content, focus-visible, aria-labels https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
This commit is contained in:
Claude
95
components/marketing/System.tsx
Normal file
95
components/marketing/System.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import Card from "@/components/ui/Card";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
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" />
|
||||
</svg>
|
||||
),
|
||||
step: "01",
|
||||
title: "On vous trouve",
|
||||
subtitle: "Visibilit\u00e9 Google",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
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="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",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
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" />
|
||||
</svg>
|
||||
),
|
||||
step: "03",
|
||||
title: "On vous contacte",
|
||||
subtitle: "Filtrage intelligent",
|
||||
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.",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
<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ème
|
||||
</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>
|
||||
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
|
||||
Je ne vous vends pas “un beau site”. Je construis un système
|
||||
qui filtre les demandes inutiles et transforme votre réputation en
|
||||
machine à clients.
|
||||
</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}
|
||||
</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}
|
||||
</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é</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é</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user