tosali-tech / index.html
ToasaliTech's picture
undefined - Initial Deployment
43e9be5 verified
Raw History Blame Contribute Delete
37.5 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 - 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>