Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
413
src/app/page.tsx
413
src/app/page.tsx
@@ -11,7 +11,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Award, Book, Car, CheckCircle, Edit, MessageCircle } from "lucide-react";
|
||||
import { Award, Book, Car, CheckCircle, Edit, MessageCircle, PartyPopper } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -19,306 +19,137 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Nos Formations",
|
||||
id: "#formations",
|
||||
},
|
||||
{
|
||||
name: "À Propos",
|
||||
id: "#pourquoi",
|
||||
},
|
||||
{
|
||||
name: "Témoignages",
|
||||
id: "#temoignages",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Dkik Rachid"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "#hero" },
|
||||
{ name: "Nos Formations", id: "#formations" },
|
||||
{ name: "À Propos", id: "#pourquoi" },
|
||||
{ name: "Témoignages", id: "#temoignages" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Dkik Rachid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
logoText="Obtenez votre permis avec les meilleurs"
|
||||
description="Auto Ecole Dkik Rachid — la référence de la formation à la conduite à Rabat. Rejoignez des milliers de conducteurs diplômés."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contactez-nous sur WhatsApp",
|
||||
href: "https://wa.me/212600000000",
|
||||
},
|
||||
{
|
||||
text: "Découvrir nos formations",
|
||||
href: "#formations",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="Illustration d'une auto-école à Rabat"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="Obtenez votre permis avec les meilleurs"
|
||||
description="Auto Ecole Dkik Rachid — la référence de la formation à la conduite à Rabat. Rejoignez des milliers de conducteurs diplômés."
|
||||
buttons={[
|
||||
{ text: "Contactez-nous sur WhatsApp", href: "https://wa.me/212600000000" },
|
||||
{ text: "Découvrir nos formations", href: "#formations" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "4.8 ★",
|
||||
title: "Note Google",
|
||||
items: [
|
||||
"Basé sur plus de 200 avis",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "200+",
|
||||
title: "Avis vérifiés",
|
||||
items: [
|
||||
"Étudiants satisfaits",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Rabat",
|
||||
title: "Basés à Rabat",
|
||||
items: [
|
||||
"Formation locale",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Nos indicateurs de réussite"
|
||||
description="Des résultats concrets pour une formation de qualité supérieure."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "4.8 ★", title: "Note Google", items: ["Basé sur plus de 200 avis"] },
|
||||
{ id: "m2", value: "200+", title: "Avis vérifiés", items: ["Étudiants satisfaits"] },
|
||||
{ id: "m3", value: "Rabat", title: "Basés à Rabat", items: ["Formation locale"] }
|
||||
]}
|
||||
title="Nos indicateurs de réussite"
|
||||
description="Des résultats concrets pour une formation de qualité supérieure."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="formations" data-section="formations">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Permis B (Voiture)",
|
||||
price: "Sur demande",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Permis A (Moto)",
|
||||
price: "Sur demande",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/vintage-motorcycle-print-monochrome-dark-background_1284-38773.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Formation Code Seul",
|
||||
price: "Sur demande",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Nos Formations"
|
||||
description="Choisissez la formation qui correspond à vos besoins"
|
||||
/>
|
||||
</div>
|
||||
<div id="formations" data-section="formations">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Permis B (Voiture)", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" },
|
||||
{ id: "p2", name: "Permis A (Moto)", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-vector/vintage-motorcycle-print-monochrome-dark-background_1284-38773.jpg" },
|
||||
{ id: "p3", name: "Formation Code Seul", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }
|
||||
]}
|
||||
title="Nos Formations"
|
||||
description="Choisissez la formation qui correspond à vos besoins"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="processus" data-section="processus">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Inscription",
|
||||
description: "Inscrivez-vous à l'auto-école et choisissez votre formation.",
|
||||
icon: Edit,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=4",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Formation théorique",
|
||||
description: "Suivez les cours de code de la route avec des experts.",
|
||||
icon: Book,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=6",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Examen du code",
|
||||
description: "Passez et réussissez votre examen théorique officiel.",
|
||||
icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=7",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=8",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Formation pratique",
|
||||
description: "Prenez vos heures de conduite avec un moniteur patient.",
|
||||
icon: Car,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=3",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Examen pratique",
|
||||
description: "Passez votre test de conduite final pour votre permis.",
|
||||
icon: Car,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=5",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Félicitations !",
|
||||
description: "Récupérez votre permis de conduire et prenez la route.",
|
||||
icon: Award,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=6",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=7",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Comment obtenir votre permis ?"
|
||||
description="Un parcours simple en 6 étapes pour vous accompagner vers le succès."
|
||||
/>
|
||||
</div>
|
||||
<div id="processus" data-section="processus">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Inscription", description: "Inscrivez-vous à l'auto-école et choisissez votre formation.", icon: Edit, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }] },
|
||||
{ title: "Formation théorique", description: "Suivez les cours de code de la route avec des experts.", icon: Book, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }] },
|
||||
{ title: "Examen du code", description: "Passez et réussissez votre examen théorique officiel.", icon: CheckCircle, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }] },
|
||||
{ title: "Formation pratique", description: "Prenez vos heures de conduite avec un moniteur patient.", icon: Car, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }] },
|
||||
{ title: "Examen pratique", description: "Passez votre test de conduite final pour votre permis.", icon: Car, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }] },
|
||||
{ title: "Félicitations !", description: "Récupérez votre permis de conduire et prenez la route.", icon: PartyPopper, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }] }
|
||||
]}
|
||||
title="Comment obtenir votre permis ?"
|
||||
description="Un parcours simple en 6 étapes pour vous accompagner vers le succès."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pourquoi" data-section="pourquoi">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Pourquoi choisir Auto Ecole Dkik Rachid ?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contactez-nous",
|
||||
href: "https://wa.me/212600000000",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pourquoi" data-section="pourquoi">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Pourquoi choisir Auto Ecole Dkik Rachid ?"
|
||||
buttons={[{ text: "Contactez-nous", href: "https://wa.me/212600000000" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="temoignages" data-section="temoignages">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Fatima Z.",
|
||||
handle: "@fatimaz",
|
||||
testimonial: "J'ai obtenu mon permis du premier coup grâce à Auto Ecole Dkik Rachid. Les moniteurs sont patients et professionnels.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Youssef M.",
|
||||
handle: "@youssefm",
|
||||
testimonial: "Une formation excellente et des moniteurs à l'écoute. Je recommande vivement !",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sara A.",
|
||||
handle: "@saraa",
|
||||
testimonial: "Le code est très bien expliqué. J'ai progressé très rapidement grâce à leur pédagogie.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Amine K.",
|
||||
handle: "@aminek",
|
||||
testimonial: "Super auto-école, très pédagogique et accueillante. Merci pour l'accompagnement !",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=4",
|
||||
},
|
||||
]}
|
||||
title="Ce que disent nos étudiants"
|
||||
description="Découvrez les retours d'expérience de ceux qui ont réussi leur permis avec nous."
|
||||
/>
|
||||
</div>
|
||||
<div id="temoignages" data-section="temoignages">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Fatima Z.", handle: "@fatimaz", testimonial: "J'ai obtenu mon permis du premier coup grâce à Auto Ecole Dkik Rachid. Les moniteurs sont patients et professionnels.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" },
|
||||
{ id: "t2", name: "Youssef M.", handle: "@youssefm", testimonial: "Une formation excellente et des moniteurs à l'écoute. Je recommande vivement !", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" },
|
||||
{ id: "t3", name: "Sara A.", handle: "@saraa", testimonial: "Le code est très bien expliqué. J'ai progressé très rapidement grâce à leur pédagogie.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" },
|
||||
{ id: "t4", name: "Amine K.", handle: "@aminek", testimonial: "Super auto-école, très pédagogique et accueillante. Merci pour l'accompagnement !", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" }
|
||||
]}
|
||||
title="Ce que disent nos étudiants"
|
||||
description="Découvrez les retours d'expérience de ceux qui ont réussi leur permis avec nous."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Comment s'inscrire ?",
|
||||
content: "Contactez-nous sur WhatsApp pour une procédure rapide et simple.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Quels sont les tarifs ?",
|
||||
content: "Contactez-nous par téléphone pour une discussion personnalisée adaptée à votre besoin.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Où êtes-vous basés ?",
|
||||
content: "Nous sommes situés à Rabat, au Maroc, prêts à vous accueillir.",
|
||||
},
|
||||
]}
|
||||
ctaTitle="Prêt à commencer ?"
|
||||
ctaDescription="Contactez-nous directement sur WhatsApp ou par téléphone pour démarrer votre aventure."
|
||||
ctaButton={{
|
||||
text: "Envoyer un message",
|
||||
href: "https://wa.me/212600000000",
|
||||
}}
|
||||
ctaIcon={MessageCircle}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Comment s'inscrire ?", content: "Contactez-nous sur WhatsApp pour une procédure rapide et simple." },
|
||||
{ id: "q2", title: "Quels sont les tarifs ?", content: "Contactez-nous par téléphone pour une discussion personnalisée adaptée à votre besoin." },
|
||||
{ id: "q3", title: "Où êtes-vous basés ?", content: "Nous sommes situés à Rabat, au Maroc, prêts à vous accueillir." }
|
||||
]}
|
||||
ctaTitle="Prêt à commencer ?"
|
||||
ctaDescription="Contactez-nous directement sur WhatsApp ou par téléphone pour démarrer votre aventure."
|
||||
ctaButton={{ text: "Envoyer un message", href: "https://wa.me/212600000000" }}
|
||||
ctaIcon={MessageCircle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Auto Ecole Dkik Rachid"
|
||||
copyrightText="© 2026 Auto Ecole Dkik Rachid — Tous droits réservés"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Auto Ecole Dkik Rachid"
|
||||
copyrightText="© 2026 Auto Ecole Dkik Rachid — Tous droits réservés"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user