Hugging Face's logo

Spaces:
gse74HF
/
premiersite
Running

App Files Community
gse74HF commited on
Commit
83df43d
·
verified ·
1 Parent(s): 4ac7bf8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +496 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Premiersite
3
- emoji: 🐢
4
- colorFrom: purple
5
- colorTo: purple
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: premiersite
3
+ emoji: 🐳
4
+ colorFrom: green
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,496 @@
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>NoCode Agency - Automatisation No-Code</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
+ /* Custom animations */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .animate-fadeIn {
17
+ animation: fadeIn 0.8s ease-out forwards;
18
+ }
19
+
20
+ .gradient-bg {
21
+ background: linear-gradient(135deg, #6b21a8 0%, #1e40af 100%);
22
+ }
23
+
24
+ .hover-scale {
25
+ transition: transform 0.3s ease;
26
+ }
27
+
28
+ .hover-scale:hover {
29
+ transform: scale(1.03);
30
+ }
31
+
32
+ /* Custom scrollbar */
33
+ ::-webkit-scrollbar {
34
+ width: 8px;
35
+ }
36
+
37
+ ::-webkit-scrollbar-track {
38
+ background: #f1f1f1;
39
+ }
40
+
41
+ ::-webkit-scrollbar-thumb {
42
+ background: #6b21a8;
43
+ border-radius: 4px;
44
+ }
45
+
46
+ ::-webkit-scrollbar-thumb:hover {
47
+ background: #7e22ce;
48
+ }
49
+
50
+ /* Custom font */
51
+ body {
52
+ font-family: 'Inter', sans-serif;
53
+ }
54
+
55
+ /* Form input focus */
56
+ .form-input:focus {
57
+ outline: none;
58
+ box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5);
59
+ }
60
+ </style>
61
+ <script>
62
+ tailwind.config = {
63
+ theme: {
64
+ extend: {
65
+ colors: {
66
+ primary: {
67
+ 600: '#7c3aed',
68
+ 700: '#6d28d9',
69
+ 800: '#5b21b6',
70
+ 900: '#4c1d95'
71
+ },
72
+ secondary: {
73
+ 600: '#2563eb',
74
+ 700: '#1d4ed8',
75
+ 800: '#1e40af',
76
+ 900: '#1e3a8a'
77
+ }
78
+ },
79
+ fontFamily: {
80
+ sans: ['Inter', 'sans-serif']
81
+ }
82
+ }
83
+ }
84
+ }
85
+ </script>
86
+ </head>
87
+ <body class="font-sans bg-gray-50 text-gray-800">
88
+ <!-- Navigation -->
89
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
90
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91
+ <div class="flex justify-between h-16">
92
+ <div class="flex items-center">
93
+ <div class="flex-shrink-0 flex items-center">
94
+ <img class="h-8 w-auto" src="https://newprocessus.nocode-automatisation.com/wp-content/uploads/2023/03/cropped-logo-new-processus-32x32.png" alt="NoCode Agency">
95
+ <span class="ml-2 text-xl font-bold text-primary-900">NoCode Agency</span>
96
+ </div>
97
+ </div>
98
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
99
+ <a href="#" class="text-primary-900 hover:text-primary-700 px-3 py-2 font-medium">Accueil</a>
100
+ <a href="#services" class="text-gray-600 hover:text-primary-700 px-3 py-2 font-medium">Services</a>
101
+ <a href="#about" class="text-gray-600 hover:text-primary-700 px-3 py-2 font-medium">À propos</a>
102
+ <a href="#contact" class="text-gray-600 hover:text-primary-700 px-3 py-2 font-medium">Contact</a>
103
+ </div>
104
+ <div class="-mr-2 flex items-center md:hidden">
105
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" onclick="toggleMobileMenu()">
106
+ <span class="sr-only">Open main menu</span>
107
+ <i class="fas fa-bars text-xl"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Mobile menu -->
114
+ <div class="md:hidden hidden" id="mobile-menu">
115
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white">
116
+ <a href="#" class="block px-3 py-2 text-base font-medium text-primary-900 bg-primary-50 rounded-md">Accueil</a>
117
+ <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-primary-700 hover:bg-primary-50 rounded-md">Services</a>
118
+ <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-primary-700 hover:bg-primary-50 rounded-md">À propos</a>
119
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-primary-700 hover:bg-primary-50 rounded-md">Contact</a>
120
+ </div>
121
+ </div>
122
+ </nav>
123
+
124
+ <!-- Hero Section -->
125
+ <header class="gradient-bg text-white">
126
+ <div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
127
+ <div class="text-center animate-fadeIn">
128
+ <h1 class="text-4xl md:text-6xl font-extrabold mb-6">Automatisez vos processus métiers</h1>
129
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Votre partenaire en automatisation. J'aide les entreprises à transformer leurs processus grâce à des solutions no-code innovantes et personnalisées, sans nécessiter de compétences en programmation.</p>
130
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
131
+ <a href="#contact" class="bg-white text-primary-900 hover:bg-primary-100 px-8 py-4 rounded-lg font-bold text-lg transition duration-300 shadow-lg hover-scale">Demander un devis</a>
132
+ <a href="#services" class="bg-transparent border-2 border-white hover:bg-white hover:text-primary-900 px-8 py-4 rounded-lg font-bold text-lg transition duration-300 shadow-lg hover-scale">Nos services</a>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </header>
137
+
138
+ <!-- Services Section -->
139
+ <section id="services" class="py-20 bg-white">
140
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
141
+ <div class="text-center mb-16">
142
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Services</h2>
143
+ <div class="w-24 h-1 bg-primary-600 mx-auto mb-6"></div>
144
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Je propose des solutions sur mesure pour automatiser vos processus métiers sans avoir besoin de compétences techniques.</p>
145
+ </div>
146
+
147
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
148
+ <!-- Service 1 -->
149
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-xl transition duration-300 hover-scale">
150
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
151
+ <i class="fas fa-robot text-3xl text-primary-600"></i>
152
+ </div>
153
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Services No-Code</h3>
154
+ <p class="text-gray-600">Transformez votre entreprise avec nos solutions d'automatisation sans code adaptées à vos besoins.</p>
155
+ </div>
156
+
157
+ <!-- Service 2 -->
158
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-xl transition duration-300 hover-scale">
159
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
160
+ <i class="fas fa-mobile-alt text-3xl text-primary-600"></i>
161
+ </div>
162
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Applications sur-mesure</h3>
163
+ <p class="text-gray-600">Développez des applications adaptées à votre activité sans écrire une seule ligne de code.</p>
164
+ </div>
165
+
166
+ <!-- Service 3 -->
167
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-xl transition duration-300 hover-scale">
168
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
169
+ <i class="fas fa-cogs text-3xl text-primary-600"></i>
170
+ </div>
171
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Automatisation personnalisée</h3>
172
+ <p class="text-gray-600">Créez des workflows uniques et optimisez vos processus sans compétences techniques grâce à notre expertise.</p>
173
+ </div>
174
+
175
+ <!-- Service 4 -->
176
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-xl transition duration-300 hover-scale">
177
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
178
+ <i class="fas fa-exchange-alt text-3xl text-primary-600"></i>
179
+ </div>
180
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Intégration d'Applications</h3>
181
+ <p class="text-gray-600">Je connecte vos différentes applications métiers pour fluidifier l'échange d'informations et éliminer les saisies manuelles.</p>
182
+ </div>
183
+
184
+ <!-- Service 5 -->
185
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-xl transition duration-300 hover-scale">
186
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
187
+ <i class="fas fa-users-cog text-3xl text-primary-600"></i>
188
+ </div>
189
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Processus Collaboratifs</h3>
190
+ <p class="text-gray-600">J'optimise vos workflows collaboratifs pour améliorer la communication entre équipes et accélérer l'exécution des tâches.</p>
191
+ </div>
192
+
193
+ <!-- Service 6 -->
194
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-xl transition duration-300 hover-scale">
195
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
196
+ <i class="fas fa-graduation-cap text-3xl text-primary-600"></i>
197
+ </div>
198
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Formation No-Code</h3>
199
+ <p class="text-gray-600">Je forme vos équipes à l'utilisation des outils no-code pour qu'elles puissent créer et maintenir leurs propres solutions.</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- About Section -->
206
+ <section id="about" class="py-20 bg-gray-50">
207
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
208
+ <div class="text-center mb-16">
209
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">À propos</h2>
210
+ <div class="w-24 h-1 bg-primary-600 mx-auto mb-6"></div>
211
+ </div>
212
+
213
+ <div class="lg:flex items-center gap-12">
214
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
215
+ <img src="https://newprocessus.nocode-automatisation.com/wp-content/uploads/2023/03/equipe-new-processus-1024x683.jpg" alt="NoCode Agency" class="rounded-xl shadow-xl w-full h-auto">
216
+ </div>
217
+ <div class="lg:w-1/2">
218
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Ma mission : rendre l'intelligence artificielle accessible à tous</h3>
219
+ <p class="text-gray-600 mb-6">Je crois profondément que la technologie doit servir l'humain, et non l'inverse. C'est pourquoi j'ai créé une agence différente, centrée sur vos besoins réels et déterminée à vous libérer des tâches chronophages pour vous recentrer sur ce qui compte vraiment.</p>
220
+
221
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Mon histoire</h3>
222
+ <p class="text-gray-600 mb-6">Fondée en 2025 par un expert passionné d'automatisation et d'intelligence artificielle, mon agence est née d'un constat simple mais frappant : les petites et moyennes entreprises passent un temps considérable sur des tâches répétitives alors que des solutions technologiques puissantes existent déjà. J'ai alors décidé de mettre mon expertise au service d'une mission claire : démocratiser l'accès à l'IA et aux outils d'automatisation sans code, avec une approche résolument humaine et accessible.</p>
223
+ <p class="text-gray-600 mb-6">L'hyperautomatisation à portée de tous - voilà ce qui me motive chaque jour.</p>
224
+
225
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Mes valeurs</h3>
226
+ <div class="space-y-4">
227
+ <div class="flex items-start">
228
+ <div class="flex-shrink-0 mt-1">
229
+ <i class="fas fa-check-circle text-primary-600"></i>
230
+ </div>
231
+ <p class="ml-3 text-gray-600 font-medium">Innovation constante : je teste en permanence les derniers outils et technologies pour vous offrir les solutions les plus performantes</p>
232
+ </div>
233
+ <div class="flex items-start">
234
+ <div class="flex-shrink-0 mt-1">
235
+ <i class="fas fa-check-circle text-primary-600"></i>
236
+ </div>
237
+ <p class="ml-3 text-gray-600 font-medium">Simplicité radicale : je transforme la complexité technique en solutions simples à comprendre et à utiliser</p>
238
+ </div>
239
+ <div class="flex items-start">
240
+ <div class="flex-shrink-0 mt-1">
241
+ <i class="fas fa-check-circle text-primary-600"></i>
242
+ </div>
243
+ <p class="ml-3 text-gray-600 font-medium">Bienveillance et pédagogie : j'accompagne chaque client avec patience, sans jamais juger son niveau technique initial</p>
244
+ </div>
245
+ <div class="flex items-start">
246
+ <div class="flex-shrink-0 mt-1">
247
+ <i class="fas fa-check-circle text-primary-600"></i>
248
+ </div>
249
+ <p class="ml-3 text-gray-600 font-medium">Excellence opérationnelle : je ne me contente pas de solutions qui fonctionnent - je vise l'excellence</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Contact Section -->
258
+ <section id="contact" class="py-20 bg-white">
259
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
260
+ <div class="text-center mb-16">
261
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Contactez-moi</h2>
262
+ <div class="w-24 h-1 bg-primary-600 mx-auto mb-6"></div>
263
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Prêt à automatiser vos processus métiers? Remplissez le formulaire ci-dessous et je vous recontacterai rapidement.</p>
264
+ </div>
265
+
266
+ <div class="max-w-4xl mx-auto">
267
+ <form id="contactForm" class="grid grid-cols-1 md:grid-cols-2 gap-8">
268
+ <div>
269
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet*</label>
270
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-600 focus:border-transparent form-input">
271
+ </div>
272
+ <div>
273
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email*</label>
274
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-600 focus:border-transparent form-input">
275
+ </div>
276
+ <div>
277
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Entreprise</label>
278
+ <input type="text" id="company" name="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-600 focus:border-transparent form-input">
279
+ </div>
280
+ <div>
281
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
282
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-600 focus:border-transparent form-input">
283
+ </div>
284
+ <div class="md:col-span-2">
285
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Décrivez votre besoin*</label>
286
+ <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-600 focus:border-transparent form-input"></textarea>
287
+ </div>
288
+ <div class="md:col-span-2">
289
+ <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 shadow-lg hover-scale">
290
+ Envoyer la demande
291
+ </button>
292
+ </div>
293
+ <div id="form-message" class="md:col-span-2 hidden"></div>
294
+ </form>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- FAQ Section -->
300
+ <section class="py-20 bg-gray-50">
301
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
+ <div class="text-center mb-16">
303
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Questions fréquentes</h2>
304
+ <div class="w-24 h-1 bg-primary-600 mx-auto mb-6"></div>
305
+ </div>
306
+
307
+ <div class="max-w-4xl mx-auto space-y-6">
308
+ <!-- FAQ Item 1 -->
309
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
310
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(1)">
311
+ <h3 class="text-lg font-medium text-gray-900">Qu'est-ce que le no-code?</h3>
312
+ <i class="fas fa-chevron-down text-primary-600 transition-transform duration-300" id="faq-icon-1"></i>
313
+ </button>
314
+ <div class="hidden px-6 pb-6 pt-0" id="faq-content-1">
315
+ <p class="text-gray-600">Le no-code est une approche de développement qui permet de créer des applications et d'automatiser des processus sans avoir à écrire du code traditionnel. Grâce à des plateformes visuelles et des interfaces glisser-déposer, les utilisateurs peuvent concevoir des solutions logicielles complexes sans compétences techniques particulières.</p>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- FAQ Item 2 -->
320
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
321
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(2)">
322
+ <h3 class="text-lg font-medium text-gray-900">Quels types de processus peut-on automatiser?</h3>
323
+ <i class="fas fa-chevron-down text-primary-600 transition-transform duration-300" id="faq-icon-2"></i>
324
+ </button>
325
+ <div class="hidden px-6 pb-6 pt-0" id="faq-content-2">
326
+ <p class="text-gray-600">Presque tous les processus répétitifs peuvent être automatisés : gestion des emails entrants, traitement des commandes, rapprochement de données entre systèmes, génération de rapports, notifications et alertes, workflows d'approbation, gestion des contacts, suivi des projets, et bien plus encore. J'analyse vos processus spécifiques pour déterminer les meilleures opportunités d'automatisation.</p>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- FAQ Item 3 -->
331
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
332
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(3)">
333
+ <h3 class="text-lg font-medium text-gray-900">Combien de temps prend la mise en place d'une automatisation?</h3>
334
+ <i class="fas fa-chevron-down text-primary-600 transition-transform duration-300" id="faq-icon-3"></i>
335
+ </button>
336
+ <div class="hidden px-6 pb-6 pt-0" id="faq-content-3">
337
+ <p class="text-gray-600">Le temps de mise en œuvre varie selon la complexité du processus. Les automatisations simples peuvent être mises en place en quelques jours, tandis que des solutions plus complexes intégrant plusieurs systèmes peuvent prendre quelques semaines. Mon approche consiste à livrer rapidement une première version fonctionnelle que j'améliore ensuite par itérations.</p>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- FAQ Item 4 -->
342
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
343
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(4)">
344
+ <h3 class="text-lg font-medium text-gray-900">Quels sont les outils que vous utilisez?</h3>
345
+ <i class="fas fa-chevron-down text-primary-600 transition-transform duration-300" id="faq-icon-4"></i>
346
+ </button>
347
+ <div class="hidden px-6 pb-6 pt-0" id="faq-content-4">
348
+ <p class="text-gray-600">J'utilise les meilleures plateformes no-code du marché selon les besoins : Make (anciennement Integromat) pour les automatisations complexes, Airtable pour la gestion des données, Bubble pour les applications web, Zapier pour les intégrations simples, Glide pour les applications mobiles, et bien d'autres. Je sélectionne toujours l'outil le plus adapté à votre cas d'usage spécifique.</p>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- FAQ Item 5 -->
353
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
354
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(5)">
355
+ <h3 class="text-lg font-medium text-gray-900">Puis-je modifier les automatisations moi-même après leur mise en place?</h3>
356
+ <i class="fas fa-chevron-down text-primary-600 transition-transform duration-300" id="faq-icon-5"></i>
357
+ </button>
358
+ <div class="hidden px-6 pb-6 pt-0" id="faq-content-5">
359
+ <p class="text-gray-600">Absolument! L'un des grands avantages du no-code est que les solutions que je crée sont modifiables par vous-même sans compétences techniques. Je vous fournis une documentation claire et peux également vous former à l'utilisation des plateformes. Pour les modifications plus complexes, je reste disponible en support.</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- CTA Section -->
367
+ <section class="py-16 gradient-bg text-white">
368
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
369
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à transformer votre entreprise?</h2>
370
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Contactez-moi dès aujourd'hui pour discuter de vos besoins en automatisation et découvrir comment je peux vous aider à gagner en efficacité.</p>
371
+ <a href="#contact" class="inline-block bg-white text-primary-900 hover:bg-primary-100 px-8 py-4 rounded-lg font-bold text-lg transition duration-300 shadow-lg hover-scale">Demander un devis gratuit</a>
372
+ </div>
373
+ </section>
374
+
375
+ <!-- Footer -->
376
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
377
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
378
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
379
+ <div>
380
+ <div class="flex items-center mb-4">
381
+ <img class="h-8 w-auto" src="https://newprocessus.nocode-automatisation.com/wp-content/uploads/2023/03/cropped-logo-new-processus-32x32.png" alt="NoCode Agency">
382
+ <span class="ml-2 text-xl font-bold">NoCode Agency</span>
383
+ </div>
384
+ <p class="text-gray-400">Spécialiste en automatisation no-code pour les entreprises. Je vous aide à gagner en productivité grâce à des solutions sur mesure.</p>
385
+ <div class="flex space-x-4 mt-4">
386
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
387
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
388
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
389
+ </div>
390
+ </div>
391
+ <div>
392
+ <h3 class="text-lg font-semibold mb-4">Services</h3>
393
+ <ul class="space-y-2">
394
+ <li><a href="#services" class="text-gray-400 hover:text-white">Automatisation No-Code</a></li>
395
+ <li><a href="#services" class="text-gray-400 hover:text-white">Applications sur-mesure</a></li>
396
+ <li><a href="#services" class="text-gray-400 hover:text-white">Intégration d'applications</a></li>
397
+ <li><a href="#services" class="text-gray-400 hover:text-white">Formation No-Code</a></li>
398
+ </ul>
399
+ </div>
400
+ <div>
401
+ <h3 class="text-lg font-semibold mb-4">Liens utiles</h3>
402
+ <ul class="space-y-2">
403
+ <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
404
+ <li><a href="#about" class="text-gray-400 hover:text-white">À propos</a></li>
405
+ <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
406
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
407
+ </ul>
408
+ </div>
409
+ <div>
410
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
411
+ <ul class="space-y-2 text-gray-400">
412
+ <li class="flex items-start">
413
+ <i class="fas fa-envelope mt-1 mr-3"></i>
414
+ <span>contact@nocode-agency.com</span>
415
+ </li>
416
+ <li class="flex items-start">
417
+ <i class="fas fa-phone-alt mt-1 mr-3"></i>
418
+ <span>+33 6 12 34 56 78</span>
419
+ </li>
420
+ <li class="flex items-start">
421
+ <i class="fas fa-map-marker-alt mt-1 mr-3"></i>
422
+ <span>Paris, France</span>
423
+ </li>
424
+ </ul>
425
+ </div>
426
+ </div>
427
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
428
+ <p>&copy; 2023 NoCode Agency. Tous droits réservés.</p>
429
+ </div>
430
+ </div>
431
+ </footer>
432
+
433
+ <script>
434
+ // Toggle mobile menu
435
+ function toggleMobileMenu() {
436
+ const menu = document.getElementById('mobile-menu');
437
+ menu.classList.toggle('hidden');
438
+ }
439
+
440
+ // Toggle FAQ items
441
+ function toggleFAQ(id) {
442
+ const content = document.getElementById(`faq-content-${id}`);
443
+ const icon = document.getElementById(`faq-icon-${id}`);
444
+
445
+ content.classList.toggle('hidden');
446
+ icon.classList.toggle('transform');
447
+ icon.classList.toggle('rotate-180');
448
+ }
449
+
450
+ // Handle form submission
451
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
452
+ e.preventDefault();
453
+
454
+ const form = e.target;
455
+ const formData = {
456
+ name: form.name.value,
457
+ email: form.email.value,
458
+ company: form.company.value,
459
+ phone: form.phone.value,
460
+ message: form.message.value
461
+ };
462
+
463
+ const webhookUrl = 'https://hook.eu2.make.com/uafczczpl92iw43snw2wfqk34whbxvmu';
464
+
465
+ fetch(webhookUrl, {
466
+ method: 'POST',
467
+ headers: {
468
+ 'Content-Type': 'application/json',
469
+ },
470
+ body: JSON.stringify(formData)
471
+ })
472
+ .then(response => {
473
+ if (response.ok) {
474
+ // Show success message
475
+ const messageDiv = document.getElementById('form-message');
476
+ messageDiv.textContent = 'Votre demande a bien été envoyée. Je vous recontacterai rapidement.';
477
+ messageDiv.classList.remove('hidden', 'text-red-600');
478
+ messageDiv.classList.add('text-green-600');
479
+
480
+ // Reset form
481
+ form.reset();
482
+ } else {
483
+ throw new Error('Network response was not ok');
484
+ }
485
+ })
486
+ .catch(error => {
487
+ console.error('Error:', error);
488
+ const messageDiv = document.getElementById('form-message');
489
+ messageDiv.textContent = 'Une erreur est survenue lors de l\'envoi de votre demande. Veuillez réessayer plus tard.';
490
+ messageDiv.classList.remove('hidden', 'text-green-600');
491
+ messageDiv.classList.add('text-red-600');
492
+ });
493
+ });
494
+ </script>
495
+ <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=gse74HF/premiersite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
496
+ </html>