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
@@ -5,138 +5,86 @@ import Link from "next/link";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 glass">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16 md:h-20">
|
||||
<nav className="sticky top-0 z-50 bg-bg-white/90 backdrop-blur-md border-b border-border" role="navigation" aria-label="Navigation principale">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">H</span>
|
||||
<Link href="/" className="flex items-center gap-2" aria-label="HookLab - Accueil">
|
||||
<div className="w-9 h-9 bg-navy rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-base">H</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-white">
|
||||
Hook<span className="gradient-text">Lab</span>
|
||||
<span className="text-xl font-bold text-navy">
|
||||
Hook<span className="text-orange">Lab</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Navigation desktop */}
|
||||
{/* Desktop links */}
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="#methode"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
>
|
||||
Méthode
|
||||
<a href="#systeme" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
|
||||
Le Système
|
||||
</a>
|
||||
<a
|
||||
href="#temoignages"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
>
|
||||
Résultats
|
||||
<a href="#portfolio" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
|
||||
Réalisations
|
||||
</a>
|
||||
<a
|
||||
href="#tarif"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
>
|
||||
Tarif
|
||||
<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-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
>
|
||||
<a href="#faq" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
|
||||
FAQ
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* CTA desktop */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link href="/login">
|
||||
<Button variant="ghost" size="sm">
|
||||
Connexion
|
||||
<div className="hidden md:block">
|
||||
<a href="#contact">
|
||||
<Button size="sm" className="pulse-glow">
|
||||
Réserver mon Audit
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/candidature">
|
||||
<Button size="sm">Candidater</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Hamburger mobile */}
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
className="md:hidden text-white p-2"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label="Menu"
|
||||
className="md:hidden p-2 text-text-light hover:text-navy transition-colors cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{isOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
{open ? (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Menu mobile */}
|
||||
{isOpen && (
|
||||
<div className="md:hidden pb-6 border-t border-dark-border pt-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<a
|
||||
href="#methode"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Méthode
|
||||
</a>
|
||||
<a
|
||||
href="#temoignages"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Résultats
|
||||
</a>
|
||||
<a
|
||||
href="#tarif"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Tarif
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
className="text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
<div className="flex flex-col gap-2 pt-2">
|
||||
<Link href="/login">
|
||||
<Button variant="ghost" size="sm" className="w-full">
|
||||
Connexion
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/candidature">
|
||||
<Button size="sm" className="w-full">
|
||||
Candidater
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile menu */}
|
||||
{open && (
|
||||
<div className="md:hidden border-t border-border py-4 space-y-3">
|
||||
<a href="#systeme" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
|
||||
Le Système
|
||||
</a>
|
||||
<a href="#portfolio" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
|
||||
Ré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éserver mon Audit
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user