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
@@ -1,101 +1,45 @@
|
||||
import Link from "next/link";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative pt-16 pb-20 md:pt-24 md:pb-32 overflow-hidden">
|
||||
{/* Gradient background effect */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-primary/20 rounded-full blur-[120px]" />
|
||||
</div>
|
||||
<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">
|
||||
{/* 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 — Flines-lez-Raches, Nord (59)
|
||||
</span>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
{/* Badges */}
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-8">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium">
|
||||
<span className="w-1.5 h-1.5 bg-success rounded-full animate-pulse" />
|
||||
Nouvelle session ouverte — Places limitées
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-dark-light border border-dark-border rounded-full text-white/60 text-xs font-medium">
|
||||
Programme intensif 8 semaines
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* H1 SEO-optimisé avec mots-clés cibles */}
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-[-0.02em] leading-[1.1] mb-6">
|
||||
La <span className="gradient-text">formation TikTok Shop</span>{" "}
|
||||
pour devenir créateur affilié en France
|
||||
{/* 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-à-oreille en{" "}
|
||||
<span className="text-orange">système automatique</span>.
|
||||
</h1>
|
||||
|
||||
{/* Sous-titre SEO avec mots-clés secondaires */}
|
||||
<p className="text-lg md:text-xl text-white/60 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Apprends à <strong className="text-white/80">gagner des commissions sur TikTok Shop</strong> en
|
||||
créant du contenu vidéo. Programme de coaching complet en 8 semaines :
|
||||
de zéro à tes premiers revenus d'affiliation.
|
||||
{/* Subtitle */}
|
||||
<p className="text-text-light text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl mx-auto">
|
||||
Arrêtez de courir après les chantiers. Laissez votre site
|
||||
filtrer et convaincre les bons clients pour vous.
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||
<Link href="/candidature">
|
||||
<Button size="lg" className="pulse-glow text-lg px-10">
|
||||
Candidater maintenant
|
||||
{/* CTA */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#contact">
|
||||
<Button size="lg" className="w-full sm:w-auto pulse-glow">
|
||||
Réserver mon Audit à Flines-lez-Raches
|
||||
</Button>
|
||||
</Link>
|
||||
<a href="#resultats">
|
||||
<Button variant="secondary" size="lg">
|
||||
Voir les résultats
|
||||
</a>
|
||||
<a href="#systeme">
|
||||
<Button size="lg" variant="outline" className="w-full sm:w-auto">
|
||||
Découvrir le système
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Social proof */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 md:gap-10">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex -space-x-2">
|
||||
{["M", "S", "T", "A", "J"].map((letter, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-8 h-8 rounded-full gradient-bg border-2 border-dark flex items-center justify-center text-xs font-bold text-white"
|
||||
>
|
||||
{letter}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-white/60">
|
||||
<span className="text-white font-semibold">+120</span> élèves
|
||||
formés
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className="w-4 h-4 text-warning"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
<span className="text-sm text-white/60 ml-1">
|
||||
<span className="text-white font-semibold">4.9/5</span> de
|
||||
satisfaction
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compatible avec */}
|
||||
<div className="mt-12 pt-8 border-t border-dark-border">
|
||||
<p className="text-white/30 text-xs uppercase tracking-wider mb-4">
|
||||
Programme compatible avec
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-8 text-white/20">
|
||||
<span className="text-lg font-bold">TikTok Shop</span>
|
||||
<span className="text-lg font-bold">Stripe</span>
|
||||
<span className="text-lg font-bold">WhatsApp</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Trust line */}
|
||||
<p className="mt-8 text-text-muted text-sm">
|
||||
Audit gratuit · Sans engagement · Réponse sous 24h
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user