Hugging Face's logo

Spaces:
docto41
/
hyper-speed-domains
Running

App Files Community
docto41 commited on
Commit
ac6947c
·
verified ·
1 Parent(s): 0b6ac1c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1146 -19
  3. prompts.txt +9 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hyper Speed Domains
3
- emoji: 📉
4
- colorFrom: indigo
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: hyper-speed-domains
3
+ emoji: 🐳
4
+ colorFrom: pink
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,1146 @@
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>HyperSpeed Web | Automatisation Infrastructure Complète</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
19
+ }
20
+
21
+ .card-hover {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+
30
+ .pulse-animation {
31
+ animation: pulse 2s infinite;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0.7); }
36
+ 70% { box-shadow: 0 0 0 10px rgba(74, 108, 247, 0); }
37
+ 100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0); }
38
+ }
39
+
40
+ .progress-bar {
41
+ height: 4px;
42
+ background: linear-gradient(90deg, #4a6cf7 0%, #6e8efb 100%);
43
+ animation: progress 0.5s ease-out;
44
+ }
45
+
46
+ @keyframes progress {
47
+ from { width: 0%; }
48
+ to { width: 100%; }
49
+ }
50
+
51
+ .automation-process {
52
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
53
+ border-left: 4px solid #4a6cf7;
54
+ }
55
+
56
+ .hero-image {
57
+ background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
58
+ background-size: cover;
59
+ background-position: center;
60
+ background-blend-mode: overlay;
61
+ background-color: rgba(74, 108, 247, 0.8);
62
+ }
63
+
64
+ .tech-image {
65
+ background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
66
+ background-size: cover;
67
+ background-position: center;
68
+ }
69
+
70
+ .network-image {
71
+ background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');
72
+ background-size: cover;
73
+ background-position: center;
74
+ }
75
+
76
+ .dashboard-image {
77
+ background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
78
+ background-size: cover;
79
+ background-position: center;
80
+ }
81
+ </style>
82
+ </head>
83
+ <body>
84
+ <!-- Navigation -->
85
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="flex justify-between h-16">
88
+ <div class="flex items-center">
89
+ <div class="flex-shrink-0 flex items-center">
90
+ <i class="fas fa-bolt text-blue-500 text-2xl mr-2"></i>
91
+ <span class="text-xl font-bold text-gray-900">HyperSpeed Web</span>
92
+ </div>
93
+ </div>
94
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
95
+ <a href="#features" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Fonctionnalités</a>
96
+ <a href="#technology" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Technologie</a>
97
+ <a href="#pricing" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Tarifs</a>
98
+ <a href="#contact" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
99
+ </div>
100
+ <div class="hidden md:ml-6 md:flex md:items-center">
101
+ <button class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Connexion</button>
102
+ <button class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">Essai Gratuit</button>
103
+ </div>
104
+ <div class="-mr-2 flex items-center md:hidden">
105
+ <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">
106
+ <span class="sr-only">Menu</span>
107
+ <i class="fas fa-bars"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Mobile menu -->
114
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
115
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
116
+ <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Fonctionnalités</a>
117
+ <a href="#technology" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Technologie</a>
118
+ <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Tarifs</a>
119
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a>
120
+ <div class="pt-4 border-t">
121
+ <button class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Connexion</button>
122
+ <button class="mt-2 block w-full px-3 py-2 text-center text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md">Essai Gratuit</button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </nav>
127
+
128
+ <!-- Hero Section -->
129
+ <div class="hero-image text-white">
130
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
131
+ <div class="text-center">
132
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
133
+ Infrastructure Web Automatisée en 1 Clic
134
+ </h1>
135
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
136
+ Domaine, SSL, DNS et intégration Google - déployés automatiquement en secondes
137
+ </p>
138
+ <div class="mt-10">
139
+ <button id="launch-automation" class="pulse-animation inline-flex items-center px-8 py-4 border border-transparent text-xl font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-gray-100">
140
+ <i class="fas fa-bolt mr-2"></i> Lancer l'Automatisation
141
+ </button>
142
+ </div>
143
+ <div class="mt-8 flex justify-center">
144
+ <div class="flex items-center">
145
+ <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-blue-500 text-white">
146
+ <i class="fas fa-check"></i>
147
+ </div>
148
+ <div class="ml-3">
149
+ <p class="text-sm font-medium">Propagation mondiale en <span class="font-bold">1.2s</span> en moyenne</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Automation Process -->
158
+ <div id="automation-process" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 hidden">
159
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
160
+ <div class="p-6">
161
+ <h2 class="text-2xl font-bold text-gray-900 mb-4">Processus d'Automatisation en Cours</h2>
162
+ <div class="progress-bar w-full mb-6"></div>
163
+
164
+ <div class="space-y-6">
165
+ <!-- Step 1 -->
166
+ <div class="automation-process p-6 rounded-lg">
167
+ <div class="flex items-start">
168
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
169
+ <span>1</span>
170
+ </div>
171
+ <div class="ml-4">
172
+ <h3 class="text-lg font-medium text-gray-900">Enregistrement du Domaine</h3>
173
+ <p class="mt-1 text-sm text-gray-600">Connexion directe aux registres mondiaux pour un enregistrement instantané.</p>
174
+ <div class="mt-2">
175
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
176
+ <i class="fas fa-check-circle mr-1"></i> Terminé en 0.4s
177
+ </span>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Step 2 -->
184
+ <div class="automation-process p-6 rounded-lg">
185
+ <div class="flex items-start">
186
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
187
+ <span>2</span>
188
+ </div>
189
+ <div class="ml-4">
190
+ <h3 class="text-lg font-medium text-gray-900">Déploiement SSL Automatique</h3>
191
+ <p class="mt-1 text-sm text-gray-600">Certificat TLS émis et installé avant même que la page ne se recharge.</p>
192
+ <div class="mt-2">
193
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
194
+ <i class="fas fa-check-circle mr-1"></i> Terminé en 0.3s
195
+ </span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Step 3 -->
202
+ <div class="automation-process p-6 rounded-lg">
203
+ <div class="flex items-start">
204
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
205
+ <span>3</span>
206
+ </div>
207
+ <div class="ml-4">
208
+ <h3 class="text-lg font-medium text-gray-900">Configuration DNS Globale</h3>
209
+ <p class="mt-1 text-sm text-gray-600">Propagation mondiale sur notre réseau Anycast avec 158 points de présence.</p>
210
+ <div class="mt-2">
211
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
212
+ <i class="fas fa-sync-alt mr-1 animate-spin"></i> Propagation en cours (87%)
213
+ </span>
214
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
215
+ <div class="bg-blue-600 h-1.5 rounded-full" style="width: 87%"></div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Step 4 -->
223
+ <div class="automation-process p-6 rounded-lg">
224
+ <div class="flex items-start">
225
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
226
+ <span>4</span>
227
+ </div>
228
+ <div class="ml-4">
229
+ <h3 class="text-lg font-medium text-gray-900">Intégration Google</h3>
230
+ <p class="mt-1 text-sm text-gray-600">Configuration automatique avec Search Console et Analytics.</p>
231
+ <div class="mt-2">
232
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
233
+ <i class="fas fa-spinner mr-1 animate-spin"></i> En cours
234
+ </span>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <div id="automation-complete" class="mt-8 hidden">
242
+ <div class="bg-green-50 border border-green-200 rounded-lg p-6">
243
+ <div class="flex items-center">
244
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
245
+ <i class="fas fa-check"></i>
246
+ </div>
247
+ <div class="ml-4">
248
+ <h3 class="text-lg font-medium text-green-800">Configuration Terminée!</h3>
249
+ <p class="mt-1 text-sm text-green-600">Votre infrastructure web est maintenant opérationnelle avec une propagation mondiale complète.</p>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
254
+ <div>
255
+ <h4 class="font-medium mb-2">Détails Techniques</h4>
256
+ <ul class="space-y-2 text-sm">
257
+ <li class="flex justify-between">
258
+ <span class="text-gray-500">Domaine:</span>
259
+ <span class="font-medium">votredomaine.com</span>
260
+ </li>
261
+ <li class="flex justify-between">
262
+ <span class="text-gray-500">SSL:</span>
263
+ <span class="font-medium text-green-600">Actif (Let's Encrypt)</span>
264
+ </li>
265
+ <li class="flex justify-between">
266
+ <span class="text-gray-500">DNS Propagation:</span>
267
+ <span class="font-medium">100% en 0.9s</span>
268
+ </li>
269
+ </ul>
270
+ </div>
271
+ <div>
272
+ <h4 class="font-medium mb-2">Services Actifs</h4>
273
+ <ul class="space-y-2 text-sm">
274
+ <li class="flex items-center">
275
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
276
+ <span>Google Search Console</span>
277
+ </li>
278
+ <li class="flex items-center">
279
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
280
+ <span>Google Analytics</span>
281
+ </li>
282
+ <li class="flex items-center">
283
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
284
+ <span>Monitoring 24/7</span>
285
+ </li>
286
+ <li class="flex items-center">
287
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
288
+ <span>Protection DDoS</span>
289
+ </li>
290
+ </ul>
291
+ </div>
292
+ </div>
293
+
294
+ <button id="dashboard-button" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 ease-in-out transform hover:scale-105">
295
+ Accéder au Tableau de Bord
296
+ </button>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Features Section -->
304
+ <div id="features" class="py-16 bg-white">
305
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
306
+ <div class="lg:text-center">
307
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Technologie</h2>
308
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
309
+ Automatisation Complète en 1 Clic
310
+ </p>
311
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
312
+ Notre système gère tout le processus sans intervention humaine, 24h/24 et 7j/7
313
+ </p>
314
+ </div>
315
+
316
+ <div class="mt-20">
317
+ <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
318
+ <!-- Feature 1 -->
319
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
320
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
321
+ <i class="fas fa-globe text-xl"></i>
322
+ </div>
323
+ <div class="mt-5">
324
+ <h3 class="text-lg font-medium text-gray-900">Enregistrement Instantané</h3>
325
+ <p class="mt-2 text-base text-gray-500">
326
+ Connexion directe aux registres pour un enregistrement en moins de 500ms, disponible immédiatement dans tous les navigateurs.
327
+ </p>
328
+ </div>
329
+ <div class="mt-4">
330
+ <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Enregistrement de domaine" class="w-full h-48 object-cover rounded-lg">
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Feature 2 -->
335
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
336
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
337
+ <i class="fas fa-lock text-xl"></i>
338
+ </div>
339
+ <div class="mt-5">
340
+ <h3 class="text-lg font-medium text-gray-900">SSL Automatique</h3>
341
+ <p class="mt-2 text-base text-gray-500">
342
+ Certificat TLS émis et installé avant même que la page ne se recharge (temps moyen: 300ms).
343
+ </p>
344
+ </div>
345
+ <div class="mt-4">
346
+ <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Certificat SSL" class="w-full h-48 object-cover rounded-lg">
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Feature 3 -->
351
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
352
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
353
+ <i class="fas fa-network-wired text-xl"></i>
354
+ </div>
355
+ <div class="mt-5">
356
+ <h3 class="text-lg font-medium text-gray-900">DNS Ultra-Rapide</h3>
357
+ <p class="mt-2 text-base text-gray-500">
358
+ Propagation mondiale en moins d'une seconde grâce à notre réseau Anycast avec 158 POPs.
359
+ </p>
360
+ </div>
361
+ <div class="mt-4">
362
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" alt="Réseau DNS" class="w-full h-48 object-cover rounded-lg">
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Feature 4 -->
367
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
368
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
369
+ <i class="fab fa-google text-xl"></i>
370
+ </div>
371
+ <div class="mt-5">
372
+ <h3 class="text-lg font-medium text-gray-900">Intégration Google</h3>
373
+ <p class="mt-2 text-base text-gray-500">
374
+ Configuration automatique avec Search Console et Analytics avant même que votre site soit en ligne.
375
+ </p>
376
+ </div>
377
+ <div class="mt-4">
378
+ <img src="https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Google Analytics" class="w-full h-48 object-cover rounded-lg">
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Feature 5 -->
383
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
384
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
385
+ <i class="fas fa-robot text-xl"></i>
386
+ </div>
387
+ <div class="mt-5">
388
+ <h3 class="text-lg font-medium text-gray-900">Automatisation Totale</h3>
389
+ <p class="mt-2 text-base text-gray-500">
390
+ Processus 100% automatisé sans intervention humaine, disponible 24h/24 et 7j/7.
391
+ </p>
392
+ </div>
393
+ <div class="mt-4">
394
+ <img src="https://images.unsplash.com/photo-1677442135136-760c285e7743?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Automatisation" class="w-full h-48 object-cover rounded-lg">
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Feature 6 -->
399
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
400
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
401
+ <i class="fas fa-tachometer-alt text-xl"></i>
402
+ </div>
403
+ <div class="mt-5">
404
+ <h3 class="text-lg font-medium text-gray-900">Monitoring Permanent</h3>
405
+ <p class="mt-2 text-base text-gray-500">
406
+ Surveillance en temps réel de tous les services avec reconfiguration automatique si nécessaire.
407
+ </p>
408
+ </div>
409
+ <div class="mt-4">
410
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Monitoring" class="w-full h-48 object-cover rounded-lg">
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Technology Section -->
419
+ <div id="technology" class="py-16 bg-gray-50">
420
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
421
+ <div class="lg:text-center">
422
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Infrastructure</h2>
423
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
424
+ La technologie derrière la vitesse
425
+ </p>
426
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
427
+ Architecture distribuée pour des performances inégalées
428
+ </p>
429
+ </div>
430
+
431
+ <div class="mt-16">
432
+ <div class="bg-white overflow-hidden shadow rounded-lg">
433
+ <div class="px-4 py-5 sm:p-6">
434
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
435
+ <div>
436
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Réseau DNS Anycast Global</h3>
437
+ <div class="network-image h-48 w-full rounded-lg mb-4"></div>
438
+ <ul class="space-y-4">
439
+ <li class="flex items-start">
440
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
441
+ <i class="fas fa-server"></i>
442
+ </div>
443
+ <p class="ml-3 text-base text-gray-700">
444
+ <span class="font-medium">158 points de présence</span> répartis sur tous les continents
445
+ </p>
446
+ </li>
447
+ <li class="flex items-start">
448
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
449
+ <i class="fas fa-tachometer-alt"></i>
450
+ </div>
451
+ <p class="ml-3 text-base text-gray-700">
452
+ <span class="font-medium">Temps de réponse moyen de 8ms</span> grâce à notre routage intelligent
453
+ </p>
454
+ </li>
455
+ <li class="flex items-start">
456
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
457
+ <i class="fas fa-sync-alt"></i>
458
+ </div>
459
+ <p class="ml-3 text-base text-gray-700">
460
+ <span class="font-medium">Mise à jour en temps réel</span> avec propagation mondiale en 0.5s
461
+ </p>
462
+ </li>
463
+ </ul>
464
+ </div>
465
+ <div>
466
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Automatisation Avancée</h3>
467
+ <div class="tech-image h-48 w-full rounded-lg mb-4"></div>
468
+ <ul class="space-y-4">
469
+ <li class="flex items-start">
470
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
471
+ <i class="fas fa-robot"></i>
472
+ </div>
473
+ <p class="ml-3 text-base text-gray-700">
474
+ <span class="font-medium">Système robotisé</span> qui gère l'intégralité du processus sans intervention humaine
475
+ </p>
476
+ </li>
477
+ <li class="flex items-start">
478
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
479
+ <i class="fas fa-check-circle"></i>
480
+ </div>
481
+ <p class="ml-3 text-base text-gray-700">
482
+ <span class="font-medium">Vérifications en temps réel</span> de tous les services toutes les 500ms
483
+ </p>
484
+ </li>
485
+ <li class="flex items-start">
486
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
487
+ <i class="fas fa-project-diagram"></i>
488
+ </div>
489
+ <p class="ml-3 text-base text-gray-700">
490
+ <span class="font-medium">Intégration API</span> avec tous les registres majeurs et services tiers
491
+ </p>
492
+ </li>
493
+ </ul>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="mt-8">
498
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Processus d'Automatisation</h3>
499
+ <div class="bg-gray-50 p-6 rounded-lg">
500
+ <div class="flex flex-col space-y-4">
501
+ <div class="flex items-start">
502
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
503
+ <span>1</span>
504
+ </div>
505
+ <div class="ml-4">
506
+ <h4 class="text-base font-medium text-gray-900">Enregistrement auprès du registre</h4>
507
+ <p class="mt-1 text-sm text-gray-600">Notre API temps réel communique directement avec le registre pour enregistrer votre domaine en moins de 200ms.</p>
508
+ </div>
509
+ </div>
510
+ <div class="flex items-start">
511
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
512
+ <span>2</span>
513
+ </div>
514
+ <div class="ml-4">
515
+ <h4 class="text-base font-medium text-gray-900">Configuration SSL automatique</h4>
516
+ <p class="mt-1 text-sm text-gray-600">Un certificat Let's Encrypt est émis et installé avant même que la page ne se recharge (temps moyen: 150ms).</p>
517
+ </div>
518
+ </div>
519
+ <div class="flex items-start">
520
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
521
+ <span>3</span>
522
+ </div>
523
+ <div class="ml-4">
524
+ <h4 class="text-base font-medium text-gray-900">Propagation DNS mondiale</h4>
525
+ <p class="mt-1 text-sm text-gray-600">Notre réseau Anycast global propage les enregistrements DNS sur tous les serveurs en moins d'une seconde.</p>
526
+ </div>
527
+ </div>
528
+ <div class="flex items-start">
529
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
530
+ <span>4</span>
531
+ </div>
532
+ <div class="ml-4">
533
+ <h4 class="text-base font-medium text-gray-900">Intégration des outils Google</h4>
534
+ <p class="mt-1 text-sm text-gray-600">Configuration automatique avec Search Console et Analytics avant même que votre site soit en ligne.</p>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <!-- Pricing Section -->
547
+ <div id="pricing" class="py-16 bg-white">
548
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
549
+ <div class="text-center">
550
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
551
+ Tarifs simples et transparents
552
+ </h2>
553
+ <p class="mt-4 text-xl text-gray-600">
554
+ Tout inclus dans chaque offre - pas de frais cachés
555
+ </p>
556
+ </div>
557
+
558
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
559
+ <!-- Starter Plan -->
560
+ <div class="bg-white border border-gray-200 rounded-2xl shadow-md overflow-hidden">
561
+ <div class="h-3 bg-blue-500"></div>
562
+ <div class="p-8">
563
+ <h3 class="text-2xl font-bold text-gray-900">Starter</h3>
564
+ <p class="mt-4 text-gray-500">Parfait pour les sites personnels</p>
565
+ <div class="mt-6">
566
+ <p class="text-4xl font-bold text-gray-900">9.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
567
+ </div>
568
+ <div class="mt-4">
569
+ <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Starter Plan" class="w-full h-32 object-cover rounded-lg">
570
+ </div>
571
+ <ul class="mt-8 space-y-3">
572
+ <li class="flex items-start">
573
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
574
+ <span class="text-gray-700">1 domaine inclus</span>
575
+ </li>
576
+ <li class="flex items-start">
577
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
578
+ <span class="text-gray-700">SSL automatique</span>
579
+ </li>
580
+ <li class="flex items-start">
581
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
582
+ <span class="text-gray-700">DNS Anycast global</span>
583
+ </li>
584
+ <li class="flex items-start">
585
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
586
+ <span class="text-gray-700">Intégration Google de base</span>
587
+ </li>
588
+ </ul>
589
+ <button onclick="startAutomation('Starter')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
590
+ Commencer
591
+ </button>
592
+ </div>
593
+ </div>
594
+
595
+ <!-- Professional Plan -->
596
+ <div class="relative bg-white border-2 border-blue-500 rounded-2xl shadow-md overflow-hidden">
597
+ <div class="h-3 bg-blue-600"></div>
598
+ <div class="absolute top-0 right-0 bg-blue-500 text-white px-4 py-1 text-xs font-bold rounded-bl-lg">
599
+ POPULAIRE
600
+ </div>
601
+ <div class="p-8">
602
+ <h3 class="text-2xl font-bold text-gray-900">Professionnel</h3>
603
+ <p class="mt-4 text-gray-500">Pour les entreprises et projets sérieux</p>
604
+ <div class="mt-6">
605
+ <p class="text-4xl font-bold text-gray-900">29.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
606
+ </div>
607
+ <div class="mt-4">
608
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Professional Plan" class="w-full h-32 object-cover rounded-lg">
609
+ </div>
610
+ <ul class="mt-8 space-y-3">
611
+ <li class="flex items-start">
612
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
613
+ <span class="text-gray-700">5 domaines inclus</span>
614
+ </li>
615
+ <li class="flex items-start">
616
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
617
+ <span class="text-gray-700">SSL Wildcard inclus</span>
618
+ </li>
619
+ <li class="flex items-start">
620
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
621
+ <span class="text-gray-700">DNS Premium avec DDoS protection</span>
622
+ </li>
623
+ <li class="flex items-start">
624
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
625
+ <span class="text-gray-700">Intégration Google avancée</span>
626
+ </li>
627
+ <li class="flex items-start">
628
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
629
+ <span class="text-gray-700">Monitoring 24/7</span>
630
+ </li>
631
+ </ul>
632
+ <button onclick="startAutomation('Professionnel')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
633
+ Commencer
634
+ </button>
635
+ </div>
636
+ </div>
637
+
638
+ <!-- Enterprise Plan -->
639
+ <div class="bg-white border border-gray-200 rounded-2xl shadow-md overflow-hidden">
640
+ <div class="h-3 bg-purple-500"></div>
641
+ <div class="p-8">
642
+ <h3 class="text-2xl font-bold text-gray-900">Entreprise</h3>
643
+ <p class="mt-4 text-gray-500">Pour les besoins critiques</p>
644
+ <div class="mt-6">
645
+ <p class="text-4xl font-bold text-gray-900">99.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
646
+ </div>
647
+ <div class="mt-4">
648
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Enterprise Plan" class="w-full h-32 object-cover rounded-lg">
649
+ </div>
650
+ <ul class="mt-8 space-y-3">
651
+ <li class="flex items-start">
652
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
653
+ <span class="text-gray-700">Domaines illimités</span>
654
+ </li>
655
+ <li class="flex items-start">
656
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
657
+ <span class="text-gray-700">SSL EV avec validation étendue</span>
658
+ </li>
659
+ <li class="flex items-start">
660
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
661
+ <span class="text-gray-700">DNS Enterprise avec 100% uptime</span>
662
+ </li>
663
+ <li class="flex items-start">
664
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
665
+ <span class="text-gray-700">Intégration Google complète</span>
666
+ </li>
667
+ <li class="flex items-start">
668
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
669
+ <span class="text-gray-700">Support prioritaire 24/7</span>
670
+ </li>
671
+ <li class="flex items-start">
672
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
673
+ <span class="text-gray-700">Gestionnaire de compte dédié</span>
674
+ </li>
675
+ </ul>
676
+ <button onclick="startAutomation('Entreprise')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
677
+ Commencer
678
+ </button>
679
+ </div>
680
+ </div>
681
+ </div>
682
+
683
+ <div class="mt-12 text-center">
684
+ <p class="text-gray-500">Besoin d'une solution personnalisée? <a href="#contact" class="text-blue-600 hover:text-blue-800">Contactez notre équipe</a></p>
685
+ </div>
686
+ </div>
687
+ </div>
688
+
689
+ <!-- Testimonials Section -->
690
+ <div class="py-16 bg-gray-50">
691
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
692
+ <div class="lg:text-center">
693
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Témoignages</h2>
694
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
695
+ Ce que nos clients disent
696
+ </p>
697
+ </div>
698
+
699
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
700
+ <!-- Testimonial 1 -->
701
+ <div class="bg-white p-6 rounded-lg shadow-md">
702
+ <div class="flex items-center">
703
+ <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Client 1">
704
+ <div class="ml-4">
705
+ <h4 class="text-lg font-medium">Sophie Martin</h4>
706
+ <p class="text-gray-500">CEO, TechStart</p>
707
+ </div>
708
+ </div>
709
+ <p class="mt-4 text-gray-600">
710
+ "La vitesse d'installation est incroyable. Notre site était opérationnel en moins de 2 secondes avec tous les services configurés automatiquement."
711
+ </p>
712
+ <div class="mt-4 flex text-yellow-400">
713
+ <i class="fas fa-star"></i>
714
+ <i class="fas fa-star"></i>
715
+ <i class="fas fa-star"></i>
716
+ <i class="fas fa-star"></i>
717
+ <i class="fas fa-star"></i>
718
+ </div>
719
+ </div>
720
+
721
+ <!-- Testimonial 2 -->
722
+ <div class="bg-white p-6 rounded-lg shadow-md">
723
+ <div class="flex items-center">
724
+ <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Client 2">
725
+ <div class="ml-4">
726
+ <h4 class="text-lg font-medium">Thomas Dubois</h4>
727
+ <p class="text-gray-500">CTO, DigitalAgency</p>
728
+ </div>
729
+ </div>
730
+ <p class="mt-4 text-gray-600">
731
+ "Nous avons migré tous nos clients vers HyperSpeed Web. L'automatisation nous fait gagner des heures de travail chaque semaine."
732
+ </p>
733
+ <div class="mt-4 flex text-yellow-400">
734
+ <i class="fas fa-star"></i>
735
+ <i class="fas fa-star"></i>
736
+ <i class="fas fa-star"></i>
737
+ <i class="fas fa-star"></i>
738
+ <i class="fas fa-star"></i>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Testimonial 3 -->
743
+ <div class="bg-white p-6 rounded-lg shadow-md">
744
+ <div class="flex items-center">
745
+ <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Client 3">
746
+ <div class="ml-4">
747
+ <h4 class="text-lg font-medium">Émilie Laurent</h4>
748
+ <p class="text-gray-500">Directrice Marketing</p>
749
+ </div>
750
+ </div>
751
+ <p class="mt-4 text-gray-600">
752
+ "L'intégration automatique avec Google Analytics et Search Console est un énorme gain de temps. Tout est configuré avant même que je commence à travailler sur le site."
753
+ </p>
754
+ <div class="mt-4 flex text-yellow-400">
755
+ <i class="fas fa-star"></i>
756
+ <i class="fas fa-star"></i>
757
+ <i class="fas fa-star"></i>
758
+ <i class="fas fa-star"></i>
759
+ <i class="fas fa-star-half-alt"></i>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </div>
764
+ </div>
765
+
766
+ <!-- Contact Section -->
767
+ <div id="contact" class="py-16 bg-gray-50">
768
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
769
+ <div class="lg:text-center">
770
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Contact</h2>
771
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
772
+ Nous sommes là pour vous aider
773
+ </p>
774
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
775
+ Notre équipe est disponible 24h/24 pour répondre à vos questions
776
+ </p>
777
+ </div>
778
+
779
+ <div class="mt-16">
780
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
781
+ <div class="bg-white overflow-hidden shadow rounded-lg">
782
+ <div class="px-4 py-5 sm:p-6">
783
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Contactez-nous</h3>
784
+ <form class="space-y-6">
785
+ <div>
786
+ <label for="name" class="block text-sm font-medium text-gray-700">Nom complet</label>
787
+ <input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
788
+ </div>
789
+ <div>
790
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
791
+ <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
792
+ </div>
793
+ <div>
794
+ <label for="subject" class="block text-sm font-medium text-gray-700">Sujet</label>
795
+ <select id="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
796
+ <option>Question générale</option>
797
+ <option>Support technique</option>
798
+ <option>Demande commerciale</option>
799
+ <option>Autre</option>
800
+ </select>
801
+ </div>
802
+ <div>
803
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
804
+ <textarea id="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
805
+ </div>
806
+ <div>
807
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
808
+ Envoyer le message
809
+ </button>
810
+ </div>
811
+ </form>
812
+ </div>
813
+ </div>
814
+ <div class="bg-white overflow-hidden shadow rounded-lg">
815
+ <div class="px-4 py-5 sm:p-6">
816
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Informations de contact</h3>
817
+ <div class="space-y-4">
818
+ <div class="flex items-start">
819
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
820
+ <i class="fas fa-map-marker-alt"></i>
821
+ </div>
822
+ <p class="ml-3 text-base text-gray-700">
823
+ HyperSpeed Web<br>
824
+ 12 Rue de la Vitesse<br>
825
+ 75001 Paris, France
826
+ </p>
827
+ </div>
828
+ <div class="flex items-start">
829
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
830
+ <i class="fas fa-phone-alt"></i>
831
+ </div>
832
+ <p class="ml-3 text-base text-gray-700">
833
+ +33 1 23 45 67 89<br>
834
+ Support 24h/24 et 7j/7
835
+ </p>
836
+ </div>
837
+ <div class="flex items-start">
838
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500">
839
+ <i class="fas fa-envelope"></i>
840
+ </div>
841
+ <p class="ml-3 text-base text-gray-700">
842
+ [email protected]<br>
843
+ Réponse garantie en moins de 5 minutes
844
+ </p>
845
+ </div>
846
+ </div>
847
+
848
+ <div class="mt-8">
849
+ <h4 class="text-lg font-medium text-gray-900 mb-4">Support instantané</h4>
850
+ <button class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
851
+ <i class="fas fa-comment-dots mr-2"></i> Chat en direct
852
+ </button>
853
+ <p class="mt-2 text-sm text-gray-500 text-center">
854
+ Connectez-vous avec un expert en moins de 10 secondes
855
+ </p>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ </div>
863
+
864
+ <!-- Footer -->
865
+ <footer class="bg-gray-800">
866
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
867
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
868
+ <div>
869
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Produits</h3>
870
+ <ul class="space-y-2">
871
+ <li><a href="#" class="text-gray-300 hover:text-white">Enregistrement de domaine</a></li>
872
+ <li><a href="#" class="text-gray-300 hover:text-white">Certificats SSL</a></li>
873
+ <li><a href="#" class="text-gray-300 hover:text-white">DNS Global</a></li>
874
+ <li><a href="#" class="text-gray-300 hover:text-white">Intégration Google</a></li>
875
+ </ul>
876
+ </div>
877
+ <div>
878
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Support</h3>
879
+ <ul class="space-y-2">
880
+ <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li>
881
+ <li><a href="#" class="text-gray-300 hover:text-white">Forum communautaire</a></li>
882
+ <li><a href="#" class="text-gray-300 hover:text-white">Nous contacter</a></li>
883
+ <li><a href="#" class="text-gray-300 hover:text-white">Statut des services</a></li>
884
+ </ul>
885
+ </div>
886
+ <div>
887
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Entreprise</h3>
888
+ <ul class="space-y-2">
889
+ <li><a href="#" class="text-gray-300 hover:text-white">À propos</a></li>
890
+ <li><a href="#" class="text-gray-300 hover:text-white">Carrières</a></li>
891
+ <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
892
+ <li><a href="#" class="text-gray-300 hover:text-white">Presse</a></li>
893
+ </ul>
894
+ </div>
895
+ <div>
896
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Légal</h3>
897
+ <ul class="space-y-2">
898
+ <li><a href="#" class="text-gray-300 hover:text-white">Politique de confidentialité</a></li>
899
+ <li><a href="#" class="text-gray-300 hover:text-white">Conditions d'utilisation</a></li>
900
+ <li><a href="#" class="text-gray-300 hover:text-white">Politique de remboursement</a></li>
901
+ </ul>
902
+ </div>
903
+ </div>
904
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
905
+ <div class="flex space-x-6 md:order-2">
906
+ <a href="#" class="text-gray-400 hover:text-white">
907
+ <span class="sr-only">Facebook</span>
908
+ <i class="fab fa-facebook-f"></i>
909
+ </a>
910
+ <a href="#" class="text-gray-400 hover:text-white">
911
+ <span class="sr-only">Twitter</span>
912
+ <i class="fab fa-twitter"></i>
913
+ </a>
914
+ <a href="#" class="text-gray-400 hover:text-white">
915
+ <span class="sr-only">GitHub</span>
916
+ <i class="fab fa-github"></i>
917
+ </a>
918
+ </div>
919
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
920
+ &copy; 2023 HyperSpeed Web. Tous droits réservés.
921
+ </p>
922
+ </div>
923
+ </div>
924
+ </footer>
925
+
926
+ <!-- Domain Configuration Modal -->
927
+ <div id="domainConfigModal" class="fixed z-50 inset-0 overflow-y-auto hidden">
928
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
929
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
930
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
931
+ </div>
932
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
933
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
934
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
935
+ <div class="sm:flex sm:items-start">
936
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
937
+ <i class="fas fa-cog text-blue-600"></i>
938
+ </div>
939
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
940
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
941
+ Configuration Automatisée
942
+ </h3>
943
+ <div class="mt-2">
944
+ <p class="text-sm text-gray-500">
945
+ Configurez votre domaine pour lancer le processus d'automatisation complet.
946
+ </p>
947
+ </div>
948
+ <div class="mt-4 space-y-4">
949
+ <div>
950
+ <label for="domain-name" class="block text-sm font-medium text-gray-700">Nom de domaine</label>
951
+ <div class="mt-1 flex rounded-md shadow-sm">
952
+ <input type="text" id="domain-name" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="votredomaine">
953
+ <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
954
+ .com
955
+ </span>
956
+ </div>
957
+ </div>
958
+ <div>
959
+ <label for="dns-config" class="block text-sm font-medium text-gray-700">Configuration DNS</label>
960
+ <select id="dns-config" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
961
+ <option>Configuration Automatique (Recommandé)</option>
962
+ <option>DNS Personnalisés</option>
963
+ </select>
964
+ </div>
965
+ <div class="flex items-start">
966
+ <div class="flex items-center h-5">
967
+ <input id="google-integration" name="google-integration" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
968
+ </div>
969
+ <div class="ml-3 text-sm">
970
+ <label for="google-integration" class="font-medium text-gray-700">Intégration Google</label>
971
+ <p class="text-gray-500">Configurer automatiquement Search Console et Analytics</p>
972
+ </div>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </div>
977
+ </div>
978
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
979
+ <button type="button" onclick="startAutomationProcess()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
980
+ <i class="fas fa-bolt mr-2"></i> Lancer l'Automatisation
981
+ </button>
982
+ <button type="button" onclick="closeDomainConfigModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
983
+ Annuler
984
+ </button>
985
+ </div>
986
+ </div>
987
+ </div>
988
+ </div>
989
+
990
+ <!-- Dashboard Modal -->
991
+ <div id="dashboardModal" class="fixed z-50 inset-0 overflow-y-auto hidden">
992
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
993
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
994
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
995
+ </div>
996
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
997
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
998
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
999
+ <div class="sm:flex sm:items-start">
1000
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
1001
+ <i class="fas fa-tachometer-alt text-blue-600"></i>
1002
+ </div>
1003
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
1004
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
1005
+ Tableau de Bord HyperSpeed
1006
+ </h3>
1007
+ <div class="mt-2">
1008
+ <p class="text-sm text-gray-500">
1009
+ Gestion complète de votre infrastructure automatisée
1010
+ </p>
1011
+ </div>
1012
+
1013
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
1014
+ <div class="bg-gray-50 p-4 rounded-lg">
1015
+ <h4 class="font-medium text-gray-900 mb-2">Statut des Services</h4>
1016
+ <ul class="space-y-2">
1017
+ <li class="flex items-center justify-between">
1018
+ <span class="text-gray-600">DNS</span>
1019
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
1020
+ <i class="fas fa-check-circle mr-1"></i> Actif
1021
+ </span>
1022
+ </li>
1023
+ <li class="flex items-center justify-between">
1024
+ <span class="text-gray-600">SSL</span>
1025
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
1026
+ <i class="fas fa-check-circle mr-1"></i> Actif
1027
+ </span>
1028
+ </li>
1029
+ <li class="flex items-center justify-between">
1030
+ <span class="text-gray-600">Monitoring</span>
1031
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
1032
+ <i class="fas fa-check-circle mr-1"></i> Actif
1033
+ </span>
1034
+ </li>
1035
+ </ul>
1036
+ </div>
1037
+
1038
+ <div class="bg-gray-50 p-4 rounded-lg">
1039
+ <h4 class="font-medium text-gray-900 mb-2">Performances</h4>
1040
+ <ul class="space-y-2">
1041
+ <li class="flex items-center justify-between">
1042
+ <span class="text-gray-600">Temps de réponse</span>
1043
+ <span class="font-medium">12ms</span>
1044
+ </li>
1045
+ <li class="flex items-center justify-between">
1046
+ <span class="text-gray-600">Disponibilité</span>
1047
+ <span class="font-medium">100%</span>
1048
+ </li>
1049
+ <li class="flex items-center justify-between">
1050
+ <span class="text-gray-600">Trafic</span>
1051
+ <span class="font-medium">0 visites</span>
1052
+ </li>
1053
+ </ul>
1054
+ </div>
1055
+
1056
+ <div class="bg-gray-50 p-4 rounded-lg">
1057
+ <h4 class="font-medium text-gray-900 mb-2">Intégrations</h4>
1058
+ <ul class="space-y-2">
1059
+ <li class="flex items-center">
1060
+ <i class="fab fa-google text-blue-500 mr-2"></i>
1061
+ <span>Google Search Console</span>
1062
+ </li>
1063
+ <li class="flex items-center">
1064
+ <i class="fab fa-google text-blue-500 mr-2"></i>
1065
+ <span>Google Analytics</span>
1066
+ </li>
1067
+ <li class="flex items-center">
1068
+ <i class="fas fa-shield-alt text-blue-500 mr-2"></i>
1069
+ <span>Protection DDoS</span>
1070
+ </li>
1071
+ </ul>
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <div class="mt-6">
1076
+ <h4 class="font-medium text-gray-900 mb-2">Actions Rapides</h4>
1077
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
1078
+ <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1079
+ <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
1080
+ <span>Rafraîchir DNS</span>
1081
+ </button>
1082
+ <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1083
+ <i class="fas fa-redo text-blue-500 mr-2"></i>
1084
+ <span>Renouveler SSL</span>
1085
+ </button>
1086
+ <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1087
+ <i class="fas fa-chart-line text-blue-500 mr-2"></i>
1088
+ <span>Voir Analytics</span>
1089
+ </button>
1090
+ <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1091
+ <i class="fas fa-cog text-blue-500 mr-2"></i>
1092
+ <span>Paramètres</span>
1093
+ </button>
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+ </div>
1098
+ </div>
1099
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
1100
+ <button type="button" onclick="closeDashboardModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
1101
+ Fermer
1102
+ </button>
1103
+ </div>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ <script>
1109
+ // Mobile menu toggle
1110
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
1111
+ document.getElementById('mobile-menu').classList.toggle('hidden');
1112
+ });
1113
+
1114
+ // Launch automation button
1115
+ document.getElementById('launch-automation').addEventListener('click', function() {
1116
+ document.getElementById('domainConfigModal').classList.remove('hidden');
1117
+ document.body.classList.add('overflow-hidden');
1118
+ });
1119
+
1120
+ function closeDomainConfigModal() {
1121
+ document.getElementById('domainConfigModal').classList.add('hidden');
1122
+ document.body.classList.remove('overflow-hidden');
1123
+ }
1124
+
1125
+ function startAutomation(plan) {
1126
+ document.getElementById('domainConfigModal').classList.remove('hidden');
1127
+ document.body.classList.add('overflow-hidden');
1128
+ }
1129
+
1130
+ function startAutomationProcess() {
1131
+ closeDomainConfigModal();
1132
+
1133
+ // Show automation process
1134
+ document.getElementById('automation-process').classList.remove('hidden');
1135
+ document.getElementById('automation-complete').classList.add('hidden');
1136
+
1137
+ // Simulate automation process
1138
+ setTimeout(() => {
1139
+ const domain = document.getElementById('domain-name').value || 'exemple';
1140
+
1141
+ // Show completion
1142
+ document.getElementById('automation-complete').classList.remove('hidden');
1143
+
1144
+ // Scroll to completion
1145
+ document.getElementById('automation-complete').
1146
+ </html>
prompts.txt ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ /hyperspeed-domains
2
+ probleme des boutons non cliquable veuillez corriger toutes les erreur des boutons qui ne foctionne pas activer toutes les boutons non fonctionnel , réparer toute et refaire une mise a jours pour toute corriger les problelme de fonctionnement :ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement : je veux acces gratuite pour moi seulement administrateur : [email protected] : Admin270574@ et [email protected] : Admin270574@
3
+ je peux pas acceder au produit , creer un tableau de bord pour entrer mes information paypal et stripe pour etre payer
4
+ aucun bouton fonctionne , veuillez corriger
5
+ aucun bouton du tableau de bors sont cliquable
6
+ enregistrement domaine, ssl , serveur dns, etc.. en automatique , avec enregistrement au registraire directement dans la seconde qui suit sur toutes les navigateur du monde , serveur dns les plus puissant et plus rapide du monde a la seconde pres , avec référencement google searche console et google analytique directement robotisé le tout sur systeme sofistiqué 24/24 et 7jour sur 7jour le tout automatisé
7
+ Infrastructure Web Automatisée en 1 Click Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/24 et 7j/7 avec propagation mondiale en secondes.
8
+ ajouté des photos pour rendre le site plus attirant
9
+ le bouton accéder au tableau de bors n'est pas cliquable et ne fonctionne pas , veuille corriger les erreur