ToasaliTech commited on
Commit
43e9be5
·
verified ·
1 Parent(s): a6fd928

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +609 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tosali Tech
3
- emoji: 🐨
4
- colorFrom: gray
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tosali-tech
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,609 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tosali Technologies - Innovation Technologique en RDC</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Roboto', sans-serif;
13
+ color: #1c1c1c;
14
+ }
15
+ .hero-gradient {
16
+ background: linear-gradient(135deg, rgba(179, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
17
+ }
18
+ .service-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .nav-link::after {
23
+ content: '';
24
+ display: block;
25
+ width: 0;
26
+ height: 2px;
27
+ background: #b30000;
28
+ transition: width .3s;
29
+ }
30
+ .nav-link:hover::after {
31
+ width: 100%;
32
+ }
33
+ .animate-float {
34
+ animation: float 6s ease-in-out infinite;
35
+ }
36
+ @keyframes float {
37
+ 0% { transform: translateY(0px); }
38
+ 50% { transform: translateY(-20px); }
39
+ 100% { transform: translateY(0px); }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-white">
44
+ <!-- Header/Navigation -->
45
+ <header class="sticky top-0 z-50 bg-white shadow-md">
46
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
47
+ <div class="flex items-center">
48
+ <img src="https://via.placeholder.com/180x60?text=Tosali+Logo" alt="Tosali Technologies Logo" class="h-12">
49
+ </div>
50
+
51
+ <nav class="hidden md:flex space-x-8">
52
+ <a href="#home" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Accueil</a>
53
+ <a href="#about" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">À propos</a>
54
+ <a href="#services" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Services</a>
55
+ <a href="#portfolio" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Réalisations</a>
56
+ <a href="#blog" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Blog</a>
57
+ <a href="#contact" class="nav-link text-gray-800 font-medium hover:text-red-700 transition">Contact</a>
58
+ </nav>
59
+
60
+ <div class="hidden md:block">
61
+ <a href="#contact" class="bg-red-700 hover:bg-red-800 text-white px-6 py-2 rounded-md font-medium transition">Devis</a>
62
+ </div>
63
+
64
+ <button class="md:hidden text-gray-800">
65
+ <i class="fas fa-bars text-2xl"></i>
66
+ </button>
67
+ </div>
68
+
69
+ <!-- Mobile menu -->
70
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobileMenu">
71
+ <div class="flex flex-col space-y-4">
72
+ <a href="#home" class="text-gray-800 font-medium hover:text-red-700 transition">Accueil</a>
73
+ <a href="#about" class="text-gray-800 font-medium hover:text-red-700 transition">À propos</a>
74
+ <a href="#services" class="text-gray-800 font-medium hover:text-red-700 transition">Services</a>
75
+ <a href="#portfolio" class="text-gray-800 font-medium hover:text-red-700 transition">Réalisations</a>
76
+ <a href="#blog" class="text-gray-800 font-medium hover:text-red-700 transition">Blog</a>
77
+ <a href="#contact" class="text-gray-800 font-medium hover:text-red-700 transition">Contact</a>
78
+ <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>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Hero Section -->
84
+ <section id="home" class="hero-gradient text-white py-20 md:py-32">
85
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
86
+ <div class="md:w-1/2 mb-12 md:mb-0">
87
+ <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>
88
+ <p class="text-xl mb-8">Tosali Technologies - Votre partenaire en solutions informatiques, électroniques et formations techniques de pointe.</p>
89
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
90
+ <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>
91
+ <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>
92
+ </div>
93
+ </div>
94
+ <div class="md:w-1/2 flex justify-center">
95
+ <img src="https://via.placeholder.com/500x400?text=Hero+Image" alt="Technologie innovante" class="rounded-lg shadow-xl animate-float">
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- Values Section -->
101
+ <section class="py-16 bg-gray-50">
102
+ <div class="container mx-auto px-4">
103
+ <h2 class="text-3xl font-bold text-center mb-12">Nos Valeurs Fondamentales</h2>
104
+
105
+ <div class="grid md:grid-cols-3 gap-8">
106
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition">
107
+ <div class="text-red-700 mb-4">
108
+ <i class="fas fa-lightbulb text-5xl"></i>
109
+ </div>
110
+ <h3 class="text-xl font-bold mb-3">Innovation</h3>
111
+ <p class="text-gray-600">Nous repoussons constamment les limites technologiques pour offrir des solutions avant-gardistes adaptées au marché africain.</p>
112
+ </div>
113
+
114
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition">
115
+ <div class="text-red-700 mb-4">
116
+ <i class="fas fa-shield-alt text-5xl"></i>
117
+ </div>
118
+ <h3 class="text-xl font-bold mb-3">Sécurité</h3>
119
+ <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>
120
+ </div>
121
+
122
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition">
123
+ <div class="text-red-700 mb-4">
124
+ <i class="fas fa-medal text-5xl"></i>
125
+ </div>
126
+ <h3 class="text-xl font-bold mb-3">Excellence</h3>
127
+ <p class="text-gray-600">Nous nous engageons à fournir des produits et services de la plus haute qualité, répondant aux standards internationaux.</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- About Section -->
134
+ <section id="about" class="py-20">
135
+ <div class="container mx-auto px-4">
136
+ <div class="flex flex-col md:flex-row items-center">
137
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
138
+ <h2 class="text-3xl font-bold mb-6">À propos de <span class="text-red-700">Tosali Technologies</span></h2>
139
+ <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>
140
+ <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>
141
+ <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>
142
+ </div>
143
+ <div class="md:w-1/2">
144
+ <div class="bg-gray-100 p-8 rounded-lg">
145
+ <h3 class="text-2xl font-bold mb-6 text-center">Nos Fondateurs</h3>
146
+
147
+ <div class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6">
148
+ <div class="text-center">
149
+ <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">
150
+ <h4 class="font-bold">Pierre SEDI NZAKUNA</h4>
151
+ <p class="text-red-700">CEO</p>
152
+ <p class="text-sm text-gray-600 mt-2">Visionnaire et expert en stratégie digitale</p>
153
+ </div>
154
+
155
+ <div class="text-center">
156
+ <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">
157
+ <h4 class="font-bold">Ezechias KUMBU KUMBU</h4>
158
+ <p class="text-red-700">Deputy CEO</p>
159
+ <p class="text-sm text-gray-600 mt-2">Spécialiste en cybersécurité et innovation technologique</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Services Section -->
169
+ <section id="services" class="py-20 bg-gray-50">
170
+ <div class="container mx-auto px-4">
171
+ <div class="text-center mb-16">
172
+ <h2 class="text-3xl font-bold mb-4">Nos Services</h2>
173
+ <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>
174
+ </div>
175
+
176
+ <div class="flex justify-center mb-8">
177
+ <div class="inline-flex rounded-md shadow-sm">
178
+ <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">
179
+ Tous
180
+ </button>
181
+ <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">
182
+ Équipements
183
+ </button>
184
+ <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">
185
+ Formations
186
+ </button>
187
+ <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">
188
+ Développement
189
+ </button>
190
+ <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">
191
+ Consulting
192
+ </button>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="services-container">
197
+ <!-- Equipment Services -->
198
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="equipment">
199
+ <div class="text-red-700 mb-4">
200
+ <i class="fas fa-laptop-code text-4xl"></i>
201
+ </div>
202
+ <h3 class="text-xl font-bold mb-3">Vente d'Équipements Informatiques</h3>
203
+ <p class="text-gray-600 mb-4">Matériel informatique de qualité, composants électroniques et solutions Microsoft pour professionnels et particuliers.</p>
204
+ <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a>
205
+ </div>
206
+
207
+ <!-- Training Services -->
208
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="training">
209
+ <div class="text-red-700 mb-4">
210
+ <i class="fas fa-chalkboard-teacher text-4xl"></i>
211
+ </div>
212
+ <h3 class="text-xl font-bold mb-3">Formations Techniques</h3>
213
+ <p class="text-gray-600 mb-4">Programmes complets en informatique, électronique, développement web/mobile, cybersécurité et intelligence artificielle.</p>
214
+ <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a>
215
+ </div>
216
+
217
+ <!-- Development Services -->
218
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="development">
219
+ <div class="text-red-700 mb-4">
220
+ <i class="fas fa-code text-4xl"></i>
221
+ </div>
222
+ <h3 class="text-xl font-bold mb-3">Développement Logiciel</h3>
223
+ <p class="text-gray-600 mb-4">Applications web et mobiles sur mesure, solutions d'entreprise et intégrations pour institutions éducatives.</p>
224
+ <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a>
225
+ </div>
226
+
227
+ <!-- Consulting Services -->
228
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="consulting">
229
+ <div class="text-red-700 mb-4">
230
+ <i class="fas fa-user-shield text-4xl"></i>
231
+ </div>
232
+ <h3 class="text-xl font-bold mb-3">Consulting en Cybersécurité</h3>
233
+ <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>
234
+ <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a>
235
+ </div>
236
+
237
+ <!-- Equipment Services -->
238
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="equipment">
239
+ <div class="text-red-700 mb-4">
240
+ <i class="fas fa-microchip text-4xl"></i>
241
+ </div>
242
+ <h3 class="text-xl font-bold mb-3">Composants Électroniques</h3>
243
+ <p class="text-gray-600 mb-4">Fourniture de composants de qualité pour projets électroniques, y compris Raspberry Pi et Arduino.</p>
244
+ <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a>
245
+ </div>
246
+
247
+ <!-- Training Services -->
248
+ <div class="service-card bg-white p-6 rounded-lg shadow-md transition duration-300" data-category="training">
249
+ <div class="text-red-700 mb-4">
250
+ <i class="fas fa-robot text-4xl"></i>
251
+ </div>
252
+ <h3 class="text-xl font-bold mb-3">Formation en IA</h3>
253
+ <p class="text-gray-600 mb-4">Programmes spécialisés en intelligence artificielle et machine learning pour professionnels et étudiants.</p>
254
+ <a href="#" class="text-red-700 font-medium hover:underline">En savoir plus →</a>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Portfolio Section -->
261
+ <section id="portfolio" class="py-20">
262
+ <div class="container mx-auto px-4">
263
+ <div class="text-center mb-16">
264
+ <h2 class="text-3xl font-bold mb-4">Nos Réalisations</h2>
265
+ <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>
266
+ </div>
267
+
268
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
269
+ <div class="relative group overflow-hidden rounded-lg shadow-md">
270
+ <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">
271
+ <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">
272
+ <div>
273
+ <h3 class="text-white text-xl font-bold mb-2">Solution CRM pour Banque</h3>
274
+ <p class="text-gray-200">Développement d'une plateforme de gestion client sur mesure pour une institution bancaire.</p>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="relative group overflow-hidden rounded-lg shadow-md">
280
+ <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">
281
+ <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">
282
+ <div>
283
+ <h3 class="text-white text-xl font-bold mb-2">Formation en Cybersécurité</h3>
284
+ <p class="text-gray-200">Programme certifiant pour les administrateurs systèmes d'une grande entreprise minière.</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="relative group overflow-hidden rounded-lg shadow-md">
290
+ <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">
291
+ <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">
292
+ <div>
293
+ <h3 class="text-white text-xl font-bold mb-2">Système de Gestion Universitaire</h3>
294
+ <p class="text-gray-200">Plateforme intégrée de gestion académique pour une université congolaise.</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="text-center mt-12">
301
+ <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>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Partners Section -->
307
+ <section class="py-16 bg-gray-100">
308
+ <div class="container mx-auto px-4">
309
+ <h2 class="text-3xl font-bold text-center mb-12">Ils nous font confiance</h2>
310
+
311
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
312
+ <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
313
+ <img src="https://via.placeholder.com/150x80?text=Client+1" alt="Client 1" class="h-12 object-contain">
314
+ </div>
315
+ <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
316
+ <img src="https://via.placeholder.com/150x80?text=Client+2" alt="Client 2" class="h-12 object-contain">
317
+ </div>
318
+ <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
319
+ <img src="https://via.placeholder.com/150x80?text=Client+3" alt="Client 3" class="h-12 object-contain">
320
+ </div>
321
+ <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
322
+ <img src="https://via.placeholder.com/150x80?text=Client+4" alt="Client 4" class="h-12 object-contain">
323
+ </div>
324
+ <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
325
+ <img src="https://via.placeholder.com/150x80?text=Client+5" alt="Client 5" class="h-12 object-contain">
326
+ </div>
327
+ <div class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
328
+ <img src="https://via.placeholder.com/150x80?text=Client+6" alt="Client 6" class="h-12 object-contain">
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Blog Section -->
335
+ <section id="blog" class="py-20">
336
+ <div class="container mx-auto px-4">
337
+ <div class="text-center mb-16">
338
+ <h2 class="text-3xl font-bold mb-4">Actualités & Blog</h2>
339
+ <p class="text-gray-600 max-w-2xl mx-auto">Restez informés sur les dernières tendances technologiques et nos activités.</p>
340
+ </div>
341
+
342
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
343
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
344
+ <img src="https://via.placeholder.com/600x400?text=Article+1" alt="Article 1" class="w-full h-48 object-cover">
345
+ <div class="p-6">
346
+ <span class="text-sm text-red-700 font-medium">Cybersécurité</span>
347
+ <h3 class="text-xl font-bold mt-2 mb-3">Protéger son entreprise contre les ransomwares</h3>
348
+ <p class="text-gray-600 mb-4">Les meilleures pratiques pour sécuriser vos systèmes contre les attaques par ransomware en 2023.</p>
349
+ <a href="#" class="text-red-700 font-medium hover:underline">Lire l'article →</a>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
354
+ <img src="https://via.placeholder.com/600x400?text=Article+2" alt="Article 2" class="w-full h-48 object-cover">
355
+ <div class="p-6">
356
+ <span class="text-sm text-red-700 font-medium">Formation</span>
357
+ <h3 class="text-xl font-bold mt-2 mb-3">Nouveau programme en IA</h3>
358
+ <p class="text-gray-600 mb-4">Tosali Technologies lance une formation certifiante en intelligence artificielle pour professionnels.</p>
359
+ <a href="#" class="text-red-700 font-medium hover:underline">Lire l'article →</a>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
364
+ <img src="https://via.placeholder.com/600x400?text=Article+3" alt="Article 3" class="w-full h-48 object-cover">
365
+ <div class="p-6">
366
+ <span class="text-sm text-red-700 font-medium">Événement</span>
367
+ <h3 class="text-xl font-bold mt-2 mb-3">Forum Tech Kinshasa 2023</h3>
368
+ <p class="text-gray-600 mb-4">Retour sur notre participation au plus grand événement technologique de la RDC cette année.</p>
369
+ <a href="#" class="text-red-700 font-medium hover:underline">Lire l'article →</a>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="text-center mt-12">
375
+ <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>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- Contact Section -->
381
+ <section id="contact" class="py-20 bg-gray-50">
382
+ <div class="container mx-auto px-4">
383
+ <div class="flex flex-col lg:flex-row">
384
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
385
+ <h2 class="text-3xl font-bold mb-6">Contactez-nous</h2>
386
+ <p class="text-gray-600 mb-8">Vous avez un projet ou une question ? Notre équipe est à votre disposition pour vous accompagner.</p>
387
+
388
+ <div class="space-y-6">
389
+ <div class="flex items-start">
390
+ <div class="text-red-700 mr-4 mt-1">
391
+ <i class="fas fa-map-marker-alt text-xl"></i>
392
+ </div>
393
+ <div>
394
+ <h4 class="font-bold mb-1">Adresse</h4>
395
+ <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>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="flex items-start">
400
+ <div class="text-red-700 mr-4 mt-1">
401
+ <i class="fas fa-envelope text-xl"></i>
402
+ </div>
403
+ <div>
404
+ <h4 class="font-bold mb-1">Email</h4>
405
+ <p class="text-gray-600">contact@tosali.tech</p>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="flex items-start">
410
+ <div class="text-red-700 mr-4 mt-1">
411
+ <i class="fas fa-phone-alt text-xl"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-bold mb-1">Téléphone</h4>
415
+ <p class="text-gray-600">+243 821 851 806</p>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="flex items-start">
420
+ <div class="text-red-700 mr-4 mt-1">
421
+ <i class="fab fa-whatsapp text-xl"></i>
422
+ </div>
423
+ <div>
424
+ <h4 class="font-bold mb-1">WhatsApp</h4>
425
+ <p class="text-gray-600">+243 895 571 706</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="mt-8">
431
+ <h4 class="font-bold mb-4">Suivez-nous</h4>
432
+ <div class="flex space-x-4">
433
+ <a href="#" class="text-gray-600 hover:text-red-700 transition">
434
+ <i class="fab fa-facebook-f text-xl"></i>
435
+ </a>
436
+ <a href="#" class="text-gray-600 hover:text-red-700 transition">
437
+ <i class="fab fa-twitter text-xl"></i>
438
+ </a>
439
+ <a href="#" class="text-gray-600 hover:text-red-700 transition">
440
+ <i class="fab fa-linkedin-in text-xl"></i>
441
+ </a>
442
+ <a href="#" class="text-gray-600 hover:text-red-700 transition">
443
+ <i class="fab fa-instagram text-xl"></i>
444
+ </a>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="lg:w-1/2">
450
+ <div class="bg-white p-8 rounded-lg shadow-md">
451
+ <h3 class="text-2xl font-bold mb-6">Envoyez-nous un message</h3>
452
+
453
+ <form>
454
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
455
+ <div>
456
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label>
457
+ <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">
458
+ </div>
459
+ <div>
460
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
461
+ <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">
462
+ </div>
463
+ </div>
464
+
465
+ <div class="mb-6">
466
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label>
467
+ <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">
468
+ </div>
469
+
470
+ <div class="mb-6">
471
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
472
+ <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>
473
+ </div>
474
+
475
+ <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>
476
+ </form>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- Map Section -->
484
+ <div class="h-96 w-full">
485
+ <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>
486
+ </div>
487
+
488
+ <!-- Footer -->
489
+ <footer class="bg-gray-900 text-white py-12">
490
+ <div class="container mx-auto px-4">
491
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
492
+ <div>
493
+ <img src="https://via.placeholder.com/180x60?text=Tosali+Logo" alt="Tosali Technologies Logo" class="h-12 mb-4">
494
+ <p class="text-gray-400">Leader en solutions technologiques innovantes en République Démocratique du Congo et en Afrique.</p>
495
+ </div>
496
+
497
+ <div>
498
+ <h4 class="text-lg font-bold mb-4">Liens rapides</h4>
499
+ <ul class="space-y-2">
500
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Accueil</a></li>
501
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li>
502
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
503
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Réalisations</a></li>
504
+ <li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li>
505
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
506
+ </ul>
507
+ </div>
508
+
509
+ <div>
510
+ <h4 class="text-lg font-bold mb-4">Services</h4>
511
+ <ul class="space-y-2">
512
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Équipements informatiques</a></li>
513
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Formations techniques</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Développement logiciel</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Consulting cybersécurité</a></li>
516
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Solutions IA</a></li>
517
+ </ul>
518
+ </div>
519
+
520
+ <div>
521
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
522
+ <p class="text-gray-400 mb-4">Abonnez-vous à notre newsletter pour recevoir nos actualités et offres spéciales.</p>
523
+ <form class="flex">
524
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-md w-full focus:outline-none text-gray-900">
525
+ <button type="submit" class="bg-red-700 hover:bg-red-800 px-4 py-2 rounded-r-md transition">
526
+ <i class="fas fa-paper-plane"></i>
527
+ </button>
528
+ </form>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
533
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Tosali Technologies. Tous droits réservés.</p>
534
+ <div class="flex space-x-6">
535
+ <a href="#" class="text-gray-400 hover:text-white transition">
536
+ <i class="fab fa-facebook-f"></i>
537
+ </a>
538
+ <a href="#" class="text-gray-400 hover:text-white transition">
539
+ <i class="fab fa-twitter"></i>
540
+ </a>
541
+ <a href="#" class="text-gray-400 hover:text-white transition">
542
+ <i class="fab fa-linkedin-in"></i>
543
+ </a>
544
+ <a href="#" class="text-gray-400 hover:text-white transition">
545
+ <i class="fab fa-instagram"></i>
546
+ </a>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </footer>
551
+
552
+ <script>
553
+ // Mobile menu toggle
554
+ document.querySelector('button[aria-controls="mobile-menu"]').addEventListener('click', function() {
555
+ const menu = document.getElementById('mobileMenu');
556
+ menu.classList.toggle('hidden');
557
+ });
558
+
559
+ // Service filtering
560
+ const filterButtons = document.querySelectorAll('.service-filter');
561
+ const serviceCards = document.querySelectorAll('.service-card');
562
+
563
+ filterButtons.forEach(button => {
564
+ button.addEventListener('click', () => {
565
+ // Update active button
566
+ filterButtons.forEach(btn => {
567
+ btn.classList.remove('bg-red-700', 'text-white');
568
+ btn.classList.add('bg-white', 'text-gray-700');
569
+ });
570
+ button.classList.add('bg-red-700', 'text-white');
571
+ button.classList.remove('bg-white', 'text-gray-700');
572
+
573
+ // Filter services
574
+ const filter = button.dataset.filter;
575
+ serviceCards.forEach(card => {
576
+ if (filter === 'all' || card.dataset.category === filter) {
577
+ card.style.display = 'block';
578
+ } else {
579
+ card.style.display = 'none';
580
+ }
581
+ });
582
+ });
583
+ });
584
+
585
+ // Smooth scrolling for anchor links
586
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
587
+ anchor.addEventListener('click', function (e) {
588
+ e.preventDefault();
589
+
590
+ const targetId = this.getAttribute('href');
591
+ const targetElement = document.querySelector(targetId);
592
+
593
+ if (targetElement) {
594
+ window.scrollTo({
595
+ top: targetElement.offsetTop - 80,
596
+ behavior: 'smooth'
597
+ });
598
+
599
+ // Close mobile menu if open
600
+ const mobileMenu = document.getElementById('mobileMenu');
601
+ if (!mobileMenu.classList.contains('hidden')) {
602
+ mobileMenu.classList.add('hidden');
603
+ }
604
+ }
605
+ });
606
+ });
607
+ </script>
608
+ <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>
609
+ </html>