bit / index.html
Nzama's picture
popup newsletter affiche lors d'actualisé ou ouverture de la page et après 30 seconde sa puisse disparaitre - Follow Up Deployment
3f3cd88 verified
Raw History Blame Contribute Delete
67.5 kB
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Business Intello Technology - Solutions Innovantes</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;800&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#04c2fb', secondary: '#8a0c10', dark: '#0F172A', light: '#F8FAFC', accent: '#0EA5E9' }, fontFamily: { montserrat: ['Montserrat', 'sans-serif'], } } } } </script> <style> .popup-container { animation: fadeInScale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: scale(0.9); } @keyframes fadeInScale { to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .floating { animation: float 6s ease-in-out infinite; } body { font-family: 'Montserrat', sans-serif; } .hero-gradient { background: linear-gradient(120deg, rgba(4,194,251,0.8), rgba(138,12,16,0.8)), url('https://images.unsplash.com/photo-1467232002004-6e5d4761638e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80'); background-size: cover; background-position: center; background-attachment: fixed; } .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover: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); } .service-icon { transition: transform 0.5s ease; } .card-hover:hover .service-icon { transform: rotateY(360deg) scale(1.1); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .floating { animation: float 4s ease-in-out infinite; } @keyframes float-slow { 0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(-20px) translateX(10px) rotate(5deg); } } @keyframes float-medium { 0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(-30px) translateX(-15px) rotate(-8deg); } } @keyframes float-slower { 0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(-10px) translateX(20px) rotate(3deg); } } .animate-float-slow { animation: float-slow 8s ease-in-out infinite; } .animate-float-medium { animation: float-medium 10s ease-in-out infinite; } .animate-float-slower { animation: float-slower 12s ease-in-out infinite; } .social-card { background: white; border-radius: 1rem; padding: 2rem; width: 200px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease; } .social-icon { width: 70px; height: 70px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.75rem; margin: 0 auto; transition: transform 0.3s ease; } .social-card:hover .social-icon { transform: scale(1.1) rotate(10deg); } .social-link { display: inline-block; color: white; padding: 0.5rem 1.5rem; border-radius: 9999px; font-weight: 500; transition: all 0.3s ease; } .tech-particle { position: absolute; border-radius: 50%; opacity: 0.7; z-index: -1; } </style> </head> <body class="bg-light text-dark"> <div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none z-0"></div> <header id="main-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white shadow-md"> <div class="container mx-auto px-6 py-4"> <div class="flex items-center justify-between"> <div class="flex items-center"> <a href="#" class="text-3xl"> <img src="/bit-logo1.png" alt="BIT Logo" class="h-10" /> </a> </div> <!-- Desktop Navigation --> <nav class="hidden md:flex space-x-10 items-center"> <a href="#accueil" class="nav-link">Accueil</a> <a href="#a-propos" class="nav-link">Qui Sommes-Nous</a> <a href="#services" class="nav-link">Services</a> <a href="#projets" class="nav-link">Projets</a> <a href="#technologies" class="nav-link">Technologies</a> <a href="#quote" class="nav-link btn-primary"> Demander un devis </a> </nav> <div class="flex items-center"> <button id="mobile-menu-button" class="md:hidden"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white shadow-lg py-4"> <nav class="flex flex-col space-y-4 px-6"> <a href="#accueil" class="nav-link">Accueil</a> <a href="#a-propos" class="nav-link">Qui Sommes-Nous</a> <a href="#services" class="nav-link">Services</a> <a href="#projets" class="nav-link">Projets</a> <a href="#technologies" class="nav-link">Technologies</a> <a href="#quote" class="nav-link text-center btn-primary py-2">Demander un devis</a> </nav> </div> </div> </header> <!-- Section Hero --> <section id="accueil" class="hero-gradient text-white py-24 px-4 relative overflow-hidden"> <div class="container mx-auto max-w-6xl flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-12 md:mb-0 text-center md:text-left"> <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> Solutions Technologiques <span class="text-accent">Innovantes</span> </h1> <p class="text-xl mb-8 opacity-90 max-w-2xl mx-auto md:mx-0"> Transformez votre entreprise avec nos solutions numériques de pointe. Nous combinons expertise technique et créativité pour propulser votre succès. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> <a href="#services" class="px-8 py-4 bg-white text-primary rounded-full hover:bg-opacity-90 transition duration-300 font-bold"> Découvrir nos solutions </a> <a href="#contact" class="px-8 py-4 bg-accent text-white rounded-full hover:bg-cyan-600 transition duration-300 font-bold"> Nous contacter </a> </div> </div> <div class="md:w-1/2 flex justify-center"> <div class="relative"> <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-xl p-6 border border-white border-opacity-30 shadow-xl floating"> <div class="relative"> <div class="absolute -inset-1 bg-primary rounded-lg blur opacity-20"></div> <div class="relative bg-white rounded-lg overflow-hidden"> <div class="flex"> <div class="w-2 bg-accent"></div> <div class="p-4"> <div class="w-32 h-4 bg-gray-200 rounded mb-3"></div> <div class="w-40 h-6 bg-primary rounded mb-3"></div> <div class="flex gap-2 mb-3"> <div class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center"> <i class="fas fa-rocket text-white"></i> </div> <div> <div class="w-24 h-3 bg-gray-200 rounded mb-1"></div> <div class="w-16 h-2 bg-gray-200 rounded"></div> </div> </div> <div class="w-48 h-8 bg-secondary rounded-lg flex items-center justify-center"> <span class="text-white font-medium">Chargement 98%...</span> </div> </div> </div> </div> </div> </div> <div class="absolute -top-6 -left-6 w-16 h-16 rounded-full bg-secondary opacity-30"></div> <div class="absolute -bottom-4 -right-4 w-12 h-12 rounded-full bg-accent opacity-30"></div> </div> </div> </div> </section> <!-- Section Qui Sommes-Nous --> <section id="a-propos" class="py-20 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12">Qui sommes-nous</h2> <div class="max-w-4xl mx-auto text-lg text-gray-700 leading-relaxed space-y-6"> <p> L'équipe de Business Intello Technology est constituée uniquement des personnes ayant capitalisé une grande expérience dans nos domaines d'activités professionnelles. </p> <p> Les ingénieurs informaticiens sont formés pour satisfaire et intervenir dans des entreprises sur les technologies qu'elles soient anciennes ou récentes. Leurs connaissances sont actualisées régulièrement afin de fournir une prestation variée et de qualité. </p> <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center"> <div class="bg-[#00c4ff] text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> <span class="text-2xl font-bold">1</span> </div> <h3 class="text-xl font-semibold mb-2">Expertise</h3> <p class="text-gray-600">Une équipe expérimentée dans les technologies modernes</p> </div> <div class="text-center"> <div class="bg-[#00c4ff] text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> <span class="text-2xl font-bold">2</span> </div> <h3 class="text-xl font-semibold mb-2">Innovation</h3> <p class="text-gray-600">Des solutions créatives adaptées à vos besoins</p> </div> <div class="text-center"> <div class="bg-[#00c4ff] text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> <span class="text-2xl font-bold">3</span> </div> <h3 class="text-xl font-semibold mb-2">Qualité</h3> <p class="text-gray-600">Un engagement constant vers l'excellence</p> </div> </div> </div> <!-- CEO Profile Section --> <div class="mt-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl shadow-lg p-8 md:p-12"> <div class="flex flex-col md:flex-row items-center gap-8"> <div class="w-48 h-48 rounded-full overflow-hidden border-4 border-white shadow-xl"> <img src="/profile-ceo.jpg" alt="Arnold NZAMA - CEO" class="w-full h-full object-cover"> </div> <div class="md:flex-1"> <h3 class="text-2xl font-bold mb-1">Arnold NZAMA</h3> <p class="text-primary font-medium mb-4">IT/Webmaster - PDG & Fondateur</p> <div class="prose text-gray-700"> <p>Expert en technologie avec plus de 15 ans d'expérience dans le secteur IT, Arnold NZAMA a fondé Business Intello Technology avec une vision claire : apporter des solutions technologiques innovantes adaptées aux besoins des entreprises africaines.</p> <p class="mt-4">Diplômé en informatique et systèmes d'information, il a débuté sa carrière comme développeur web avant d'évoluer vers des rôles de gestion de projets et de direction technique. Son expertise couvre un large éventail de technologies, du développement web et mobile aux infrastructures cloud.</p> <p class="mt-4">Passionné par l'entrepreneuriat technologique, Arnold dirige aujourd'hui une équipe de plus de 40 experts et a mené à bien plus de 250 projets clients. Sa mission : faire de BIT le leader des solutions digitales en Afrique Centrale.</p> </div> </div> </div> </div> </div> </section> <!-- Section Services --> <section id="services" class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12">Nos Services</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-lg shadow-md"> <div class="text-[#00c4ff] mb-6"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> </div> <h3 class="text-xl font-semibold mb-3">Développement des logiciels</h3> <p class="text-gray-600 mb-4">Solutions logicielles sur mesure pour optimiser vos processus métier.</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition">En savoir plus</a> </div> <div class="bg-white p-8 rounded-lg shadow-md"> <div class="text-[#00c4ff] mb-6"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline> <polyline points="16 7 22 7 22 13"></polyline> </svg> </div> <h3 class="text-xl font-semibold mb-3">Marketing Digital</h3> <p class="text-gray-600 mb-4">Stratégies marketing innovantes pour accroître votre présence en ligne.</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition">En savoir plus</a> </div> <div class="bg-white p-8 rounded-lg shadow-md"> <div class="text-[#00c4ff] mb-6"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="2" y1="12" x2="22" y2="12"></line> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> </svg> </div> <h3 class="text-xl font-semibold mb-3">Développement Web</h3> <p class="text-gray-600 mb-4">Sites web modernes et applications web performantes.</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition">En savoir plus</a> </div> <div class="bg-white p-8 rounded-lg shadow-md"> <div class="text-[#00c4ff] mb-6"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect> <line x1="12" y1="18" x2="12.01" y2="18"></line> </svg> </div> <h3 class="text-xl font-semibold mb-3">Développement Mobile</h3> <p class="text-gray-600 mb-4">Applications mobiles natives et cross-platform.</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition">En savoir plus</a> </div> <div class="bg-white p-8 rounded-lg shadow-md"> <div class="text-[#00c4ff] mb-6"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="14"></line> </svg> </div> <h3 class="text-xl font-semibold mb-3">SEO Optimisation</h3> <p class="text-gray-600 mb-4">Optimisation pour les moteurs de recherche et visibilité en ligne.</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition">En savoir plus</a> </div> </div> </div> </section> <!-- Section Projets --> <section id="projets" class="py-20 bg-white" aria-labelledby="projects-title"> <div class="container mx-auto px-4"> <h2 id="projects-title" class="text-4xl font-bold text-center mb-12">Nos Projets</h2> <div class="flex flex-wrap justify-center gap-4 mb-12" role="tablist" aria-label="Filtres de projets"> <button id="all-tab" class="project-tab px-4 py-2 rounded-lg bg-[#00c4ff] text-white transition-colors" role="tab" aria-selected="true" data-category="all"> Tous </button> <button id="web-tab" class="project-tab px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors" role="tab" data-category="web"> Web </button> <button id="mobile-tab" class="project-tab px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors" role="tab" data-category="mobile"> Application mobile </button> <button id="software-tab" class="project-tab px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors" role="tab" data-category="software"> Logiciel </button> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div id="ecommerce-project" data-category="web" class="bg-white rounded-lg shadow-lg overflow-hidden h-full transform transition-all duration-300 hover:-translate-y-2"> <div class="relative h-48"> <img src="/projects/ecommerce.svg" alt="E-commerce Platform preview" class="w-full h-full object-cover" loading="lazy"> </div> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">E-commerce Platform</h3> <p class="text-gray-600 mb-4">Une plateforme de commerce électronique complète avec gestion des stocks et paiement en ligne</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition text-center w-full"> Voir la démo </a> </div> </div> <div id="delivery-project" data-category="mobile" class="bg-white rounded-lg shadow-lg overflow-hidden h-full transform transition-all duration-300 hover:-translate-y-2"> <div class="relative h-48"> <img src="/projects/delivery.svg" alt="Application Mobile de Livraison preview" class="w-full h-full object-cover" loading="lazy"> </div> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Application Mobile de Livraison</h3> <p class="text-gray-600 mb-4">Application de suivi des livraisons en temps réel avec géolocalisation</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition text-center w-full"> Voir la démo </a> </div> </div> <div id="hotel-project" data-category="software" class="bg-white rounded-lg shadow-lg overflow-hidden h-full transform transition-all duration-300 hover:-translate-y-2"> <div class="relative h-48"> <img src="/projects/hotel.svg" alt="Système de Gestion Hôtelière preview" class="w-full h-full object-cover" loading="lazy"> </div> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Système de Gestion Hôtelière</h3> <p class="text-gray-600 mb-4">Logiciel complet de gestion hôtelière avec réservation en ligne</p> <a href="#" class="inline-block px-6 py-2 bg-[#00c4ff] text-white rounded-md hover:bg-opacity-90 transition text-center w-full"> Voir la démo </a> </div> </div> </div> </div> </section> <!-- Section À propos --> <section id="a-propos" class="py-20 bg-gradient-to-br from-gray-50 to-gray-100"> <div class="container mx-auto px-4 max-w-6xl"> <div class="flex flex-col lg:flex-row gap-12 items-center"> <div class="lg:w-1/2"> <div class="bg-white rounded-2xl shadow-xl p-8 relative"> <div class="relative z-10"> <h2 class="text-3xl font-bold mb-4">Notre Philosophie <span class="text-primary">d'Innovation</span></h2> <p class="text-gray-600 mb-6"> Chez Business Intello Technology, nous croyons que la technologie devrait simplifier la complexité et amplifier l'impact. </p> <div class="space-y-6"> <div class="flex"> <div class="flex-shrink-0 mr-4"> <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> <i class="fas fa-lightbulb text-primary"></i> </div> </div> <div> <h4 class="font-bold text-lg mb-1">Vision future</h4> <p class="text-gray-600">Nous anticipons les tendances technologiques pour vous préparer aux défis de demain.</p> </div> </div> <div class="flex"> <div class="flex-shrink-0 mr-4"> <div class="w-12 h-12 rounded-full bg-secondary bg-opacity-10 flex items-center justify-center"> <i class="fas fa-handshake text-secondary"></i> </div> </div> <div> <h4 class="font-bold text-lg mb-1">Partnership stratégique</h4> <p class="text-gray-600">Votre succès est notre priorité. Nous vous accompagnons comme un véritable partenaire technologique.</p> </div> </div> <div class="flex"> <div class="flex-shrink-0 mr-4"> <div class="w-12 h-12 rounded-full bg-accent bg-opacity-10 flex items-center justify-center"> <i class="fas fa-sync-alt text-accent"></i> </div> </div> <div> <h4 class="font-bold text-lg mb-1">Agilité et adaptabilité</h4> <p class="text-gray-600">Nous évoluons au rythme de votre entreprise pour répondre à vos besoins changeants.</p> </div> </div> </div> </div> <div class="absolute top-0 right-0 w-32 h-32 -mt-6 -mr-6 bg-primary bg-opacity-10 rounded-full"></div> <div class="absolute bottom-0 left-0 w-24 h-24 -mb-6 -ml-6 bg-secondary bg-opacity-10 rounded-full"></div> </div> </div> <div class="lg:w-1/2"> <h2 class="text-4xl font-bold mb-6"><span class="text-primary">Business Intello</span> Technology en chiffres</h2> <p class="text-gray-600 mb-8"> Depuis 2015, nous transformons les entreprises avec des solutions technologiques sur mesure. </p> <div class="grid grid-cols-2 gap-6"> <div class="bg-white rounded-xl p-6 shadow"> <div class="text-4xl font-bold text-primary">250+</div> <div class="font-medium text-gray-600 mt-2">Projets réussis</div> </div> <div class="bg-white rounded-xl p-6 shadow"> <div class="text-4xl font-bold text-secondary">98%</div> <div class="font-medium text-gray-600 mt-2">Clients satisfaits</div> </div> <div class="bg-white rounded-xl p-6 shadow"> <div class="text-4xl font-bold text-accent">40+</div> <div class="font-medium text-gray-600 mt-2">Experts technologiques</div> </div> <div class="bg-white rounded-xl p-6 shadow"> <div class="text-4xl font-bold text-purple-500">15M€</div> <div class="font-medium text-gray-600 mt-2">Chiffre d'affaires généré</div> </div> </div> </div> </div> </div> </section> <!-- Section Suivez-nous --> <section class="py-20 bg-gray-50 relative overflow-hidden"> <div class="absolute inset-0 overflow-hidden z-0"> <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10"></div> <!-- Animated social media icons floating --> <div class="absolute top-0 left-0 w-full h-full"> <i class="fab fa-facebook text-primary/20 text-6xl absolute top-20 left-10 animate-float-slow"></i> <i class="fab fa-twitter text-secondary/20 text-8xl absolute top-1/4 right-20 animate-float-medium"></i> <i class="fab fa-linkedin text-accent/20 text-7xl absolute top-2/3 left-1/4 animate-float-slow"></i> <i class="fab fa-instagram text-purple-500/20 text-9xl absolute bottom-20 right-1/3 animate-float-slower"></i> <i class="fab fa-youtube text-red-500/20 text-5xl absolute top-10 right-1/2 animate-float-medium"></i> </div> </div> <div class="container mx-auto px-4 relative z-10"> <div class="text-center mb-16"> <h2 class="text-4xl font-bold text-gray-800 mb-4">Contactez-nous sur les réseaux</h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto"> Contactez-nous directement via nos différents réseaux sociaux </p> </div> <div class="flex justify-center gap-8 flex-wrap"> <!-- Facebook Card --> <div class="social-card transform transition-all duration-500 hover:scale-105 hover:-rotate-3"> <div class="social-icon bg-blue-600"> <i class="fab fa-facebook-f"></i> </div> <h3 class="text-xl font-semibold mt-6 mb-2">Facebook</h3> <a href="#" class="social-link bg-blue-600 hover:bg-blue-700">Suivre</a> </div> <!-- Twitter Card --> <div class="social-card transform transition-all duration-500 hover:scale-105 hover:rotate-3"> <div class="social-icon bg-blue-400"> <i class="fab fa-twitter"></i> </div> <h3 class="text-xl font-semibold mt-6 mb-2">Twitter</h3> <a href="#" class="social-link bg-blue-400 hover:bg-blue-500">Suivre</a> </div> <!-- LinkedIn Card --> <div class="social-card transform transition-all duration-500 hover:scale-105 hover:-rotate-3"> <div class="social-icon bg-blue-700"> <i class="fab fa-linkedin-in"></i> </div> <h3 class="text-xl font-semibold mt-6 mb-2">LinkedIn</h3> <a href="#" class="social-link bg-blue-700 hover:bg-blue-800">Suivre</a> </div> <!-- Instagram Card --> <div class="social-card transform transition-all duration-500 hover:scale-105 hover:rotate-3"> <div class="social-icon bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500"> <i class="fab fa-instagram"></i> </div> <h3 class="text-xl font-semibold mt-6 mb-2">Instagram</h3> <a href="#" class="social-link bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 hover:opacity-90">Suivre</a> </div> </div> </div> </section> <!-- Section Témoignages --> <section id="temoignages" class="py-20 bg-white"> <div class="container mx-auto px-4 max-w-4xl"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Ce que nos <span class="text-primary">clients</span> disent</h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto"> Découvrez comment nous avons transformé des entreprises comme la vôtre </p> </div> <div class="grid md:grid-cols-2 gap-8"> <div class="card-hover bg-gray-50 rounded-xl p-8 shadow-lg border border-gray-100 relative"> <div class="absolute top-8 right-8 text-5xl text-primary opacity-20"> <i class="fas fa-quote-right"></i> </div> <div class="flex items-center mb-6"> <div class="w-16 h-16 rounded-full bg-gray-200 mr-4"></div> <div> <div class="font-bold text-lg">Sophie Martin</div> <div class="text-gray-600">Directrice Marketing, TechVision</div> </div> </div> <p class="text-gray-600 italic mb-6"> "Grâce à Business Intello Technology, nous avons automatisé 70% de nos processus manuels. Leurs solutions d'IA ont révolutionné notre façon de travailler." </p> <div class="flex 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="card-hover bg-gray-50 rounded-xl p-8 shadow-lg border border-gray-100 relative"> <div class="absolute top-8 right-8 text-5xl text-secondary opacity-20"> <i class="fas fa-quote-right"></i> </div> <div class="flex items-center mb-6"> <div class="w-16 h-16 rounded-full bg-gray-200 mr-4"></div> <div> <div class="font-bold text-lg">Thomas Dubois</div> <div class="text-gray-600">CEO, FinanSecure</div> </div> </div> <p class="text-gray-600 italic mb-6"> "Leur équipe a développé une plateforme sécurisée exceptionnelle qui a renforcé la confiance de nos clients et réduit les incidents de sécurité de 95%." </p> <div class="flex 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> <!-- Section Demander un devis --> <section id="quote" class="py-20 relative overflow-hidden"> <!-- Fond technologique --> <div class="absolute inset-0 z-0"> <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-indigo-900 to-purple-900 opacity-95"></div> <div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(#00c4fb 1px, transparent 1px); background-size: 20px 20px;"></div> <div class="absolute -right-20 -top-20 w-64 h-64 rounded-full bg-blue-500 opacity-20 blur-xl"></div> <div class="absolute -left-20 -bottom-20 w-64 h-64 rounded-full bg-indigo-500 opacity-20 blur-xl"></div> <div class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none z-0"> <!-- Lignes de connexion --> <svg viewBox="0 0 100 100" class="w-full h-full"> <path d="M-20,20 L50,50 L120,20" stroke="rgba(4,194,251,0.2)" stroke-width="1" fill="none"></path> <path d="M-20,50 L50,80 L120,50" stroke="rgba(4,194,251,0.2)" stroke-width="1" fill="none"></path> <path d="M-20,80 L50,50 L120,80" stroke="rgba(4,194,251,0.2)" stroke-width="1" fill="none"></path> </svg> </div> </div> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12">Demander un devis</h2> <div class="max-w-2xl mx-auto relative z-10"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white mb-4">Demandez un devis personnalisé</h2> <p class="text-blue-100 text-xl">Notre équipe vous répondra sous 24h</p> </div> <form class="space-y-6 bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/10 shadow-xl"> <div> <label class="block text-sm font-medium text-blue-100 mb-1">Nom complet</label> <input type="text" class="mt-1 block w-full rounded-lg bg-white/5 border border-white/20 px-4 py-3 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent" required> </div> <div> <label class="block text-sm font-medium text-blue-100 mb-1">Email</label> <input type="email" class="mt-1 block w-full rounded-lg bg-white/5 border border-white/20 px-4 py-3 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent" required> </div> <div> <label class="block text-sm font-medium text-blue-100 mb-1">Téléphone</label> <input type="tel" class="mt-1 block w-full rounded-lg bg-white/5 border border-white/20 px-4 py-3 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent" required> </div> <div> <label class="block text-sm font-medium text-blue-100 mb-1">Service souhaité</label> <select class="mt-1 block w-full rounded-lg bg-white/5 border border-white/20 px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent" required> <option value="">Sélectionnez un service</option> <option value="Développement de logiciels">Développement de logiciels</option> <option value="Marketing Digital">Marketing Digital</option> <option value="Développement web">Développement web</option> <option value="Développement mobile">Développement mobile</option> <option value="SEO optimisation">SEO optimisation</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700">Message</label> <textarea rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#00c4ff] focus:ring focus:ring-[#00c4ff] focus:ring-opacity-50" required></textarea> </div> <div> <button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> Envoyer la demande <i class="fas fa-paper-plane ml-2"></i> </button> </div> </form> </div> </div> </section> <!-- Technologies Section --> <section id="technologies" class="py-20 bg-gray-100"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12">Nos Technologies</h2> <div class="relative overflow-hidden"> <div class="flex py-8" id="tech-carousel"> <!-- Tech Logos with hover effects --> <div class="tech-logo hover:bg-blue-50 hover:border-blue-200"> <img src="/tech/react.svg" alt="React" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-blue-50 hover:border-blue-200"> <img src="/tech/typescript.svg" alt="TypeScript" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-green-50 hover:border-green-200"> <img src="/tech/nodejs.svg" alt="Node.js" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-yellow-50 hover:border-yellow-200"> <img src="/tech/python.svg" alt="Python" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-yellow-50 hover:border-yellow-200"> <img src="/tech/javascript.svg" alt="JavaScript" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-green-50 hover:border-green-200"> <img src="/tech/vue.svg" alt="Vue.js" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-red-50 hover:border-red-200"> <img src="/tech/angular.svg" alt="Angular" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-blue-50 hover:border-blue-200"> <img src="/tech/php.svg" alt="PHP" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-red-50 hover:border-red-200"> <img src="/tech/laravel.svg" alt="Laravel" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-blue-50 hover:border-blue-200"> <img src="/tech/mysql.svg" alt="MySQL" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-green-50 hover:border-green-200"> <img src="/tech/mongodb.svg" alt="MongoDB" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-blue-50 hover:border-blue-200"> <img src="/tech/docker.svg" alt="Docker" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-yellow-50 hover:border-yellow-200"> <img src="/tech/aws.svg" alt="AWS" class="transition-all duration-300 hover:scale-110"> </div> <div class="tech-logo hover:bg-orange-50 hover:border-orange-200"> <img src="/tech/git.svg" alt="Git" class="transition-all duration-300 hover:scale-110"> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Contact Info --> <div> <h3 class="text-xl font-semibold mb-4">Contactez-nous</h3> <div class="space-y-2"> <p class="flex items-center"> <i class="fas fa-phone mr-2"></i> +243 81 064 44 55 </p> <p class="flex items-center"> <i class="fas fa-envelope mr-2"></i> contact@bit-rdc.com </p> </div> </div> <!-- Quick Links --> <div> <h3 class="text-xl font-semibold mb-4">Liens rapides</h3> <ul class="space-y-2"> <li><a href="#services" class="hover:text-[#00c4ff]">Services</a></li> <li><a href="#technologies" class="hover:text-[#00c4ff]">Technologies</a></li> <li><a href="#a-propos" class="hover:text-[#00c4ff]">Qui sommes-nous</a></li> <li><a href="#contact" class="hover:text-[#00c4ff]">Contact</a></li> </ul> </div> <!-- Newsletter --> <div> <h3 class="text-xl font-semibold mb-4">Newsletter</h3> <form class="space-y-2"> <input type="email" placeholder="Votre email" class="w-full px-4 py-2 rounded bg-gray-800 border border-gray-700 focus:outline-none focus:border-[#00c4ff]" /> <button type="submit" class="w-full px-4 py-2 bg-primary text-white rounded hover:bg-blue-700 transition"> S'abonner </button> </form> </div> <!-- Social Media --> <div> <h3 class="text-xl font-semibold mb-4">Suivez-nous</h3> <div class="flex space-x-4"> <a href="#" class="text-[#00c4ff] hover:opacity-80 text-2xl"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-[#00c4ff] hover:opacity-80 text-2xl"><i class="fab fa-twitter"></i></a> <a href="#" class="text-[#00c4ff] hover:opacity-80 text-2xl"><i class="fab fa-instagram"></i></a> <a href="#" class="text-[#00c4ff] hover:opacity-80 text-2xl"><i class="fab fa-linkedin-in"></i></a> </div> </div> </div> <div class="mt-8 pt-8 border-t border-gray-800 text-center"> <p>© 2025 Business Intello Technology. Tous droits réservés.</p> </div> </div> </footer> <style> /* Assistance Chat Widget */ .chat-widget { position: fixed; bottom: 30px; left: 30px; z-index: 1000; } .chat-button { position: relative; background-color: #8a0c10; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(138, 12, 16, 0.3); cursor: pointer; transition: all 0.3s ease; } .whatsapp-button:hover { transform: scale(1.1); } .whatsapp-button i { color: white; font-size: 32px; } .chat-container { position: absolute; bottom: 70px; right: 0; width: 300px; background: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); overflow: hidden; display: none; } .chat-header { background: #25D366; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; } .chat-messages { height: 300px; overflow-y: auto; padding: 15px; background: #f5f5f5; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 18px; max-width: 80%; word-wrap: break-word; } .user-message { background: #DCF8C6; margin-left: auto; border-bottom-right-radius: 5px; } .admin-message { background: white; margin-right: auto; border-bottom-left-radius: 5px; } .chat-input { display: flex; padding: 10px; background: white; border-top: 1px solid #e5e5e5; } .chat-input input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; } .chat-input button { margin-left: 10px; background: #25D366; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #tech-carousel { will-change: transform; display: flex; gap: 2rem; } .tech-logo { width: 80px; height: 80px; padding: 1rem; border-radius: 12px; background: rgba(255,255,255,0.9); box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .tech-logo:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .tech-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .nav-link { position: relative; padding: 0.5rem 0; transition: color 0.3s ease; } .nav-link:hover { color: #04c2fb; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: #04c2fb; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .btn-primary { background-color: #04c2fb; color: white; padding: 0.75rem 1.5rem; border-radius: 0.375rem; font-weight: 500; transition: background-color 0.3s ease; } .btn-primary:hover { background-color: #0398d1; } </style> <script> // Header functionality document.addEventListener('DOMContentLoaded', function() { // Project tabs functionality const tabs = document.querySelectorAll('.project-tab'); const projects = [ { id: 'ecommerce-project', category: 'web' }, { id: 'delivery-project', category: 'mobile' }, { id: 'hotel-project', category: 'software' } ]; tabs.forEach(tab => { tab.addEventListener('click', function() { // Update tab styles tabs.forEach(t => { t.classList.remove('bg-[#00c4ff]', 'text-white'); t.classList.add('bg-gray-100', 'text-gray-700'); t.setAttribute('aria-selected', 'false'); }); this.classList.remove('bg-gray-100', 'text-gray-700'); this.classList.add('bg-[#00c4ff]', 'text-white'); this.setAttribute('aria-selected', 'true'); // Filter projects const category = this.dataset.category; projects.forEach(project => { const projectEl = document.getElementById(project.id); if (category === 'all' || project.category === category) { projectEl.style.display = 'block'; } else { projectEl.style.display = 'none'; } }); }); }); const header = document.getElementById('main-header'); const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); const mobileLinks = mobileMenu.querySelectorAll('a'); // Handle scroll effect window.addEventListener('scroll', function() { if (window.scrollY > 0) { header.classList.add('bg-white', 'shadow-md'); } else { header.classList.remove('bg-white', 'shadow-md'); } }); // Toggle mobile menu mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); mobileMenuButton.innerHTML = mobileMenu.classList.contains('hidden') ? '<i class="fas fa-bars text-2xl"></i>' : '<i class="fas fa-times text-2xl"></i>'; }); // Smooth scroll to sections function scrollToSection(event) { event.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); // Close mobile menu if open if (mobileMenu) { mobileMenu.classList.add('hidden'); mobileMenuButton.innerHTML = '<i class="fas fa-bars text-2xl"></i>'; } if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 100, // offset for header behavior: 'smooth' }); // Update URL without reloading history.pushState(null, null, targetId); } } // Apply to all nav links (desktop and mobile) document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', scrollToSection); }); }); // Fonction pour créer les particules flottantes function createParticles() { const container = document.getElementById('particles-container'); const colors = ['#04c2fb', '#8a0c10', '#0EA5E9', '#8B5CF6']; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('tech-particle'); // Taille aléatoire const size = Math.random() * 60 + 20; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Position aléatoire const posX = Math.random() * 100; const posY = Math.random() * 100; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; // Couleur aléatoire const colorIndex = Math.floor(Math.random() * colors.length); particle.style.backgroundColor = colors[colorIndex]; // Animation flottante particle.style.animation = `float ${Math.random() * 12 + 6}s ease-in-out infinite`; particle.style.animationDelay = `${Math.random() * 5}s`; container.appendChild(particle); } } // Appeler la fonction au chargement de la page document.addEventListener('DOMContentLoaded', function() { createParticles(); // Set up technology carousel const carousel = document.getElementById('tech-carousel'); if (carousel) { // Duplicate logos for seamless looping const logos = carousel.innerHTML; carousel.innerHTML = logos + logos; // Animation let position = 0; const speed = 0.5; // pixels per frame function animate() { position -= speed; if (position <= -carousel.scrollWidth / 2) { position = 0; } carousel.style.transform = `translateX(${position}px)`; requestAnimationFrame(animate); } animate(); } }); </script> <!-- Assistance Chat Widget --> <div class="chat-widget" style="left: 30px; right: auto;"> <div class="chat-container hidden" id="chat-container"> <div class="chat-header bg-primary"> <span>Assistance 24h/7j - BIT</span> <button class="close-chat"><i class="fas fa-times"></i></button> </div> <div class="chat-messages" id="chat-messages"> <div class="message admin-message"> Bonjour ! Nous sommes disponibles 24h/7j. Comment pouvons-nous vous aider ? </div> </div> <div class="chat-input"> <input type="text" id="chat-input" placeholder="Votre message..."> <button id="send-message"><i class="fas fa-paper-plane"></i></button> </div> </div> <div class="chat-button bg-secondary hover:bg-red-700" id="chat-button"> <i class="fas fa-headset"></i> <span class="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center"> <i class="fas fa-exclamation"></i> </span> </div> </div> <script> // WhatsApp Chat Widget Functionality document.addEventListener('DOMContentLoaded', function() { // Toggle chat visibility with slide-in from left const toggleChat = () => { const chat = document.getElementById('chat-container'); if (chat.classList.contains('hidden')) { chat.classList.remove('hidden'); chat.style.transform = 'translateX(0)'; } else { chat.style.transform = 'translateX(-120%)'; setTimeout(() => chat.classList.add('hidden'), 300); } }; // Initialize with slide-in animation const chat = document.getElementById('chat-container'); chat.style.transition = 'transform 0.3s ease'; chat.style.transform = 'translateX(-120%)'; const whatsappButton = document.getElementById('whatsapp-button'); const chatContainer = document.getElementById('chat-container'); const closeChat = document.querySelector('.close-chat'); const chatMessages = document.getElementById('chat-messages'); const chatInput = document.getElementById('chat-input'); const sendButton = document.getElementById('send-message'); // Variables for chat const adminWhatsappNumber = "243810644455"; // Replace with admin's WhatsApp number let chatMessagesHistory = []; // Toggle chat visibility whatsappButton.addEventListener('click', function() { chatContainer.style.display = chatContainer.style.display === 'block' ? 'none' : 'block'; }); closeChat.addEventListener('click', function() { chatContainer.style.display = 'none'; }); // Send message function function sendMessage() { const message = chatInput.value.trim(); if (message) { // Add user message to chat const messageElement = document.createElement('div'); messageElement.className = 'message user-message'; messageElement.textContent = message; chatMessages.appendChild(messageElement); // Store message in history chatMessagesHistory.push({ sender: 'user', message: message, timestamp: new Date().toISOString() }); // Clear input chatInput.value = ''; // Scroll to bottom chatMessages.scrollTop = chatMessages.scrollHeight; // Send to WhatsApp (this would be replaced with actual API call) setTimeout(() => { const responseElement = document.createElement('div'); responseElement.className = 'message admin-message'; responseElement.textContent = "Nous avons bien reçu votre message. Un membre de notre équipe vous répondra rapidement sur WhatsApp."; chatMessages.appendChild(responseElement); // Store admin response in history chatMessagesHistory.push({ sender: 'admin', message: responseElement.textContent, timestamp: new Date().toISOString() }); // Scroll to bottom chatMessages.scrollTop = chatMessages.scrollHeight; // Redirect to WhatsApp avec message pré-rempli const fullMessage = encodeURIComponent(`[Assistance BIT]\n${message}`); window.open(`https://wa.me/${assistanceNumber}?text=${fullMessage}`, '_blank'); // Envoi immédiat (simulation) simulateAdminResponse("Merci pour votre message. Un conseiller vous contactera immédiatement par WhatsApp au +243810644455."); }, 1000); } } // Send message on button click or Enter key sendButton.addEventListener('click', sendMessage); chatInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessage(); } }); // For admin responses, you would need a real-time system like: // 1. WebSocket connection to your server // 2. WhatsApp Business API integration // 3. Or polling the server for new messages // This is just a placeholder for the admin response system function simulateAdminResponse(message) { const messageElement = document.createElement('div'); messageElement.className = 'message admin-message'; messageElement.textContent = message; chatMessages.appendChild(messageElement); // Store admin response in history chatMessagesHistory.push({ sender: 'admin', message: message, timestamp: new Date().toISOString() }); // Scroll to bottom chatMessages.scrollTop = chatMessages.scrollHeight; } }); </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=Nzama/bit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Intello Technology - Solutions Innovantes</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;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#04c2fb',
secondary: '#8a0c10',
dark: '#0F172A',
light: '#F8FAFC',
accent: '#0EA5E9'
},
fontFamily: {
montserrat: ['Montserrat', 'sans-serif'],
}
}
}
}
</script>
<style>
.popup-container {
animation: fadeInScale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
opacity: 0;
transform: scale(0.9);
}
@keyframes fadeInScale {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
body {
font-family: 'Montserrat', sans-serif;
}
.hero-gradient {
background: linear-gradient(120deg, rgba(4,194,251,0.8), rgba(138,12,16,0.8)),
url('https://images.unsplash.com/photo-1467232002004-6e5d4761638e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover: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);
}
.service-icon {
transition: transform 0.5s ease;
}
.card-hover:hover .service-icon {
transform: rotateY(360deg) scale(1.1);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 4s ease-in-out infinite;
}
@keyframes float-slow {
0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
50% { transform: translateY(-20px) translateX(10px) rotate(5deg); }
}
@keyframes float-medium {