File size: 37,466 Bytes
43e9be5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
<!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>