Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-05-15 06:11:01 +00:00

View File

@@ -28,392 +28,155 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Accueil",
id: "hero",
},
{
name: "Méthode",
id: "features",
},
{
name: "Tarifs",
id: "pricing",
},
{
name: "FAQ",
id: "faq",
},
]}
brandName="MarketingDuo"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Accueil", id: "hero" },
{ name: "Méthode", id: "features" },
{ name: "Tarifs", id: "pricing" },
{ name: "FAQ", id: "faq" }
]}
brandName="MarketingDuo"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "sparkles-gradient",
}}
title="Tu n'as pas besoin d'être un vendeur né. Tu as besoin de 5 minutes par jour."
description="Apprends la vente, le copywriting et la persuasion avec Rex. Gamifié, rapide et ultra-efficace pour exploser tes résultats business."
kpis={[
{
value: "15k+",
label: "Apprentis",
},
{
value: "4.9/5",
label: "Note moyenne",
},
{
value: "200+",
label: "Leçons débloquées",
},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Commencer gratuitement",
href: "#",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-tiger-character_23-2150897808.jpg"
imageAlt="Rex le tigre en costume"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
alt: "Portrait élève 1",
},
{
src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg",
alt: "Portrait élève 2",
},
{
src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020342.jpg",
alt: "Portrait élève 3",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-happy-business-man-standing-outside_1262-3488.jpg",
alt: "Portrait élève 4",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-man-holding-smart-phone_23-2147935571.jpg",
alt: "Portrait élève 5",
},
]}
avatarText="Rejoins 15 000+ apprentis closers"
marqueeItems={[
{
type: "text-icon",
text: "Sales Masterclass",
icon: Zap,
},
{
type: "text-icon",
text: "Copywriting Pro",
icon: PenTool,
},
{
type: "text-icon",
text: "Growth Hacking",
icon: TrendingUp,
},
{
type: "text-icon",
text: "Personal Branding",
icon: User,
},
{
type: "text-icon",
text: "Conversion Rate",
icon: BarChart,
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "sparkles-gradient" }}
title="Tu n'as pas besoin d'être un vendeur né. Tu as besoin de 5 minutes par jour."
description="Apprends la vente, le copywriting et la persuasion avec Rex. Gamifié, rapide et ultra-efficace pour exploser tes résultats business."
kpis={[
{ value: "15k+", label: "Apprentis" },
{ value: "4.9/5", label: "Note moyenne" },
{ value: "200+", label: "Leçons débloquées" }
]}
enableKpiAnimation={true}
buttons={[{ text: "Commencer gratuitement", href: "#" }]}
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-tiger-character_23-2150897808.jpg"
imageAlt="Rex le tigre en costume"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg", alt: "Portrait élève 1" },
{ src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg", alt: "Portrait élève 2" },
{ src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020342.jpg", alt: "Portrait élève 3" },
{ src: "http://img.b2bpic.net/free-photo/closeup-happy-business-man-standing-outside_1262-3488.jpg", alt: "Portrait élève 4" },
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-man-holding-smart-phone_23-2147935571.jpg", alt: "Portrait élève 5" }
]}
avatarText="Rejoins 15 000+ apprentis closers"
marqueeItems={[
{ type: "text-icon", text: "Sales Masterclass", icon: Zap },
{ type: "text-icon", text: "Copywriting Pro", icon: PenTool },
{ type: "text-icon", text: "Growth Hacking", icon: TrendingUp },
{ type: "text-icon", text: "Personal Branding", icon: User },
{ type: "text-icon", text: "Conversion Rate", icon: BarChart }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "500k",
title: "XP Accumulés",
description: "Compétences de vente acquises par la communauté",
icon: Zap,
},
{
id: "m2",
value: "95%",
title: "Taux de complétion",
description: "Nos membres finissent leurs modules",
icon: CheckCircle,
},
{
id: "m3",
value: "24/7",
title: "Accès illimité",
description: "Rex t'attend pour ton défi quotidien",
icon: Clock,
},
]}
title="Progresse avec Rex"
description="Suis tes performances quotidiennes comme un vrai Closer."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "500k", title: "XP Accumulés", description: "Compétences de vente acquises par la communauté", icon: Zap },
{ id: "m2", value: "95%", title: "Taux de complétion", description: "Nos membres finissent leurs modules", icon: CheckCircle },
{ id: "m3", value: "24/7", title: "Accès illimité", description: "Rex t'attend pour ton défi quotidien", icon: Clock }
]}
title="Progresse avec Rex"
description="Suis tes performances quotidiennes comme un vrai Closer."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={true}
features={[
{
tag: "Débutant",
title: "Les bases de la vente",
subtitle: "Psychologie",
description: "Comprendre les ressorts profonds de l'achat.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-learning-math-school_23-2150470825.jpg",
},
{
tag: "Intermédiaire",
title: "Copywriting Magnétique",
subtitle: "Rédaction",
description: "Écrire pour convaincre en quelques mots.",
imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-stylus-pen-table-closeup_169016-47019.jpg",
},
{
tag: "Expert",
title: "Personal Branding",
subtitle: "Image",
description: "Construis ton autorité naturellement.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cartoon-character-man-with-device_23-2150964510.jpg",
},
]}
title="La méthode MarketingDuo"
description="Tout ce dont tu as besoin pour maîtriser la vente."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={true}
features={[
{ tag: "Débutant", title: "Les bases de la vente", subtitle: "Psychologie", description: "Comprendre les ressorts profonds de l'achat.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-learning-math-school_23-2150470825.jpg" },
{ tag: "Intermédiaire", title: "Copywriting Magnétique", subtitle: "Rédaction", description: "Écrire pour convaincre en quelques mots.", imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-stylus-pen-table-closeup_169016-47019.jpg" },
{ tag: "Expert", title: "Personal Branding", subtitle: "Image", description: "Construis ton autorité naturellement.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-cartoon-character-man-with-device_23-2150964510.jpg" }
]}
title="La méthode MarketingDuo"
description="Tout ce dont tu as besoin pour maîtriser la vente."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "apprenti",
tag: "Gratuit",
price: "0€",
period: "/mois",
description: "Idéal pour découvrir les bases du marketing.",
button: {
text: "Commencer gratuitement",
},
featuresTitle: "Ce qui est inclus :",
features: [
"3 leçons par jour",
"Streak quotidien",
"Classement public",
],
},
{
id: "vendeur",
tag: "Populaire",
price: "19€",
period: "/mois",
description: "Accès complet aux outils du pro.",
button: {
text: "Rejoindre",
},
featuresTitle: "Tout l'Apprenti + :",
features: [
"Leçons illimitées",
"Feedback IA sur scripts",
"Templates exclusifs",
],
},
{
id: "closer",
tag: "Élite",
price: "49€",
period: "/mois",
description: "Pour ceux qui veulent passer au niveau supérieur.",
button: {
text: "Rejoindre le niveau Élite",
},
featuresTitle: "Tout le Pro + :",
features: [
"Coaching live mensuel",
"Communauté privée",
"Certificat de compétence",
],
},
]}
title="Rejoins la meute"
description="Choisis ton niveau et commence ton entraînement."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "apprenti", tag: "Gratuit", price: "0€", period: "/mois", description: "Idéal pour découvrir les bases du marketing.", button: { text: "Commencer gratuitement" }, featuresTitle: "Ce qui est inclus :", features: ["3 leçons par jour", "Streak quotidien", "Classement public"] },
{ id: "vendeur", tag: "Populaire", price: "19€", period: "/mois", description: "Accès complet aux outils du pro.", button: { text: "Rejoindre" }, featuresTitle: "Tout l'Apprenti + :", features: ["Leçons illimitées", "Feedback IA sur scripts", "Templates exclusifs"] },
{ id: "closer", tag: "Élite", price: "49€", period: "/mois", description: "Pour ceux qui veulent passer au niveau supérieur.", button: { text: "Rejoindre le niveau Élite" }, featuresTitle: "Tout le Pro + :", features: ["Coaching live mensuel", "Communauté privée", "Certificat de compétence"] }
]}
title="Rejoins la meute"
description="Choisis ton niveau et commence ton entraînement."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Sarah J.",
handle: "@sarah_mkt",
testimonial: "Rex a changé ma façon de vendre. En 2 semaines, mon taux de conversion a doublé.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
},
{
id: "t2",
name: "Marc L.",
handle: "@marc_sales",
testimonial: "Le côté gamifié est addictif. J'attends mes défis quotidiens avec impatience.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-black-businesswoman-office_637285-9877.jpg",
},
{
id: "t3",
name: "Julie D.",
handle: "@julie_brand",
testimonial: "La structure des leçons est parfaite pour mon emploi du temps chargé.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-modern-man-working_23-2148728917.jpg",
},
{
id: "t4",
name: "Thomas K.",
handle: "@thomas_k",
testimonial: "Le badge Élite est ma plus grande fierté cette année. Top coachings !",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg",
},
{
id: "t5",
name: "Elena R.",
handle: "@elena_biz",
testimonial: "J'ai appris plus ici en un mois qu'en 3 ans d'université de commerce.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/serious-confident-business-coach-posing-with-arms-folded_74855-3084.jpg",
},
]}
showRating={true}
title="Ils ont dompté la vente"
description="Déjà des milliers de closers en formation."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
textboxLayout="default"
useInvertedBackground={true}
animationType="depth-3d"
testimonials={[
{ id: "t1", name: "Sarah J.", handle: "@sarah_mkt", testimonial: "Rex a changé ma façon de vendre. En 2 semaines, mon taux de conversion a doublé.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg" },
{ id: "t2", name: "Marc L.", handle: "@marc_sales", testimonial: "Le côté gamifié est addictif. J'attends mes défis quotidiens avec impatience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-black-businesswoman-office_637285-9877.jpg" },
{ id: "t3", name: "Julie D.", handle: "@julie_brand", testimonial: "La structure des leçons est parfaite pour mon emploi du temps chargé.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-modern-man-working_23-2148728917.jpg" },
{ id: "t4", name: "Thomas K.", handle: "@thomas_k", testimonial: "Le badge Élite est ma plus grande fierté cette année. Top coachings !", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg" },
{ id: "t5", name: "Elena R.", handle: "@elena_biz", testimonial: "J'ai appris plus ici en un mois qu'en 3 ans d'université de commerce.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/serious-confident-business-coach-posing-with-arms-folded_74855-3084.jpg" }
]}
showRating={true}
title="Ils ont dompté la vente"
description="Déjà des milliers de closers en formation."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Est-ce que c'est vraiment comme Duolingo ?",
content: "Oui ! Le système de streak, de points XP, de vies et de classement rendent l'apprentissage ludique.",
},
{
id: "f2",
title: "Puis-je annuler mon abonnement ?",
content: "Bien sûr, tu peux gérer ou annuler ton abonnement à tout moment depuis ton profil.",
},
{
id: "f3",
title: "Le feedback IA est-il fiable ?",
content: "Notre IA a été entraînée sur des milliers de scripts de vente à succès pour corriger ton copywriting.",
},
]}
title="Des questions sur ton entraînement ?"
description="Rex a toutes les réponses."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Est-ce que c'est vraiment comme Duolingo ?", content: "Oui ! Le système de streak, de points XP, de vies et de classement rendent l'apprentissage ludique." },
{ id: "f2", title: "Puis-je annuler mon abonnement ?", content: "Bien sûr, tu peux gérer ou annuler ton abonnement à tout moment depuis ton profil." },
{ id: "f3", title: "Le feedback IA est-il fiable ?", content: "Notre IA a été entraînée sur des milliers de scripts de vente à succès pour corriger ton copywriting." }
]}
title="Des questions sur ton entraînement ?"
description="Rex a toutes les réponses."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Prêt à rugir avec Rex ?"
description="Envoie-nous un message pour toute question sur nos programmes."
inputs={[
{
name: "nom",
type: "text",
placeholder: "Ton nom",
},
{
name: "email",
type: "email",
placeholder: "Ton email",
},
]}
textarea={{
name: "message",
placeholder: "Comment pouvons-nous t'aider ?",
}}
imageSrc="http://img.b2bpic.net/free-photo/fun-3d-cartoon-tiger_183364-120147.jpg"
imageAlt="Rex le tigre prêt à rugir"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Prêt à rugir avec Rex ?"
description="Envoie-nous un message pour toute question sur nos programmes."
inputs={[
{ name: "nom", type: "text", placeholder: "Ton nom" },
{ name: "email", type: "email", placeholder: "Ton email" }
]}
textarea={{ name: "message", placeholder: "Comment pouvons-nous t'aider ?" }}
imageSrc="http://img.b2bpic.net/free-photo/fun-3d-cartoon-tiger_183364-120147.jpg"
imageAlt="Rex le tigre prêt à rugir"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "MarketingDuo",
items: [
{
label: "À propos",
href: "#",
},
{
label: "Blog",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Légal",
items: [
{
label: "CGV",
href: "#",
},
{
label: "Confidentialité",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 MarketingDuo. Rex est en forme."
bottomRightText="Rugis plus fort chaque jour."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "MarketingDuo", items: [{ label: "À propos", href: "#" }, { label: "Blog", href: "#" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
{ title: "Légal", items: [{ label: "CGV", href: "#" }, { label: "Confidentialité", href: "#" }] }
]}
bottomLeftText="© 2024 MarketingDuo. Rex est en forme."
bottomRightText="Rugis plus fort chaque jour."
/>
</div>
</ReactLenis>
</ThemeProvider>
);