Spaces:
Running
Running
Download index.html from ToasaliTech/tosali-tech: direct link, hf CLI and curl.
- Browser
- Download file 37.5 kB
-
https://huggingface.co/spaces/ToasaliTech/tosali-tech/resolve/main/index.html
- Command line
-
hf download hf://spaces/ToasaliTech/tosali-tech/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ToasaliTech/tosali-tech/resolve/main/index.html
37.5 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tosali Technologies - Innovation Technologique en RDC</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| color: #1c1c1c; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(179, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #b30000; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Header/Navigation --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/180x60?text=Tosali+Logo" alt="Tosali Technologies Logo" class="h-12"> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Accueil</a> | |
| <a href="#about" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">À propos</a> | |
| <a href="#services" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Services</a> | |
| <a href="#portfolio" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Réalisations</a> | |
| <a href="#blog" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Blog</a> | |
| <a href="#contact" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Contact</a> | |
| </nav> | |
| <div class="hidden md:block"> | |
| <a href="#contact" class="bg-red-700 hover:bg-red-800 text-white px-6 py-2 rounded-md font-medium transition">Devis</a> | |
| </div> | |
| <button class="md:hidden text-gray-800"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobileMenu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="text-gray-800 font-medium hover:text-red-700 transition">Accueil</a> | |
| <a href="#about" class="text-gray-800 font-medium hover:text-red-700 transition">À propos</a> | |
| <a href="#services" class="text-gray-800 font-medium hover:text-red-700 transition">Services</a> | |
| <a href="#portfolio" class="text-gray-800 font-medium hover:text-red-700 transition">Réalisations</a> | |
| <a href="#blog" class="text-gray-800 font-medium hover:text-red-700 transition">Blog</a> | |
| <a href="#contact" class="text-gray-800 font-medium hover:text-red-700 transition">Contact</a> | |
| <a href="#contact" class="bg-red-700 hover:bg-red-800 text-white px-6 py-2 rounded-md font-medium transition text-center">Devis</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Innovation Technologique en <span class="text-red-300">République Démocratique du Congo</span></h1> | |
| <p class="text-xl mb-8">Tosali Technologies - Votre partenaire en solutions informatiques, électroniques et formations techniques de pointe.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-white text-red-700 hover:bg-gray-100 px-8 py-3 rounded-md font-bold text-center transition">Contactez-nous</a> | |
| <a href="#services" class="border-2 border-white text-white hover:bg-white hover:text-red-700 px-8 py-3 rounded-md font-bold text-center transition">Nos Services</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://via.placeholder.com/500x400?text=Hero+Image" alt="Technologie innovante" class="rounded-lg shadow-xl animate-float"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Values Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Nos Valeurs Fondamentales</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-lightbulb text-5xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Innovation</h3> | |
| <p class="text-gray-600">Nous repoussons constamment les limites technologiques pour offrir des solutions avant-gardistes adaptées au marché africain.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-shield-alt text-5xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Sécurité</h3> | |
| <p class="text-gray-600">La protection de vos données et systèmes est notre priorité absolue dans toutes nos solutions et services.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-medal text-5xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Excellence</h3> | |
| <p class="text-gray-600">Nous nous engageons à fournir des produits et services de la plus haute qualité, répondant aux standards internationaux.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">À propos de <span class="text-red-700">Tosali Technologies</span></h2> | |
| <p class="text-gray-600 mb-6">Fondée en République Démocratique du Congo, Tosali Technologies s'est rapidement imposée comme un leader dans le domaine des solutions technologiques innovantes en Afrique centrale.</p> | |
| <p class="text-gray-600 mb-8">Notre mission est d'accompagner les entreprises et institutions dans leur transformation digitale en leur fournissant des équipements de qualité, des formations pointues et des solutions logicielles sur mesure.</p> | |
| <a href="#about" class="bg-red-700 hover:bg-red-800 text-white px-8 py-3 rounded-md font-bold inline-block transition">En savoir plus</a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-100 p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Nos Fondateurs</h3> | |
| <div class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6"> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/150?text=Pierre+SEDI" alt="Pierre SEDI NZAKUNA" class="rounded-full w-32 h-32 mx-auto mb-4"> | |
| <h4 class="font-bold">Pierre SEDI NZAKUNA</h4> | |
| <p class="text-red-700">CEO</p> | |
| <p class="text-sm text-gray-600 mt-2">Visionnaire et expert en stratégie digitale</p> | |
| </div> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/150?text=Ezechias+KUMBU" alt="Ezechias KUMBU KUMBU" class="rounded-full w-32 h-32 mx-auto mb-4"> | |
| <h4 class="font-bold">Ezechias KUMBU KUMBU</h4> | |
| <p class="text-red-700">Deputy CEO</p> | |
| <p class="text-sm text-gray-600 mt-2">Spécialiste en cybersécurité et innovation technologique</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Nos Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Découvrez notre gamme complète de services technologiques conçus pour répondre aux besoins des entreprises et particuliers.</p> | |
| </div> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="service-filter px-6 py-2 text-sm font-medium rounded-l-lg bg-red-700 text-white" data-filter="all"> | |
| Tous | |
| </button> | |
| <button type="button" class="service-filter px-6 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50" data-filter="equipment"> | |
| Équipements | |
| </button> | |
| <button type="button" class="service-filter px-6 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50" data-filter="training"> | |
| Formations | |
| </button> | |
| <button type="button" class="service-filter px-6 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50" data-filter="development"> | |
| Développement | |
| </button> | |
| <button type="button" class="service-filter px-6 py-2 text-sm font-medium rounded-r-lg bg-white text-gray-700 hover:bg-gray-50" data-filter="consulting"> | |
| Consulting | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="services-container"> | |
| <!-- Equipment Services --> | |
| <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="equipment"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-laptop-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Vente d'Équipements Informatiques</h3> | |
| <p class="text-gray-600 mb-4">Matériel informatique de qualité, composants électroniques et solutions Microsoft pour professionnels et particuliers.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a> | |
| </div> | |
| <!-- Training Services --> | |
| <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="training"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-chalkboard-teacher text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Formations Techniques</h3> | |
| <p class="text-gray-600 mb-4">Programmes complets en informatique, électronique, développement web/mobile, cybersécurité et intelligence artificielle.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a> | |
| </div> | |
| <!-- Development Services --> | |
| <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="development"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Développement Logiciel</h3> | |
| <p class="text-gray-600 mb-4">Applications web et mobiles sur mesure, solutions d'entreprise et intégrations pour institutions éducatives.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a> | |
| </div> | |
| <!-- Consulting Services --> | |
| <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="consulting"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-user-shield text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Consulting en Cybersécurité</h3> | |
| <p class="text-gray-600 mb-4">Audits de sécurité, protection des données et stratégies de défense contre les cybermenaces pour votre entreprise.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a> | |
| </div> | |
| <!-- Equipment Services --> | |
| <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="equipment"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-microchip text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Composants Électroniques</h3> | |
| <p class="text-gray-600 mb-4">Fourniture de composants de qualité pour projets électroniques, y compris Raspberry Pi et Arduino.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a> | |
| </div> | |
| <!-- Training Services --> | |
| <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="training"> | |
| <div class="text-red-700 mb-4"> | |
| <i class="fas fa-robot text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Formation en IA</h3> | |
| <p class="text-gray-600 mb-4">Programmes spécialisés en intelligence artificielle et machine learning pour professionnels et étudiants.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Nos Réalisations</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Découvrez quelques-uns de nos projets récents réalisés pour des entreprises et institutions en RDC.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="relative group overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://via.placeholder.com/600x400?text=Projet+1" alt="Projet 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Solution CRM pour Banque</h3> | |
| <p class="text-gray-200">Développement d'une plateforme de gestion client sur mesure pour une institution bancaire.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://via.placeholder.com/600x400?text=Projet+2" alt="Projet 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Formation en Cybersécurité</h3> | |
| <p class="text-gray-200">Programme certifiant pour les administrateurs systèmes d'une grande entreprise minière.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://via.placeholder.com/600x400?text=Projet+3" alt="Projet 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Système de Gestion Universitaire</h3> | |
| <p class="text-gray-200">Plateforme intégrée de gestion académique pour une université congolaise.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#portfolio" class="inline-block bg-red-700 hover:bg-red-800 text-white px-8 py-3 rounded-md font-bold transition">Voir tous nos projets</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Ils nous font confiance</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8"> | |
| <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm"> | |
| <img src="https://via.placeholder.com/150x80?text=Client+1" alt="Client 1" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm"> | |
| <img src="https://via.placeholder.com/150x80?text=Client+2" alt="Client 2" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm"> | |
| <img src="https://via.placeholder.com/150x80?text=Client+3" alt="Client 3" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm"> | |
| <img src="https://via.placeholder.com/150x80?text=Client+4" alt="Client 4" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm"> | |
| <img src="https://via.placeholder.com/150x80?text=Client+5" alt="Client 5" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm"> | |
| <img src="https://via.placeholder.com/150x80?text=Client+6" alt="Client 6" class="h-12 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Actualités & Blog</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Restez informés sur les dernières tendances technologiques et nos activités.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/600x400?text=Article+1" alt="Article 1" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <span class="text-sm text-red-700 font-medium">Cybersécurité</span> | |
| <h3 class="text-xl font-bold mt-2 mb-3">Protéger son entreprise contre les ransomwares</h3> | |
| <p class="text-gray-600 mb-4">Les meilleures pratiques pour sécuriser vos systèmes contre les attaques par ransomware en 2023.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">Lire l'article →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/600x400?text=Article+2" alt="Article 2" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <span class="text-sm text-red-700 font-medium">Formation</span> | |
| <h3 class="text-xl font-bold mt-2 mb-3">Nouveau programme en IA</h3> | |
| <p class="text-gray-600 mb-4">Tosali Technologies lance une formation certifiante en intelligence artificielle pour professionnels.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">Lire l'article →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/600x400?text=Article+3" alt="Article 3" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <span class="text-sm text-red-700 font-medium">Événement</span> | |
| <h3 class="text-xl font-bold mt-2 mb-3">Forum Tech Kinshasa 2023</h3> | |
| <p class="text-gray-600 mb-4">Retour sur notre participation au plus grand événement technologique de la RDC cette année.</p> | |
| <a href="#" class="text-red-700 font-medium hover:underline">Lire l'article →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#blog" class="inline-block border-2 border-red-700 text-red-700 hover:bg-red-700 hover:text-white px-8 py-3 rounded-md font-bold transition">Voir tous les articles</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">Contactez-nous</h2> | |
| <p class="text-gray-600 mb-8">Vous avez un projet ou une question ? Notre équipe est à votre disposition pour vous accompagner.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-red-700 mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Adresse</h4> | |
| <p class="text-gray-600">8, Avenue Isiro, Immeuble Sokimo, 1er et 2e niveau<br>Commune de la Gombe, Kinshasa<br>République Démocratique du Congo</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-red-700 mr-4 mt-1"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </div> | |
| <div> | |
| <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="text-red-700 mr-4 mt-1"> | |
| <i class="fas fa-phone-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <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="text-red-700 mr-4 mt-1"> | |
| <i class="fab fa-whatsapp text-xl"></i> | |
| </div> | |
| <div> | |
| <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"> | |
| <h4 class="font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-600 hover:text-red-700 transition"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-red-700 transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-red-700 transition"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-red-700 transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <h3 class="text-2xl font-bold mb-6">Envoyez-nous un message</h3> | |
| <form> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white py-3 rounded-md font-bold transition">Envoyer le message</button> | |
| </form> | |
| </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.805790701343!2d15.2832583153251!3d-4.322886346737525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNMKwMTknMjIuNCJTIDE1wrAxNycwNS4yIkU!5e0!3m2!1sen!2scd!4v1620000000000!5m2!1sen!2scd" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <img src="https://via.placeholder.com/180x60?text=Tosali+Logo" alt="Tosali Technologies Logo" class="h-12 mb-4"> | |
| <p class="text-gray-400">Leader en solutions technologiques innovantes en République Démocratique du Congo et en Afrique.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Liens rapides</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Accueil</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li> | |
| <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Réalisations</a></li> | |
| <li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Équipements informatiques</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Formations techniques</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Développement logiciel</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Consulting cybersécurité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Solutions IA</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 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="px-4 py-2 rounded-l-md w-full focus:outline-none text-gray-900"> | |
| <button type="submit" class="bg-red-700 hover:bg-red-800 px-4 py-2 rounded-r-md transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 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"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('button[aria-controls="mobile-menu"]').addEventListener('click', function() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Service filtering | |
| const filterButtons = document.querySelectorAll('.service-filter'); | |
| const serviceCards = document.querySelectorAll('.service-card'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Update active button | |
| filterButtons.forEach(btn => { | |
| btn.classList.remove('bg-red-700', 'text-white'); | |
| btn.classList.add('bg-white', 'text-gray-700'); | |
| }); | |
| button.classList.add('bg-red-700', 'text-white'); | |
| button.classList.remove('bg-white', 'text-gray-700'); | |
| // Filter services | |
| const filter = button.dataset.filter; | |
| serviceCards.forEach(card => { | |
| if (filter === 'all' || card.dataset.category === filter) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ToasaliTech/tosali-tech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |