diff --git a/app/layout.tsx b/app/layout.tsx
index 7aa948c..4c4e105 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,11 +7,11 @@ export const metadata: Metadata = {
metadataBase: new URL(BASE_URL),
title: {
default:
- "HookLab | Cr\u00e9ation de sites web pour artisans du b\u00e2timent dans le Nord",
+ "Cr\u00e9ation Site Internet Artisan & BTP Nord (59) | HookLab Flines-lez-Raches",
template: "%s | HookLab",
},
description:
- "Agence web locale sp\u00e9cialis\u00e9e dans la visibilit\u00e9 Google des artisans du b\u00e2timent dans le Nord (Douai, Orchies, Valenciennes). Sites web, r\u00e9f\u00e9rencement local, syst\u00e8me de confiance.",
+ "Sp\u00e9cialiste web pour artisans du b\u00e2timent et paysagistes \u00e0 Douai, Orchies, Valenciennes. Site ultra-rapide, s\u00e9curis\u00e9 et con\u00e7u pour g\u00e9n\u00e9rer des chantiers qualifi\u00e9s. Audit offert.",
keywords: [
"site web artisan",
"cr\u00e9ation site artisan b\u00e2timent",
diff --git a/app/macon/page.tsx b/app/macon/page.tsx
new file mode 100644
index 0000000..06eeedb
--- /dev/null
+++ b/app/macon/page.tsx
@@ -0,0 +1,153 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Button from "@/components/ui/Button";
+
+export const metadata: Metadata = {
+ title: "D\u00e9mo Site Ma\u00e7on / Couvreur - Pack Gros \u0152uvre",
+ description:
+ "D\u00e9couvrez le mod\u00e8le de site HookLab pour ma\u00e7ons et couvreurs. Galerie Avant/Apr\u00e8s, bouton Urgence Fuite, optimis\u00e9 SEO local.",
+};
+
+const avantApres = [
+ { avant: "Toiture v\u00e9tuste - Tuiles cass\u00e9es", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" },
+ { avant: "Fa\u00e7ade fissur\u00e9e - Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation" },
+ { avant: "Chemin\u00e9e en ruine", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9" },
+];
+
+export default function MaconDemo() {
+ return (
+
+ {/* Nav simplifi\u00e9e */}
+
+
+ {/* Hero */}
+
+
+
+ Ma\u00e7onnerie & Couverture
+
+
+ [Votre Entreprise] — Ma\u00e7on Couvreur dans le Nord
+
+
+ Plus de 15 ans d’exp\u00e9rience en ma\u00e7onnerie et couverture. Devis gratuit sous 24h.
+ Intervention rapide sur Douai, Orchies et Valenciennes.
+
D\u00e9crivez votre probl\u00e8me en 30 secondes. On vous rappelle avec une solution.
+
+
+
+
+
+
+
+
+
+
+
+
+
Urgent
+
Fuite active
+
+
+
Mod\u00e9r\u00e9
+
Sous 48h
+
+
+
Planifi\u00e9
+
Travaux
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* CTA */}
+
+
+
Ceci est une d\u00e9mo HookLab
+
+ Ce site peut être le vôtre demain.
+
+
+ Un site qui rassure, qui qualifie les urgences, et qui vous fait gagner du temps. C’est ce que je construis pour les plombiers et \u00e9lectriciens du Nord.
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/marketing/DemosLive.tsx b/components/marketing/DemosLive.tsx
new file mode 100644
index 0000000..edfc920
--- /dev/null
+++ b/components/marketing/DemosLive.tsx
@@ -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: (
+
+ ),
+ },
+ {
+ 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: (
+
+ ),
+ },
+ {
+ 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: (
+
+ ),
+ },
+];
+
+export default function DemosLive() {
+ return (
+
+
+
+
+ Démos Live
+
+
+ Ne signez pas sans voir.{" "}
+ Testez votre futur site maintenant.
+
+
+ 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.
+
+
+ );
+}
diff --git a/components/marketing/FAQ.tsx b/components/marketing/FAQ.tsx
index db34af4..803945c 100644
--- a/components/marketing/FAQ.tsx
+++ b/components/marketing/FAQ.tsx
@@ -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() {
FAQ
-
- Questions fréquentes
-
-
- Les questions que les artisans me posent le plus souvent.
-
diff --git a/components/marketing/Hero.tsx b/components/marketing/Hero.tsx
index 81d14a0..e21ecc6 100644
--- a/components/marketing/Hero.tsx
+++ b/components/marketing/Hero.tsx
@@ -2,43 +2,43 @@ import Button from "@/components/ui/Button";
export default function Hero() {
return (
-
-
-
+
+ {/* Overlay pattern */}
+
+
+
+
{/* Badge */}
-
- Agence web locale — Flines-lez-Raches, Nord (59)
+
+ Flines-lez-Raches, Nord (59)
{/* H1 SEO */}
-
- Artisans du Nord : Transformez votre bouche-à-oreille en{" "}
- système automatique.
+
+ Artisans du Nord : Votre site web doit être aussi solide que{" "}
+ vos ouvrages.
{/* Subtitle */}
-
- Arrêtez de courir après les chantiers. Laissez votre site
- filtrer et convaincre les bons clients pour vous.
+
+ Couvreurs, Maçons, Paysagistes : Arrêtez de perdre des chantiers
+ à cause d’une image « bricolée ». Depuis Flines-lez-Raches, je vous
+ construis une forteresse numérique inviolable qui filtre les curieux
+ et attire les vrais projets à Douai, Orchies et Valenciennes.
)}
diff --git a/components/marketing/Problematique.tsx b/components/marketing/Problematique.tsx
new file mode 100644
index 0000000..8d8c358
--- /dev/null
+++ b/components/marketing/Problematique.tsx
@@ -0,0 +1,57 @@
+export default function Problematique() {
+ return (
+
+
+
+
+ Vous êtes un pro sur le chantier.{" "}
+ Pourquoi votre présence en ligne dit-elle le contraire ?
+
+
+ Marc, je sais ce que vous vivez :
+
+
+
+
+ {[
+ {
+ 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) => (
+
+
+
+
+
+
{item.title}
+
{item.text}
+
+
+ ))}
+
+
+ {/* Stat choc */}
+
+
+ 93%
+ des acheteurs jugent votre crédibilité sur le design de votre site.{" "}
+
+ Si votre site est lent ou « moche », le client pense que votre travail l’est aussi.
+
+
+
+
+
+ );
+}
diff --git a/components/marketing/System.tsx b/components/marketing/System.tsx
index 5b7e5db..90ab362 100644
--- a/components/marketing/System.tsx
+++ b/components/marketing/System.tsx
@@ -1,17 +1,16 @@
import Card from "@/components/ui/Card";
-const steps = [
+const features = [
{
icon: (
),
- 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 = [
),
- 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: (
),
- 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 (
-
-
+
+ {/* Subtle pattern */}
+
+
+
-
- Le Système
+
+ La Solution HookLab
-
- Pas juste un site vitrine.{" "}
- Un dossier de confiance.
+
+ Le « Dossier de Confiance » :{" "}
+ Plus qu’un site, une infrastructure.
-
- 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.
+
+ Je ne fais pas de sites « bricolés » sur WordPress qui plantent si on ne les
+ met pas à jour. J’utilise la technologie des géants adaptée aux artisans du Nord.