bender/cb623196-0dad-441e-adfc-b15ab48bfa88
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-01 16:06:58 +00:00
parent 4bfb54f659
commit ab922b6f84
1 changed files with 66 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
src/app/page.tsx
View File

@@ -33,38 +33,22 @@ export default function LandingPage() {
<NavbarStyleCentered
navItems={[
{
name: "Accueil",
id: "#home",
},
name: "Accueil", id: "#home"},
{
name: "Véhicules",
id: "#vehicles",
},
name: "Véhicules", id: "#vehicles"},
{
name: "Services",
id: "#features",
},
name: "Services", id: "#features"},
{
name: "À Propos",
id: "#about",
},
name: "À Propos", id: "#about"},
{
name: "Témoignages",
id: "#testimonials",
},
name: "Témoignages", id: "#testimonials"},
{
name: "FAQ",
id: "#faq",
},
name: "FAQ", id: "#faq"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
button={{
text: "Réservez Maintenant",
href: "#contact",
}}
text: "Réservez Maintenant", href: "#contact"}}
brandName="Mag Auto"
/>
</div>
@@ -72,51 +56,28 @@ export default function LandingPage() {
<div id="home" data-section="home">
<HeroBillboardRotatedCarousel
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
title="Mag Auto: Votre Chemin, Notre Voiture"
description="Louez la voiture parfaite pour chaque occasion. Explorez notre vaste sélection de véhicules neufs et bien entretenus, disponibles pour vos aventures sur les routes."
buttons={[
{
text: "Voir nos Véhicules",
href: "#vehicles",
},
text: "Voir nos Véhicules", href: "#vehicles"},
{
text: "Réservez Maintenant",
href: "#contact",
},
text: "Réservez Maintenant", href: "#contact"},
]}
carouselItems={[
{
id: "hero-carousel-1",
imageSrc: "http://img.b2bpic.net/free-photo/young-family-choosing-car-car-showroom_1303-17380.jpg?_wi=1",
imageAlt: "Voiture de sport rouge",
},
id: "hero-carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/young-family-choosing-car-car-showroom_1303-17380.jpg", imageAlt: "Voiture de sport rouge"},
{
id: "hero-carousel-2",
imageSrc: "http://img.b2bpic.net/free-photo/person-preparing-get-driver-license_23-2150167642.jpg?_wi=1",
imageAlt: "Petite citadine économique",
},
id: "hero-carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/person-preparing-get-driver-license_23-2150167642.jpg", imageAlt: "Petite citadine économique"},
{
id: "hero-carousel-3",
imageSrc: "http://img.b2bpic.net/free-photo/good-friends-playing-guitar-while-traveling-by-car_23-2148771860.jpg?_wi=1",
imageAlt: "SUV familial noir",
},
id: "hero-carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/good-friends-playing-guitar-while-traveling-by-car_23-2148771860.jpg", imageAlt: "SUV familial noir"},
{
id: "hero-carousel-4",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-family-looking-out-caravan-s-window_23-2148659482.jpg",
imageAlt: "Minivan pour groupe",
},
id: "hero-carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/front-view-family-looking-out-caravan-s-window_23-2148659482.jpg", imageAlt: "Minivan pour groupe"},
{
id: "hero-carousel-5",
imageSrc: "http://img.b2bpic.net/free-photo/red-pickup-model-black-floor_1150-16351.jpg",
imageAlt: "Décapotable de luxe",
},
id: "hero-carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/red-pickup-model-black-floor_1150-16351.jpg", imageAlt: "Décapotable de luxe"},
{
id: "hero-carousel-6",
imageAlt: "Véhicule électrique en charge",
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-with-trees_23-2151005352.jpg",
},
id: "hero-carousel-6", imageAlt: "Véhicule électrique en charge", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-with-trees_23-2151005352.jpg"},
]}
autoPlay={true}
autoPlayInterval={4000}
@@ -130,17 +91,11 @@ export default function LandingPage() {
description="Mag Auto est votre partenaire de confiance pour la location de voitures depuis plus d'une décennie. Nous nous engageons à offrir une expérience de location simple, rapide et agréable avec une flotte diversifiée et un service client irréprochable."
metrics={[
{
value: "10+",
title: "Ans d'Expérience",
},
value: "10+", title: "Ans d'Expérience"},
{
value: "200+",
title: "Véhicules Modernes",
},
value: "200+", title: "Véhicules Modernes"},
{
value: "5000+",
title: "Clients Satisfaits",
},
value: "5000+", title: "Clients Satisfaits"},
]}
imageSrc="http://img.b2bpic.net/free-photo/family-buying-car-dealer_1303-13702.jpg"
imageAlt="Clés de voiture remises à un client"
@@ -156,55 +111,31 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
title: "Réservation Facile",
description: "Réservez votre véhicule en quelques clics via notre plateforme intuitive, disponible 24/7.",
icon: CalendarDays,
title: "Réservation Facile", description: "Réservez votre véhicule en quelques clics via notre plateforme intuitive, disponible 24/7.", icon: CalendarDays,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-near-calendar-paper_23-2148036901.jpg",
imageAlt: "Application de réservation de voiture sur smartphone",
},
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-near-calendar-paper_23-2148036901.jpg", imageAlt: "Application de réservation de voiture sur smartphone"},
{
imageSrc: "http://img.b2bpic.net/free-photo/online-ticket-booking_53876-74932.jpg",
imageAlt: "Application de réservation de voiture sur smartphone",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/young-family-choosing-car-car-showroom_1303-17380.jpg?_wi=2",
imageAlt: "smartphone booking car app",
imageSrc: "http://img.b2bpic.net/free-photo/online-ticket-booking_53876-74932.jpg", imageAlt: "Application de réservation de voiture sur smartphone"},
]
},
{
title: "Large Sélection",
description: "Choisissez parmi une vaste flotte de véhicules, de la citadine économique au SUV familial, en passant par les voitures de luxe.",
icon: Car,
title: "Large Sélection", description: "Choisissez parmi une vaste flotte de véhicules, de la citadine économique au SUV familial, en passant par les voitures de luxe.", icon: Car,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/multilevel-parking-place_1398-457.jpg",
imageAlt: "Divers types de voitures sur un parking",
},
imageSrc: "http://img.b2bpic.net/free-photo/multilevel-parking-place_1398-457.jpg", imageAlt: "Divers types de voitures sur un parking"},
{
imageSrc: "http://img.b2bpic.net/free-photo/that-how-success-looks-like-girl-modern-car-salon-daytime-indoors-buying-new-vehicle_146671-16555.jpg",
imageAlt: "Divers types de voitures sur un parking",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/person-preparing-get-driver-license_23-2150167642.jpg?_wi=2",
imageAlt: "smartphone booking car app",
imageSrc: "http://img.b2bpic.net/free-photo/that-how-success-looks-like-girl-modern-car-salon-daytime-indoors-buying-new-vehicle_146671-16555.jpg", imageAlt: "Divers types de voitures sur un parking"},
]
},
{
title: "Support 24/7",
description: "Notre équipe d'assistance est disponible à tout moment pour répondre à vos questions et vous aider en cas de besoin.",
icon: Headphones,
title: "Support 24/7", description: "Notre équipe d'assistance est disponible à tout moment pour répondre à vos questions et vous aider en cas de besoin.", icon: Headphones,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-call-center-office-with-coffee_23-2149256070.jpg",
imageAlt: "Agent de support client avec casque",
},
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-call-center-office-with-coffee_23-2149256070.jpg", imageAlt: "Agent de support client avec casque"},
{
imageSrc: "http://img.b2bpic.net/free-photo/joyful-colleagues-laughing-work_74855-4314.jpg",
imageAlt: "Agent de support client avec casque",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/good-friends-playing-guitar-while-traveling-by-car_23-2148771860.jpg?_wi=2",
imageAlt: "smartphone booking car app",
imageSrc: "http://img.b2bpic.net/free-photo/joyful-colleagues-laughing-work_74855-4314.jpg", imageAlt: "Agent de support client avec casque"},
]
},
]}
title="Nos Avantages Clés"
@@ -220,53 +151,17 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "fiat-500",
name: "Fiat 500",
price: "45€ / jour",
variant: "Économique",
imageSrc: "http://img.b2bpic.net/free-photo/woman-near-man-looking-map-positive-lady-leaning-out-from-car-near-beach_23-2148039117.jpg",
imageAlt: "Fiat 500 blanche",
},
id: "fiat-500", name: "Fiat 500", price: "45€ / jour", variant: "Économique", imageSrc: "http://img.b2bpic.net/free-photo/woman-near-man-looking-map-positive-lady-leaning-out-from-car-near-beach_23-2148039117.jpg", imageAlt: "Fiat 500 blanche"},
{
id: "peugeot-308",
name: "Peugeot 308",
price: "60€ / jour",
variant: "Compacte",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-eating-near-car_23-2149437544.jpg",
imageAlt: "Peugeot 308 bleue",
},
id: "peugeot-308", name: "Peugeot 308", price: "60€ / jour", variant: "Compacte", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-eating-near-car_23-2149437544.jpg", imageAlt: "Peugeot 308 bleue"},
{
id: "renault-clio",
name: "Renault Clio",
price: "50€ / jour",
variant: "Citadine",
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-car-voyage_23-2148619954.jpg",
imageAlt: "Renault Clio rouge",
},
id: "renault-clio", name: "Renault Clio", price: "50€ / jour", variant: "Citadine", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-car-voyage_23-2148619954.jpg", imageAlt: "Renault Clio rouge"},
{
id: "vw-golf",
name: "Volkswagen Golf",
price: "70€ / jour",
variant: "Berline",
imageSrc: "http://img.b2bpic.net/free-photo/black-luxury-jeep-driving-road_114579-4058.jpg",
imageAlt: "Volkswagen Golf noire",
},
id: "vw-golf", name: "Volkswagen Golf", price: "70€ / jour", variant: "Berline", imageSrc: "http://img.b2bpic.net/free-photo/black-luxury-jeep-driving-road_114579-4058.jpg", imageAlt: "Volkswagen Golf noire"},
{
id: "nissan-qashqai",
name: "Nissan Qashqai",
price: "85€ / jour",
variant: "SUV",
imageSrc: "http://img.b2bpic.net/free-photo/two-women-checking-map-together-while-traveling-by-car_23-2148771841.jpg",
imageAlt: "Nissan Qashqai blanche",
},
id: "nissan-qashqai", name: "Nissan Qashqai", price: "85€ / jour", variant: "SUV", imageSrc: "http://img.b2bpic.net/free-photo/two-women-checking-map-together-while-traveling-by-car_23-2148771841.jpg", imageAlt: "Nissan Qashqai blanche"},
{
id: "mercedes-c",
name: "Mercedes C-Class",
price: "120€ / jour",
variant: "Luxe",
imageSrc: "http://img.b2bpic.net/free-photo/modern-electric-crossover-driving-winter-highway-eco-mobility-snowy-road_169016-71503.jpg",
imageAlt: "Mercedes Classe C argentée",
},
id: "mercedes-c", name: "Mercedes C-Class", price: "120€ / jour", variant: "Luxe", imageSrc: "http://img.b2bpic.net/free-photo/modern-electric-crossover-driving-winter-highway-eco-mobility-snowy-road_169016-71503.jpg", imageAlt: "Mercedes Classe C argentée"},
]}
title="Notre Flotte de Véhicules"
description="Explorez notre gamme complète de voitures, des citadines économiques aux SUV de luxe, toutes prêtes pour votre prochaine aventure."
@@ -280,34 +175,16 @@ export default function LandingPage() {
useInvertedBackground={true}
metrics={[
{
id: "customer-satisfaction",
value: "98%",
title: "Satisfaction Client",
items: [
"Avis positifs constants",
"Service clientèle dédié",
"Expérience de location fluide",
],
id: "customer-satisfaction", value: "98%", title: "Satisfaction Client", items: [
"Avis positifs constants", "Service clientèle dédié", "Expérience de location fluide"],
},
{
id: "recent-vehicles",
value: "150+",
title: "Véhicules Récentes",
items: [
"Flotte renouvelée chaque année",
"Derniers modèles disponibles",
"Entretien rigoureux",
],
id: "recent-vehicles", value: "150+", title: "Véhicules Récentes", items: [
"Flotte renouvelée chaque année", "Derniers modèles disponibles", "Entretien rigoureux"],
},
{
id: "roadside-assistance",
value: "24/7",
title: "Assistance Routière",
items: [
"Disponible à tout moment",
"Intervention rapide partout",
"Tranquillité d'esprit garantie",
],
id: "roadside-assistance", value: "24/7", title: "Assistance Routière", items: [
"Disponible à tout moment", "Intervention rapide partout", "Tranquillité d'esprit garantie"],
},
]}
title="Mag Auto en Chiffres"
@@ -321,50 +198,15 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "1",
title: "Service exceptionnel!",
quote: "L'expérience avec Mag Auto a été absolument parfaite. La voiture était impeccable et le personnel très accueillant. Je recommande vivement!",
name: "Julien Dubois",
role: "Entrepreneur",
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-man-touching-rearview-sitting-car-street_839833-25870.jpg",
imageAlt: "Photo de Julien Dubois",
},
id: "1", title: "Service exceptionnel!", quote: "L'expérience avec Mag Auto a été absolument parfaite. La voiture était impeccable et le personnel très accueillant. Je recommande vivement!", name: "Julien Dubois", role: "Entrepreneur", imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-man-touching-rearview-sitting-car-street_839833-25870.jpg", imageAlt: "Photo de Julien Dubois"},
{
id: "2",
title: "Location sans tracas",
quote: "J'ai loué une voiture pour mes vacances et tout s'est déroulé sans accroc. Le processus de réservation est simple et rapide, et les tarifs sont compétitifs.",
name: "Sophie Martin",
role: "Voyageuse",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing_23-2150171294.jpg",
imageAlt: "Photo de Sophie Martin",
},
id: "2", title: "Location sans tracas", quote: "J'ai loué une voiture pour mes vacances et tout s'est déroulé sans accroc. Le processus de réservation est simple et rapide, et les tarifs sont compétitifs.", name: "Sophie Martin", role: "Voyageuse", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing_23-2150171294.jpg", imageAlt: "Photo de Sophie Martin"},
{
id: "3",
title: "Flotte de qualité supérieure",
quote: "Impressionné par la qualité et la propreté des véhicules. J'ai pu choisir exactement le modèle que je voulais. Mag Auto est mon agence de prédilection désormais.",
name: "Marc Lefevre",
role: "Professionnel de la route",
imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-baby-girl-choosing-car_1303-27395.jpg",
imageAlt: "Photo de Marc Lefevre",
},
id: "3", title: "Flotte de qualité supérieure", quote: "Impressionné par la qualité et la propreté des véhicules. J'ai pu choisir exactement le modèle que je voulais. Mag Auto est mon agence de prédilection désormais.", name: "Marc Lefevre", role: "Professionnel de la route", imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-baby-girl-choosing-car_1303-27395.jpg", imageAlt: "Photo de Marc Lefevre"},
{
id: "4",
title: "Support client réactif",
quote: "J'ai eu une petite question en cours de route et le service client a été incroyablement réactif et serviable. Un vrai plus!",
name: "Fatima Benali",
role: "Cadre commercial",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-young-man-wearing-glasses-sitting-back-seat-car-0_613910-19961.jpg",
imageAlt: "Photo de Fatima Benali",
},
id: "4", title: "Support client réactif", quote: "J'ai eu une petite question en cours de route et le service client a été incroyablement réactif et serviable. Un vrai plus!", name: "Fatima Benali", role: "Cadre commercial", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-young-man-wearing-glasses-sitting-back-seat-car-0_613910-19961.jpg", imageAlt: "Photo de Fatima Benali"},
{
id: "5",
title: "Excellent rapport qualité/prix",
quote: "Mag Auto offre le meilleur rapport qualité/prix que j'ai trouvé. Des voitures récentes, un service irréprochable et des prix justes. Je reviendrai!",
name: "Thomas Petit",
role: "Étudiant",
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-talking-sales-person-car-showroom_1303-15142.jpg",
imageAlt: "Photo de Thomas Petit",
},
id: "5", title: "Excellent rapport qualité/prix", quote: "Mag Auto offre le meilleur rapport qualité/prix que j'ai trouvé. Des voitures récentes, un service irréprochable et des prix justes. Je reviendrai!", name: "Thomas Petit", role: "Étudiant", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-talking-sales-person-car-showroom_1303-15142.jpg", imageAlt: "Photo de Thomas Petit"},
]}
title="Ce que nos Clients Disent"
description="L'expérience Mag Auto racontée par ceux qui nous font confiance pour leurs besoins en location de véhicules."
@@ -377,30 +219,15 @@ export default function LandingPage() {
useInvertedBackground={true}
faqs={[
{
id: "faq-1",
title: "Quels documents sont nécessaires pour louer une voiture ?",
content: "Pour louer une voiture, vous aurez besoin d'un permis de conduire valide, d'une pièce d'identité (carte d'identité ou passeport) et d'une carte de crédit pour le dépôt de garantie.",
},
id: "faq-1", title: "Quels documents sont nécessaires pour louer une voiture ?", content: "Pour louer une voiture, vous aurez besoin d'un permis de conduire valide, d'une pièce d'identité (carte d'identité ou passeport) et d'une carte de crédit pour le dépôt de garantie."},
{
id: "faq-2",
title: "Quel est l'âge minimum pour louer un véhicule ?",
content: "L'âge minimum pour louer est de 21 ans. Des frais supplémentaires peuvent s'appliquer pour les conducteurs de moins de 25 ans.",
},
id: "faq-2", title: "Quel est l'âge minimum pour louer un véhicule ?", content: "L'âge minimum pour louer est de 21 ans. Des frais supplémentaires peuvent s'appliquer pour les conducteurs de moins de 25 ans."},
{
id: "faq-3",
title: "L'assurance est-elle incluse dans le prix de la location ?",
content: "Une assurance de base est généralement incluse. Des options d'assurance supplémentaires pour une couverture plus complète sont disponibles et recommandées.",
},
id: "faq-3", title: "L'assurance est-elle incluse dans le prix de la location ?", content: "Une assurance de base est généralement incluse. Des options d'assurance supplémentaires pour une couverture plus complète sont disponibles et recommandées."},
{
id: "faq-4",
title: "Puis-je modifier ou annuler ma réservation ?",
content: "Oui, les modifications et annulations sont possibles. Les conditions varient en fonction du tarif et du moment de l'annulation. Veuillez consulter nos conditions générales ou contacter notre service client.",
},
id: "faq-4", title: "Puis-je modifier ou annuler ma réservation ?", content: "Oui, les modifications et annulations sont possibles. Les conditions varient en fonction du tarif et du moment de l'annulation. Veuillez consulter nos conditions générales ou contacter notre service client."},
{
id: "faq-5",
title: "Proposez-vous des services de livraison/collecte de véhicules ?",
content: "Oui, nous proposons des services de livraison et de collecte à des endroits spécifiques moyennant des frais supplémentaires. Veuillez nous contacter pour organiser ce service.",
},
id: "faq-5", title: "Proposez-vous des services de livraison/collecte de véhicules ?", content: "Oui, nous proposons des services de livraison et de collecte à des endroits spécifiques moyennant des frais supplémentaires. Veuillez nous contacter pour organiser ce service."},
]}
title="Questions Fréquemment Posées"
description="Trouvez les réponses à vos interrogations les plus courantes concernant la location de véhicules avec Mag Auto."
@@ -412,8 +239,7 @@ export default function LandingPage() {
<ContactCenter
useInvertedBackground={false}
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
tag="Contactez-nous"
title="Prêt à Rouler ?"
description="Remplissez le formulaire ci-dessous pour toute question ou pour démarrer votre réservation. Notre équipe est là pour vous aider."
@@ -430,50 +256,31 @@ export default function LandingPage() {
logoText="Mag Auto"
columns={[
{
title: "Liens Rapides",
items: [
title: "Liens Rapides", items: [
{
label: "Accueil",
href: "#home",
},
label: "Accueil", href: "#home"},
{
label: "Véhicules",
href: "#vehicles",
},
label: "Véhicules", href: "#vehicles"},
{
label: "Services",
href: "#features",
},
label: "Services", href: "#features"},
],
},
{
title: "Informations",
items: [
title: "Informations", items: [
{
label: "À Propos",
href: "#about",
},
label: "À Propos", href: "#about"},
{
label: "FAQ",
href: "#faq",
},
label: "FAQ", href: "#faq"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
],
},
{
title: "Légal",
items: [
title: "Légal", items: [
{
label: "Politique de Confidentialité",
href: "#",
},
label: "Politique de Confidentialité", href: "#"},
{
label: "Conditions Générales",
href: "#",
},
label: "Conditions Générales", href: "#"},
],
},
]}