Spaces:
Running
Running
Download index.html from ToasaliTech/my-website: direct link, hf CLI and curl.
- Browser
- Download file 72.3 kB
-
https://huggingface.co/spaces/ToasaliTech/my-website/resolve/main/index.html
- Command line
-
hf download hf://spaces/ToasaliTech/my-website/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ToasaliTech/my-website/resolve/main/index.html
72.3 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TOSALI Technologies - Solutions IT Innovantes en RDC</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@400;600;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(200,16,46,0.9) 0%, rgba(17,17,17,0.9) 100%); | |
| } | |
| .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); | |
| } | |
| .testimonial-slide { | |
| transition: all 0.5s ease; | |
| } | |
| .whatsapp-float { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .active-section { | |
| color: #C8102E ; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- WhatsApp Float Button --> | |
| <a href="https://wa.me/243895571706" target="_blank" class="whatsapp-float fixed bottom-8 right-8 bg-[#25D366] text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl z-50"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-40"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center" onclick="showSection('home')"> | |
| <div class="w-10 h-10 bg-[#C8102E] rounded-full flex items-center justify-center text-white font-bold mr-2">T</div> | |
| <span class="text-xl font-bold">TOSALI Technologies</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link active-section" onclick="showSection('home')">Accueil</a> | |
| <a href="#about" class="nav-link" onclick="showSection('about')">À propos</a> | |
| <a href="#services" class="nav-link" onclick="showSection('services')">Services</a> | |
| <a href="#trainings" class="nav-link" onclick="showSection('trainings')">Formations</a> | |
| <a href="#projects" class="nav-link" onclick="showSection('projects')">Projets</a> | |
| <a href="#contact" class="nav-link" onclick="showSection('contact')">Contact</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-800 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4"> | |
| <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-100 nav-link active-section" onclick="showSection('home')">Accueil</a> | |
| <a href="#about" class="block py-2 px-4 text-sm hover:bg-gray-100 nav-link" onclick="showSection('about')">À propos</a> | |
| <a href="#services" class="block py-2 px-4 text-sm hover:bg-gray-100 nav-link" onclick="showSection('services')">Services</a> | |
| <a href="#trainings" class="block py-2 px-4 text-sm hover:bg-gray-100 nav-link" onclick="showSection('trainings')">Formations</a> | |
| <a href="#projects" class="block py-2 px-4 text-sm hover:bg-gray-100 nav-link" onclick="showSection('projects')">Projets</a> | |
| <a href="#contact" class="block py-2 px-4 text-sm hover:bg-gray-100 nav-link" onclick="showSection('contact')">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content Container --> | |
| <div id="content-container"> | |
| <!-- Home Section --> | |
| <section id="home-section" class="section-content"> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="container mx-auto px-4 py-24 md:py-32"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Transformez votre vision digitale en réalité</h1> | |
| <p class="text-xl mb-8">Chez TOSALI Technologies, nous propulsons l'innovation au cœur de votre entreprise. Nos solutions sur mesure en développement logiciel, intelligence artificielle et cybersécurité accompagnent votre transformation numérique.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button onclick="showSection('contact', 'quote')" class="bg-white text-[#C8102E] px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Demander un devis</button> | |
| <button onclick="showSection('trainings')" class="bg-transparent border-2 border-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-[#C8102E] transition">Découvrir nos formations</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Expertise Section --> | |
| <section class="bg-gray-50 py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Nos pôles d'expertise</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showServiceDetail('web-mobile')"> | |
| <div class="w-16 h-16 bg-[#C8102E] bg-opacity-10 rounded-full flex items-center justify-center text-[#C8102E] text-2xl mb-4"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Développement Web & Mobile</h3> | |
| <p class="text-gray-600">Applications sur mesure avec les dernières technologies pour répondre à vos besoins spécifiques.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showServiceDetail('ai')"> | |
| <div class="w-16 h-16 bg-[#C8102E] bg-opacity-10 rounded-full flex items-center justify-center text-[#C8102E] text-2xl mb-4"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Intelligence Artificielle</h3> | |
| <p class="text-gray-600">Solutions IA pour automatiser vos processus et analyser vos données stratégiques.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showServiceDetail('hardware')"> | |
| <div class="w-16 h-16 bg-[#C8102E] bg-opacity-10 rounded-full flex items-center justify-center text-[#C8102E] text-2xl mb-4"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Matériel & Logiciels</h3> | |
| <p class="text-gray-600">Fourniture et installation de matériel IT performant adapté à votre infrastructure.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showServiceDetail('training')"> | |
| <div class="w-16 h-16 bg-[#C8102E] bg-opacity-10 rounded-full flex items-center justify-center text-[#C8102E] text-2xl mb-4"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Formations TIC</h3> | |
| <p class="text-gray-600">Programmes de formation professionnelle pour maîtriser les technologies du numérique.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">Pourquoi choisir TOSALI Technologies ?</h2> | |
| <p class="text-gray-600 mb-6">Nous combinons expertise technique et connaissance du marché africain pour vous offrir des solutions adaptées à vos besoins spécifiques.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Expertise locale adaptée au contexte africain</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Technologies modernes & performantes</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Approche orientée résultats</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Accompagnement de bout en bout</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 bg-gray-100 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Team working" class="w-full h-auto object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about-section" class="section-content hidden py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold">TOSALI Technologies – Innovation locale, impact global</h2> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center mb-12"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> | |
| <h3 class="text-2xl font-bold mb-4">Notre histoire</h3> | |
| <p class="text-gray-600 mb-6">Née à Kinshasa, TOSALI Technologies vise à démocratiser l'accès aux technologies de pointe adaptées aux réalités africaines. Fondée en 2018, notre entreprise a rapidement évolué pour devenir un acteur clé dans le paysage technologique de la RDC.</p> | |
| <h3 class="text-2xl font-bold mb-4">Notre mission</h3> | |
| <p class="text-gray-600 mb-6">Fournir des solutions numériques innovantes, sécurisées et durables pour accompagner la transformation digitale en Afrique. Nous croyons que la technologie doit être accessible et adaptée aux besoins locaux.</p> | |
| <h3 class="text-2xl font-bold mb-4">Notre vision</h3> | |
| <p class="text-gray-600">Devenir une référence panafricaine en ingénierie logicielle, intelligence artificielle et formation numérique, tout en contribuant au développement économique de notre continent.</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Nos valeurs</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Innovation continue</h4> | |
| <p class="text-gray-600 text-sm">Nous restons à la pointe des technologies pour vous offrir les meilleures solutions.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Intégrité et transparence</h4> | |
| <p class="text-gray-600 text-sm">Nous établissons des relations de confiance avec nos clients et partenaires.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Apprentissage permanent</h4> | |
| <p class="text-gray-600 text-sm">Nous investissons dans la formation continue de notre équipe pour maintenir notre excellence.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-[#C8102E] rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Simplicité & efficacité</h4> | |
| <p class="text-gray-600 text-sm">Nous transformons des technologies complexes en solutions faciles à utiliser.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button onclick="showSection('contact', 'team')" class="inline-block bg-[#C8102E] text-white px-8 py-3 rounded-md font-medium hover:bg-[#a50e26] transition">Rencontrer notre équipe</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services-section" class="section-content hidden py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold">Nos Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4">Nous offrons une gamme complète de services technologiques pour répondre à tous vos besoins numériques.</p> | |
| </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-lg shadow-md overflow-hidden transition duration-300 cursor-pointer" onclick="showServiceDetail('web-mobile')"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-code text-6xl text-[#C8102E]"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Développement Web & Mobile</h3> | |
| <p class="text-gray-600 mb-4">Applications web et mobiles sur mesure (e-commerce, gestion, API) avec Angular, React, Flutter, Laravel...</p> | |
| <div class="text-[#C8102E] font-medium">En savoir plus →</div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 cursor-pointer" onclick="showServiceDetail('hardware')"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-server text-6xl text-[#C8102E]"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Fourniture de Matériels & Logiciels</h3> | |
| <p class="text-gray-600 mb-4">Partenaire pour l'achat, l'installation et la maintenance de matériels IT, serveurs, réseaux, licences…</p> | |
| <div class="text-[#C8102E] font-medium">En savoir plus →</div> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 cursor-pointer" onclick="showServiceDetail('ai')"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-6xl text-[#C8102E]"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Intelligence Artificielle</h3> | |
| <p class="text-gray-600 mb-4">Solutions IA (automatisation, analyse big data, chatbots, détection anomalies) adaptées à votre secteur d'activité.</p> | |
| <div class="text-[#C8102E] font-medium">En savoir plus →</div> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 cursor-pointer" onclick="showServiceDetail('training')"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-graduation-cap text-6xl text-[#C8102E]"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Formations TIC</h3> | |
| <p class="text-gray-600 mb-4">Sessions en ligne et présentiel sur le développement, IA, cybersécurité, bureautique pour professionnels et entreprises.</p> | |
| <div class="text-[#C8102E] font-medium">Voir les formations →</div> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 cursor-pointer" onclick="showServiceDetail('cyber')"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-6xl text-[#C8102E]"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Cybersécurité</h3> | |
| <p class="text-gray-600 mb-4">Audit, protection et solutions de sécurité pour protéger vos données et systèmes contre les cybermenaces.</p> | |
| <div class="text-[#C8102E] font-medium">En savoir plus →</div> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 cursor-pointer" onclick="showServiceDetail('cloud')"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-cloud text-6xl text-[#C8102E]"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Solutions Cloud</h3> | |
| <p class="text-gray-600 mb-4">Migration, gestion et optimisation de vos infrastructures cloud pour plus de flexibilité et d'économies.</p> | |
| <div class="text-[#C8102E] font-medium">En savoir plus →</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Service Detail Modal --> | |
| <div id="service-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 id="service-modal-title" class="text-2xl font-bold"></h3> | |
| <button onclick="hideServiceDetail()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="service-modal-content" class="space-y-4"> | |
| <!-- Content will be loaded dynamically --> | |
| </div> | |
| <div class="mt-8"> | |
| <button onclick="showSection('contact', document.getElementById('service-modal-title').textContent)" class="bg-[#C8102E] text-white px-6 py-3 rounded-md font-medium hover:bg-[#a50e26] transition">Demander un devis</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trainings Section --> | |
| <section id="trainings-section" class="section-content hidden py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold">Formez-vous aux métiers du numérique</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4">Nos programmes sont pensés pour faire de vous un professionnel opérationnel du numérique.</p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> | |
| <thead class="bg-[#C8102E] text-white"> | |
| <tr> | |
| <th class="py-3 px-4 text-left">Formation</th> | |
| <th class="py-3 px-4 text-left">Durée</th> | |
| <th class="py-3 px-4 text-left">Format</th> | |
| <th class="py-3 px-4 text-left">Niveau</th> | |
| <th class="py-3 px-4 text-left">Prix</th> | |
| <th class="py-3 px-4 text-left">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="py-4 px-4 font-medium">Cybersécurité</td> | |
| <td class="py-4 px-4">4 semaines</td> | |
| <td class="py-4 px-4">En ligne/Présentiel</td> | |
| <td class="py-4 px-4">Intermédiaire</td> | |
| <td class="py-4 px-4">$500</td> | |
| <td class="py-4 px-4"> | |
| <button onclick="showTrainingDetail('cyber')" class="text-[#C8102E] hover:underline">S'inscrire</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4 font-medium">Full-Stack Web Dev</td> | |
| <td class="py-4 px-4">6 semaines</td> | |
| <td class="py-4 px-4">En ligne</td> | |
| <td class="py-4 px-4">Débutant</td> | |
| <td class="py-4 px-4">$600</td> | |
| <td class="py-4 px-4"> | |
| <button onclick="showTrainingDetail('web')" class="text-[#C8102E] hover:underline">S'inscrire</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4 font-medium">Dev Mobile (Flutter)</td> | |
| <td class="py-4 px-4">4 semaines</td> | |
| <td class="py-4 px-4">Présentiel</td> | |
| <td class="py-4 px-4">Intermédiaire</td> | |
| <td class="py-4 px-4">$450</td> | |
| <td class="py-4 px-4"> | |
| <button onclick="showTrainingDetail('mobile')" class="text-[#C8102E] hover:underline">S'inscrire</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4 font-medium">IA & Machine Learning</td> | |
| <td class="py-4 px-4">3 semaines</td> | |
| <td class="py-4 px-4">Hybride</td> | |
| <td class="py-4 px-4">Avancé</td> | |
| <td class="py-4 px-4">$750</td> | |
| <td class="py-4 px-4"> | |
| <button onclick="showTrainingDetail('ai')" class="text-[#C8102E] hover:underline">S'inscrire</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4 font-medium">Culture numérique</td> | |
| <td class="py-4 px-4">2 semaines</td> | |
| <td class="py-4 px-4">En ligne</td> | |
| <td class="py-4 px-4">Débutant</td> | |
| <td class="py-4 px-4">$250</td> | |
| <td class="py-4 px-4"> | |
| <button onclick="showTrainingDetail('culture')" class="text-[#C8102E] hover:underline">S'inscrire</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button onclick="showTrainingDetail('all')" class="bg-[#C8102E] text-white px-6 py-3 rounded-md font-medium hover:bg-[#a50e26] transition">Voir tous les programmes</button> | |
| <button onclick="showSection('contact', 'training')" class="bg-white border-2 border-[#C8102E] text-[#C8102E] px-6 py-3 rounded-md font-medium hover:bg-gray-50 transition">Parler à un conseiller</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Training Detail Modal --> | |
| <div id="training-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 id="training-modal-title" class="text-2xl font-bold"></h3> | |
| <button onclick="hideTrainingDetail()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="training-modal-content" class="space-y-4"> | |
| <!-- Content will be loaded dynamically --> | |
| </div> | |
| <div class="mt-8 flex flex-wrap gap-4"> | |
| <button onclick="showSection('contact', 'training-' + currentTrainingId)" class="bg-[#C8102E] text-white px-6 py-3 rounded-md font-medium hover:bg-[#a50e26] transition">S'inscrire maintenant</button> | |
| <button onclick="hideTrainingDetail()" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-md font-medium hover:bg-gray-50 transition">Voir d'autres formations</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Section --> | |
| <section id="projects-section" class="section-content hidden py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold">Nos projets parlent pour nous</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4">Découvrez quelques-unes de nos réalisations qui ont marqué nos clients.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg cursor-pointer" onclick="showProjectDetail('fleet')"> | |
| <div class="h-48 bg-gray-100 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Project 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Plateforme de gestion de flotte</h3> | |
| <span class="bg-[#C8102E] bg-opacity-10 text-[#C8102E] text-xs px-2 py-1 rounded">Transport</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Solution complète pour la gestion et le suivi des véhicules d'une entreprise de transport.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Angular</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Node.js</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">MongoDB</span> | |
| </div> | |
| <div class="text-[#C8102E] font-medium">Voir les détails →</div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg cursor-pointer" onclick="showProjectDetail('ecommerce')"> | |
| <div class="h-48 bg-gray-100 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Project 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Site e-commerce</h3> | |
| <span class="bg-[#C8102E] bg-opacity-10 text-[#C8102E] text-xs px-2 py-1 rounded">Commerce</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Plateforme e-commerce pour une cimenterie avec gestion des stocks et paiements en ligne.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">React</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Laravel</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">MySQL</span> | |
| </div> | |
| <div class="text-[#C8102E] font-medium">Voir les détails →</div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg cursor-pointer" onclick="showProjectDetail('chatbot')"> | |
| <div class="h-48 bg-gray-100 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Project 3" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Chatbot IA</h3> | |
| <span class="bg-[#C8102E] bg-opacity-10 text-[#C8102E] text-xs px-2 py-1 rounded">Télécom</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Assistant virtuel pour le service client d'une entreprise de télécommunications.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Python</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">TensorFlow</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">NLP</span> | |
| </div> | |
| <div class="text-[#C8102E] font-medium">Voir les détails →</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button onclick="showProjectDetail('all')" class="inline-block bg-[#111111] text-white px-8 py-3 rounded-md font-medium hover:bg-gray-800 transition">Voir tous nos projets</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Project Detail Modal --> | |
| <div id="project-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 id="project-modal-title" class="text-2xl font-bold"></h3> | |
| <button onclick="hideProjectDetail()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="project-modal-image" class="mb-6"> | |
| <!-- Image will be loaded dynamically --> | |
| </div> | |
| <div id="project-modal-content" class="space-y-4"> | |
| <!-- Content will be loaded dynamically --> | |
| </div> | |
| <div class="mt-8"> | |
| <button onclick="showSection('contact', 'project-' + currentProjectId)" class="bg-[#C8102E] text-white px-6 py-3 rounded-md font-medium hover:bg-[#a50e26] transition">Demander un projet similaire</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold">Ce que disent nos clients</h2> | |
| </div> | |
| <div class="relative max-w-4xl mx-auto"> | |
| <div class="testimonial-slider overflow-hidden"> | |
| <div class="flex transition-transform duration-300" id="testimonial-slides"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-slide min-w-full px-4"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Jean Kabasele</h4> | |
| <p class="text-gray-600 text-sm">Directeur, Transport Kinois</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Grâce à TOSALI, nous avons automatisé 80% de notre processus de gestion de flotte. Leur solution a réduit nos coûts opérationnels de 30% et amélioré notre efficacité."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-slide min-w-full px-4"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Sarah Mbuyi</h4> | |
| <p class="text-gray-600 text-sm">Responsable IT, Cimenterie du Congo</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Des solutions innovantes avec un support exemplaire. Leur plateforme e-commerce a transformé notre façon de vendre et permis d'atteindre de nouveaux marchés."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-slide min-w-full px-4"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">David Ntumba</h4> | |
| <p class="text-gray-600 text-sm">Directeur Clientèle, Télécom RDC</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Le chatbot IA développé par TOSALI a réduit notre volume d'appels au service client de 40% tout en améliorant la satisfaction client. Une véritable révolution pour notre entreprise."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-8 space-x-2"> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-[#C8102E]" data-slide="0"></button> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-gray-300" data-slide="1"></button> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-gray-300" data-slide="2"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact-section" class="section-content hidden py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold">Une question ? Un projet ? Parlons-en !</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4">Contactez notre équipe pour discuter de vos besoins en solutions technologiques.</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-6">Nos coordonnées</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-map-marker-alt text-[#C8102E] text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Adresse</h4> | |
| <p class="text-gray-600">3ᵉ étage, Immeuble Paradiso, 90A Bd du 30 Juin, Kinshasa</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-envelope text-[#C8102E] text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-600">contact@tosali.tech</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-phone-alt text-[#C8102E] text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">Téléphone</h4> | |
| <p class="text-gray-600">+243 821 851 806</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fab fa-whatsapp text-[#C8102E] text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold mb-1">WhatsApp</h4> | |
| <p class="text-gray-600">+243 895 571 706</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-bold mb-4">Suivez-nous</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-[#C8102E] hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-[#C8102E] hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-[#C8102E] hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-[#C8102E] hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-bold mb-4">Heures d'ouverture</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Lundi - Vendredi</span> | |
| <span class="font-medium">8h00 - 17h00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Samedi</span> | |
| <span class="font-medium">9h00 - 13h00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Dimanche</span> | |
| <span class="font-medium">Fermé</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-4">Restez informé</h3> | |
| <p class="text-gray-600 mb-4">Abonnez-vous à notre newsletter pour recevoir nos actualités et offres spéciales.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Votre email" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-[#C8102E] focus:border-transparent"> | |
| <button type="submit" class="bg-[#C8102E] text-white px-4 py-2 rounded-r-md hover:bg-[#a50e26] transition">S'abonner</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-6">Envoyez-nous un message</h3> | |
| <form id="contact-form"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet <span class="text-[#C8102E]">*</span></label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C8102E] focus:border-transparent"> | |
| <p class="text-red-500 text-sm mt-1 hidden" id="name-error">Veuillez entrer votre nom</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email <span class="text-[#C8102E]">*</span></label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C8102E] focus:border-transparent"> | |
| <p class="text-red-500 text-sm mt-1 hidden" id="email-error">Veuillez entrer un email valide</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Objet <span class="text-[#C8102E]">*</span></label> | |
| <select id="subject" name="subject" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C8102E] focus:border-transparent"> | |
| <option value="">Sélectionnez un sujet</option> | |
| <option value="quote">Demande de devis</option> | |
| <option value="service">Information sur un service</option> | |
| <option value="training">Information sur une formation</option> | |
| <option value="other">Autre demande</option> | |
| </select> | |
| <p class="text-red-500 text-sm mt-1 hidden" id="subject-error">Veuillez sélectionner un sujet</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message <span class="text-[#C8102E]">*</span></label> | |
| <textarea id="message" name="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C8102E] focus:border-transparent"></textarea> | |
| <p class="text-red-500 text-sm mt-1 hidden" id="message-error">Veuillez entrer votre message</p> | |
| </div> | |
| <button type="submit" class="w-full bg-[#C8102E] text-white px-6 py-3 rounded-md font-medium hover:bg-[#a50e26] transition">Envoyer le message</button> | |
| </form> | |
| <div id="form-success" class="mt-4 p-4 bg-green-100 text-green-700 rounded-md hidden"> | |
| <i class="fas fa-check-circle mr-2"></i> Votre message a été envoyé avec succès. Nous vous contacterons bientôt. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 w-full"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3979.60319447719!2d15.30201531539604!3d-4.32287619697628!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNMKwMTknMjIuNCJTIDE1wrAxOCcxNS4xIkU!5e0!3m2!1sen!2scd!4v1620000000000!5m2!1sen!2scd" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-[#111111] text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">TOSALI Technologies</h3> | |
| <p class="text-gray-400 mb-4">Transformez votre vision digitale en réalité avec nos solutions technologiques innovantes.</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-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('services')">Développement Web & Mobile</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('services')">Intelligence Artificielle</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('services')">Cybersécurité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('services')">Matériel & Logiciels</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('services')">Formations TIC</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Liens utiles</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('about')">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('projects')">Projets</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('trainings')">Formations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showSection('contact')">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Contact</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2"></i> | |
| <span>3ᵉ étage, Immeuble Paradiso, 90A Bd du 30 Juin, Kinshasa</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>contact@tosali.tech</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span>+243 821 851 806</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-whatsapp mr-2"></i> | |
| <span>+243 895 571 706</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 TOSALI Technologies. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |