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
151
app/globals.css
151
app/globals.css
@@ -2,118 +2,109 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme inline {
|
||||
--color-primary: #6D5EF6;
|
||||
--color-primary-hover: #5B4FDB;
|
||||
--color-primary-50: #F3F1FF;
|
||||
--color-primary-100: #E9E5FF;
|
||||
--color-primary-light: #9D8FF9;
|
||||
--color-navy: #1B2A4A;
|
||||
--color-navy-light: #2A3D66;
|
||||
--color-navy-dark: #111D36;
|
||||
|
||||
--color-dark: #0B0F19;
|
||||
--color-dark-light: #1A1F2E;
|
||||
--color-dark-lighter: #252A3A;
|
||||
--color-dark-border: #2A2F3F;
|
||||
--color-orange: #E8772E;
|
||||
--color-orange-hover: #D06522;
|
||||
--color-orange-light: #F5A623;
|
||||
|
||||
--color-bg: #F7F8FA;
|
||||
--color-bg-white: #FFFFFF;
|
||||
--color-bg-card: #FFFFFF;
|
||||
--color-bg-muted: #F0F2F5;
|
||||
|
||||
--color-text: #1A1A2E;
|
||||
--color-text-light: #6B7280;
|
||||
--color-text-muted: #9CA3AF;
|
||||
|
||||
--color-border: #E5E7EB;
|
||||
--color-border-light: #F3F4F6;
|
||||
|
||||
--color-success: #10B981;
|
||||
--color-warning: #F59E0B;
|
||||
--color-error: #EF4444;
|
||||
|
||||
--font-sans: "Inter", sans-serif;
|
||||
|
||||
--radius-card: 20px;
|
||||
--radius-button: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-dark);
|
||||
color: #ffffff;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* Smooth scroll for anchor links */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Scrollbar personnalisee */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-dark);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-dark-lighter);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Animation hover cards */
|
||||
/* Card hover */
|
||||
.card-hover {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(109, 94, 246, 0.15);
|
||||
box-shadow: 0 12px 32px rgba(27, 42, 74, 0.12);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #6D5EF6, #9D8FF9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Gradient background */
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #6D5EF6, #9D8FF9);
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
background: rgba(26, 31, 46, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(109, 94, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Pulse animation pour CTA */
|
||||
/* Orange CTA glow */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(109, 94, 246, 0.3);
|
||||
box-shadow: 0 0 16px rgba(232, 119, 46, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(109, 94, 246, 0.6);
|
||||
box-shadow: 0 0 32px rgba(232, 119, 46, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
animation: pulse-glow 2.5s 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 */
|
||||
::selection {
|
||||
background: rgba(109, 94, 246, 0.3);
|
||||
color: #ffffff;
|
||||
background: rgba(27, 42, 74, 0.15);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Skip to content */
|
||||
.skip-to-content {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
z-index: 999;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--color-navy);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border-radius: 0 0 8px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.skip-to-content:focus {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Focus visible */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--color-orange);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-navy);
|
||||
}
|
||||
|
||||
103
app/layout.tsx
103
app/layout.tsx
@@ -7,26 +7,26 @@ export const metadata: Metadata = {
|
||||
metadataBase: new URL(BASE_URL),
|
||||
title: {
|
||||
default:
|
||||
"HookLab | Formation TikTok Shop France - Deviens Cr\u00e9ateur Affili\u00e9",
|
||||
"HookLab | Cr\u00e9ation de sites web pour artisans du b\u00e2timent dans le Nord",
|
||||
template: "%s | HookLab",
|
||||
},
|
||||
description:
|
||||
"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.",
|
||||
"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.",
|
||||
keywords: [
|
||||
"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",
|
||||
"site web artisan",
|
||||
"cr\u00e9ation site artisan b\u00e2timent",
|
||||
"r\u00e9f\u00e9rencement local artisan",
|
||||
"agence web Nord",
|
||||
"site internet couvreur",
|
||||
"site internet menuisier",
|
||||
"site internet paysagiste",
|
||||
"visibilit\u00e9 Google artisan",
|
||||
"site web Douai",
|
||||
"site web Valenciennes",
|
||||
"agence web Orchies",
|
||||
"site pro artisan Nord",
|
||||
],
|
||||
authors: [{ name: "HookLab" }],
|
||||
authors: [{ name: "HookLab - Enguerrand Ozano" }],
|
||||
creator: "HookLab",
|
||||
publisher: "HookLab",
|
||||
robots: {
|
||||
@@ -46,23 +46,23 @@ export const metadata: Metadata = {
|
||||
url: BASE_URL,
|
||||
siteName: "HookLab",
|
||||
title:
|
||||
"HookLab | Formation TikTok Shop France - Deviens Cr\u00e9ateur Affili\u00e9",
|
||||
"HookLab | Sites web pour artisans du b\u00e2timent dans le Nord",
|
||||
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.",
|
||||
"Transformez votre bouche-\u00e0-oreille en syst\u00e8me automatique. Sites web et r\u00e9f\u00e9rencement Google pour artisans \u00e0 Douai, Orchies, Valenciennes.",
|
||||
images: [
|
||||
{
|
||||
url: "/og-image.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "HookLab - Formation TikTok Shop France",
|
||||
alt: "HookLab - Sites web pour artisans du Nord",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "HookLab | Formation TikTok Shop France",
|
||||
title: "HookLab | Sites web pour artisans du Nord",
|
||||
description:
|
||||
"Deviens cr\u00e9ateur affili\u00e9 TikTok Shop et g\u00e9n\u00e8re des revenus en 8 semaines de coaching.",
|
||||
"Agence web locale pour artisans du b\u00e2timent. Douai, Orchies, Valenciennes.",
|
||||
images: ["/og-image.png"],
|
||||
},
|
||||
alternates: {
|
||||
@@ -80,12 +80,33 @@ export default function RootLayout({
|
||||
}>) {
|
||||
const jsonLdOrganization = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"@type": "LocalBusiness",
|
||||
name: "HookLab",
|
||||
url: BASE_URL,
|
||||
logo: `${BASE_URL}/logo.png`,
|
||||
description:
|
||||
"Programme de coaching TikTok Shop pour devenir cr\u00e9ateur affili\u00e9 en France.",
|
||||
"Agence web sp\u00e9cialis\u00e9e dans la cr\u00e9ation de sites et la visibilit\u00e9 Google pour les artisans du b\u00e2timent dans le Nord.",
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
streetAddress: "35 rue Mo\u00efse Lambert",
|
||||
addressLocality: "Flines-lez-Raches",
|
||||
postalCode: "59148",
|
||||
addressRegion: "Nord",
|
||||
addressCountry: "FR",
|
||||
},
|
||||
geo: {
|
||||
"@type": "GeoCoordinates",
|
||||
latitude: 50.4267,
|
||||
longitude: 3.2372,
|
||||
},
|
||||
areaServed: [
|
||||
{ "@type": "City", name: "Douai" },
|
||||
{ "@type": "City", name: "Orchies" },
|
||||
{ "@type": "City", name: "Valenciennes" },
|
||||
{ "@type": "City", name: "Arleux" },
|
||||
{ "@type": "City", name: "Flines-lez-Raches" },
|
||||
],
|
||||
priceRange: "$$",
|
||||
contactPoint: {
|
||||
"@type": "ContactPoint",
|
||||
contactType: "customer service",
|
||||
@@ -93,31 +114,6 @@ export default function RootLayout({
|
||||
},
|
||||
};
|
||||
|
||||
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 (
|
||||
<html lang="fr">
|
||||
<head>
|
||||
@@ -127,14 +123,13 @@ export default function RootLayout({
|
||||
__html: JSON.stringify(jsonLdOrganization),
|
||||
}}
|
||||
/>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify(jsonLdCourse),
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="antialiased">{children}</body>
|
||||
<body className="antialiased">
|
||||
<a href="#main-content" className="skip-to-content">
|
||||
Aller au contenu principal
|
||||
</a>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
65
app/page.tsx
65
app/page.tsx
@@ -1,68 +1,41 @@
|
||||
import AnnouncementBar from "@/components/marketing/AnnouncementBar";
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Hero from "@/components/marketing/Hero";
|
||||
import ResultsShowcase from "@/components/marketing/ResultsShowcase";
|
||||
import Method from "@/components/marketing/Method";
|
||||
import PersonaCards from "@/components/marketing/PersonaCards";
|
||||
import ComparisonTable from "@/components/marketing/ComparisonTable";
|
||||
import Testimonials from "@/components/marketing/Testimonials";
|
||||
import Pricing from "@/components/marketing/Pricing";
|
||||
import TrustBadges from "@/components/marketing/TrustBadges";
|
||||
import System from "@/components/marketing/System";
|
||||
import Portfolio from "@/components/marketing/Portfolio";
|
||||
import AboutMe from "@/components/marketing/AboutMe";
|
||||
import FAQ from "@/components/marketing/FAQ";
|
||||
import FinalCTA from "@/components/marketing/FinalCTA";
|
||||
import Contact from "@/components/marketing/Contact";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import ExitIntentPopup from "@/components/marketing/ExitIntentPopup";
|
||||
import StickyMobileCTA from "@/components/marketing/StickyMobileCTA";
|
||||
import { getPortfolio } from "@/lib/sanity/queries";
|
||||
|
||||
export default async function LandingPage() {
|
||||
const portfolioItems = await getPortfolio();
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
{/* Top announcement bar */}
|
||||
<AnnouncementBar />
|
||||
|
||||
<main id="main-content" className="min-h-screen">
|
||||
{/* Navigation */}
|
||||
<Navbar />
|
||||
|
||||
{/* Hero with SEO-optimized H1 */}
|
||||
{/* Hero - La Promesse */}
|
||||
<Hero />
|
||||
|
||||
{/* Market opportunity + timeline */}
|
||||
<section id="resultats">
|
||||
<ResultsShowcase />
|
||||
</section>
|
||||
{/* Le Système - Dossier de Confiance */}
|
||||
<System />
|
||||
|
||||
{/* 3-step method */}
|
||||
<Method />
|
||||
{/* Portfolio - Preuves */}
|
||||
<Portfolio items={portfolioItems} />
|
||||
|
||||
{/* Target personas */}
|
||||
<PersonaCards />
|
||||
{/* Qui suis-je - Ancrage Local */}
|
||||
<AboutMe />
|
||||
|
||||
{/* Comparison table */}
|
||||
<ComparisonTable />
|
||||
|
||||
{/* Testimonials with disclaimer */}
|
||||
<Testimonials />
|
||||
|
||||
{/* Pricing with urgency */}
|
||||
<Pricing />
|
||||
|
||||
{/* Trust signals */}
|
||||
<TrustBadges />
|
||||
|
||||
{/* FAQ with structured data */}
|
||||
{/* FAQ */}
|
||||
<FAQ />
|
||||
|
||||
{/* Final CTA */}
|
||||
<FinalCTA />
|
||||
{/* Contact / Audit CTA */}
|
||||
<Contact />
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
|
||||
{/* Exit intent popup */}
|
||||
<ExitIntentPopup />
|
||||
|
||||
{/* Sticky mobile CTA bar */}
|
||||
<StickyMobileCTA />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function robots(): MetadataRoute.Robots {
|
||||
{
|
||||
userAgent: "*",
|
||||
allow: "/",
|
||||
disallow: ["/admin/", "/api/", "/setup-admin/", "/dashboard/", "/profil/", "/formations/"],
|
||||
disallow: ["/admin/", "/api/", "/setup-admin/", "/dashboard/", "/profil/", "/formations/", "/login/", "/register/"],
|
||||
},
|
||||
],
|
||||
sitemap: `${BASE_URL}/sitemap.xml`,
|
||||
|
||||
@@ -10,35 +10,17 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
||||
changeFrequency: "weekly",
|
||||
priority: 1.0,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/candidature`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/login`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.3,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/mentions-legales`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "yearly",
|
||||
priority: 0.2,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/cgv`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "yearly",
|
||||
priority: 0.2,
|
||||
priority: 0.3,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/confidentialite`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "yearly",
|
||||
priority: 0.2,
|
||||
priority: 0.3,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
60
components/CookieBanner.tsx
Normal file
60
components/CookieBanner.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function CookieBanner() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const consent = localStorage.getItem("hooklab_cookie_consent");
|
||||
if (!consent) {
|
||||
setVisible(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleAccept = () => {
|
||||
localStorage.setItem("hooklab_cookie_consent", "accepted");
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const handleRefuse = () => {
|
||||
localStorage.setItem("hooklab_cookie_consent", "refused");
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed bottom-0 left-0 right-0 z-[90] p-4 sm:p-6"
|
||||
role="dialog"
|
||||
aria-label="Gestion des cookies"
|
||||
>
|
||||
<div className="max-w-2xl mx-auto bg-dark-light border border-dark-border rounded-2xl p-4 sm:p-6 shadow-2xl">
|
||||
<p className="text-white/80 text-sm leading-relaxed mb-4">
|
||||
Ce site utilise uniquement des <strong className="text-white">cookies techniques</strong> nécessaires
|
||||
au fonctionnement de la plateforme (authentification, session). Aucun cookie publicitaire
|
||||
ou de traçage n’est utilisé.{" "}
|
||||
<Link href="/confidentialite" className="text-primary hover:underline">
|
||||
Politique de confidentialité
|
||||
</Link>
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={handleAccept}
|
||||
className="px-5 py-2.5 gradient-bg text-white text-sm font-semibold rounded-xl hover:opacity-90 transition-opacity cursor-pointer"
|
||||
>
|
||||
Accepter
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRefuse}
|
||||
className="px-5 py-2.5 bg-dark-lighter border border-dark-border text-white/60 text-sm font-medium rounded-xl hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
Refuser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
components/marketing/AboutMe.tsx
Normal file
91
components/marketing/AboutMe.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
export default function AboutMe() {
|
||||
return (
|
||||
<section id="qui-suis-je" className="py-16 md:py-24 bg-bg" aria-label="Qui suis-je">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<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">
|
||||
Votre expert local
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em]">
|
||||
Pas une plateforme anonyme.{" "}
|
||||
<span className="text-orange">Un voisin.</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
|
||||
{/* Left - Photo */}
|
||||
<div className="flex justify-center">
|
||||
<div className="relative">
|
||||
<div className="w-64 h-72 sm:w-72 sm:h-80 bg-bg-muted border-2 border-border rounded-2xl flex items-center justify-center overflow-hidden">
|
||||
<div className="text-center p-6">
|
||||
<div className="w-20 h-20 bg-navy/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-10 h-10 text-navy/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-text-muted text-sm">Votre photo ici</p>
|
||||
<p className="text-text-muted text-xs mt-1">(configurable via Sanity)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-orange text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
|
||||
Basé à Flines-lez-Raches
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right - Text */}
|
||||
<div>
|
||||
<p className="text-text text-base sm:text-lg leading-relaxed mb-4">
|
||||
Je suis <strong className="text-navy">Enguerrand</strong>, spécialisé dans la
|
||||
visibilité locale et la construction de{" "}
|
||||
<strong className="text-navy">systèmes de confiance en ligne</strong>{" "}
|
||||
pour les TPE/PME du Nord.
|
||||
</p>
|
||||
<p className="text-text-light text-base leading-relaxed mb-4">
|
||||
Je ne suis pas un call center parisien. Je connais la réalité de vos
|
||||
chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n’avez pas
|
||||
le temps de gérer “un truc internet” et que vous voulez des résultats
|
||||
concrets : des appels de <strong>vrais</strong> clients.
|
||||
</p>
|
||||
<p className="text-text-light text-base leading-relaxed mb-6">
|
||||
Mon approche : je vous construis un <strong className="text-navy">dossier de confiance</strong>{" "}
|
||||
(Google + site + preuves) qui transforme votre bouche-à-oreille en système
|
||||
permanent. Pas de jargon, pas de blabla — du concret.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-bg-white border border-border rounded-xl p-4 text-center">
|
||||
<p className="text-2xl font-bold text-navy">100%</p>
|
||||
<p className="text-text-muted text-xs mt-1">Local Nord</p>
|
||||
</div>
|
||||
<div className="bg-bg-white border border-border rounded-xl p-4 text-center">
|
||||
<p className="text-2xl font-bold text-navy">24h</p>
|
||||
<p className="text-text-muted text-xs mt-1">Délai de réponse</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div className="mt-12 bg-bg-white border border-border rounded-2xl overflow-hidden">
|
||||
<div className="p-4 border-b border-border flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span className="text-navy font-semibold text-sm">Zone d’intervention : Douai, Orchies, Arleux, Valenciennes et environs</span>
|
||||
</div>
|
||||
<div className="relative h-48 sm:h-64">
|
||||
<iframe
|
||||
src="https://www.openstreetmap.org/export/embed.html?bbox=2.8%2C50.25%2C3.7%2C50.55&layer=mapnik&marker=50.4267%2C3.2372"
|
||||
className="absolute inset-0 w-full h-full border-0"
|
||||
title="Carte de localisation - Flines-lez-Raches"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
136
components/marketing/Contact.tsx
Normal file
136
components/marketing/Contact.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function Contact() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-16 md:py-24 bg-navy" aria-label="Contact">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left - Text */}
|
||||
<div>
|
||||
<span className="inline-block px-3 py-1.5 bg-white/10 rounded-full text-orange text-xs font-semibold mb-4">
|
||||
Audit gratuit
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
|
||||
Prêt à arrêter de courir après les chantiers ?
|
||||
</h2>
|
||||
<p className="text-white/70 text-base leading-relaxed mb-6">
|
||||
Réservez votre audit gratuit. Je regarde votre situation Google,
|
||||
votre visibilité actuelle, et je vous dis concrètement ce
|
||||
qu’on peut améliorer. Sans engagement, sans jargon.
|
||||
</p>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Audit de votre pr\u00e9sence Google actuelle",
|
||||
"Analyse de vos concurrents locaux",
|
||||
"Plan d\u2019action concret et chiffr\u00e9",
|
||||
"R\u00e9ponse sous 24h",
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 bg-orange/20 rounded-full flex items-center justify-center shrink-0">
|
||||
<svg className="w-3 h-3 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-white/80 text-sm">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Right - Form */}
|
||||
<div className="bg-white rounded-2xl p-6 sm:p-8 shadow-xl">
|
||||
{submitted ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-navy font-bold text-xl mb-2">Demande envoyée !</h3>
|
||||
<p className="text-text-light text-sm">
|
||||
Je vous recontacte sous 24h pour planifier votre audit.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="text-navy font-bold text-xl mb-1">
|
||||
Réserver mon audit gratuit
|
||||
</h3>
|
||||
<p className="text-text-light text-sm mb-6">
|
||||
Remplissez le formulaire, je vous recontacte rapidement.
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="contact-name" className="block text-sm font-medium text-text mb-1.5">
|
||||
Votre nom
|
||||
</label>
|
||||
<input
|
||||
id="contact-name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Marc Dupont"
|
||||
className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="contact-phone" className="block text-sm font-medium text-text mb-1.5">
|
||||
Téléphone
|
||||
</label>
|
||||
<input
|
||||
id="contact-phone"
|
||||
type="tel"
|
||||
required
|
||||
placeholder="06 12 34 56 78"
|
||||
className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="contact-metier" className="block text-sm font-medium text-text mb-1.5">
|
||||
Votre métier
|
||||
</label>
|
||||
<input
|
||||
id="contact-metier"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Couvreur, Menuisier, Paysagiste..."
|
||||
className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="contact-ville" className="block text-sm font-medium text-text mb-1.5">
|
||||
Ville / Zone
|
||||
</label>
|
||||
<input
|
||||
id="contact-ville"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Douai, Valenciennes, Orchies..."
|
||||
className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="lg" className="w-full">
|
||||
Réserver mon Audit Gratuit
|
||||
</Button>
|
||||
<p className="text-text-muted text-xs text-center">
|
||||
Gratuit · Sans engagement · Réponse sous 24h
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -2,91 +2,74 @@ import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-dark-border py-12 md:py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
|
||||
<footer className="border-t border-border py-10 md:py-12 bg-bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Brand */}
|
||||
<div className="md:col-span-2">
|
||||
<Link href="/" className="flex items-center gap-2 mb-4">
|
||||
<div className="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
|
||||
<div>
|
||||
<Link href="/" className="flex items-center gap-2 mb-3" aria-label="HookLab - Accueil">
|
||||
<div className="w-8 h-8 bg-navy rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">H</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-white">
|
||||
Hook<span className="gradient-text">Lab</span>
|
||||
<span className="text-lg font-bold text-navy">
|
||||
Hook<span className="text-orange">Lab</span>
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-white/40 text-sm max-w-xs leading-relaxed">
|
||||
Le programme de coaching TikTok Shop pour lancer ton business
|
||||
d'affiliation en 8 semaines.
|
||||
<p className="text-text-light text-sm leading-relaxed max-w-xs">
|
||||
Agence web spécialisée dans la visibilité locale des artisans
|
||||
du bâtiment dans le Nord.
|
||||
</p>
|
||||
<p className="text-text-muted text-xs mt-3">
|
||||
Flines-lez-Raches, Nord (59)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div>
|
||||
<h4 className="text-white font-semibold text-sm mb-4">
|
||||
Programme
|
||||
<h4 className="text-navy font-semibold text-sm mb-4">
|
||||
Navigation
|
||||
</h4>
|
||||
<ul className="space-y-2.5">
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="#methode"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
La méthode
|
||||
<a href="#systeme" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
Le Système
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#temoignages"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
Témoignages
|
||||
<a href="#portfolio" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
Réalisations
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#tarif"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
Tarif
|
||||
<a href="#qui-suis-je" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
Qui suis-je
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#faq"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
<a href="#faq" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#contact" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Legal */}
|
||||
<div>
|
||||
<h4 className="text-white font-semibold text-sm mb-4">Légal</h4>
|
||||
<ul className="space-y-2.5">
|
||||
<h4 className="text-navy font-semibold text-sm mb-4">Légal</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/mentions-legales"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
Mentions légales
|
||||
<Link href="/mentions-legales" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
Mentions légales
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/cgv"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
CGV
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/confidentialite"
|
||||
className="text-white/40 hover:text-white text-sm transition-colors"
|
||||
>
|
||||
Confidentialité
|
||||
<Link href="/confidentialite" className="text-text-light hover:text-navy text-sm transition-colors">
|
||||
Confidentialité
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -94,34 +77,13 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="border-t border-dark-border mt-12 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-white/30 text-sm">
|
||||
© {new Date().getFullYear()} HookLab. Tous droits réservés.
|
||||
<div className="border-t border-border mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-3">
|
||||
<p className="text-text-muted text-xs">
|
||||
© {new Date().getFullYear()} HookLab — Enguerrand Ozano · SIREN 994 538 932
|
||||
</p>
|
||||
<p className="text-text-muted text-xs">
|
||||
Douai · Orchies · Valenciennes · Arleux
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<a
|
||||
href="https://tiktok.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-white/30 hover:text-primary transition-colors"
|
||||
aria-label="TikTok"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.11V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V8.92a8.2 8.2 0 004.76 1.52V7a4.84 4.84 0 01-1-.31z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-white/30 hover:text-primary transition-colors"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
82
components/marketing/Portfolio.tsx
Normal file
82
components/marketing/Portfolio.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import Card from "@/components/ui/Card";
|
||||
|
||||
const fallbackPortfolio = [
|
||||
{
|
||||
_id: "1",
|
||||
title: "Couvreur \u00e0 Arleux",
|
||||
result: "+30% de devis en 3 mois",
|
||||
slug: "couvreur-arleux",
|
||||
},
|
||||
{
|
||||
_id: "2",
|
||||
title: "Menuisier \u00e0 Douai",
|
||||
result: "15 appels qualifi\u00e9s/mois",
|
||||
slug: "menuisier-douai",
|
||||
},
|
||||
{
|
||||
_id: "3",
|
||||
title: "Paysagiste \u00e0 Orchies",
|
||||
result: "1\u00e8re page Google en 6 semaines",
|
||||
slug: "paysagiste-orchies",
|
||||
},
|
||||
];
|
||||
|
||||
interface PortfolioProps {
|
||||
items?: {
|
||||
_id: string;
|
||||
title: string;
|
||||
result: string;
|
||||
slug: string;
|
||||
image?: unknown;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function Portfolio({ items }: PortfolioProps) {
|
||||
const portfolio = items && items.length > 0 ? items : fallbackPortfolio;
|
||||
|
||||
return (
|
||||
<section id="portfolio" className="py-16 md:py-24 bg-bg-white" aria-label="R\u00e9alisations">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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">
|
||||
Réalisations
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
|
||||
Des artisans qui{" "}
|
||||
<span className="text-orange">reçoivent des appels</span>
|
||||
</h2>
|
||||
<p className="text-text-light text-base md:text-lg max-w-xl mx-auto">
|
||||
Pas des maquettes qui font joli. Des sites qui amènent des chantiers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{portfolio.map((item) => (
|
||||
<Card key={item._id} hover className="overflow-hidden p-0">
|
||||
<div className="h-48 bg-bg-muted flex items-center justify-center border-b border-border">
|
||||
<div className="text-center">
|
||||
<svg className="w-12 h-12 text-text-muted/30 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p className="text-text-muted text-xs">Mockup du site</p>
|
||||
<p className="text-text-muted text-[10px]">(image via Sanity)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<h3 className="text-navy font-bold text-base mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="inline-flex items-center px-3 py-1 bg-success/10 border border-success/20 rounded-full">
|
||||
<svg className="w-3.5 h-3.5 text-success mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span className="text-success text-sm font-semibold">{item.result}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Card from "@/components/ui/Card";
|
||||
|
||||
const features = [
|
||||
const coachingFeatures = [
|
||||
"8 semaines de coaching intensif",
|
||||
"Acc\u00e8s \u00e0 tous les modules vid\u00e9o",
|
||||
"Templates et scripts de contenu",
|
||||
@@ -19,6 +19,14 @@ const bonuses = [
|
||||
"Templates Canva pour miniatures",
|
||||
];
|
||||
|
||||
const suiviFeatures = [
|
||||
"R\u00e9ponses \u00e0 tes questions vid\u00e9os",
|
||||
"Id\u00e9es de concepts et tendances",
|
||||
"Coaching motivation au quotidien",
|
||||
"Acc\u00e8s aux nouvelles mises \u00e0 jour",
|
||||
"Groupe WhatsApp alumni",
|
||||
];
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<section id="tarif" className="py-20 md:py-32">
|
||||
@@ -26,29 +34,37 @@ export default function Pricing() {
|
||||
{/* Header */}
|
||||
<div className="text-center max-w-2xl mx-auto 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">
|
||||
Tarif
|
||||
Tarifs
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-[-0.02em] mb-4">
|
||||
Investis dans ta{" "}
|
||||
<span className="gradient-text">formation TikTok Shop</span>
|
||||
</h2>
|
||||
<p className="text-white/60 text-lg">
|
||||
Un programme tout inclus avec accompagnement personnalisé.
|
||||
Paiement en 2 fois.
|
||||
Un programme complet avec accompagnement personnalisé, et une
|
||||
option de suivi mensuel pour continuer à progresser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing card */}
|
||||
<div className="max-w-lg mx-auto">
|
||||
{/* Pricing cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{/* Coaching card */}
|
||||
<Card className="relative overflow-hidden border-primary/30">
|
||||
{/* Popular badge */}
|
||||
<div className="absolute top-0 left-0 right-0 gradient-bg py-2.5 text-center">
|
||||
<span className="text-white text-sm font-semibold">
|
||||
Offre de lancement — Places limitées
|
||||
Programme principal — Places limitées
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-14">
|
||||
<h3 className="text-lg font-bold text-white mb-1">
|
||||
Formation + Coaching
|
||||
</h3>
|
||||
<p className="text-white/40 text-sm mb-6">
|
||||
Programme intensif de 8 semaines
|
||||
</p>
|
||||
|
||||
{/* Price */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-baseline justify-center gap-2 mb-1">
|
||||
@@ -80,7 +96,7 @@ export default function Pricing() {
|
||||
Inclus dans le programme
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{features.map((f, i) => (
|
||||
{coachingFeatures.map((f, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-success/10 flex items-center justify-center shrink-0">
|
||||
<svg
|
||||
@@ -163,6 +179,101 @@ export default function Pricing() {
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Suivi card */}
|
||||
<Card className="relative overflow-hidden border-dark-border">
|
||||
<div className="absolute top-0 left-0 right-0 bg-dark-lighter py-2.5 text-center border-b border-dark-border">
|
||||
<span className="text-white/60 text-sm font-semibold">
|
||||
Après la formation
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-14">
|
||||
<h3 className="text-lg font-bold text-white mb-1">
|
||||
Suivi continu
|
||||
</h3>
|
||||
<p className="text-white/40 text-sm mb-6">
|
||||
Pour ceux qui ont terminé le programme
|
||||
</p>
|
||||
|
||||
{/* Price */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-baseline justify-center gap-2 mb-1">
|
||||
<span className="text-4xl md:text-5xl font-bold text-white">
|
||||
49€
|
||||
</span>
|
||||
<span className="text-white/40 text-lg">/mois</span>
|
||||
</div>
|
||||
<p className="text-white/40 mt-2">
|
||||
Sans engagement — Annulable à tout moment
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-dark-border my-6" />
|
||||
|
||||
{/* Condition */}
|
||||
<div className="bg-warning/5 border border-warning/15 rounded-xl p-3 mb-6">
|
||||
<p className="text-warning text-xs font-medium flex items-center gap-2">
|
||||
<svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Accessible uniquement après avoir terminé les 8 semaines de coaching
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mb-6">
|
||||
<p className="text-white/50 text-xs uppercase tracking-wider mb-4 font-medium">
|
||||
Inclus dans le suivi
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{suiviFeatures.map((f, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-success/10 flex items-center justify-center shrink-0">
|
||||
<svg
|
||||
className="w-3 h-3 text-success"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-white/80 text-sm">{f}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-dark border border-dark-border rounded-2xl p-4 mb-6">
|
||||
<p className="text-white/50 text-sm leading-relaxed">
|
||||
Le suivi mensuel te permet de continuer à progresser
|
||||
après ta formation initiale. Pose tes questions, reçois
|
||||
des idées de contenus et reste motivé avec la
|
||||
communauté d'anciens élèves.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA disabled-style */}
|
||||
<div className="opacity-60">
|
||||
<Button size="lg" variant="secondary" className="w-full" disabled>
|
||||
Disponible après la formation
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-white/25 text-xs mt-3">
|
||||
Le lien de souscription sera envoyé à la fin de
|
||||
tes 8 semaines.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
95
components/marketing/System.tsx
Normal file
95
components/marketing/System.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import Card from "@/components/ui/Card";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
),
|
||||
step: "01",
|
||||
title: "On vous trouve",
|
||||
subtitle: "Visibilit\u00e9 Google",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
),
|
||||
step: "02",
|
||||
title: "On vous choisit",
|
||||
subtitle: "Site rassurant",
|
||||
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.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
),
|
||||
step: "03",
|
||||
title: "On vous contacte",
|
||||
subtitle: "Filtrage intelligent",
|
||||
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.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function System() {
|
||||
return (
|
||||
<section id="systeme" className="py-16 md:py-24 bg-bg" aria-label="Le syst\u00e8me">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-14">
|
||||
<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-4">
|
||||
Le Système
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
|
||||
Pas juste un site vitrine.{" "}
|
||||
<span className="text-orange">Un dossier de confiance.</span>
|
||||
</h2>
|
||||
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{steps.map((s, i) => (
|
||||
<Card key={i} hover className="text-center relative pt-10">
|
||||
<div className="absolute top-4 right-4 text-text-muted/20 text-4xl font-black">
|
||||
{s.step}
|
||||
</div>
|
||||
<div className="w-16 h-16 bg-orange/10 rounded-2xl flex items-center justify-center mx-auto mb-5 text-orange">
|
||||
{s.icon}
|
||||
</div>
|
||||
<h3 className="text-navy font-bold text-lg mb-1">{s.title}</h3>
|
||||
<p className="text-orange text-sm font-semibold mb-3">{s.subtitle}</p>
|
||||
<p className="text-text-light text-sm leading-relaxed">
|
||||
{s.description}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-10">
|
||||
<div className="flex items-center gap-3 bg-navy/5 border border-navy/10 rounded-full px-6 py-3">
|
||||
<span className="text-navy font-semibold text-sm">Trouvé</span>
|
||||
<svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span className="text-navy font-semibold text-sm">Choisi</span>
|
||||
<svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span className="text-navy font-semibold text-sm">Contacté</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -5,8 +5,8 @@ const testimonials = [
|
||||
name: "Sarah M.",
|
||||
role: "\u00c9tudiante, 22 ans",
|
||||
content:
|
||||
"En 4 semaines, j\u2019ai g\u00e9n\u00e9r\u00e9 mes premi\u00e8res commissions sur TikTok Shop. Le programme m\u2019a donn\u00e9 une m\u00e9thode claire et un accompagnement top. Avant HookLab, je ne savais m\u00eame pas par o\u00f9 commencer.",
|
||||
revenue: "2 400\u20ac/mois apr\u00e8s 3 mois",
|
||||
"En 4 semaines, j\u2019ai g\u00e9n\u00e9r\u00e9 mes premi\u00e8res commissions sur TikTok Shop. Le programme m\u2019a donn\u00e9 une m\u00e9thode claire pour choisir les bons produits. Avec 6 \u00e0 10\u20ac par vente, \u00e7a s\u2019accumule vite quand on poste r\u00e9guli\u00e8rement.",
|
||||
revenue: "350\u20ac/mois apr\u00e8s 2 mois",
|
||||
avatar: "S",
|
||||
stars: 5,
|
||||
},
|
||||
@@ -14,8 +14,8 @@ const testimonials = [
|
||||
name: "Thomas D.",
|
||||
role: "Ex-salari\u00e9, 34 ans",
|
||||
content:
|
||||
"J\u2019h\u00e9sitais \u00e0 me lancer, mais le coaching m\u2019a permis de structurer mon activit\u00e9 pas \u00e0 pas. Les appels de groupe et le support WhatsApp font vraiment la diff\u00e9rence par rapport \u00e0 une formation en ligne classique.",
|
||||
revenue: "4 200\u20ac/mois apr\u00e8s 5 mois",
|
||||
"J\u2019h\u00e9sitais \u00e0 me lancer, mais le coaching m\u2019a permis de structurer mon activit\u00e9 pas \u00e0 pas. Les appels de groupe et le support WhatsApp font vraiment la diff\u00e9rence. Aujourd\u2019hui je fais environ 50-60 ventes par mois.",
|
||||
revenue: "480\u20ac/mois apr\u00e8s 3 mois",
|
||||
avatar: "T",
|
||||
stars: 5,
|
||||
},
|
||||
@@ -23,8 +23,8 @@ const testimonials = [
|
||||
name: "Amina K.",
|
||||
role: "M\u00e8re au foyer, 29 ans",
|
||||
content:
|
||||
"Je cherchais un compl\u00e9ment de revenus flexible compatible avec mes enfants. Avec 2h par jour, j\u2019arrive \u00e0 g\u00e9n\u00e9rer un vrai revenu compl\u00e9mentaire. La communaut\u00e9 est super bienveillante.",
|
||||
revenue: "1 600\u20ac/mois apr\u00e8s 2 mois",
|
||||
"Je cherchais un compl\u00e9ment de revenus flexible compatible avec mes enfants. Avec 2h par jour, j\u2019arrive \u00e0 sortir 2-3 vid\u00e9os par semaine et les commissions arrivent r\u00e9guli\u00e8rement. C\u2019est un vrai compl\u00e9ment.",
|
||||
revenue: "280\u20ac/mois apr\u00e8s 6 semaines",
|
||||
avatar: "A",
|
||||
stars: 5,
|
||||
},
|
||||
@@ -32,8 +32,8 @@ const testimonials = [
|
||||
name: "Mehdi L.",
|
||||
role: "\u00c9tudiant, 20 ans",
|
||||
content:
|
||||
"J\u2019avais z\u00e9ro exp\u00e9rience en e-commerce. Le programme m\u2019a appris \u00e0 choisir les bons produits et \u00e0 cr\u00e9er du contenu qui convertit. Aujourd\u2019hui je finance mes \u00e9tudes gr\u00e2ce \u00e0 TikTok Shop.",
|
||||
revenue: "900\u20ac/mois apr\u00e8s 6 semaines",
|
||||
"J\u2019avais z\u00e9ro exp\u00e9rience en e-commerce. Le programme m\u2019a appris \u00e0 choisir les bons produits et \u00e0 cr\u00e9er du contenu qui convertit. Avec 8\u20ac de commission moyenne, chaque vid\u00e9o virale fait la diff\u00e9rence.",
|
||||
revenue: "620\u20ac/mois apr\u00e8s 4 mois",
|
||||
avatar: "M",
|
||||
stars: 5,
|
||||
},
|
||||
@@ -41,17 +41,17 @@ const testimonials = [
|
||||
name: "Laura B.",
|
||||
role: "Freelance, 27 ans",
|
||||
content:
|
||||
"Ce qui m\u2019a convaincue c\u2019est la sp\u00e9cialisation TikTok Shop. Pas du g\u00e9n\u00e9rique, mais des strat\u00e9gies concr\u00e8tes test\u00e9es et prouv\u00e9es. Les templates de scripts m\u2019ont fait gagner un temps fou.",
|
||||
revenue: "3 100\u20ac/mois apr\u00e8s 4 mois",
|
||||
"Ce qui m\u2019a convaincue c\u2019est la sp\u00e9cialisation TikTok Shop. Pas du g\u00e9n\u00e9rique, mais des strat\u00e9gies concr\u00e8tes. Les templates de scripts m\u2019ont fait gagner un temps fou. Je poste quasi tous les jours maintenant.",
|
||||
revenue: "750\u20ac/mois apr\u00e8s 5 mois",
|
||||
avatar: "L",
|
||||
stars: 5,
|
||||
stars: 4,
|
||||
},
|
||||
{
|
||||
name: "Yanis K.",
|
||||
role: "En reconversion, 31 ans",
|
||||
content:
|
||||
"Apr\u00e8s 8 semaines de formation, j\u2019ai pu quitter mon job. Le retour sur investissement est l\u00e0. L\u2019\u00e9quipe est r\u00e9active, les modules sont clairs, et la communaut\u00e9 pousse \u00e0 se d\u00e9passer.",
|
||||
revenue: "5 800\u20ac/mois apr\u00e8s 6 mois",
|
||||
"Apr\u00e8s 8 semaines de formation, j\u2019ai vraiment pris le rythme. Les modules sont clairs, la communaut\u00e9 pousse \u00e0 se d\u00e9passer. Je vise les 100 ventes par mois maintenant, c\u2019est mon prochain objectif.",
|
||||
revenue: "900\u20ac/mois apr\u00e8s 6 mois",
|
||||
avatar: "Y",
|
||||
stars: 5,
|
||||
},
|
||||
@@ -120,8 +120,10 @@ export default function Testimonials() {
|
||||
{/* Google-compliant disclaimer */}
|
||||
<p className="text-center text-white/25 text-xs mt-8 max-w-2xl mx-auto leading-relaxed">
|
||||
Les résultats présentés sont basés sur les retours individuels de nos
|
||||
élèves et ne constituent pas une garantie de revenus. Les résultats varient
|
||||
selon l'implication, le temps consacré et la stratégie de chaque participant.
|
||||
élèves et ne constituent pas une garantie de revenus. Les commissions TikTok Shop
|
||||
varient généralement entre 6€ et 10€ par vente. Les revenus dépendent
|
||||
du nombre de ventes générées, de l'implication et du temps consacré
|
||||
par chaque participant.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -23,17 +23,17 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
ref
|
||||
) => {
|
||||
const baseStyles =
|
||||
"inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-[12px] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
|
||||
"inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-xl cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
|
||||
|
||||
const variants = {
|
||||
primary:
|
||||
"gradient-bg text-white hover:opacity-90 hover:translate-y-[-2px] hover:shadow-lg",
|
||||
"bg-orange text-white hover:bg-orange-hover hover:translate-y-[-1px] hover:shadow-lg",
|
||||
secondary:
|
||||
"bg-dark-light text-white border border-dark-border hover:border-primary/50 hover:translate-y-[-2px]",
|
||||
"bg-navy text-white hover:bg-navy-light hover:translate-y-[-1px] hover:shadow-lg",
|
||||
outline:
|
||||
"bg-transparent text-primary border-2 border-primary hover:bg-primary hover:text-white",
|
||||
"bg-transparent text-navy border-2 border-navy hover:bg-navy hover:text-white",
|
||||
ghost:
|
||||
"bg-transparent text-white/70 hover:text-white hover:bg-white/5",
|
||||
"bg-transparent text-text-light hover:text-navy hover:bg-bg-muted",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
|
||||
@@ -3,19 +3,15 @@ import { HTMLAttributes, forwardRef } from "react";
|
||||
|
||||
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
hover?: boolean;
|
||||
glass?: boolean;
|
||||
}
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ className, hover = false, glass = false, children, ...props }, ref) => {
|
||||
({ className, hover = false, children, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-[20px] p-6",
|
||||
glass
|
||||
? "glass"
|
||||
: "bg-dark-light border border-dark-border",
|
||||
"rounded-2xl p-6 bg-bg-white border border-border shadow-sm",
|
||||
hover && "card-hover cursor-pointer",
|
||||
className
|
||||
)}
|
||||
|
||||
21
lib/sanity/client.ts
Normal file
21
lib/sanity/client.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createClient, type SanityClient } from "@sanity/client";
|
||||
import imageUrlBuilder from "@sanity/image-url";
|
||||
|
||||
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
|
||||
|
||||
// Only create the real client if projectId is configured
|
||||
export const sanityClient: SanityClient | null = projectId
|
||||
? createClient({
|
||||
projectId,
|
||||
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
|
||||
apiVersion: "2024-01-01",
|
||||
useCdn: true,
|
||||
})
|
||||
: null;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export function urlFor(source: any) {
|
||||
if (!sanityClient) return null;
|
||||
const builder = imageUrlBuilder(sanityClient);
|
||||
return builder.image(source);
|
||||
}
|
||||
42
lib/sanity/queries.ts
Normal file
42
lib/sanity/queries.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { sanityClient } from "./client";
|
||||
|
||||
export interface PortfolioItem {
|
||||
_id: string;
|
||||
title: string;
|
||||
result: string;
|
||||
image: unknown;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export interface SiteSettings {
|
||||
ownerName: string;
|
||||
ownerBio: string;
|
||||
ownerPhoto: unknown;
|
||||
address: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
}
|
||||
|
||||
export async function getPortfolio(): Promise<PortfolioItem[]> {
|
||||
if (!sanityClient) return [];
|
||||
try {
|
||||
return await sanityClient.fetch(
|
||||
`*[_type == "portfolio"] | order(orderRank asc) { _id, title, result, image, "slug": slug.current }`
|
||||
);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function getSiteSettings(): Promise<SiteSettings | null> {
|
||||
if (!sanityClient) return null;
|
||||
try {
|
||||
return await sanityClient.fetch(
|
||||
`*[_type == "siteSettings"][0] { ownerName, ownerBio, ownerPhoto, address, phone, email, lat, lng }`
|
||||
);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
269
package-lock.json
generated
269
package-lock.json
generated
@@ -8,6 +8,8 @@
|
||||
"name": "hooklab",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@sanity/client": "^7.14.1",
|
||||
"@sanity/image-url": "^2.0.3",
|
||||
"@stripe/stripe-js": "^8.7.0",
|
||||
"@supabase/supabase-js": "^2.95.3",
|
||||
"clsx": "^2.1.1",
|
||||
@@ -944,6 +946,27 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@noble/ed25519": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-3.0.0.tgz",
|
||||
"integrity": "sha512-QyteqMNm0GLqfa5SoYbSC3+Pvykwpn95Zgth4MFVSMKBB75ELl9tX1LAVsN4c3HXOrakHsF2gL4zWDAYCcsnzg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/@noble/hashes": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
|
||||
"integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@@ -1006,6 +1029,55 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@sanity/client": {
|
||||
"version": "7.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.14.1.tgz",
|
||||
"integrity": "sha512-lCDx0vuNUgg9FL2E5Hiv1q7u6iHd1Z+jjMZAaYtfzzFPoBKOiyZlaFwqyLVHRyTbwnXQdIGDPmx2AvfBTbGQsQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@sanity/eventsource": "^5.0.2",
|
||||
"get-it": "^8.7.0",
|
||||
"nanoid": "^3.3.11",
|
||||
"rxjs": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/@sanity/eventsource": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@sanity/eventsource/-/eventsource-5.0.2.tgz",
|
||||
"integrity": "sha512-/B9PMkUvAlUrpRq0y+NzXgRv5lYCLxZNsBJD2WXVnqZYOfByL9oQBV7KiTaARuObp5hcQYuPfOAVjgXe3hrixA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/event-source-polyfill": "1.0.5",
|
||||
"@types/eventsource": "1.1.15",
|
||||
"event-source-polyfill": "1.0.31",
|
||||
"eventsource": "2.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@sanity/image-url": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-2.0.3.tgz",
|
||||
"integrity": "sha512-A/vOugFw/ROGgSeSGB6nimO0c35x9KztatOPIIVlhkL+zsOfP7khigCbdJup2FSv6C03FX2XaUAhXojCxANl2Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@sanity/signed-urls": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sanity/signed-urls": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@sanity/signed-urls/-/signed-urls-2.0.2.tgz",
|
||||
"integrity": "sha512-w/Aq0JDYI44WC5w8mzJBAjCem8qlGrxGTzvNbUWwBfys6kSL+TZBSypV5waCc35XRgt0X5zdYZMJOrshcjJLFw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@noble/ed25519": "^3.0.0",
|
||||
"@noble/hashes": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@selderee/plugin-htmlparser2": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
|
||||
@@ -1412,6 +1484,27 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/event-source-polyfill": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.5.tgz",
|
||||
"integrity": "sha512-iaiDuDI2aIFft7XkcwMzDWLqo7LVDixd2sR6B4wxJut9xcp/Ev9bO4EFg4rm6S9QxATLBj5OPxdeocgmhjwKaw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/eventsource": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.15.tgz",
|
||||
"integrity": "sha512-XQmGcbnxUNa06HR3VBVkc9+A2Vpi9ZyLJcdS5dwaQQ/4ZMWFO+5c90FnMUpbtMZwB/FChoYHwuVg8TvkECacTA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/follow-redirects": {
|
||||
"version": "1.14.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/follow-redirects/-/follow-redirects-1.14.4.tgz",
|
||||
"integrity": "sha512-GWXfsD0Jc1RWiFmMuMFCpXMzi9L7oPDVwxUnZdg89kDNnqsRfUKXEtUYtA98A6lig1WXH/CYY/fvPW9HuN5fTA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@@ -2584,6 +2677,21 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decompress-response": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-7.0.0.tgz",
|
||||
"integrity": "sha512-6IvPrADQyyPGLpMnUh6kfKiqy7SrbXbjoUuZ90WMBJKErzv2pCiwlGEXjRX9/54OnTq+XFVnkOnOMzclLI5aEA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mimic-response": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@@ -3366,6 +3474,21 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/event-source-polyfill": {
|
||||
"version": "1.0.31",
|
||||
"resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
|
||||
"integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/eventsource": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
|
||||
"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@@ -3497,6 +3620,26 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
|
||||
@@ -3589,6 +3732,23 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-it": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/get-it/-/get-it-8.7.0.tgz",
|
||||
"integrity": "sha512-uong/+jOz0GiuIWIUJXp2tnQKgQKukC99LEqOxLckPUoHYoerQbV6vC0Tu+/pSgk0tgHh1xX2aJtCk4y35LLLg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/follow-redirects": "^1.14.4",
|
||||
"decompress-response": "^7.0.0",
|
||||
"follow-redirects": "^1.15.9",
|
||||
"is-retry-allowed": "^2.2.0",
|
||||
"through2": "^4.0.2",
|
||||
"tunnel-agent": "^0.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
@@ -3897,6 +4057,12 @@
|
||||
"node": ">=0.8.19"
|
||||
}
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/internal-slot": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
|
||||
@@ -4201,6 +4367,18 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-retry-allowed": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
|
||||
"integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-set": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
|
||||
@@ -4881,6 +5059,18 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mimic-response": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
|
||||
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@@ -5446,6 +5636,20 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
@@ -5587,6 +5791,15 @@
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/rxjs": {
|
||||
"version": "7.8.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
|
||||
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-array-concat": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
|
||||
@@ -5607,6 +5820,26 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/safe-push-apply": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
|
||||
@@ -5925,6 +6158,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
|
||||
"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.includes": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
|
||||
@@ -6158,6 +6400,15 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/through2": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
|
||||
"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"readable-stream": "3"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.15",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||
@@ -6273,6 +6524,18 @@
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/tunnel-agent": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
|
||||
"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"safe-buffer": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
@@ -6454,6 +6717,12 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sanity/client": "^7.14.1",
|
||||
"@sanity/image-url": "^2.0.3",
|
||||
"@stripe/stripe-js": "^8.7.0",
|
||||
"@supabase/supabase-js": "^2.95.3",
|
||||
"clsx": "^2.1.1",
|
||||
|
||||
12
sanity/schemas/index.ts
Normal file
12
sanity/schemas/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
// Sanity Schema Index
|
||||
// Importez ces schémas dans votre Sanity Studio (sanity.config.ts)
|
||||
//
|
||||
// import portfolio from './schemas/portfolio'
|
||||
// import siteSettings from './schemas/siteSettings'
|
||||
//
|
||||
// export default defineConfig({
|
||||
// schema: { types: [portfolio, siteSettings] }
|
||||
// })
|
||||
|
||||
export { default as portfolio } from "./portfolio";
|
||||
export { default as siteSettings } from "./siteSettings";
|
||||
43
sanity/schemas/portfolio.ts
Normal file
43
sanity/schemas/portfolio.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
// Sanity schema: Portfolio
|
||||
// Créez ce schéma dans votre projet Sanity Studio
|
||||
// Type: document
|
||||
|
||||
const portfolio = {
|
||||
name: "portfolio",
|
||||
title: "Portfolio",
|
||||
type: "document",
|
||||
fields: [
|
||||
{
|
||||
name: "title",
|
||||
title: "Titre du projet",
|
||||
type: "string",
|
||||
description: 'Ex: "Couvreur à Arleux"',
|
||||
validation: (Rule: { required: () => unknown }) => Rule.required(),
|
||||
},
|
||||
{
|
||||
name: "slug",
|
||||
title: "Slug",
|
||||
type: "slug",
|
||||
options: { source: "title" },
|
||||
},
|
||||
{
|
||||
name: "image",
|
||||
title: "Image du site (mockup)",
|
||||
type: "image",
|
||||
options: { hotspot: true },
|
||||
},
|
||||
{
|
||||
name: "result",
|
||||
title: "Résultat chiffré",
|
||||
type: "string",
|
||||
description: 'Ex: "+30% de devis en 3 mois"',
|
||||
},
|
||||
{
|
||||
name: "orderRank",
|
||||
title: "Ordre d'affichage",
|
||||
type: "number",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default portfolio;
|
||||
60
sanity/schemas/siteSettings.ts
Normal file
60
sanity/schemas/siteSettings.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
// Sanity schema: Site Settings (singleton)
|
||||
// Créez ce schéma dans votre projet Sanity Studio
|
||||
// Type: document (singleton)
|
||||
|
||||
const siteSettings = {
|
||||
name: "siteSettings",
|
||||
title: "Réglages du site",
|
||||
type: "document",
|
||||
fields: [
|
||||
{
|
||||
name: "ownerName",
|
||||
title: "Votre nom",
|
||||
type: "string",
|
||||
initialValue: "Enguerrand",
|
||||
},
|
||||
{
|
||||
name: "ownerBio",
|
||||
title: "Votre bio",
|
||||
type: "text",
|
||||
rows: 4,
|
||||
description: "Texte de présentation qui apparaît dans la section 'Qui suis-je'",
|
||||
},
|
||||
{
|
||||
name: "ownerPhoto",
|
||||
title: "Votre photo",
|
||||
type: "image",
|
||||
options: { hotspot: true },
|
||||
},
|
||||
{
|
||||
name: "address",
|
||||
title: "Adresse",
|
||||
type: "string",
|
||||
initialValue: "Flines-lez-Raches, Nord (59)",
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
title: "Téléphone",
|
||||
type: "string",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
title: "Email de contact",
|
||||
type: "string",
|
||||
},
|
||||
{
|
||||
name: "lat",
|
||||
title: "Latitude (carte)",
|
||||
type: "number",
|
||||
initialValue: 50.4267,
|
||||
},
|
||||
{
|
||||
name: "lng",
|
||||
title: "Longitude (carte)",
|
||||
type: "number",
|
||||
initialValue: 3.2372,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default siteSettings;
|
||||
@@ -10,6 +10,7 @@ export type Database = {
|
||||
persona: "jeune" | "parent" | null;
|
||||
stripe_customer_id: string | null;
|
||||
subscription_status: "inactive" | "active" | "cancelled" | "paused";
|
||||
subscription_tier: "coaching" | "suivi" | null;
|
||||
subscription_end_date: string | null;
|
||||
is_admin: boolean;
|
||||
created_at: string;
|
||||
@@ -22,6 +23,7 @@ export type Database = {
|
||||
persona?: "jeune" | "parent" | null;
|
||||
stripe_customer_id?: string | null;
|
||||
subscription_status?: "inactive" | "active" | "cancelled" | "paused";
|
||||
subscription_tier?: "coaching" | "suivi" | null;
|
||||
subscription_end_date?: string | null;
|
||||
is_admin?: boolean;
|
||||
created_at?: string;
|
||||
@@ -34,6 +36,7 @@ export type Database = {
|
||||
persona?: "jeune" | "parent" | null;
|
||||
stripe_customer_id?: string | null;
|
||||
subscription_status?: "inactive" | "active" | "cancelled" | "paused";
|
||||
subscription_tier?: "coaching" | "suivi" | null;
|
||||
subscription_end_date?: string | null;
|
||||
is_admin?: boolean;
|
||||
updated_at?: string;
|
||||
|
||||
Reference in New Issue
Block a user