From ba1d24fa027df8775781a95e4e5754b429594a7e Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 11 Feb 2026 12:02:42 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20refonte=20compl=C3=A8te=20landing=20pag?= =?UTF-8?q?e=20-=20tunnel=20de=20vente=20+=20SEO=20optimis=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SEO technique: sitemap.ts, robots.ts, structured data JSON-LD (Organization, Course, FAQPage) - Meta tags optimisés pour 12+ mots-clés TikTok Shop France - Hero SEO-optimisé: H1 ciblant "formation TikTok Shop" + "créateur affilié France" - Nouvelle section ResultsShowcase: stats marché TikTok Shop + timeline 8 semaines - Tableau comparatif HookLab vs alternatives - 6 témoignages avec disclaimer Google-compliant (pas de faux avis) - Pricing avec prix barré, bonus inclus, garantie satisfait ou remboursé - Badges de confiance (paiement sécurisé, RGPD, support, garantie) - Pop-up exit-intent (desktop) avec stats marché - Barre sticky CTA mobile - Notifications social proof animées - CTA final avant footer - Barre d'annonce urgence en haut - FAQ enrichie (10 questions) avec structured data FAQPage - Smooth scroll + animations CSS ajoutées https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y --- app/globals.css | 29 ++++- app/layout.tsx | 127 ++++++++++++++++++-- app/page.tsx | 57 ++++++++- app/robots.ts | 16 +++ app/sitemap.ts | 44 +++++++ components/marketing/AnnouncementBar.tsx | 28 +++++ components/marketing/ComparisonTable.tsx | 116 +++++++++++++++++++ components/marketing/ExitIntentPopup.tsx | 105 +++++++++++++++++ components/marketing/FAQ.tsx | 69 ++++++++--- components/marketing/FinalCTA.tsx | 59 ++++++++++ components/marketing/Hero.tsx | 42 ++++--- components/marketing/Method.tsx | 65 +++++++++-- components/marketing/Pricing.tsx | 128 ++++++++++++++++----- components/marketing/ResultsShowcase.tsx | 115 ++++++++++++++++++ components/marketing/SocialProofTicker.tsx | 60 ++++++++++ components/marketing/StickyMobileCTA.tsx | 33 ++++++ components/marketing/Testimonials.tsx | 68 ++++++++--- components/marketing/TrustBadges.tsx | 58 ++++++++++ 18 files changed, 1113 insertions(+), 106 deletions(-) create mode 100644 app/robots.ts create mode 100644 app/sitemap.ts create mode 100644 components/marketing/AnnouncementBar.tsx create mode 100644 components/marketing/ComparisonTable.tsx create mode 100644 components/marketing/ExitIntentPopup.tsx create mode 100644 components/marketing/FinalCTA.tsx create mode 100644 components/marketing/ResultsShowcase.tsx create mode 100644 components/marketing/SocialProofTicker.tsx create mode 100644 components/marketing/StickyMobileCTA.tsx create mode 100644 components/marketing/TrustBadges.tsx diff --git a/app/globals.css b/app/globals.css index 9789af3..26b9d54 100644 --- a/app/globals.css +++ b/app/globals.css @@ -29,7 +29,12 @@ body { font-family: var(--font-sans); } -/* Scrollbar personnalisée */ +/* Smooth scroll for anchor links */ +html { + scroll-behavior: smooth; +} + +/* Scrollbar personnalisee */ ::-webkit-scrollbar { width: 6px; } @@ -90,3 +95,25 @@ body { .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } + +/* Scale in animation for popups */ +@keyframes scale-in { + 0% { + transform: scale(0.9); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +.animate-scale-in { + animation: scale-in 0.3s ease-out; +} + +/* Selection color */ +::selection { + background: rgba(109, 94, 246, 0.3); + color: #ffffff; +} diff --git a/app/layout.tsx b/app/layout.tsx index 25e5e40..1c88230 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,22 +1,75 @@ import type { Metadata } from "next"; import "./globals.css"; +const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://hooklab.eu"; + export const metadata: Metadata = { - title: "HookLab | Programme coaching TikTok Shop 8 semaines", + metadataBase: new URL(BASE_URL), + title: { + default: + "HookLab | Formation TikTok Shop France - Deviens Cr\u00e9ateur Affili\u00e9", + template: "%s | HookLab", + }, description: - "Rejoins HookLab et lance ton business TikTok Shop en 8 semaines. Programme de coaching complet pour créateurs affiliés.", + "Formation coaching TikTok Shop en 8 semaines. Deviens cr\u00e9ateur affili\u00e9 et g\u00e9n\u00e8re des revenus avec l\u2019affiliation TikTok Shop en France. Programme complet : strat\u00e9gie, contenu, mon\u00e9tisation.", keywords: [ - "TikTok Shop", - "coaching", - "affiliation", - "créateur", - "formation", + "formation TikTok Shop", + "coaching TikTok Shop", + "affiliation TikTok Shop France", + "gagner de l'argent TikTok Shop", + "cr\u00e9ateur TikTok Shop France", + "commission TikTok Shop", + "programme affiliation TikTok", + "revenus TikTok Shop", + "devenir affili\u00e9 TikTok Shop", + "mon\u00e9tisation TikTok France", + "tuto TikTok Shop d\u00e9butant", + "revenus passifs TikTok", ], + authors: [{ name: "HookLab" }], + creator: "HookLab", + publisher: "HookLab", + robots: { + index: true, + follow: true, + googleBot: { + index: true, + follow: true, + "max-video-preview": -1, + "max-image-preview": "large", + "max-snippet": -1, + }, + }, openGraph: { - title: "HookLab | Programme coaching TikTok Shop", - description: - "Lance ton business TikTok Shop en 8 semaines avec notre programme de coaching.", type: "website", + locale: "fr_FR", + url: BASE_URL, + siteName: "HookLab", + title: + "HookLab | Formation TikTok Shop France - Deviens Cr\u00e9ateur Affili\u00e9", + description: + "Formation coaching TikTok Shop en 8 semaines. Deviens cr\u00e9ateur affili\u00e9 et g\u00e9n\u00e8re tes premiers revenus avec l\u2019affiliation TikTok Shop en France.", + images: [ + { + url: "/og-image.png", + width: 1200, + height: 630, + alt: "HookLab - Formation TikTok Shop France", + }, + ], + }, + twitter: { + card: "summary_large_image", + title: "HookLab | Formation TikTok Shop France", + description: + "Deviens cr\u00e9ateur affili\u00e9 TikTok Shop et g\u00e9n\u00e8re des revenus en 8 semaines de coaching.", + images: ["/og-image.png"], + }, + alternates: { + canonical: BASE_URL, + }, + verification: { + google: process.env.GOOGLE_SITE_VERIFICATION || undefined, }, }; @@ -25,8 +78,62 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const jsonLdOrganization = { + "@context": "https://schema.org", + "@type": "Organization", + name: "HookLab", + url: BASE_URL, + logo: `${BASE_URL}/logo.png`, + description: + "Programme de coaching TikTok Shop pour devenir cr\u00e9ateur affili\u00e9 en France.", + contactPoint: { + "@type": "ContactPoint", + contactType: "customer service", + availableLanguage: "French", + }, + }; + + const jsonLdCourse = { + "@context": "https://schema.org", + "@type": "Course", + name: "Formation TikTok Shop - HookLab", + description: + "Programme de coaching intensif de 8 semaines pour devenir cr\u00e9ateur affili\u00e9 TikTok Shop. Apprenez \u00e0 cr\u00e9er du contenu, s\u00e9lectionner des produits et g\u00e9n\u00e9rer des commissions.", + provider: { + "@type": "Organization", + name: "HookLab", + url: BASE_URL, + }, + offers: { + "@type": "Offer", + price: "490", + priceCurrency: "EUR", + availability: "https://schema.org/LimitedAvailability", + }, + hasCourseInstance: { + "@type": "CourseInstance", + courseMode: "online", + duration: "P8W", + inLanguage: "fr", + }, + }; + return ( + +