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
@@ -4,54 +4,36 @@ import { useState } from "react";
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "C\u2019est quoi l\u2019affiliation TikTok Shop exactement ?",
|
||||
answer:
|
||||
"L\u2019affiliation TikTok Shop te permet de gagner des commissions en faisant la promotion de produits dans tes vid\u00e9os TikTok. Tu n\u2019as pas besoin de stock ni d\u2019investissement : tu cr\u00e9es du contenu, les gens ach\u00e8tent via ton lien, et tu touches entre 10% et 30% de commission sur chaque vente.",
|
||||
q: "Combien co\u00fbte un site avec HookLab ?",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Ai-je besoin d\u2019exp\u00e9rience sur TikTok pour commencer ?",
|
||||
answer:
|
||||
"Non, aucune exp\u00e9rience n\u2019est requise. Notre programme part de z\u00e9ro et t\u2019accompagne \u00e9tape par \u00e9tape. Beaucoup de nos \u00e9l\u00e8ves n\u2019avaient jamais post\u00e9 de vid\u00e9o avant de commencer. On t\u2019apprend tout : la cr\u00e9ation de contenu, l\u2019algorithme, la s\u00e9lection de produits.",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Combien faut-il de followers pour d\u00e9marrer l\u2019affiliation TikTok Shop ?",
|
||||
answer:
|
||||
"TikTok Shop demande un minimum de 1 500 followers pour acc\u00e9der au programme d\u2019affiliation. Si tu ne les as pas encore, notre formation t\u2019apprend \u00e0 les atteindre rapidement gr\u00e2ce \u00e0 des strat\u00e9gies de contenu \u00e9prouv\u00e9es.",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Combien de temps dois-je consacrer par jour ?",
|
||||
answer:
|
||||
"Nous recommandons un minimum de 2 heures par jour pour des r\u00e9sultats optimaux. Le programme est con\u00e7u pour \u00eatre flexible et s\u2019adapter \u00e0 ton emploi du temps, que tu sois \u00e9tudiant, salari\u00e9 ou parent.",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Quand vais-je voir mes premi\u00e8res commissions TikTok Shop ?",
|
||||
answer:
|
||||
"La plupart de nos \u00e9l\u00e8ves g\u00e9n\u00e8rent leurs premi\u00e8res commissions dans les 2 \u00e0 4 premi\u00e8res semaines. Les r\u00e9sultats varient selon ton implication et le temps consacr\u00e9. Ce n\u2019est pas un sch\u00e9ma d\u2019argent facile mais un vrai business qui demande du travail.",
|
||||
q: "Combien de temps pour avoir des r\u00e9sultats ?",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Dois-je investir de l\u2019argent en plus du programme ?",
|
||||
answer:
|
||||
"Non. L\u2019affiliation TikTok Shop ne n\u00e9cessite aucun stock ni investissement suppl\u00e9mentaire. Tu gagnes des commissions sur les ventes g\u00e9n\u00e9r\u00e9es par tes vid\u00e9os. Tout ce qu\u2019il te faut c\u2019est un smartphone et une connexion internet.",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Comment se d\u00e9roule le coaching HookLab ?",
|
||||
answer:
|
||||
"Le coaching comprend des modules vid\u00e9o hebdomadaires, des appels de groupe chaque semaine, un support WhatsApp illimit\u00e9, et l\u2019acc\u00e8s \u00e0 une communaut\u00e9 priv\u00e9e d\u2019entrepreneurs. Tu avances \u00e0 ton rythme avec un suivi personnalis\u00e9.",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "Puis-je payer la formation en plusieurs fois ?",
|
||||
answer:
|
||||
"Oui, le paiement se fait en 2 mensualit\u00e9s de 490\u20ac. Le premier paiement donne acc\u00e8s imm\u00e9diat au programme, le second est pr\u00e9lev\u00e9 automatiquement le mois suivant. Le paiement est s\u00e9curis\u00e9 via Stripe.",
|
||||
},
|
||||
{
|
||||
question: "Y a-t-il une garantie de remboursement ?",
|
||||
answer:
|
||||
"Oui, nous offrons une garantie satisfait ou rembours\u00e9 de 14 jours. Si le programme ne te convient pas, tu es rembours\u00e9 int\u00e9gralement, sans condition. Nous croyons en la qualit\u00e9 de notre formation.",
|
||||
},
|
||||
{
|
||||
question: "TikTok Shop est-il disponible en France ?",
|
||||
answer:
|
||||
"Oui ! TikTok Shop a \u00e9t\u00e9 lanc\u00e9 en France et le programme d\u2019affiliation est ouvert aux cr\u00e9ateurs fran\u00e7ais. Le march\u00e9 fran\u00e7ais a g\u00e9n\u00e9r\u00e9 plus de 50 millions d\u2019euros en seulement 2 mois fin 2025, ce qui montre le potentiel \u00e9norme de cette plateforme.",
|
||||
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.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -61,19 +43,16 @@ export default function FAQ() {
|
||||
const faqJsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
mainEntity: faqs.map((faq) => ({
|
||||
mainEntity: faqs.map((f) => ({
|
||||
"@type": "Question",
|
||||
name: faq.question,
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: faq.answer,
|
||||
},
|
||||
name: f.q,
|
||||
acceptedAnswer: { "@type": "Answer", text: f.a },
|
||||
})),
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="faq" className="py-20 md:py-32 bg-dark-light/30">
|
||||
{/* FAQ Structured Data for Google Rich Results */}
|
||||
<section id="faq" className="py-16 md:py-24 bg-bg" aria-label="Questions fr\u00e9quentes">
|
||||
{/* JSON-LD for Google */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
|
||||
@@ -81,17 +60,15 @@ export default function FAQ() {
|
||||
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-3 py-1.5 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
|
||||
<div className="text-center mb-12">
|
||||
<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-3xl md:text-4xl lg:text-5xl font-bold tracking-[-0.02em] mb-4">
|
||||
Questions sur la{" "}
|
||||
<span className="gradient-text">formation TikTok Shop</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
|
||||
Questions fréquentes
|
||||
</h2>
|
||||
<p className="text-white/60 text-lg">
|
||||
Tout ce que tu dois savoir sur l'affiliation TikTok Shop et
|
||||
notre programme de coaching.
|
||||
<p className="text-text-light text-base">
|
||||
Les questions que les artisans me posent le plus souvent.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -100,35 +77,31 @@ export default function FAQ() {
|
||||
{faqs.map((faq, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-dark-light border border-dark-border rounded-2xl overflow-hidden transition-all duration-300"
|
||||
className="bg-bg-white border border-border rounded-xl overflow-hidden"
|
||||
>
|
||||
<button
|
||||
className="w-full px-6 py-5 flex items-center justify-between text-left cursor-pointer"
|
||||
className="w-full flex items-center justify-between p-5 text-left cursor-pointer hover:bg-bg-muted/50 transition-colors"
|
||||
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
||||
aria-expanded={openIndex === i}
|
||||
>
|
||||
<span className="text-white font-medium pr-4">
|
||||
{faq.question}
|
||||
<span className="text-navy font-semibold text-sm sm:text-base pr-4">
|
||||
{faq.q}
|
||||
</span>
|
||||
<svg
|
||||
className={`w-5 h-5 text-primary shrink-0 transition-transform duration-300 ${
|
||||
className={`w-5 h-5 text-text-muted shrink-0 transition-transform ${
|
||||
openIndex === i ? "rotate-180" : ""
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openIndex === i && (
|
||||
<div className="px-6 pb-5">
|
||||
<p className="text-white/60 text-sm leading-relaxed">
|
||||
{faq.answer}
|
||||
<div className="px-5 pb-5">
|
||||
<p className="text-text-light text-sm leading-relaxed">
|
||||
{faq.a}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user