Update src/app/import/page.tsx

This commit is contained in:
2026-03-12 16:28:01 +00:00
parent e4b5053386
commit 795182a34f

View File

@@ -1,14 +1,47 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import { Shield, Mail } from 'lucide-react';
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import Link from "next/link";
import { Shield } from "lucide-react";
export default function ImportPage() {
const navItems = [
{ name: "Catalogue", id: "catalogue" },
{ name: "Import", id: "import" },
{ name: "Vendre", id: "vendre" },
{ name: "Blog", id: "blog" },
];
const footerColumns = [
{
title: "Produits", items: [
{ label: "Catalogue", href: "/catalogue" },
{ label: "Import Service", href: "/import" },
{ label: "Vendre Votre Voiture", href: "/vendre" },
{ label: "Modèles Populaires", href: "/catalogue" },
],
},
{
title: "Ressources", items: [
{ label: "À Propos", href: "/a-propos" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Légal", items: [
{ label: "Politique de Confidentialité", href: "#" },
{ label: "Conditions d'Utilisation", href: "#" },
{ label: "Politique de Retour", href: "#" },
{ label: "Mentions Légales", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -22,138 +55,49 @@ export default function ImportPage() {
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
{/* Navigation */}
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="MarocAutoTrades"
navItems={[
{ name: "Catalogue", id: "catalogue" },
{ name: "Import", id: "import" },
{ name: "Vendre", id: "vendre" },
{ name: "Blog", id: "blog" }
]}
navItems={navItems}
/>
</div>
{/* About Import Service */}
<div id="about-import" data-section="about-import">
<TextSplitAbout
title="Service Import"
description={[
"Chez MarocAutoTrades, nous gérons l'intégralité de votre processus d'importation de véhicules électriques chinois au Maroc. De la sélection du modèle à la livraison à domicile, nous nous occupons de tout.",
"Notre équipe d'experts maîtrise les procédures douanières marocaines, les taxes d'importation, les documents officiels et les délais de dédouanement. Vous bénéficiez d'une transparence totale avec devis détaillé avant engagement.",
"Nous travaillons directement avec les fabricants BYD, Huawei, Leapmotor, Zeekr et Dongfeng pour vous garantir les meilleurs prix et délais de livraison optimisés."
]}
buttons={[
{
text: "Demander un devis",
href: "#contact"
},
{
text: "Voir les modèles",
href: "/catalogue"
}
]}
buttonAnimation="slide-up"
showBorder={true}
useInvertedBackground={false}
ariaLabel="About import service"
/>
</div>
{/* Import Process - Features */}
<div id="import-process" data-section="import-process">
<div id="import" data-section="import">
<FeatureCardOne
title="Notre Processus d'Importation"
description="Étapes claires et transparentes pour importer votre véhicule électrique sans complications"
tag="Comment ça marche"
title="Service d'Import Personnalisé"
description="Nous gérons l'intégralité du processus d'importation de votre véhicule électrique au Maroc"
tag="Import"
tagIcon={Shield}
tagAnimation="slide-up"
features={[
{
title: "Sélection & Commande",
description: "Choisissez votre modèle parmi nos partenaires. Nous envoyons une demande officielle au fabricant avec votre devis personnalisé",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-wipes-car-with-rag_1157-33904.jpg?_wi=9",
imageAlt: "Sélection du modèle"
title: "Sélection du Modèle", description: "Choisissez parmi les derniers modèles BYD, Huawei, Leapmotor et autres marques chinoises leader", imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-wipes-car-with-rag_1157-33904.jpg", imageAlt: "Sélection véhicule"
},
{
title: "Fabrication & Préparation",
description: "Le véhicule est construit selon vos spécifications. Notre équipe vérifie la qualité avant expédition vers le Maroc",
imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-electro-car-using-phone_1303-17807.jpg?_wi=7",
imageAlt: "Fabrication"
title: "Formalités Douanières", description: "Notre équipe gère toutes les démarches administratives et douanières pour vous", imageSrc: "http://img.b2bpic.net/free-photo/cargo-ship-sailing-through-ocean_23-2151989582.jpg", imageAlt: "Processus douane"
},
{
title: "Transport Maritime",
description: "Votre véhicule voyage en conteneur sécurisé via transport maritime. Délai typique: 30-45 jours selon la destination",
imageSrc: "http://img.b2bpic.net/free-photo/cargo-ship-sailing-through-ocean_23-2151989582.jpg?_wi=2",
imageAlt: "Transport international"
title: "Transport et Logistique", description: "Livraison sécurisée de votre véhicule directement au Maroc avec suivi complet", imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-electro-car-using-phone_1303-17807.jpg", imageAlt: "Transport logistique"
},
{
title: "Dédouanement & Livraison",
description: "Notre équipe gère le dédouanement auprès des autorités marocaines. Livraison finale à domicile avec vérification complète"
title: "Assistance Post-Import", description: "Support complet pour l'immatriculation et la mise en service de votre véhicule", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-front-modern-car_23-2148384978.jpg", imageAlt: "Assistance après-vente"
}
]}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Import process steps"
ariaLabel="Import service details"
/>
</div>
{/* Contact Form */}
<div id="contact" data-section="contact">
<ContactCenter
tag="Prêt à Importer?"
title="Demandez Votre Devis d'Importation"
description="Complétez le formulaire ci-dessous et recevez un devis personnalisé dans les 24 heures. Aucun engagement, tarifs transparents."
tagIcon={Mail}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Votre adresse email"
buttonText="Recevoir mon Devis"
termsText="En soumettant votre demande, vous acceptez notre politique de confidentialité. Vos données sont protégées."
ariaLabel="Import quote request form"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/group-multinational-busy-people-working-office_146671-15682.jpg?_wi=4"
imageSrc="http://img.b2bpic.net/free-photo/group-multinational-busy-people-working-office_146671-15682.jpg"
imageAlt="MarocAutoTrades office"
logoText="MarocAutoTrades"
copyrightText="© 2025 MarocAutoTrades. Tous droits réservés."
columns={[
{
title: "Produits",
items: [
{ label: "Catalogue", href: "/catalogue" },
{ label: "Import Service", href: "/import" },
{ label: "Vendre Votre Voiture", href: "/vendre" },
{ label: "Modèles Populaires", href: "/catalogue" }
]
},
{
title: "Ressources",
items: [
{ label: "À Propos", href: "/a-propos" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Légal",
items: [
{ label: "Politique de Confidentialité", href: "#" },
{ label: "Conditions d'Utilisation", href: "#" },
{ label: "Politique de Retour", href: "#" },
{ label: "Mentions Légales", href: "#" }
]
}
]}
columns={footerColumns}
ariaLabel="Site footer"
/>
</div>