Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Global Import - Votre Partenaire d'Importation Internationale</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2b6cb0', | |
| accent: '#ecc94b', | |
| light: '#f7fafc', | |
| dark: '#2d3748' | |
| }, | |
| fontFamily: { | |
| sans: ['Montserrat', 'sans-serif'], | |
| serif: ['Playfair Display', 'serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(rgba(26, 54, 93, 0.85), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .map-container { | |
| height: 400px; | |
| background: url('https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .stat-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| background-color: #2b6cb0; | |
| color: white; | |
| } | |
| .stat-card:hover .stat-icon { | |
| color: white; | |
| } | |
| .animate-on-scroll { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .animate-on-scroll.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-primary text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-globe-americas text-accent text-2xl mr-2"></i> | |
| <span class="font-serif text-xl font-bold">Global<span class="text-accent">Import</span></span> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#accueil" class="hover:text-accent transition">Accueil</a> | |
| <a href="#services" class="hover:text-accent transition">Services</a> | |
| <a href="#apropos" class="hover:text-accent transition">À Propos</a> | |
| <a href="#statistiques" class="hover:text-accent transition">Chiffres</a> | |
| <a href="#contact" class="hover:text-accent transition">Contact</a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <button class="bg-accent text-primary font-semibold px-6 py-2 rounded hover:bg-yellow-400 transition">Devis</button> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden pb-4"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#accueil" class="hover:text-accent transition py-2 border-b border-gray-700">Accueil</a> | |
| <a href="#services" class="hover:text-accent transition py-2 border-b border-gray-700">Services</a> | |
| <a href="#apropos" class="hover:text-accent transition py-2 border-b border-gray-700">À Propos</a> | |
| <a href="#statistiques" class="hover:text-accent transition py-2 border-b border-gray-700">Chiffres</a> | |
| <a href="#contact" class="hover:text-accent transition py-2">Contact</a> | |
| <button class="bg-accent text-primary font-semibold px-6 py-2 rounded hover:bg-yellow-400 transition mt-4">Devis</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="accueil" class="hero-bg text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="font-serif text-4xl md:text-6xl font-bold mb-6 animate-on-scroll"> | |
| Importation d'Articles <span class="text-accent">depuis la Chine</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto animate-on-scroll"> | |
| Spécialistes de l'importation depuis la Chine avec des solutions clés en main | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 animate-on-scroll"> | |
| <button class="bg-accent text-primary font-bold px-8 py-3 rounded-lg hover:bg-yellow-400 transition transform hover:scale-105"> | |
| Découvrir nos services | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white font-bold px-8 py-3 rounded-lg hover:bg-white hover:text-primary transition"> | |
| Nous contacter | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-primary mb-4">Nos Services d'Importation</h2> | |
| <div class="h-1 w-24 bg-accent mx-auto"></div> | |
| <p class="mt-6 text-gray-600 max-w-2xl mx-auto"> | |
| Nous proposons une gamme complète de services pour faciliter vos importations internationales | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-ship text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Transport Chine-Europe</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Solutions maritimes et aériennes optimisées pour vos importations depuis la Chine vers l'Europe. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-plane text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Transport Aérien</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Solutions rapides pour vos importations urgentes avec notre réseau aérien mondial. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-file-contract text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Douane & Réglementation</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Gestion complète des formalités douanières et conformité réglementaire. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-warehouse text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Stockage & Distribution</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Solutions d'entreposage sécurisé et distribution efficace sur le territoire national. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-boxes text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Gestion de la Chaîne d'Approvisionnement</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Optimisation complète de votre chaîne d'approvisionnement pour une efficacité maximale. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 6 --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-headset text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Service Client Premium</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Assistance personnalisée 24/7 avec un conseiller dédié pour chaque client important. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 7 - New Vente/Achat Service --> | |
| <div class="service-card bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> | |
| <i class="fas fa-handshake text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Service Achat/Vente</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Service complet d'achat et revente en Chine avec gestion des stocks et livraison. | |
| </p> | |
| <a href="#" class="text-secondary font-semibold flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="apropos" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <div class="relative"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96"></div> | |
| <div class="absolute -bottom-6 -right-6 bg-primary p-6 text-white rounded-lg shadow-xl"> | |
| <p class="text-4xl font-bold">15+</p> | |
| <p>Ans d'expérience</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-primary mb-6">Votre Partenaire en Importation Depuis 2008</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Fondée en 2008, GlobalImport s'est spécialisée dans l'importation depuis la Chine. Notre expertise couvre tous les aspects de la chaîne logistique chinoise, de l'approvisionnement auprès des meilleurs fournisseurs à la livraison finale en Europe. | |
| </p> | |
| <p class="text-gray-600 mb-8"> | |
| Nous nous distinguons par notre approche personnalisée, notre réseau mondial de partenaires fiables et notre engagement envers l'excellence opérationnelle. Notre mission est de simplifier vos importations tout en optimisant vos coûts et délais. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-accent mr-2"></i> | |
| <span>Équipe d'experts internationaux</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-accent mr-2"></i> | |
| <span>Technologie de suivi en temps réel</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-accent mr-2"></i> | |
| <span>Solutions sur mesure</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-accent mr-2"></i> | |
| <span>Conformité réglementaire garantie</span> | |
| </div> | |
| </div> | |
| <button class="bg-primary text-white font-bold px-8 py-3 rounded-lg hover:bg-blue-900 transition"> | |
| Notre histoire | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Statistics Section --> | |
| <section id="statistiques" class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4">Notre Impact en Chiffres</h2> | |
| <div class="h-1 w-24 bg-accent mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="stat-card bg-white bg-opacity-10 p-8 rounded-lg text-center"> | |
| <div class="stat-icon text-accent text-5xl mb-4"> | |
| <i class="fas fa-globe-americas"></i> | |
| </div> | |
| <p class="text-4xl font-bold mb-2">45+</p> | |
| <p class="text-gray-200">Pays desservis</p> | |
| </div> | |
| <div class="stat-card bg-white bg-opacity-10 p-8 rounded-lg text-center"> | |
| <div class="stat-icon text-accent text-5xl mb-4"> | |
| <i class="fas fa-shipping-fast"></i> | |
| </div> | |
| <p class="text-4xl font-bold mb-2">12K+</p> | |
| <p class="text-gray-200">Envois annuels</p> | |
| </div> | |
| <div class="stat-card bg-white bg-opacity-10 p-8 rounded-lg text-center"> | |
| <div class="stat-icon text-accent text-5xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <p class="text-4xl font-bold mb-2">850+</p> | |
| <p class="text-gray-200">Clients satisfaits</p> | |
| </div> | |
| <div class="stat-card bg-white bg-opacity-10 p-8 rounded-lg text-center"> | |
| <div class="stat-icon text-accent text-5xl mb-4"> | |
| <i class="fas fa-flag"></i> | |
| </div> | |
| <p class="text-4xl font-bold mb-2">200+</p> | |
| <p class="text-gray-200">Fournisseurs chinois certifiés</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Service Client Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-primary mb-4">Notre Engagement Client</h2> | |
| <div class="h-1 w-24 bg-accent mx-auto"></div> | |
| <p class="mt-6 text-gray-600 max-w-2xl mx-auto"> | |
| Un service client exceptionnel au cœur de notre métier | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center p-6"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-user-tie text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Conseiller Dédié</h3> | |
| <p class="text-gray-600"> | |
| Un interlocuteur unique pour chaque client, disponible 24/7 par téléphone, email et chat | |
| </p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-clock text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Réactivité</h3> | |
| <p class="text-gray-600"> | |
| Réponse garantie sous 2 heures maximum pour toutes vos demandes urgentes | |
| </p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-chart-line text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Reporting Personnalisé</h3> | |
| <p class="text-gray-600"> | |
| Tableaux de bord et analyses mensuelles pour suivre vos performances d'importation | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-primary mb-4">Notre Processus d'Importation</h2> | |
| <div class="h-1 w-24 bg-accent mx-auto"></div> | |
| <p class="mt-6 text-gray-600 max-w-2xl mx-auto"> | |
| Un processus simplifié pour une expérience d'importation sans tracas | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="process-step text-center mb-10 md:mb-0"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-white text-2xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Consultation</h3> | |
| <p class="text-gray-600">Analyse de vos besoins et planification</p> | |
| </div> | |
| <div class="hidden md:block text-accent text-2xl"> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| <div class="process-step text-center mb-10 md:mb-0"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-white text-2xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Sourcing Chine</h3> | |
| <p class="text-gray-600">Identification et audit des meilleurs fournisseurs chinois</p> | |
| </div> | |
| <div class="hidden md:block text-accent text-2xl"> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| <div class="process-step text-center mb-10 md:mb-0"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-white text-2xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Logistique</h3> | |
| <p class="text-gray-600">Transport et gestion douanière</p> | |
| </div> | |
| <div class="hidden md:block text-accent text-2xl"> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| <div class="process-step text-center"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-white text-2xl font-bold">4</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-2">Livraison</h3> | |
| <p class="text-gray-600">Distribution finale et support</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-primary mb-4">Ce Que Disent Nos Clients</h2> | |
| <div class="h-1 w-24 bg-accent mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-lg">Marie Dubois</h4> | |
| <p class="text-gray-600">PDG, Textiles Européens</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "GlobalImport a révolutionné notre chaîne d'approvisionnement. Leurs solutions sur mesure nous ont permis de réduire nos délais de livraison de 30% tout en diminuant nos coûts logistiques." | |
| </p> | |
| <div class="flex text-accent mt-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-lg">Thomas Martin</h4> | |
| <p class="text-gray-600">Directeur des Opérations, TechImport</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Leur expertise en matière de réglementation douanière nous a évité de nombreux problèmes. Leur équipe est réactive et professionnelle. Un partenaire indispensable pour nos importations asiatiques." | |
| </p> | |
| <div class="flex text-accent mt-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-primary mb-4">Contactez-Nous</h2> | |
| <div class="h-1 w-24 bg-accent mx-auto"></div> | |
| <p class="mt-6 text-gray-600 max-w-2xl mx-auto"> | |
| Prêt à simplifier vos importations? Notre équipe est à votre disposition pour répondre à toutes vos questions. | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-white p-8 rounded-lg shadow-lg"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="name">Nom Complet</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="email">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="phone">Téléphone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="message">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary"></textarea> | |
| </div> | |
| <button type="submit" class="bg-primary text-white font-bold px-8 py-3 rounded-lg hover:bg-blue-900 transition w-full"> | |
| Envoyer le message | |
| </button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-lg shadow-lg h-full"> | |
| <h3 class="text-2xl font-bold text-primary mb-6">Nos Coordonnées</h3> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Adresse</h4> | |
| <p class="text-gray-600">123 Avenue du Commerce<br>75001 Paris, France</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Téléphone</h4> | |
| <p class="text-gray-600">+33 1 23 45 67 89</p> | |
| <p class="text-gray-600">+33 6 12 34 56 78</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Email</h4> | |
| <p class="text-gray-600">contact@globalimport.fr</p> | |
| <p class="text-gray-600">support@globalimport.fr</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-4"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Horaires d'Ouverture</h4> | |
| <p class="text-gray-600">Lundi-Vendredi: 8h00-18h00</p> | |
| <p class="text-gray-600">Samedi: 9h00-13h00</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-lg mb-4">Suivez-Nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white hover:bg-blue-900 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white hover:bg-blue-900 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white hover:bg-blue-900 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white hover:bg-blue-900 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="map-container"></div> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-globe-americas text-accent text-2xl mr-2"></i> | |
| <span class="font-serif text-xl font-bold">Global<span class="text-accent">Import</span></span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Votre partenaire de confiance pour des solutions d'importation internationales efficaces et fiables. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Liens Rapides</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#accueil" class="text-gray-400 hover:text-white transition">Accueil</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li> | |
| <li><a href="#apropos" class="text-gray-400 hover:text-white transition">À Propos</a></li> | |
| <li><a href="#statistiques" class="text-gray-400 hover:text-white transition">Chiffres</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Nos Services</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Logistique Maritime</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Transport Aérien</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Douane & Réglementation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Stockage & Distribution</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Gestion de la Chaîne</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Newsletter</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Abonnez-vous pour recevoir nos dernières actualités et offres spéciales. | |
| </p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Votre email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800"> | |
| <button class="bg-accent text-primary font-bold px-4 rounded-r-lg hover:bg-yellow-400 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> | |
| <p>© 2023 GlobalImport. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg hover:bg-blue-900 transition hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Smooth Scrolling for Anchor Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Animation on Scroll | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.animate-on-scroll').forEach(element => { | |
| observer.observe(element); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RODRIGUE55/globalimport-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |