Hugging Face's logo

Spaces:
Adamchab
/
agence-marketing
Running

App Files Community
Adamchab commited on
Commit
e88f31a
·
verified ·
1 Parent(s): ef32fd1

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +873 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Agence Marketing
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: agence-marketing
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
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,873 @@
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>TechUp - Formations IA pour le Marketing Digital</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
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+ .floating {
15
+ animation: float 6s ease-in-out infinite;
16
+ }
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+ .card-hover:hover {
24
+ transform: translateY(-10px);
25
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ }
27
+ .transition-slow {
28
+ transition: all 0.5s ease;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="font-sans bg-gray-50">
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
35
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
36
+ <div class="flex justify-between h-16">
37
+ <div class="flex items-center">
38
+ <div class="flex-shrink-0 flex items-center">
39
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl">TU</div>
40
+ <span class="ml-2 text-xl font-bold text-gray-900">Tech<span class="text-indigo-600">Up</span></span>
41
+ </div>
42
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
43
+ <a href="#accueil" class="text-indigo-600 border-indigo-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a>
44
+ <a href="#formations" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Formations</a>
45
+ <a href="#methodologie" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Méthodologie</a>
46
+ <a href="#equipe" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Équipe</a>
47
+ <a href="#contact" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Contact</a>
48
+ </div>
49
+ </div>
50
+ <div class="hidden md:ml-6 md:flex md:items-center">
51
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-slow">Réserver un appel</button>
52
+ </div>
53
+ <div class="-mr-2 flex items-center md:hidden">
54
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
55
+ <span class="sr-only">Ouvrir menu</span>
56
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
57
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
58
+ </svg>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Mobile menu -->
65
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
66
+ <div class="pt-2 pb-3 space-y-1">
67
+ <a href="#accueil" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a>
68
+ <a href="#formations" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Formations</a>
69
+ <a href="#methodologie" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Méthodologie</a>
70
+ <a href="#equipe" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Équipe</a>
71
+ <a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a>
72
+ <div class="pt-4 pb-3 border-t border-gray-200">
73
+ <div class="mt-3 space-y-1">
74
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-slow">Réserver un appel</button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Hero Section -->
82
+ <section id="accueil" class="relative bg-white overflow-hidden">
83
+ <div class="max-w-7xl mx-auto">
84
+ <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
85
+ <div class="pt-10 mx-auto max-w-7xl px-4 sm:pt-12 sm:px-6 md:pt-16 lg:pt-20 lg:px-8 xl:pt-28">
86
+ <div class="sm:text-center lg:text-left">
87
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
88
+ <span class="block">Maîtrisez les outils IA pour</span>
89
+ <span class="block gradient-text">booster votre marketing</span>
90
+ </h1>
91
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
92
+ Formations pratiques aux dernières technologies d'IA appliquées au marketing digital. Devenez un expert en quelques semaines seulement.
93
+ </p>
94
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
95
+ <div class="rounded-md shadow">
96
+ <a href="#formations" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-slow">
97
+ Découvrir nos formations
98
+ </a>
99
+ </div>
100
+ <div class="mt-3 sm:mt-0 sm:ml-3">
101
+ <a href="#methodologie" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-slow">
102
+ Notre approche
103
+ </a>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
111
+ <div class="h-full w-full object-cover">
112
+ <div class="h-full flex items-center justify-center p-10">
113
+ <div class="relative floating">
114
+ <div class="absolute -inset-4 bg-indigo-100 rounded-xl blur opacity-75"></div>
115
+ <div class="relative bg-white rounded-xl shadow-xl p-6 max-w-md">
116
+ <div class="flex items-center mb-4">
117
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
118
+ <i class="fas fa-robot"></i>
119
+ </div>
120
+ <div class="ml-3">
121
+ <h3 class="font-bold text-gray-900">Assistant IA Marketing</h3>
122
+ <p class="text-xs text-gray-500">En ligne • Maintenant</p>
123
+ </div>
124
+ </div>
125
+ <div class="bg-indigo-50 p-4 rounded-lg mb-3">
126
+ <p class="text-gray-800">Bonjour ! Je suis votre assistant IA. Comment puis-je vous aider à améliorer votre stratégie marketing aujourd'hui ?</p>
127
+ </div>
128
+ <div class="flex space-x-2">
129
+ <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-xs transition-slow">Création de contenu</button>
130
+ <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-xs transition-slow">Analyse de données</button>
131
+ <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full text-xs transition-slow">Automatisation</button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Logo Cloud -->
141
+ <div class="bg-gray-100 py-8">
142
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
143
+ <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">Ils nous font confiance</p>
144
+ <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
145
+ <div class="col-span-1 flex justify-center">
146
+ <img class="h-12 opacity-60 hover:opacity-100 transition-slow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/2048px-Microsoft_logo.svg.png" alt="Microsoft">
147
+ </div>
148
+ <div class="col-span-1 flex justify-center">
149
+ <img class="h-12 opacity-60 hover:opacity-100 transition-slow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/505px-Apple_logo_black.svg.png" alt="Apple">
150
+ </div>
151
+ <div class="col-span-1 flex justify-center">
152
+ <img class="h-12 opacity-60 hover:opacity-100 transition-slow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="Google">
153
+ </div>
154
+ <div class="col-span-1 flex justify-center">
155
+ <img class="h-12 opacity-60 hover:opacity-100 transition-slow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon">
156
+ </div>
157
+ <div class="col-span-1 flex justify-center">
158
+ <img class="h-12 opacity-60 hover:opacity-100 transition-slow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Meta-Logo.png/800px-Meta-Logo.png" alt="Meta">
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Formations Section -->
165
+ <section id="formations" class="py-12 bg-white">
166
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
167
+ <div class="text-center">
168
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
169
+ Nos <span class="gradient-text">Formations IA</span>
170
+ </h2>
171
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
172
+ Des programmes complets pour maîtriser les outils d'IA les plus puissants du marché
173
+ </p>
174
+ </div>
175
+
176
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
177
+ <!-- Formation 1 -->
178
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-slow">
179
+ <div class="p-6">
180
+ <div class="flex items-center">
181
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
182
+ <i class="fas fa-comment-dots text-white text-xl"></i>
183
+ </div>
184
+ <div class="ml-4">
185
+ <h3 class="text-lg font-medium text-gray-900">ChatGPT Expert</h3>
186
+ <p class="text-gray-500">Niveau: Intermédiaire</p>
187
+ </div>
188
+ </div>
189
+ <p class="mt-4 text-gray-600">
190
+ Maîtrisez ChatGPT pour la création de contenu, l'automatisation des conversations et l'analyse de données marketing.
191
+ </p>
192
+ <div class="mt-6">
193
+ <div class="flex items-center">
194
+ <div class="flex-shrink-0">
195
+ <i class="fas fa-clock text-indigo-500"></i>
196
+ </div>
197
+ <div class="ml-3 text-sm text-gray-500">
198
+ <p>12 heures • 4 semaines</p>
199
+ </div>
200
+ </div>
201
+ <div class="flex items-center mt-2">
202
+ <div class="flex-shrink-0">
203
+ <i class="fas fa-certificate text-indigo-500"></i>
204
+ </div>
205
+ <div class="ml-3 text-sm text-gray-500">
206
+ <p>Certification incluse</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="mt-6">
211
+ <span class="text-2xl font-bold text-gray-900">€497</span>
212
+ <span class="ml-2 text-sm text-gray-500 line-through">€697</span>
213
+ </div>
214
+ <div class="mt-6">
215
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-slow">
216
+ S'inscrire maintenant
217
+ </button>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Formation 2 -->
223
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-slow">
224
+ <div class="p-6">
225
+ <div class="flex items-center">
226
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
227
+ <i class="fas fa-chart-line text-white text-xl"></i>
228
+ </div>
229
+ <div class="ml-4">
230
+ <h3 class="text-lg font-medium text-gray-900">Data Science Marketing</h3>
231
+ <p class="text-gray-500">Niveau: Avancé</p>
232
+ </div>
233
+ </div>
234
+ <p class="mt-4 text-gray-600">
235
+ Utilisez le machine learning pour analyser vos données clients et optimiser vos campagnes marketing.
236
+ </p>
237
+ <div class="mt-6">
238
+ <div class="flex items-center">
239
+ <div class="flex-shrink-0">
240
+ <i class="fas fa-clock text-purple-500"></i>
241
+ </div>
242
+ <div class="ml-3 text-sm text-gray-500">
243
+ <p>20 heures • 6 semaines</p>
244
+ </div>
245
+ </div>
246
+ <div class="flex items-center mt-2">
247
+ <div class="flex-shrink-0">
248
+ <i class="fas fa-certificate text-purple-500"></i>
249
+ </div>
250
+ <div class="ml-3 text-sm text-gray-500">
251
+ <p>Certification incluse</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ <div class="mt-6">
256
+ <span class="text-2xl font-bold text-gray-900">€897</span>
257
+ <span class="ml-2 text-sm text-gray-500 line-through">€1,197</span>
258
+ </div>
259
+ <div class="mt-6">
260
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-slow">
261
+ S'inscrire maintenant
262
+ </button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Formation 3 -->
268
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-slow">
269
+ <div class="p-6">
270
+ <div class="flex items-center">
271
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
272
+ <i class="fas fa-image text-white text-xl"></i>
273
+ </div>
274
+ <div class="ml-4">
275
+ <h3 class="text-lg font-medium text-gray-900">Génération d'Images IA</h3>
276
+ <p class="text-gray-500">Niveau: Débutant</p>
277
+ </div>
278
+ </div>
279
+ <p class="mt-4 text-gray-600">
280
+ Créez des visuels percutants avec Midjourney, DALL-E et Stable Diffusion pour vos campagnes publicitaires.
281
+ </p>
282
+ <div class="mt-6">
283
+ <div class="flex items-center">
284
+ <div class="flex-shrink-0">
285
+ <i class="fas fa-clock text-blue-500"></i>
286
+ </div>
287
+ <div class="ml-3 text-sm text-gray-500">
288
+ <p>8 heures • 3 semaines</p>
289
+ </div>
290
+ </div>
291
+ <div class="flex items-center mt-2">
292
+ <div class="flex-shrink-0">
293
+ <i class="fas fa-certificate text-blue-500"></i>
294
+ </div>
295
+ <div class="ml-3 text-sm text-gray-500">
296
+ <p>Certification incluse</p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ <div class="mt-6">
301
+ <span class="text-2xl font-bold text-gray-900">€397</span>
302
+ <span class="ml-2 text-sm text-gray-500 line-through">€597</span>
303
+ </div>
304
+ <div class="mt-6">
305
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-slow">
306
+ S'inscrire maintenant
307
+ </button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="mt-12 text-center">
314
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-slow">
315
+ Voir toutes nos formations
316
+ <i class="fas fa-arrow-right ml-2"></i>
317
+ </a>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Méthodologie Section -->
323
+ <section id="methodologie" class="py-16 bg-gray-50">
324
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
325
+ <div class="lg:text-center">
326
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
327
+ Notre <span class="gradient-text">Approche Unique</span>
328
+ </h2>
329
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
330
+ Une méthodologie éprouvée pour des résultats concrets
331
+ </p>
332
+ </div>
333
+
334
+ <div class="mt-20">
335
+ <div class="space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
336
+ <!-- Étape 1 -->
337
+ <div class="group relative">
338
+ <div class="absolute -left-4 top-1 h-8 w-8 rounded-full bg-indigo-100 group-hover:bg-indigo-200 transition-slow flex items-center justify-center">
339
+ <span class="text-indigo-600 font-bold">1</span>
340
+ </div>
341
+ <div class="ml-8">
342
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Diagnostic Personnalisé</h3>
343
+ <p class="text-gray-600">
344
+ Nous analysons vos besoins spécifiques pour adapter la formation à vos objectifs marketing et à votre niveau technique.
345
+ </p>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Étape 2 -->
350
+ <div class="group relative">
351
+ <div class="absolute -left-4 top-1 h-8 w-8 rounded-full bg-indigo-100 group-hover:bg-indigo-200 transition-slow flex items-center justify-center">
352
+ <span class="text-indigo-600 font-bold">2</span>
353
+ </div>
354
+ <div class="ml-8">
355
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Apprentissage par la Pratique</h3>
356
+ <p class="text-gray-600">
357
+ Nos formations sont 100% pratiques avec des cas concrets tirés de votre secteur d'activité.
358
+ </p>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Étape 3 -->
363
+ <div class="group relative">
364
+ <div class="absolute -left-4 top-1 h-8 w-8 rounded-full bg-indigo-100 group-hover:bg-indigo-200 transition-slow flex items-center justify-center">
365
+ <span class="text-indigo-600 font-bold">3</span>
366
+ </div>
367
+ <div class="ml-8">
368
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Accompagnement Post-Formation</h3>
369
+ <p class="text-gray-600">
370
+ 3 mois de suivi avec nos experts pour vous aider à implémenter ce que vous avez appris.
371
+ </p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="mt-16 bg-white shadow-xl rounded-lg overflow-hidden">
377
+ <div class="md:flex">
378
+ <div class="md:flex-shrink-0">
379
+ <img class="h-full w-full object-cover md:w-96" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Formation en groupe">
380
+ </div>
381
+ <div class="p-8">
382
+ <div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold">Témoignage client</div>
383
+ <p class="mt-2 text-gray-600 italic">
384
+ "La formation ChatGPT de TechUp a révolutionné notre façon de créer du contenu. Nous produisons maintenant 3 fois plus de contenu en moitié moins de temps, avec une qualité bien supérieure."
385
+ </p>
386
+ <div class="mt-6 flex items-center">
387
+ <div class="flex-shrink-0">
388
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Dupont">
389
+ </div>
390
+ <div class="ml-4">
391
+ <div class="text-base font-medium text-gray-900">Sarah Dupont</div>
392
+ <div class="text-sm text-gray-500">Directrice Marketing, LuxeParis</div>
393
+ </div>
394
+ </div>
395
+ <div class="mt-6">
396
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-slow">
397
+ Voir plus de témoignages
398
+ </button>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Équipe Section -->
408
+ <section id="equipe" class="py-16 bg-white">
409
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
410
+ <div class="text-center">
411
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
412
+ Notre <span class="gradient-text">Équipe d'Experts</span>
413
+ </h2>
414
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
415
+ Des professionnels du marketing et de l'IA passionnés par la transmission
416
+ </p>
417
+ </div>
418
+
419
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
420
+ <!-- Membre 1 -->
421
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-slow">
422
+ <div class="relative h-64">
423
+ <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Julie Martin">
424
+ <div class="absolute inset-0 bg-indigo-600 opacity-0 hover:opacity-20 transition-slow"></div>
425
+ </div>
426
+ <div class="p-6">
427
+ <h3 class="text-xl font-bold text-gray-900">Julie Martin</h3>
428
+ <p class="text-indigo-600">Expert en IA Conversationnelle</p>
429
+ <p class="mt-3 text-gray-600">
430
+ Ancienne responsable IA chez Google, Julie a formé plus de 500 professionnels aux chatbots avancés.
431
+ </p>
432
+ <div class="mt-4 flex space-x-4">
433
+ <a href="#" class="text-gray-400 hover:text-indigo-600 transition-slow">
434
+ <i class="fab fa-linkedin text-xl"></i>
435
+ </a>
436
+ <a href="#" class="text-gray-400 hover:text-indigo-600 transition-slow">
437
+ <i class="fab fa-twitter text-xl"></i>
438
+ </a>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Membre 2 -->
444
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-slow">
445
+ <div class="relative h-64">
446
+ <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Thomas Leroy">
447
+ <div class="absolute inset-0 bg-indigo-600 opacity-0 hover:opacity-20 transition-slow"></div>
448
+ </div>
449
+ <div class="p-6">
450
+ <h3 class="text-xl font-bold text-gray-900">Thomas Leroy</h3>
451
+ <p class="text-indigo-600">Data Scientist Marketing</p>
452
+ <p class="mt-3 text-gray-600">
453
+ Ex-Meta, Thomas spécialiste en analyse prédictive et optimisation des campagnes publicitaires.
454
+ </p>
455
+ <div class="mt-4 flex space-x-4">
456
+ <a href="#" class="text-gray-400 hover:text-indigo-600 transition-slow">
457
+ <i class="fab fa-linkedin text-xl"></i>
458
+ </a>
459
+ <a href="#" class="text-gray-400 hover:text-indigo-600 transition-slow">
460
+ <i class="fab fa-github text-xl"></i>
461
+ </a>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Membre 3 -->
467
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-slow">
468
+ <div class="relative h-64">
469
+ <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="Sophie Lambert">
470
+ <div class="absolute inset-0 bg-indigo-600 opacity-0 hover:opacity-20 transition-slow"></div>
471
+ </div>
472
+ <div class="p-6">
473
+ <h3 class="text-xl font-bold text-gray-900">Sophie Lambert</h3>
474
+ <p class="text-indigo-600">Spécialiste Génération d'Images</p>
475
+ <p class="mt-3 text-gray-600">
476
+ Designer UX/UI de formation, Sophie maîtrise toutes les techniques de génération d'images par IA.
477
+ </p>
478
+ <div class="mt-4 flex space-x-4">
479
+ <a href="#" class="text-gray-400 hover:text-indigo-600 transition-slow">
480
+ <i class="fab fa-dribbble text-xl"></i>
481
+ </a>
482
+ <a href="#" class="text-gray-400 hover:text-indigo-600 transition-slow">
483
+ <i class="fab fa-behance text-xl"></i>
484
+ </a>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <div class="mt-12 text-center">
491
+ <p class="text-gray-600 max-w-2xl mx-auto">
492
+ Notre équipe est composée exclusivement de professionnels en activité dans les plus grandes entreprises tech et agences marketing.
493
+ </p>
494
+ <button class="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition-slow">
495
+ Rencontrer notre équipe
496
+ </button>
497
+ </div>
498
+ </div>
499
+ </section>
500
+
501
+ <!-- CTA Section -->
502
+ <section class="bg-indigo-700">
503
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
504
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
505
+ <span class="block">Prêt à révolutionner votre marketing avec l'IA ?</span>
506
+ <span class="block text-indigo-200">Réservez un appel découverte gratuit.</span>
507
+ </h2>
508
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
509
+ <div class="inline-flex rounded-md shadow">
510
+ <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 transition-slow">
511
+ Prendre rendez-vous
512
+ </a>
513
+ </div>
514
+ <div class="ml-3 inline-flex rounded-md shadow">
515
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70 transition-slow">
516
+ Voir le programme complet
517
+ </a>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </section>
522
+
523
+ <!-- FAQ Section -->
524
+ <section class="bg-gray-50 py-16">
525
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
526
+ <div class="lg:text-center">
527
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
528
+ Questions <span class="gradient-text">Fréquentes</span>
529
+ </h2>
530
+ </div>
531
+
532
+ <div class="mt-12">
533
+ <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12">
534
+ <!-- Question 1 -->
535
+ <div class="bg-white p-6 rounded-lg shadow-sm">
536
+ <dt class="text-lg font-medium text-gray-900">
537
+ <button class="flex items-start justify-between w-full text-left" onclick="toggleFAQ(1)">
538
+ <span>Quel niveau technique faut-il pour suivre vos formations ?</span>
539
+ <span class="ml-6 h-7 flex items-center">
540
+ <i id="faq-icon-1" class="fas fa-plus text-indigo-600"></i>
541
+ </span>
542
+ </button>
543
+ </dt>
544
+ <dd id="faq-answer-1" class="mt-2 text-gray-600 hidden">
545
+ Nos formations sont conçues pour tous les niveaux. Nous proposons des parcours adaptés, des débutants complets aux experts techniques. Lors de l'inscription, nous évaluons votre niveau pour vous orienter vers la formation la plus adaptée.
546
+ </dd>
547
+ </div>
548
+
549
+ <!-- Question 2 -->
550
+ <div class="bg-white p-6 rounded-lg shadow-sm">
551
+ <dt class="text-lg font-medium text-gray-900">
552
+ <button class="flex items-start justify-between w-full text-left" onclick="toggleFAQ(2)">
553
+ <span>Les formations sont-elles en présentiel ou à distance ?</span>
554
+ <span class="ml-6 h-7 flex items-center">
555
+ <i id="faq-icon-2" class="fas fa-plus text-indigo-600"></i>
556
+ </span>
557
+ </button>
558
+ </dt>
559
+ <dd id="faq-answer-2" class="mt-2 text-gray-600 hidden">
560
+ Nous proposons les deux formats ! Nos formations à distance sont aussi complètes qu'en présentiel, avec des classes virtuelles en direct et un accompagnement personnalisé. Les formations en présentiel ont lieu dans nos locaux parisiens ou en entreprise.
561
+ </dd>
562
+ </div>
563
+
564
+ <!-- Question 3 -->
565
+ <div class="bg-white p-6 rounded-lg shadow-sm">
566
+ <dt class="text-lg font-medium text-gray-900">
567
+ <button class="flex items-start justify-between w-full text-left" onclick="toggleFAQ(3)">
568
+ <span>Proposez-vous des financements ou CPF ?</span>
569
+ <span class="ml-6 h-7 flex items-center">
570
+ <i id="faq-icon-3" class="fas fa-plus text-indigo-600"></i>
571
+ </span>
572
+ </button>
573
+ </dt>
574
+ <dd id="faq-answer-3" class="mt-2 text-gray-600 hidden">
575
+ Oui, toutes nos formations sont éligibles au CPF. Nous travaillons également avec les OPCO pour les financements en entreprise. Notre équipe administrative vous accompagne dans toutes les démarches.
576
+ </dd>
577
+ </div>
578
+
579
+ <!-- Question 4 -->
580
+ <div class="bg-white p-6 rounded-lg shadow-sm">
581
+ <dt class="text-lg font-medium text-gray-900">
582
+ <button class="flex items-start justify-between w-full text-left" onclick="toggleFAQ(4)">
583
+ <span>Quelle est la différence avec les formations en ligne gratuites ?</span>
584
+ <span class="ml-6 h-7 flex items-center">
585
+ <i id="faq-icon-4" class="fas fa-plus text-indigo-600"></i>
586
+ </span>
587
+ </button>
588
+ </dt>
589
+ <dd id="faq-answer-4" class="mt-2 text-gray-600 hidden">
590
+ Nos formations vont bien au-delà des tutos gratuits : accompagnement personnalisé, cas pratiques concrets, certifications reconnues, communauté d'experts et suivi post-formation. Nos taux de satisfaction et de transformation professionnelle parlent d'eux-mêmes (97% de satisfaction).
591
+ </dd>
592
+ </div>
593
+ </dl>
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ <!-- Contact Section -->
599
+ <section id="contact" class="py-16 bg-white">
600
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
601
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
602
+ <div class="max-w-lg mx-auto lg:max-w-none">
603
+ <div class="text-center lg:text-left">
604
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
605
+ Contactez-<span class="gradient-text">nous</span>
606
+ </h2>
607
+ <p class="mt-4 text-lg text-gray-500">
608
+ Vous avez des questions sur nos formations ? Notre équipe est là pour vous répondre sous 24h.
609
+ </p>
610
+ <div class="mt-8">
611
+ <div class="flex items-center">
612
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
613
+ <i class="fas fa-phone text-indigo-600"></i>
614
+ </div>
615
+ <div class="ml-4 text-base text-gray-500">
616
+ <p>+33 1 23 45 67 89</p>
617
+ </div>
618
+ </div>
619
+ <div class="flex items-center mt-3">
620
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
621
+ <i class="fas fa-envelope text-indigo-600"></i>
622
+ </div>
623
+ <div class="ml-4 text-base text-gray-500">
624
+ <p>contact@techup-formation.com</p>
625
+ </div>
626
+ </div>
627
+ <div class="flex items-center mt-3">
628
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
629
+ <i class="fas fa-map-marker-alt text-indigo-600"></i>
630
+ </div>
631
+ <div class="ml-4 text-base text-gray-500">
632
+ <p>15 Rue de la Tech, 75015 Paris</p>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ <div class="mt-8 lg:mt-0">
639
+ <div class="bg-white shadow-xl rounded-lg overflow-hidden">
640
+ <div class="px-6 py-5 border-b border-gray-200">
641
+ <h3 class="text-lg font-medium text-gray-900">Envoyez-nous un message</h3>
642
+ </div>
643
+ <div class="px-6 py-5">
644
+ <form>
645
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
646
+ <div>
647
+ <label for="first-name" class="block text-sm font-medium text-gray-700">Prénom</label>
648
+ <div class="mt-1">
649
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
650
+ </div>
651
+ </div>
652
+
653
+ <div>
654
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Nom</label>
655
+ <div class="mt-1">
656
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
657
+ </div>
658
+ </div>
659
+
660
+ <div class="sm:col-span-2">
661
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
662
+ <div class="mt-1">
663
+ <input id="email" name="email" type="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
664
+ </div>
665
+ </div>
666
+
667
+ <div class="sm:col-span-2">
668
+ <label for="phone" class="block text-sm font-medium text-gray-700">Téléphone</label>
669
+ <div class="mt-1">
670
+ <input type="text" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
671
+ </div>
672
+ </div>
673
+
674
+ <div class="sm:col-span-2">
675
+ <label for="subject" class="block text-sm font-medium text-gray-700">Sujet</label>
676
+ <div class="mt-1">
677
+ <select id="subject" name="subject" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
678
+ <option>Demande d'information</option>
679
+ <option>Devis entreprise</option>
680
+ <option>Financement CPF</option>
681
+ <option>Autre demande</option>
682
+ </select>
683
+ </div>
684
+ </div>
685
+
686
+ <div class="sm:col-span-2">
687
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
688
+ <div class="mt-1">
689
+ <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"></textarea>
690
+ </div>
691
+ </div>
692
+ </div>
693
+
694
+ <div class="mt-6">
695
+ <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-slow">
696
+ Envoyer le message
697
+ </button>
698
+ </div>
699
+ </form>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </section>
706
+
707
+ <!-- Footer -->
708
+ <footer class="bg-gray-900">
709
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
710
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
711
+ <div class="space-y-8 xl:col-span-1">
712
+ <div class="flex items-center">
713
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl">TU</div>
714
+ <span class="ml-2 text-xl font-bold text-white">Tech<span class="text-indigo-400">Up</span></span>
715
+ </div>
716
+ <p class="text-gray-300 text-base">
717
+ L'agence de formation qui vous donne les superpouvoirs de l'IA pour transformer votre marketing digital.
718
+ </p>
719
+ <div class="flex space-x-6">
720
+ <a href="#" class="text-gray-400 hover:text-white transition-slow">
721
+ <i class="fab fa-facebook-f text-xl"></i>
722
+ </a>
723
+ <a href="#" class="text-gray-400 hover:text-white transition-slow">
724
+ <i class="fab fa-twitter text-xl"></i>
725
+ </a>
726
+ <a href="#" class="text-gray-400 hover:text-white transition-slow">
727
+ <i class="fab fa-instagram text-xl"></i>
728
+ </a>
729
+ <a href="#" class="text-gray-400 hover:text-white transition-slow">
730
+ <i class="fab fa-linkedin-in text-xl"></i>
731
+ </a>
732
+ </div>
733
+ </div>
734
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
735
+ <div class="md:grid md:grid-cols-2 md:gap-8">
736
+ <div>
737
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Formations</h3>
738
+ <ul class="mt-4 space-y-4">
739
+ <li>
740
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">ChatGPT Expert</a>
741
+ </li>
742
+ <li>
743
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Data Science Marketing</a>
744
+ </li>
745
+ <li>
746
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Génération d'Images IA</a>
747
+ </li>
748
+ <li>
749
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Toutes nos formations</a>
750
+ </li>
751
+ </ul>
752
+ </div>
753
+ <div class="mt-12 md:mt-0">
754
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Entreprise</h3>
755
+ <ul class="mt-4 space-y-4">
756
+ <li>
757
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Formations sur mesure</a>
758
+ </li>
759
+ <li>
760
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Intervention en entreprise</a>
761
+ </li>
762
+ <li>
763
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Devis personnalisé</a>
764
+ </li>
765
+ <li>
766
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Financements OPCO</a>
767
+ </li>
768
+ </ul>
769
+ </div>
770
+ </div>
771
+ <div class="md:grid md:grid-cols-2 md:gap-8">
772
+ <div>
773
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Ressources</h3>
774
+ <ul class="mt-4 space-y-4">
775
+ <li>
776
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Blog</a>
777
+ </li>
778
+ <li>
779
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Guides gratuits</a>
780
+ </li>
781
+ <li>
782
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Webinaires</a>
783
+ </li>
784
+ <li>
785
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">FAQ</a>
786
+ </li>
787
+ </ul>
788
+ </div>
789
+ <div class="mt-12 md:mt-0">
790
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Légal</h3>
791
+ <ul class="mt-4 space-y-4">
792
+ <li>
793
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Mentions légales</a>
794
+ </li>
795
+ <li>
796
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">CGV</a>
797
+ </li>
798
+ <li>
799
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Politique de confidentialité</a>
800
+ </li>
801
+ <li>
802
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-slow">Cookies</a>
803
+ </li>
804
+ </ul>
805
+ </div>
806
+ </div>
807
+ </div>
808
+ </div>
809
+ <div class="mt-12 border-t border-gray-800 pt-8">
810
+ <p class="text-base text-gray-400 text-center">
811
+ &copy; 2023 TechUp Formations. Tous droits réservés.
812
+ </p>
813
+ </div>
814
+ </div>
815
+ </footer>
816
+
817
+ <script>
818
+ // Mobile menu toggle
819
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
820
+ const menu = document.getElementById('mobile-menu');
821
+ menu.classList.toggle('hidden');
822
+ });
823
+
824
+ // FAQ toggle function
825
+ function toggleFAQ(id) {
826
+ const answer = document.getElementById(`faq-answer-${id}`);
827
+ const icon = document.getElementById(`faq-icon-${id}`);
828
+
829
+ answer.classList.toggle('hidden');
830
+
831
+ if (icon.classList.contains('fa-plus')) {
832
+ icon.classList.remove('fa-plus');
833
+ icon.classList.add('fa-minus');
834
+ } else {
835
+ icon.classList.remove('fa-minus');
836
+ icon.classList.add('fa-plus');
837
+ }
838
+ }
839
+
840
+ // Smooth scrolling for anchor links
841
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
842
+ anchor.addEventListener('click', function (e) {
843
+ e.preventDefault();
844
+
845
+ const targetId = this.getAttribute('href');
846
+ const targetElement = document.querySelector(targetId);
847
+
848
+ if (targetElement) {
849
+ targetElement.scrollIntoView({
850
+ behavior: 'smooth'
851
+ });
852
+
853
+ // Close mobile menu if open
854
+ const mobileMenu = document.getElementById('mobile-menu');
855
+ if (!mobileMenu.classList.contains('hidden')) {
856
+ mobileMenu.classList.add('hidden');
857
+ }
858
+ }
859
+ });
860
+ });
861
+
862
+ // Add shadow on scroll for navbar
863
+ window.addEventListener('scroll', function() {
864
+ const nav = document.querySelector('nav');
865
+ if (window.scrollY > 10) {
866
+ nav.classList.add('shadow-lg');
867
+ } else {
868
+ nav.classList.remove('shadow-lg');
869
+ }
870
+ });
871
+ </script>
872
+ <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=Adamchab/agence-marketing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
873
+ </html>