193 lines
13 KiB
TypeScript
193 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="noise"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Fonctionnalités", id: "features" },
|
|
{ name: "Comment ça marche", id: "how-it-works" },
|
|
{ name: "Tarifs", id: "pricing" },
|
|
{ name: "Témoignages", id: "testimonials" },
|
|
]}
|
|
brandName="Daria"
|
|
button={{ text: "Essayer gratuitement", href: "#pricing" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={true}
|
|
background={{ variant: "radial-gradient" }}
|
|
title="Parle Darija comme un vrai Marocain 🇲🇦"
|
|
description="Daria est ton amie virtuelle marocaine — elle t'apprend le Darija par la voix, à ton rythme, en français."
|
|
testimonials={[
|
|
{ name: "Marie", handle: "Utilisatrice", testimonial: "Daria rend l'apprentissage tellement naturel et ludique.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-brown-hair_1308-179038.jpg" },
|
|
{ name: "Thomas", handle: "Apprenant", testimonial: "La meilleure façon d'apprendre le Darija sans stress.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134160.jpg" },
|
|
{ name: "Sophie", handle: "Passionnée", testimonial: "J'adore les échanges culturels, c'est super enrichissant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839613.jpg" },
|
|
{ name: "Lucas", handle: "Expert", testimonial: "Une interface fluide et une IA vraiment intelligente.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133862.jpg" },
|
|
{ name: "Julie", handle: "Voyageuse", testimonial: "Je me sens enfin prête à converser avec ma famille au Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-collective-portrait-people_23-2150964658.jpg" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Commencer gratuitement", href: "#pricing" },
|
|
{ text: "Voir la démo", href: "#demo" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-connection-technology-social-media_53876-124327.jpg"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839669.jpg", alt: "Apprenante 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133899.jpg", alt: "Apprenant 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100242.jpg", alt: "Apprenant 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839664.jpg", alt: "Apprenante 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-digital-art_23-2151197860.jpg", alt: "Apprenant 3" }
|
|
]}
|
|
avatarText="+ 3 000 apprenants satisfaits"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Plus de 3 000 apprenants", "Utilisé à Paris", "Approuvé par des experts", "Recommandé à Lyon", "Populaire à Bordeaux", "Communauté active", "Résultats rapides"]}
|
|
title="Rejoins + 3 000 apprenants français"
|
|
description="Une communauté grandissante de passionnés par le Maroc."
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "1", value: "01", title: "Choisis un thème", items: ["Salutations", "Au marché", "Au café"] },
|
|
{ id: "2", value: "02", title: "Parle avec Daria", items: ["Conversation orale", "Voice chat IA", "Immersion réelle"] },
|
|
{ id: "3", value: "03", title: "Suis tes progrès", items: ["Prononciation", "Vocabulaire", "Fluidité"] }
|
|
]}
|
|
title="Comment ça marche"
|
|
description="Apprendre le Darija en 3 étapes simples et naturelles."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyNine
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Professeure vocale IA", description: "Une amie virtuelle disponible 24/7.", imageSrc: "http://img.b2bpic.net/free-vector/isometric-online-education-flowchart_1284-32913.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/avatars-flat-set_1284-13674.jpg", buttonText: "En savoir plus" },
|
|
{ title: "Scénarios réels", description: "Café, marché, famille, le quotidien.", imageSrc: "http://img.b2bpic.net/free-vector/cafe-table-chairs_23-2147502979.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/shopping-bag-graph-bar-with-arrow-ecommerce-concept-blue-background-3d-illustration_56104-1794.jpg", buttonText: "En savoir plus" },
|
|
{ title: "Correction de prononciation", description: "Améliore ton accent marocain.", imageSrc: "http://img.b2bpic.net/free-photo/white-page-vinyl-record-red-headphone-white-background_23-2147926820.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/equalizer-logo-collection-with-flat-design_23-2147831587.jpg", buttonText: "En savoir plus" },
|
|
{ title: "Tips culturels", description: "Découvre les traditions marocaines.", imageSrc: "http://img.b2bpic.net/free-vector/travel-icons-flat_98292-1255.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/flat-design-elements-collection-reyes-magos_23-2151025814.jpg", buttonText: "En savoir plus" },
|
|
{ title: "Suivi de progression", description: "Visualise ton évolution clairement.", imageSrc: "http://img.b2bpic.net/free-vector/statistic-icons-collection_1284-871.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-front-side-with-white-background_187299-39798.jpg", buttonText: "En savoir plus" },
|
|
{ title: "Répétition espacée", description: "Apprends efficacement et durablement.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-concentric-arrows_23-2148490593.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/flat-lay-black-arrows-notebook-mock-up-blue-background_23-2148459910.jpg", buttonText: "En savoir plus" }
|
|
]}
|
|
title="Tout ce dont tu as besoin pour maîtriser le Darija"
|
|
description="Des outils conçus pour t'aider à progresser chaque jour."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "Marie", handle: "Paris", testimonial: "Daria est géniale, c'est comme avoir une amie marocaine à la maison.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-brown-hair_1308-179038.jpg" },
|
|
{ id: "2", name: "Thomas", handle: "Lyon", testimonial: "Ma prononciation a énormément progressé grâce aux corrections.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134160.jpg" },
|
|
{ id: "3", name: "Sophie", handle: "Bordeaux", testimonial: "J'adore les thèmes culturels, c'est super enrichissant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839613.jpg" },
|
|
{ id: "4", name: "Lucas", handle: "Paris", testimonial: "Enfin une méthode fun et efficace pour parler Darija.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133862.jpg" },
|
|
{ id: "5", name: "Julie", handle: "Lyon", testimonial: "Je recommande Daria à tous mes amis qui aiment le Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-collective-portrait-people_23-2150964658.jpg" }
|
|
]}
|
|
showRating={true}
|
|
title="Ce que disent nos apprenants"
|
|
description="Ils ont adopté Daria pour apprendre le Darija."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "gratuit", badge: "Gratuit", price: "0€", subtitle: "Pour débuter", features: ["5 leçons/jour", "Thèmes de base", "Progression limitée"], buttons: [{ text: "Commencer", href: "#" }] },
|
|
{ id: "pro", badge: "Populaire", price: "9,99€/mois", subtitle: "Le plus populaire", features: ["Leçons illimitées", "Tous les thèmes", "Correction avancée", "Conversation libre"], buttons: [{ text: "Passer au Pro", href: "#" }] }
|
|
]}
|
|
title="Simple et transparent"
|
|
description="Choisis l'offre qui correspond à tes objectifs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "1", title: "Est-ce que Daria parle vraiment en Darija ?", content: "Oui, Daria est conçue pour converser naturellement en Darija." },
|
|
{ id: "2", title: "Je dois connaître l'arabe pour utiliser Daria ?", content: "Pas du tout, Daria t'accompagne en français." },
|
|
{ id: "3", title: "Est-ce que l'app fonctionne sur mobile ?", content: "Oui, elle est parfaitement adaptée aux smartphones." },
|
|
{ id: "4", title: "Comment fonctionne la correction de prononciation ?", content: "Notre IA analyse ton audio et te donne des feedbacks précis." },
|
|
{ id: "5", title: "Puis-je annuler mon abonnement ?", content: "Tu peux annuler à tout moment dans tes paramètres." }
|
|
]}
|
|
title="Des questions ?"
|
|
description="Nous avons les réponses pour toi."
|
|
faqsAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-vector/virtual-education-composition_1284-15818.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="final-cta" data-section="final-cta">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
tag="Prêt pour l'aventure ?"
|
|
title="Prête à parler Darija ? Daria t'attend."
|
|
description="Sans carte bancaire. Sans engagement."
|
|
buttonText="Commencer gratuitement"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Daria"
|
|
columns={[
|
|
{ title: "Daria", items: [{ label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
|
|
{ title: "Légal", items: [{ label: "Confidentialité", href: "#" }, { label: "CGU", href: "#" }] }
|
|
]}
|
|
copyrightText="Fait avec ❤️ pour les amoureux du Maroc"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |