Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BlueCall - Solutions d'appels professionnelles</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(8, 28, 58, 0.8), rgba(8, 28, 58, 0.8)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| min-height: 100vh; | |
| } | |
| .btn-primary { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(45deg, #1e3a8a, #3b82f6); | |
| box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(30, 58, 138, 0.6); | |
| } | |
| .service-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(30, 58, 138, 0.1); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 25px rgba(30, 58, 138, 0.1); | |
| } | |
| .service-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.1); | |
| color: #3b82f6; | |
| } | |
| .counter { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| color: #1e3a8a; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(30, 58, 138, 0.1); | |
| } | |
| .faq-item { | |
| border-bottom: 1px solid rgba(30, 58, 138, 0.1); | |
| } | |
| .faq-question { | |
| transition: all 0.3s ease; | |
| } | |
| .faq-question:hover { | |
| color: #3b82f6; | |
| } | |
| .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease; | |
| } | |
| .faq-answer.active { | |
| max-height: 300px; | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(30, 58, 138, 0.2); | |
| } | |
| .input-field:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); | |
| } | |
| .animate-on-scroll { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .animate-on-scroll.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="text-2xl font-bold text-blue-900 flex items-center"> | |
| <i class="fas fa-headset mr-2 text-blue-600"></i> | |
| <span>BlueCall</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-blue-900 hover:text-blue-600 font-medium transition">Accueil</a> | |
| <a href="#services" class="text-blue-900 hover:text-blue-600 font-medium transition">Services</a> | |
| <a href="#advantages" class="text-blue-900 hover:text-blue-600 font-medium transition">Avantages</a> | |
| <a href="#testimonials" class="text-blue-900 hover:text-blue-600 font-medium transition">Témoignages</a> | |
| <a href="#contact" class="text-blue-900 hover:text-blue-600 font-medium transition">Contact</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-blue-900 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="#home" class="block py-2 text-blue-900 hover:text-blue-600">Accueil</a> | |
| <a href="#services" class="block py-2 text-blue-900 hover:text-blue-600">Services</a> | |
| <a href="#advantages" class="block py-2 text-blue-900 hover:text-blue-600">Avantages</a> | |
| <a href="#testimonials" class="block py-2 text-blue-900 hover:text-blue-600">Témoignages</a> | |
| <a href="#contact" class="block py-2 text-blue-900 hover:text-blue-600">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero flex items-center justify-center text-white pt-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="animate-on-scroll"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Solutions d'appels professionnelles</h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Optimisez votre relation client avec notre centre d'appels expert disponible 24h/24 et 7j/7</p> | |
| <a href="#contact" class="btn-primary inline-block px-8 py-4 rounded-full text-white font-bold text-lg pulse-animation"> | |
| Demander un devis <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 animate-on-scroll"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Nos Services</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg animate-on-scroll" style="transition-delay: 0.1s"> | |
| <div class="service-icon text-blue-900 text-4xl mb-6"> | |
| <i class="fas fa-phone-volume"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-4">Service Client</h3> | |
| <p class="text-gray-600">Gestion professionnelle de votre service client avec des agents formés pour répondre à toutes les demandes.</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg animate-on-scroll" style="transition-delay: 0.2s"> | |
| <div class="service-icon text-blue-900 text-4xl mb-6"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-4">Hotline Technique</h3> | |
| <p class="text-gray-600">Support technique qualifié pour accompagner vos clients dans la résolution de leurs problèmes.</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg animate-on-scroll" style="transition-delay: 0.3s"> | |
| <div class="service-icon text-blue-900 text-4xl mb-6"> | |
| <i class="fas fa-bullhorn"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-4">Prospection Téléphonique</h3> | |
| <p class="text-gray-600">Campagnes de prospection ciblées pour développer votre portefeuille clients et augmenter vos ventes.</p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg animate-on-scroll" style="transition-delay: 0.4s"> | |
| <div class="service-icon text-blue-900 text-4xl mb-6"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-4">Enquêtes & Sondages</h3> | |
| <p class="text-gray-600">Réalisation d'enquêtes téléphoniques pour recueillir des données précieuses sur votre marché.</p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg animate-on-scroll" style="transition-delay: 0.5s"> | |
| <div class="service-icon text-blue-900 text-4xl mb-6"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-4">Prise de RDV</h3> | |
| <p class="text-gray-600">Gestion optimisée de votre agenda avec prise de rendez-vous professionnelle pour vos clients.</p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg animate-on-scroll" style="transition-delay: 0.6s"> | |
| <div class="service-icon text-blue-900 text-4xl mb-6"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-4">Services Multilingues</h3> | |
| <p class="text-gray-600">Prise en charge de vos clients dans plusieurs langues pour une relation client sans frontières.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advantages Section --> | |
| <section id="advantages" class="py-20 bg-blue-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 animate-on-scroll"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Nos Avantages</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl p-8 shadow-md animate-on-scroll" style="transition-delay: 0.1s"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900">Disponibilité 24/7</h3> | |
| </div> | |
| <p class="text-gray-600">Nos équipes sont disponibles 24 heures sur 24, 7 jours sur 7 pour répondre à vos besoins et ceux de vos clients.</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-md animate-on-scroll" style="transition-delay: 0.2s"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900">Équipe Qualifiée</h3> | |
| </div> | |
| <p class="text-gray-600">Nos agents sont rigoureusement sélectionnés et formés pour offrir un service professionnel et personnalisé.</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-md animate-on-scroll" style="transition-delay: 0.3s"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-cogs text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900">Solutions Sur Mesure</h3> | |
| </div> | |
| <p class="text-gray-600">Nous adaptons nos services à vos besoins spécifiques pour une intégration parfaite avec votre activité.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="animate-on-scroll" style="transition-delay: 0.1s"> | |
| <div class="counter mb-2" data-target="500000">0</div> | |
| <p class="text-blue-900 font-medium">Appels gérés/an</p> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.2s"> | |
| <div class="counter mb-2" data-target="150">0</div> | |
| <p class="text-blue-900 font-medium">Agents qualifiés</p> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.3s"> | |
| <div class="counter mb-2" data-target="95">0</div> | |
| <p class="text-blue-900 font-medium">% de satisfaction</p> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.4s"> | |
| <div class="counter mb-2" data-target="12">0</div> | |
| <p class="text-blue-900 font-medium">Langues disponibles</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 animate-on-scroll"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Témoignages Clients</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-blue-50 rounded-xl p-8 animate-on-scroll" style="transition-delay: 0.1s"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900">Marc Dupont</h4> | |
| <p class="text-blue-600 text-sm">Directeur Marketing</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"BlueCall a révolutionné notre service client. Leur réactivité et professionnalisme ont considérablement amélioré notre image de marque."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <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="testimonial-card bg-blue-50 rounded-xl p-8 animate-on-scroll" style="transition-delay: 0.2s"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900">Sophie Martin</h4> | |
| <p class="text-blue-600 text-sm">CEO TechSolutions</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Leur hotline technique est exceptionnelle. Nos clients apprécient particulièrement la qualité des conseils prodigués par leurs agents."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <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 class="testimonial-card bg-blue-50 rounded-xl p-8 animate-on-scroll" style="transition-delay: 0.3s"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900">Jean Leroy</h4> | |
| <p class="text-blue-600 text-sm">Directeur Commercial</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Grâce à leur service de prospection, nous avons augmenté notre chiffre d'affaires de 30% en 6 mois. Un partenaire fiable et efficace."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <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> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-blue-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 animate-on-scroll"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Questions Fréquentes</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="faq-item mb-4 animate-on-scroll" style="transition-delay: 0.1s"> | |
| <div class="faq-question bg-white p-4 rounded-lg cursor-pointer flex justify-between items-center"> | |
| <h3 class="font-medium text-blue-900">Comment fonctionne l'externalisation de votre centre d'appels ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform"></i> | |
| </div> | |
| <div class="faq-answer bg-white px-4 rounded-b-lg"> | |
| <p class="py-4 text-gray-600">Nous travaillons en étroite collaboration avec vous pour comprendre vos besoins spécifiques. Après une analyse approfondie, nous mettons en place une équipe dédiée qui agit comme une extension de votre entreprise, en utilisant vos processus et vos outils si nécessaire.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item mb-4 animate-on-scroll" style="transition-delay: 0.2s"> | |
| <div class="faq-question bg-white p-4 rounded-lg cursor-pointer flex justify-between items-center"> | |
| <h3 class="font-medium text-blue-900">Quelle est la durée minimale d'engagement ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform"></i> | |
| </div> | |
| <div class="faq-answer bg-white px-4 rounded-b-lg"> | |
| <p class="py-4 text-gray-600">Nous proposons des contrats flexibles à partir de 3 mois, mais nous recommandons un engagement d'au moins 6 mois pour permettre une intégration optimale et mesurer les résultats concrets.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item mb-4 animate-on-scroll" style="transition-delay: 0.3s"> | |
| <div class="faq-question bg-white p-4 rounded-lg cursor-pointer flex justify-between items-center"> | |
| <h3 class="font-medium text-blue-900">Comment assurez-vous la qualité des appels ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform"></i> | |
| </div> | |
| <div class="faq-answer bg-white px-4 rounded-b-lg"> | |
| <p class="py-4 text-gray-600">Nous avons mis en place un système de contrôle qualité rigoureux qui inclut l'enregistrement des appels, des évaluations aléatoires, des formations continues et des retours clients. Chaque agent est coaché individuellement pour améliorer en permanence ses performances.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item mb-4 animate-on-scroll" style="transition-delay: 0.4s"> | |
| <div class="faq-question bg-white p-4 rounded-lg cursor-pointer flex justify-between items-center"> | |
| <h3 class="font-medium text-blue-900">Pouvez-vous intégrer vos systèmes avec nos outils internes ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform"></i> | |
| </div> | |
| <div class="faq-answer bg-white px-4 rounded-b-lg"> | |
| <p class="py-4 text-gray-600">Absolument. Notre équipe technique peut se connecter à la plupart des CRM, bases de données et outils métiers. Nous avons déjà réalisé des intégrations avec Salesforce, Zendesk, HubSpot et de nombreuses autres plateformes.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item mb-4 animate-on-scroll" style="transition-delay: 0.5s"> | |
| <div class="faq-question bg-white p-4 rounded-lg cursor-pointer flex justify-between items-center"> | |
| <h3 class="font-medium text-blue-900">Comment sont sélectionnés vos agents ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform"></i> | |
| </div> | |
| <div class="faq-answer bg-white px-4 rounded-b-lg"> | |
| <p class="py-4 text-gray-600">Nos agents passent par un processus de recrutement en 5 étapes : présélection sur CV, tests psychotechniques, entretien téléphonique, entretien en personne et mise en situation réelle. Seuls 15% des candidats sont retenus.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-blue-900 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 animate-on-scroll"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez-nous</h2> | |
| <div class="w-20 h-1 bg-white mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="animate-on-scroll" style="transition-delay: 0.1s"> | |
| <h3 class="text-2xl font-bold mb-6">Informations de contact</h3> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Adresse</h4> | |
| <p>123 Avenue des Entreprises<br>75001 Paris, France</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Téléphone</h4> | |
| <p>+33 1 23 45 67 89</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p>contact@bluecall.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Horaires</h4> | |
| <p>24 heures sur 24, 7 jours sur 7</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.2s"> | |
| <h3 class="text-2xl font-bold mb-6">Envoyez-nous un message</h3> | |
| <form id="contact-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-2">Votre nom</label> | |
| <input type="text" id="name" class="input-field w-full px-4 py-3 rounded-lg bg-blue-800 border-none focus:ring-2 focus:ring-white text-white placeholder-blue-300"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2">Votre email</label> | |
| <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg bg-blue-800 border-none focus:ring-2 focus:ring-white text-white placeholder-blue-300"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block mb-2">Votre téléphone</label> | |
| <input type="tel" id="phone" class="input-field w-full px-4 py-3 rounded-lg bg-blue-800 border-none focus:ring-2 focus:ring-white text-white placeholder-blue-300"> | |
| </div> | |
| <div> | |
| <label for="service" class="block mb-2">Service intéressé</label> | |
| <select id="service" class="input-field w-full px-4 py-3 rounded-lg bg-blue-800 border-none focus:ring-2 focus:ring-white text-white"> | |
| <option value="">Sélectionnez un service</option> | |
| <option value="service-client">Service Client</option> | |
| <option value="hotline">Hotline Technique</option> | |
| <option value="prospection">Prospection Téléphonique</option> | |
| <option value="enquetes">Enquêtes & Sondages</option> | |
| <option value="rdv">Prise de RDV</option> | |
| <option value="multilingue">Services Multilingues</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2">Votre message</label> | |
| <textarea id="message" rows="4" class="input-field w-full px-4 py-3 rounded-lg bg-blue-800 border-none focus:ring-2 focus:ring-white text-white placeholder-blue-300"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg text-white font-bold mt-4 bg-blue-600 hover:bg-blue-500 transition"> | |
| Envoyer le message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-950 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-headset mr-2"></i> BlueCall | |
| </h3> | |
| <p class="text-blue-300">Solutions professionnelles de centre d'appels pour accompagner la croissance de votre entreprise.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Service Client</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Hotline Technique</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Prospection Téléphonique</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Enquêtes & Sondages</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Entreprise</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">À propos</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Carrières</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Presse</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Légal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Mentions légales</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">CGV</a></li> | |
| <li><a href="#" class="text-blue-300 hover:text-white transition">RGPD</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-800 mt-8 pt-8 text-center text-blue-300"> | |
| <p>© 2023 BlueCall. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // FAQ accordion | |
| document.querySelectorAll('.faq-question').forEach(question => { | |
| question.addEventListener('click', () => { | |
| const answer = question.parentElement.querySelector('.faq-answer'); | |
| const icon = question.querySelector('i'); | |
| answer.classList.toggle('active'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // Animate on scroll | |
| function animateOnScroll() { | |
| const elements = document.querySelectorAll('.animate-on-scroll'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', animateOnScroll); | |
| window.addEventListener('load', animateOnScroll); | |
| // Counter animation | |
| function animateCounters() { | |
| const counters = document.querySelectorAll('.counter'); | |
| const speed = 200; | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(animateCounters, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| } | |
| // Start counter animation when counters are visible | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| document.querySelectorAll('.counter').forEach(counter => { | |
| observer.observe(counter); | |
| }); | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would normally send the form data to a server | |
| // For this example, we'll just show an alert | |
| alert('Merci pour votre message ! Nous vous contacterons rapidement.'); | |
| this.reset(); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| </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=josephbasa/blue-call" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |