Hugging Face's logo

Spaces:
Agbello
/
akarasit
Running

App Files Community
Agbello commited on
Commit
72dff02
·
verified ·
1 Parent(s): ff6d5c2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +854 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Akarasit
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: yellow
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: akarasit
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,854 @@
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>Akaras IT - Formation, Matériel & Logiciels</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
12
+ }
13
+ .feature-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .course-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .course-card:hover {
21
+ transform: scale(1.03);
22
+ }
23
+ .newsletter-input:focus {
24
+ outline: none;
25
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
26
+ }
27
+ .floating-btn {
28
+ animation: float 3s ease-in-out infinite;
29
+ }
30
+ @keyframes float {
31
+ 0%, 100% { transform: translateY(0); }
32
+ 50% { transform: translateY(-10px); }
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="font-sans bg-gray-50">
37
+ <!-- Header/Navigation -->
38
+ <header class="bg-white shadow-sm sticky top-0 z-50">
39
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
40
+ <div class="flex items-center space-x-2">
41
+ <div class="bg-blue-600 text-white p-2 rounded-lg">
42
+ <i class="fas fa-laptop-code text-2xl"></i>
43
+ </div>
44
+ <h1 class="text-2xl font-bold text-gray-800">Akaras <span class="text-blue-600">IT</span></h1>
45
+ </div>
46
+
47
+ <nav class="hidden md:flex space-x-8">
48
+ <a href="#formations" class="text-gray-700 hover:text-blue-600 font-medium">Formations</a>
49
+ <a href="#blog" class="text-gray-700 hover:text-blue-600 font-medium">Blog</a>
50
+ <a href="#materiel" class="text-gray-700 hover:text-blue-600 font-medium">Matériel</a>
51
+ <a href="#logiciels" class="text-gray-700 hover:text-blue-600 font-medium">Logiciels</a>
52
+ <a href="#contact" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
53
+ </nav>
54
+
55
+ <div class="flex items-center space-x-4">
56
+ <button class="md:hidden text-gray-700">
57
+ <i class="fas fa-bars text-xl"></i>
58
+ </button>
59
+ <button class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
60
+ <i class="fas fa-user mr-2"></i>Espace Client
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Hero Section -->
67
+ <section class="hero-gradient text-white py-20">
68
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
69
+ <div class="md:w-1/2 mb-10 md:mb-0">
70
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Maîtrisez l'informatique avec Akaras IT</h2>
71
+ <p class="text-xl mb-8 opacity-90">Formations adaptées, matériel performant et logiciels essentiels pour votre réussite numérique.</p>
72
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
73
+ <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
74
+ Découvrir nos formations
75
+ </button>
76
+ <button class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">
77
+ <i class="fas fa-play-circle mr-2"></i>Voir la vidéo
78
+ </button>
79
+ </div>
80
+ </div>
81
+ <div class="md:w-1/2 flex justify-center">
82
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
83
+ alt="Formation en informatique"
84
+ class="rounded-xl shadow-2xl max-w-full h-auto">
85
+ </div>
86
+ </div>
87
+ </section>
88
+
89
+ <!-- Features Section -->
90
+ <section class="py-16 bg-white">
91
+ <div class="container mx-auto px-4">
92
+ <div class="text-center mb-16">
93
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Pourquoi choisir Akaras IT ?</h2>
94
+ <p class="text-gray-600 max-w-2xl mx-auto">Nous combinons expertise technique et pédagogie adaptée pour vous offrir la meilleure expérience d'apprentissage.</p>
95
+ </div>
96
+
97
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
98
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
99
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
100
+ <i class="fas fa-graduation-cap text-2xl"></i>
101
+ </div>
102
+ <h3 class="text-xl font-semibold mb-3">Formations Complètes</h3>
103
+ <p class="text-gray-600">Des cours adaptés à tous les niveaux, du débutant à l'expert, avec des supports pédagogiques clairs et pratiques.</p>
104
+ </div>
105
+
106
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
107
+ <div class="bg-purple-100 text-purple-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
108
+ <i class="fas fa-microchip text-2xl"></i>
109
+ </div>
110
+ <h3 class="text-xl font-semibold mb-3">Matériel Performant</h3>
111
+ <p class="text-gray-600">Découvrez les dernières innovations technologiques et trouvez le matériel adapté à vos besoins.</p>
112
+ </div>
113
+
114
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
115
+ <div class="bg-green-100 text-green-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
116
+ <i class="fas fa-cubes text-2xl"></i>
117
+ </div>
118
+ <h3 class="text-xl font-semibold mb-3">Logiciels Essentiels</h3>
119
+ <p class="text-gray-600">Accédez à une sélection de logiciels professionnels avec des licences avantageuses et un support technique inclus.</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- Formations Section -->
126
+ <section id="formations" class="py-16 bg-gray-50">
127
+ <div class="container mx-auto px-4">
128
+ <div class="text-center mb-16">
129
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nos Formations en Informatique</h2>
130
+ <p class="text-gray-600 max-w-2xl mx-auto">Développez vos compétences avec nos programmes conçus par des experts.</p>
131
+ </div>
132
+
133
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
134
+ <!-- Formation 1 -->
135
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
136
+ <div class="h-48 bg-blue-600 flex items-center justify-center">
137
+ <i class="fas fa-desktop text-white text-6xl"></i>
138
+ </div>
139
+ <div class="p-6">
140
+ <div class="flex justify-between items-start mb-3">
141
+ <h3 class="text-xl font-semibold">Bases de l'Informatique</h3>
142
+ <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">Débutant</span>
143
+ </div>
144
+ <p class="text-gray-600 mb-4">Maîtrisez les fondamentaux : système d'exploitation, bureautique, navigation internet et sécurité.</p>
145
+ <div class="flex justify-between items-center">
146
+ <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 20 heures</span>
147
+ <span class="font-bold text-blue-600">99€</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Formation 2 -->
153
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
154
+ <div class="h-48 bg-purple-600 flex items-center justify-center">
155
+ <i class="fas fa-code text-white text-6xl"></i>
156
+ </div>
157
+ <div class="p-6">
158
+ <div class="flex justify-between items-start mb-3">
159
+ <h3 class="text-xl font-semibold">Programmation Web</h3>
160
+ <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full">Intermédiaire</span>
161
+ </div>
162
+ <p class="text-gray-600 mb-4">Apprenez à créer des sites web avec HTML, CSS, JavaScript et les frameworks modernes.</p>
163
+ <div class="flex justify-between items-center">
164
+ <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 60 heures</span>
165
+ <span class="font-bold text-purple-600">299€</span>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Formation 3 -->
171
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
172
+ <div class="h-48 bg-green-600 flex items-center justify-center">
173
+ <i class="fas fa-shield-alt text-white text-6xl"></i>
174
+ </div>
175
+ <div class="p-6">
176
+ <div class="flex justify-between items-start mb-3">
177
+ <h3 class="text-xl font-semibold">Cybersécurité</h3>
178
+ <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">Avancé</span>
179
+ </div>
180
+ <p class="text-gray-600 mb-4">Protégez vos systèmes contre les cyberattaques avec des techniques professionnelles.</p>
181
+ <div class="flex justify-between items-center">
182
+ <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 40 heures</span>
183
+ <span class="font-bold text-green-600">399€</span>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="text-center mt-12">
190
+ <button class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
191
+ Voir toutes les formations <i class="fas fa-arrow-right ml-2"></i>
192
+ </button>
193
+ </div>
194
+ </div>
195
+ </section>
196
+
197
+ <!-- Blog Section -->
198
+ <section id="blog" class="py-16 bg-white">
199
+ <div class="container mx-auto px-4">
200
+ <div class="flex flex-col md:flex-row items-center mb-12">
201
+ <div class="md:w-1/2 mb-8 md:mb-0">
202
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Notre Blog IT</h2>
203
+ <p class="text-gray-600">Découvrez nos articles sur les tendances technologiques, conseils pratiques et analyses approfondies.</p>
204
+ </div>
205
+ <div class="md:w-1/2 flex justify-end">
206
+ <button class="border border-blue-600 text-blue-600 px-6 py-2 rounded-lg font-medium hover:bg-blue-50 transition">
207
+ Voir tous les articles
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
213
+ <!-- Article 1 -->
214
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
215
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80"
216
+ alt="Nouveaux processeurs"
217
+ class="w-full h-48 object-cover">
218
+ <div class="p-6">
219
+ <div class="flex items-center text-sm text-gray-500 mb-2">
220
+ <span><i class="fas fa-calendar-alt mr-1"></i> 15 Juin 2023</span>
221
+ <span class="mx-2">•</span>
222
+ <span><i class="fas fa-tag mr-1"></i> Matériel</span>
223
+ </div>
224
+ <h3 class="text-xl font-semibold mb-3">Comparatif des processeurs 2023</h3>
225
+ <p class="text-gray-600 mb-4">Notre analyse complète des dernières puces AMD et Intel pour choisir celle qui correspond à vos besoins.</p>
226
+ <a href="#" class="text-blue-600 font-medium hover:underline">Lire l'article <i class="fas fa-arrow-right ml-1"></i></a>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Article 2 -->
231
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
232
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
233
+ alt="Windows 12"
234
+ class="w-full h-48 object-cover">
235
+ <div class="p-6">
236
+ <div class="flex items-center text-sm text-gray-500 mb-2">
237
+ <span><i class="fas fa-calendar-alt mr-1"></i> 2 Juin 2023</span>
238
+ <span class="mx-2">•</span>
239
+ <span><i class="fas fa-tag mr-1"></i> Systèmes</span>
240
+ </div>
241
+ <h3 class="text-xl font-semibold mb-3">5 astuces pour optimiser Windows</h3>
242
+ <p class="text-gray-600 mb-4">Découvrez nos conseils pour améliorer les performances de votre PC sous Windows.</p>
243
+ <a href="#" class="text-blue-600 font-medium hover:underline">Lire l'article <i class="fas fa-arrow-right ml-1"></i></a>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Article 3 -->
248
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
249
+ <img src="https://images.unsplash.com/photo-1624953587687-daf255b6b80a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
250
+ alt="Sécurité informatique"
251
+ class="w-full h-48 object-cover">
252
+ <div class="p-6">
253
+ <div class="flex items-center text-sm text-gray-500 mb-2">
254
+ <span><i class="fas fa-calendar-alt mr-1"></i> 25 Mai 2023</span>
255
+ <span class="mx-2">•</span>
256
+ <span><i class="fas fa-tag mr-1"></i> Sécurité</span>
257
+ </div>
258
+ <h3 class="text-xl font-semibold mb-3">Protéger ses données en 2023</h3>
259
+ <p class="text-gray-600 mb-4">Guide complet des bonnes pratiques pour sécuriser vos informations personnelles et professionnelles.</p>
260
+ <a href="#" class="text-blue-600 font-medium hover:underline">Lire l'article <i class="fas fa-arrow-right ml-1"></i></a>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Matériel Section -->
268
+ <section id="materiel" class="py-16 bg-gray-50">
269
+ <div class="container mx-auto px-4">
270
+ <div class="text-center mb-16">
271
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Notre Sélection de Matériel</h2>
272
+ <p class="text-gray-600 max-w-2xl mx-auto">Du matériel fiable et performant pour tous vos besoins informatiques.</p>
273
+ </div>
274
+
275
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
276
+ <!-- Produit 1 -->
277
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
278
+ <div class="relative">
279
+ <img src="https://images.unsplash.com/photo-1593640408182-31c228b7c69a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
280
+ alt="PC Portable"
281
+ class="w-full h-48 object-cover">
282
+ <div class="absolute top-3 right-3 bg-red-500 text-white text-xs px-2 py-1 rounded-full">-15%</div>
283
+ </div>
284
+ <div class="p-4">
285
+ <h3 class="font-semibold mb-1">PC Portable Ultrabook Pro</h3>
286
+ <div class="flex items-center mb-2">
287
+ <div class="flex text-yellow-400">
288
+ <i class="fas fa-star"></i>
289
+ <i class="fas fa-star"></i>
290
+ <i class="fas fa-star"></i>
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star-half-alt"></i>
293
+ </div>
294
+ <span class="text-gray-500 text-sm ml-2">(42)</span>
295
+ </div>
296
+ <div class="flex items-center justify-between">
297
+ <div>
298
+ <span class="text-gray-500 line-through text-sm">1 299€</span>
299
+ <span class="text-lg font-bold text-gray-800 ml-2">1 099€</span>
300
+ </div>
301
+ <button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition">
302
+ <i class="fas fa-shopping-cart"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Produit 2 -->
309
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
310
+ <div class="relative">
311
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80"
312
+ alt="Écran Gaming"
313
+ class="w-full h-48 object-cover">
314
+ </div>
315
+ <div class="p-4">
316
+ <h3 class="font-semibold mb-1">Écran Gaming 27" 144Hz</h3>
317
+ <div class="flex items-center mb-2">
318
+ <div class="flex text-yellow-400">
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ <i class="fas fa-star"></i>
323
+ <i class="far fa-star"></i>
324
+ </div>
325
+ <span class="text-gray-500 text-sm ml-2">(28)</span>
326
+ </div>
327
+ <div class="flex items-center justify-between">
328
+ <span class="text-lg font-bold text-gray-800">349€</span>
329
+ <button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition">
330
+ <i class="fas fa-shopping-cart"></i>
331
+ </button>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Produit 3 -->
337
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
338
+ <div class="relative">
339
+ <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80"
340
+ alt="Clavier Mécanique"
341
+ class="w-full h-48 object-cover">
342
+ <div class="absolute top-3 right-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Nouveau</div>
343
+ </div>
344
+ <div class="p-4">
345
+ <h3 class="font-semibold mb-1">Clavier Mécanique RGB</h3>
346
+ <div class="flex items-center mb-2">
347
+ <div class="flex text-yellow-400">
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ <i class="fas fa-star"></i>
353
+ </div>
354
+ <span class="text-gray-500 text-sm ml-2">(63)</span>
355
+ </div>
356
+ <div class="flex items-center justify-between">
357
+ <span class="text-lg font-bold text-gray-800">129€</span>
358
+ <button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition">
359
+ <i class="fas fa-shopping-cart"></i>
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Produit 4 -->
366
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
367
+ <div class="relative">
368
+ <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80"
369
+ alt="SSD NVMe"
370
+ class="w-full h-48 object-cover">
371
+ </div>
372
+ <div class="p-4">
373
+ <h3 class="font-semibold mb-1">SSD NVMe 1To</h3>
374
+ <div class="flex items-center mb-2">
375
+ <div class="flex text-yellow-400">
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star"></i>
379
+ <i class="fas fa-star"></i>
380
+ <i class="fas fa-star-half-alt"></i>
381
+ </div>
382
+ <span class="text-gray-500 text-sm ml-2">(87)</span>
383
+ </div>
384
+ <div class="flex items-center justify-between">
385
+ <span class="text-lg font-bold text-gray-800">89€</span>
386
+ <button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition">
387
+ <i class="fas fa-shopping-cart"></i>
388
+ </button>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="text-center mt-12">
395
+ <button class="border border-blue-600 text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition">
396
+ Voir tout le matériel <i class="fas fa-arrow-right ml-2"></i>
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </section>
401
+
402
+ <!-- Logiciels Section -->
403
+ <section id="logiciels" class="py-16 bg-white">
404
+ <div class="container mx-auto px-4">
405
+ <div class="text-center mb-16">
406
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nos Logiciels & Licences</h2>
407
+ <p class="text-gray-600 max-w-2xl mx-auto">Des solutions logicielles professionnelles avec des licences avantageuses.</p>
408
+ </div>
409
+
410
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
411
+ <!-- Logiciel 1 -->
412
+ <div class="bg-gray-50 rounded-xl p-8 flex flex-col items-center text-center">
413
+ <div class="bg-blue-100 text-blue-600 w-20 h-20 rounded-full flex items-center justify-center mb-6">
414
+ <i class="fas fa-file-alt text-3xl"></i>
415
+ </div>
416
+ <h3 class="text-xl font-semibold mb-3">Suite Bureautique Pro</h3>
417
+ <p class="text-gray-600 mb-6">La suite complète pour tous vos besoins de productivité : traitement de texte, tableurs, présentations.</p>
418
+ <div class="mt-auto">
419
+ <span class="text-2xl font-bold text-gray-800">149€</span>
420
+ <span class="text-gray-500">/ licence</span>
421
+ <button class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition w-full">
422
+ Acheter maintenant
423
+ </button>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Logiciel 2 -->
428
+ <div class="bg-gray-50 rounded-xl p-8 flex flex-col items-center text-center border-2 border-blue-500 relative">
429
+ <div class="absolute top-0 right-0 bg-blue-600 text-white text-xs px-3 py-1 rounded-bl-lg rounded-tr-lg">
430
+ Le plus populaire
431
+ </div>
432
+ <div class="bg-purple-100 text-purple-600 w-20 h-20 rounded-full flex items-center justify-center mb-6">
433
+ <i class="fas fa-paint-brush text-3xl"></i>
434
+ </div>
435
+ <h3 class="text-xl font-semibold mb-3">Suite Graphique</h3>
436
+ <p class="text-gray-600 mb-6">Tous les outils pour le design graphique, la retouche photo et la création visuelle.</p>
437
+ <div class="mt-auto">
438
+ <span class="text-2xl font-bold text-gray-800">299€</span>
439
+ <span class="text-gray-500">/ licence</span>
440
+ <button class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition w-full">
441
+ Acheter maintenant
442
+ </button>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Logiciel 3 -->
447
+ <div class="bg-gray-50 rounded-xl p-8 flex flex-col items-center text-center">
448
+ <div class="bg-green-100 text-green-600 w-20 h-20 rounded-full flex items-center justify-center mb-6">
449
+ <i class="fas fa-database text-3xl"></i>
450
+ </div>
451
+ <h3 class="text-xl font-semibold mb-3">Logiciel de Gestion</h3>
452
+ <p class="text-gray-600 mb-6">Solution complète pour la gestion d'entreprise, CRM, comptabilité et gestion de projet.</p>
453
+ <div class="mt-auto">
454
+ <span class="text-2xl font-bold text-gray-800">499€</span>
455
+ <span class="text-gray-500">/ licence</span>
456
+ <button class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition w-full">
457
+ Acheter maintenant
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="mt-12 bg-blue-50 rounded-xl p-8">
464
+ <div class="flex flex-col md:flex-row items-center">
465
+ <div class="md:w-2/3 mb-6 md:mb-0">
466
+ <h3 class="text-xl font-semibold mb-2">Abonnement Logiciels</h3>
467
+ <p class="text-gray-600">Accédez à tous nos logiciels avec un abonnement mensuel avantageux et des mises à jour incluses.</p>
468
+ </div>
469
+ <div class="md:w-1/3 flex justify-end">
470
+ <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition w-full md:w-auto">
471
+ Découvrir les abonnements <i class="fas fa-arrow-right ml-2"></i>
472
+ </button>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <!-- Témoignages -->
480
+ <section class="py-16 bg-gray-50">
481
+ <div class="container mx-auto px-4">
482
+ <div class="text-center mb-16">
483
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Ils nous font confiance</h2>
484
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez ce que nos clients et étudiants pensent de nos services.</p>
485
+ </div>
486
+
487
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
488
+ <!-- Témoignage 1 -->
489
+ <div class="bg-white p-8 rounded-xl shadow-sm">
490
+ <div class="flex items-center mb-4">
491
+ <div class="flex text-yellow-400 mr-2">
492
+ <i class="fas fa-star"></i>
493
+ <i class="fas fa-star"></i>
494
+ <i class="fas fa-star"></i>
495
+ <i class="fas fa-star"></i>
496
+ <i class="fas fa-star"></i>
497
+ </div>
498
+ <span class="text-gray-500 text-sm">12 Mars 2023</span>
499
+ </div>
500
+ <p class="text-gray-700 mb-6">"Les formations sont très bien structurées et les formateurs sont à l'écoute. J'ai pu développer des compétences concrètes rapidement."</p>
501
+ <div class="flex items-center">
502
+ <img src="https://randomuser.me/api/portraits/women/44.jpg"
503
+ alt="Marie D."
504
+ class="w-12 h-12 rounded-full mr-4">
505
+ <div>
506
+ <h4 class="font-semibold">Marie D.</h4>
507
+ <p class="text-gray-500 text-sm">Étudiante en développement web</p>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Témoignage 2 -->
513
+ <div class="bg-white p-8 rounded-xl shadow-sm">
514
+ <div class="flex items-center mb-4">
515
+ <div class="flex text-yellow-400 mr-2">
516
+ <i class="fas fa-star"></i>
517
+ <i class="fas fa-star"></i>
518
+ <i class="fas fa-star"></i>
519
+ <i class="fas fa-star"></i>
520
+ <i class="fas fa-star-half-alt"></i>
521
+ </div>
522
+ <span class="text-gray-500 text-sm">5 Avril 2023</span>
523
+ </div>
524
+ <p class="text-gray-700 mb-6">"Le matériel proposé est de qualité et les conseils sont pertinents. J'ai équipé toute mon équipe grâce à Akaras IT."</p>
525
+ <div class="flex items-center">
526
+ <img src="https://randomuser.me/api/portraits/men/32.jpg"
527
+ alt="Pierre L."
528
+ class="w-12 h-12 rounded-full mr-4">
529
+ <div>
530
+ <h4 class="font-semibold">Pierre L.</h4>
531
+ <p class="text-gray-500 text-sm">Responsable IT</p>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Témoignage 3 -->
537
+ <div class="bg-white p-8 rounded-xl shadow-sm">
538
+ <div class="flex items-center mb-4">
539
+ <div class="flex text-yellow-400 mr-2">
540
+ <i class="fas fa-star"></i>
541
+ <i class="fas fa-star"></i>
542
+ <i class="fas fa-star"></i>
543
+ <i class="fas fa-star"></i>
544
+ <i class="fas fa-star"></i>
545
+ </div>
546
+ <span class="text-gray-500 text-sm">22 Mai 2023</span>
547
+ </div>
548
+ <p class="text-gray-700 mb-6">"Les licences logicielles sont bien moins chères qu'ailleurs et le support technique est réactif. Je recommande vivement !"</p>
549
+ <div class="flex items-center">
550
+ <img src="https://randomuser.me/api/portraits/women/68.jpg"
551
+ alt="Sophie T."
552
+ class="w-12 h-12 rounded-full mr-4">
553
+ <div>
554
+ <h4 class="font-semibold">Sophie T.</h4>
555
+ <p class="text-gray-500 text-sm">Graphiste indépendante</p>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </section>
562
+
563
+ <!-- Newsletter -->
564
+ <section class="py-16 bg-blue-600 text-white">
565
+ <div class="container mx-auto px-4 text-center">
566
+ <h2 class="text-3xl font-bold mb-4">Restez informé</h2>
567
+ <p class="text-blue-100 max-w-2xl mx-auto mb-8">Abonnez-vous à notre newsletter pour recevoir les dernières actualités IT, nos offres spéciales et des conseils exclusifs.</p>
568
+
569
+ <div class="max-w-md mx-auto flex">
570
+ <input type="email"
571
+ placeholder="Votre email"
572
+ class="newsletter-input flex-grow px-4 py-3 rounded-l-lg focus:ring-2 focus:ring-blue-300 text-gray-800">
573
+ <button class="bg-blue-800 px-6 py-3 rounded-r-lg font-medium hover:bg-blue-900 transition">
574
+ S'abonner <i class="fas fa-paper-plane ml-2"></i>
575
+ </button>
576
+ </div>
577
+
578
+ <p class="text-blue-100 text-sm mt-4">Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment.</p>
579
+ </div>
580
+ </section>
581
+
582
+ <!-- Contact -->
583
+ <section id="contact" class="py-16 bg-white">
584
+ <div class="container mx-auto px-4">
585
+ <div class="flex flex-col md:flex-row">
586
+ <div class="md:w-1/2 mb-12 md:mb-0">
587
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Contactez-nous</h2>
588
+ <p class="text-gray-600 mb-8">Une question sur nos formations, notre matériel ou nos logiciels ? Notre équipe est à votre disposition.</p>
589
+
590
+ <div class="space-y-6">
591
+ <div class="flex items-start">
592
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
593
+ <i class="fas fa-map-marker-alt"></i>
594
+ </div>
595
+ <div>
596
+ <h4 class="font-semibold text-gray-800">Adresse</h4>
597
+ <p class="text-gray-600">123 Rue de l'Informatique, 75000 Paris</p>
598
+ </div>
599
+ </div>
600
+
601
+ <div class="flex items-start">
602
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
603
+ <i class="fas fa-phone-alt"></i>
604
+ </div>
605
+ <div>
606
+ <h4 class="font-semibold text-gray-800">Téléphone</h4>
607
+ <p class="text-gray-600">01 23 45 67 89</p>
608
+ <p class="text-gray-600">Lun-Ven : 9h-18h</p>
609
+ </div>
610
+ </div>
611
+
612
+ <div class="flex items-start">
613
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
614
+ <i class="fas fa-envelope"></i>
615
+ </div>
616
+ <div>
617
+ <h4 class="font-semibold text-gray-800">Email</h4>
618
+ <p class="text-gray-600">contact@akaras-it.com</p>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="mt-8">
624
+ <h4 class="font-semibold text-gray-800 mb-3">Suivez-nous</h4>
625
+ <div class="flex space-x-4">
626
+ <a href="#" class="bg-gray-100 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-600 hover:text-white transition">
627
+ <i class="fab fa-facebook-f"></i>
628
+ </a>
629
+ <a href="#" class="bg-gray-100 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-400 hover:text-white transition">
630
+ <i class="fab fa-twitter"></i>
631
+ </a>
632
+ <a href="#" class="bg-gray-100 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-600 hover:text-white transition">
633
+ <i class="fab fa-instagram"></i>
634
+ </a>
635
+ <a href="#" class="bg-gray-100 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 hover:text-white transition">
636
+ <i class="fab fa-linkedin-in"></i>
637
+ </a>
638
+ <a href="#" class="bg-gray-100 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 hover:text-white transition">
639
+ <i class="fab fa-youtube"></i>
640
+ </a>
641
+ </div>
642
+ </div>
643
+ </div>
644
+
645
+ <div class="md:w-1/2 md:pl-12">
646
+ <form class="bg-gray-50 p-8 rounded-xl">
647
+ <div class="mb-6">
648
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label>
649
+ <input type="text"
650
+ id="name"
651
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">
652
+ </div>
653
+
654
+ <div class="mb-6">
655
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
656
+ <input type="email"
657
+ id="email"
658
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">
659
+ </div>
660
+
661
+ <div class="mb-6">
662
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label>
663
+ <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">
664
+ <option value="">Sélectionnez un sujet</option>
665
+ <option value="formation">Demande sur les formations</option>
666
+ <option value="materiel">Question sur le matériel</option>
667
+ <option value="logiciel">Information sur les logiciels</option>
668
+ <option value="autre">Autre demande</option>
669
+ </select>
670
+ </div>
671
+
672
+ <div class="mb-6">
673
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
674
+ <textarea id="message"
675
+ rows="5"
676
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"></textarea>
677
+ </div>
678
+
679
+ <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
680
+ Envoyer le message <i class="fas fa-p paper-plane ml-2"></i>
681
+ </button>
682
+ </form>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </section>
687
+
688
+ <!-- FAQ -->
689
+ <section class="py-16 bg-gray-50">
690
+ <div class="container mx-auto px-4">
691
+ <div class="text-center mb-16">
692
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Questions fréquentes</h2>
693
+ <p class="text-gray-600 max-w-2xl mx-auto">Trouvez rapidement des réponses à vos questions les plus courantes.</p>
694
+ </div>
695
+
696
+ <div class="max-w-3xl mx-auto">
697
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
698
+ <button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
699
+ <h3 class="font-semibold text-gray-800">Comment s'inscrire à une formation ?</h3>
700
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
701
+ </button>
702
+ <div class="faq-answer px-6 pb-6 hidden">
703
+ <p class="text-gray-600">Pour vous inscrire à une formation, rendez-vous sur notre page "Formations", sélectionnez le cours qui vous intéresse et cliquez sur "S'inscrire". Vous serez guidé à travers le processus d'inscription et de paiement. Un email de confirmation vous sera envoyé avec tous les détails.</p>
704
+ </div>
705
+ </div>
706
+
707
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
708
+ <button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
709
+ <h3 class="font-semibold text-gray-800">Quels sont les modes de paiement acceptés ?</h3>
710
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
711
+ </button>
712
+ <div class="faq-answer px-6 pb-6 hidden">
713
+ <p class="text-gray-600">Nous acceptons les cartes bancaires (Visa, Mastercard, American Express), les virements bancaires, PayPal ainsi que les chèques. Pour les formations en entreprise, nous proposons également des factures avec paiement différé.</p>
714
+ </div>
715
+ </div>
716
+
717
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
718
+ <button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
719
+ <h3 class="font-semibold text-gray-800">Puis-je me faire rembourser si je ne suis pas satisfait ?</h3>
720
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
721
+ </button>
722
+ <div class="faq-answer px-6 pb-6 hidden">
723
+ <p class="text-gray-600">Oui, nous offrons une garantie satisfait ou remboursé sous 14 jours pour nos formations (hors frais d'inscription de 20€). Pour les produits matériels, vous disposez d'un délai de rétractation de 14 jours à compter de la réception.</p>
724
+ </div>
725
+ </div>
726
+
727
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
728
+ <button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
729
+ <h3 class="font-semibold text-gray-800">Comment obtenir un support technique pour les logiciels ?</h3>
730
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
731
+ </button>
732
+ <div class="faq-answer px-6 pb-6 hidden">
733
+ <p class="text-gray-600">Notre support technique est disponible par email à support@akaras-it.com ou par téléphone au 01 23 45 67 89 (option 2). Nous répondons généralement dans les 24 heures ouvrables. Pour les problèmes urgents, mentionnez "URGENT" dans l'objet de votre email.</p>
734
+ </div>
735
+ </div>
736
+
737
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
738
+ <button class="faq-question w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
739
+ <h3 class="font-semibold text-gray-800">Proposez-vous des formations en entreprise ?</h3>
740
+ <i class="fas fa-chevron-down text-blue-600 transition-transform"></i>
741
+ </button>
742
+ <div class="faq-answer px-6 pb-6 hidden">
743
+ <p class="text-gray-600">Absolument ! Nous proposons des formations sur mesure adaptées aux besoins spécifiques de votre entreprise. Nos formateurs peuvent intervenir dans vos locaux ou en visioconférence. Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.</p>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </section>
749
+
750
+ <!-- Footer -->
751
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
752
+ <div class="container mx-auto px-4">
753
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
754
+ <div>
755
+ <div class="flex items-center space-x-2 mb-6">
756
+ <div class="bg-blue-600 text-white p-2 rounded-lg">
757
+ <i class="fas fa-laptop-code text-2xl"></i>
758
+ </div>
759
+ <h3 class="text-2xl font-bold">Akaras <span class="text-blue-400">IT</span></h3>
760
+ </div>
761
+ <p class="text-gray-400 mb-6">Votre partenaire pour l'apprentissage, l'équipement et les solutions logicielles en informatique.</p>
762
+ <div class="flex space-x-4">
763
+ <a href="#" class="text-gray-400 hover:text-white transition">
764
+ <i class="fab fa-facebook-f"></i>
765
+ </a>
766
+ <a href="#" class="text-gray-400 hover:text-white transition">
767
+ <i class="fab fa-twitter"></i>
768
+ </a>
769
+ <a href="#" class="text-gray-400 hover:text-white transition">
770
+ <i class="fab fa-instagram"></i>
771
+ </a>
772
+ <a href="#" class="text-gray-400 hover:text-white transition">
773
+ <i class="fab fa-linkedin-in"></i>
774
+ </a>
775
+ </div>
776
+ </div>
777
+
778
+ <div>
779
+ <h4 class="text-lg font-semibold mb-6">Formations</h4>
780
+ <ul class="space-y-3">
781
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Formations débutant</a></li>
782
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Développement web</a></li>
783
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cybersécurité</a></li>
784
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Bureautique avancée</a></li>
785
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Formations certifiantes</a></li>
786
+ </ul>
787
+ </div>
788
+
789
+ <div>
790
+ <h4 class="text-lg font-semibold mb-6">Boutique</h4>
791
+ <ul class="space-y-3">
792
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Matériel informatique</a></li>
793
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Logiciels & licences</a></li>
794
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Périphériques</a></li>
795
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Promotions</a></li>
796
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nouveautés</a></li>
797
+ </ul>
798
+ </div>
799
+
800
+ <div>
801
+ <h4 class="text-lg font-semibold mb-6">Informations</h4>
802
+ <ul class="space-y-3">
803
+ <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
804
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
805
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
806
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
807
+ <li><a href="#" class="text-gray-400 hover:text-white transition">CGV</a></li>
808
+ </ul>
809
+ </div>
810
+ </div>
811
+
812
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
813
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Akaras IT. Tous droits réservés.</p>
814
+ <div class="flex space-x-6">
815
+ <a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a>
816
+ <a href="#" class="text-gray-400 hover:text-white transition">Conditions</a>
817
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </footer>
822
+
823
+ <!-- Floating Action Button -->
824
+ <div class="fixed bottom-8 right-8 z-50">
825
+ <button class="floating-btn bg-blue-600 text-white w-14 h-14 rounded-full shadow-xl flex items-center justify-center hover:bg-blue-700 transition">
826
+ <i class="fas fa-comment-dots text-xl"></i>
827
+ </button>
828
+ </div>
829
+
830
+ <script>
831
+ // FAQ Accordion
832
+ document.querySelectorAll('.faq-question').forEach(button => {
833
+ button.addEventListener('click', () => {
834
+ const answer = button.nextElementSibling;
835
+ const icon = button.querySelector('i');
836
+
837
+ // Toggle answer visibility
838
+ answer.classList.toggle('hidden');
839
+
840
+ // Rotate icon
841
+ if (answer.classList.contains('hidden')) {
842
+ icon.style.transform = 'rotate(0deg)';
843
+ } else {
844
+ icon.style.transform = 'rotate(180deg)';
845
+ }
846
+ });
847
+ });
848
+
849
+ // Mobile menu toggle (would need implementation)
850
+ // Form submission handling (would need backend integration)
851
+ // Shopping cart functionality (would need implementation)
852
+ </script>
853
+ <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=Agbello/akarasit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
854
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ aide moi a creer un site IT qui aura pour nom Akaras IT. Objectifs du sites cours de base en informatique, informations sur les nouveautée et le matériel ainsi que la vente de logitiels et de formations
2
+ Remplacer nouveautés par blog