my-website / index.html
TOSALI Technologies
Add 1 files
552c5f7 verified
Raw History Blame Contribute Delete
72.3 kB
<!DOCTYPE html>
<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 !important;
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>
// Service data
const services = {
'web-mobile': {
title: 'Développement Web & Mobile',
content: `
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold mb-2">Solutions Web</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Sites vitrine et institutionnels</li>
<li>Applications web complexes (ERP, CRM, etc.)</li>
<li>Plateformes e-commerce</li>
<li>Applications web progressives (PWA)</li>
<li>Intégration avec systèmes existants</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-2">Solutions Mobile</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Applications iOS et Android natives</li>
<li>Applications hybrides multiplateformes</li>
<li>Applications métiers sur mesure</li>
<li>Applications connectées à des API</li>
<li>Applications IoT et wearables</li>
</ul>
</div>
</div>
<div class="mt-6">
<h4 class="font-bold mb-2">Technologies utilisées</h4>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Angular</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">React</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Vue.js</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Laravel</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Node.js</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Flutter</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">React Native</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Ionic</span>
</div>
</div>
`,
image: 'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'
},
'ai': {
title: 'Intelligence Artificielle',
content: `
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold mb-2">Nos solutions IA</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Chatbots et assistants virtuels intelligents</li>
<li>Analyse prédictive et recommandations</li>
<li>Reconnaissance d'images et de vidéos</li>
<li>Traitement automatique du langage (NLP)</li>
<li>Automatisation des processus métiers</li>
<li>Détection d'anomalies et fraudes</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-2">Secteurs d'application</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Services financiers et assurance</li>
<li>Santé et diagnostic médical</li>
<li>Commerce et recommandation produits</li>
<li>Service client et support</li>
<li>Manufacture et maintenance prédictive</li>
<li>Sécurité et surveillance</li>
</ul>
</div>
</div>
<div class="mt-6">
<h4 class="font-bold mb-2">Technologies utilisées</h4>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Python</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">TensorFlow</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">PyTorch</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">OpenCV</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">NLTK</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">spaCy</span>
<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Dialogflow</span>
</div>
</div>
`,
image: 'https://images.unsplash.com/photo-1677442135136-760c8e9a6454?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'
},
'hardware': {
title: 'Fourniture de Matériels & Logiciels',
content: `
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold mb-2">Matériels IT</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Ordinateurs et serveurs</li>
<li>Équipements réseau et télécom</li>
<li>Systèmes de stockage et sauvegarde</li>
<li>Solutions d'impression et numérisation</li>
<li>Matériel de vidéosurveillance</li>
<li>Accessoires et périphériques</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-2">Logiciels & Licences</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Systèmes d'exploitation</li>
<li>Suites bureautiques</li>
<li>Logiciels de sécurité</li>
<li>Outils de développement</li>
<li>Solutions métiers</li>
<li>Licences cloud</li>
</ul>
</div>
</div>
<div class="mt-6">
<h4 class="font-bold mb-2">Nos partenaires</h4>
<div class="flex flex-wrap gap-4 items-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png" alt="Partner" class="h-8">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png" alt="Partner" class="h-8">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png" alt="Partner" class="h-8">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png" alt="Partner" class="h-8">
</div>
</div>
`,
image: 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80'
},
'training': {
title: 'Formations TIC',
content: `
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold mb-2">Formations techniques</h4>
<ul class="list-disc pl-5 space-y-2 text-gray-600">
<li>Développement web et mobile</li>
<li>Programmation et algorithmique</li>
<li>Bases de données et Big Data</li>
<li>Int
</html>