Hugging Face's logo

Spaces:
docto41
/
nexushost
Running

App Files Community
docto41 commited on
Commit
970187c
·
verified ·
1 Parent(s): 2e3ee3e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +730 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nexushost
3
- emoji: 📚
4
- colorFrom: yellow
5
- colorTo: gray
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: nexushost
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,730 @@
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>NexusHost - Hébergement WordPress à 2€/mois</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap');
12
+
13
+ :root {
14
+ --primary: #6e00ff;
15
+ --secondary: #00f7ff;
16
+ --dark: #0a0a1a;
17
+ --darker: #050510;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Roboto', sans-serif;
22
+ background-color: var(--dark);
23
+ color: white;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ h1, h2, h3, h4, .font-futuriste {
28
+ font-family: 'Orbitron', sans-serif;
29
+ }
30
+
31
+ .gradient-text {
32
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
33
+ -webkit-background-clip: text;
34
+ background-clip: text;
35
+ color: transparent;
36
+ }
37
+
38
+ .gradient-bg {
39
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
40
+ }
41
+
42
+ .neon-shadow {
43
+ box-shadow: 0 0 15px rgba(110, 0, 255, 0.5);
44
+ }
45
+
46
+ .neon-border {
47
+ border: 1px solid rgba(110, 0, 255, 0.3);
48
+ box-shadow: 0 0 10px rgba(0, 247, 255, 0.3), inset 0 0 10px rgba(0, 247, 255, 0.3);
49
+ }
50
+
51
+ .particle {
52
+ position: absolute;
53
+ background: linear-gradient(var(--primary), var(--secondary));
54
+ border-radius: 50%;
55
+ filter: blur(2px);
56
+ opacity: 0.3;
57
+ z-index: -1;
58
+ }
59
+
60
+ .feature-card:hover {
61
+ transform: translateY(-10px);
62
+ box-shadow: 0 20px 25px -5px rgba(110, 0, 255, 0.25), 0 10px 10px -5px rgba(0, 247, 255, 0.1);
63
+ }
64
+
65
+ .pricing-card:hover {
66
+ transform: scale(1.05);
67
+ box-shadow: 0 0 30px rgba(0, 247, 255, 0.5);
68
+ }
69
+
70
+ .glow {
71
+ animation: glow 2s infinite alternate;
72
+ }
73
+
74
+ @keyframes glow {
75
+ from {
76
+ box-shadow: 0 0 5px rgba(110, 0, 255, 0.5);
77
+ }
78
+ to {
79
+ box-shadow: 0 0 20px rgba(0, 247, 255, 0.8);
80
+ }
81
+ }
82
+
83
+ .float-anim {
84
+ animation: float 6s ease-in-out infinite;
85
+ }
86
+
87
+ @keyframes float {
88
+ 0% { transform: translateY(0px); }
89
+ 50% { transform: translateY(-20px); }
90
+ 100% { transform: translateY(0px); }
91
+ }
92
+
93
+ .pulse {
94
+ animation: pulse 2s infinite;
95
+ }
96
+
97
+ @keyframes pulse {
98
+ 0% { transform: scale(1); }
99
+ 50% { transform: scale(1.05); }
100
+ 100% { transform: scale(1); }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="min-h-screen">
105
+ <!-- Particules flottantes -->
106
+ <div id="particles"></div>
107
+
108
+ <!-- Navigation -->
109
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="flex justify-between h-20 items-center">
112
+ <div class="flex-shrink-0 flex items-center">
113
+ <span class="text-2xl font-bold gradient-text">NexusHost</span>
114
+ </div>
115
+ <div class="hidden md:block">
116
+ <div class="ml-10 flex items-baseline space-x-8">
117
+ <a href="#features" class="text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Fonctionnalités</a>
118
+ <a href="#pricing" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Tarifs</a>
119
+ <a href="#faq" class="text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">FAQ</a>
120
+ <a href="#contact" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Contact</a>
121
+ </div>
122
+ </div>
123
+ <div class="hidden md:block">
124
+ <a href="#pricing" class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white gradient-bg hover:opacity-90 transition-all duration-300 neon-shadow">
125
+ Commander maintenant
126
+ </a>
127
+ </div>
128
+ <div class="md:hidden">
129
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none">
130
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
131
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
132
+ </svg>
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
139
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
140
+ <a href="#features" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Fonctionnalités</a>
141
+ <a href="#pricing" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Tarifs</a>
142
+ <a href="#faq" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">FAQ</a>
143
+ <a href="#contact" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Contact</a>
144
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gradient-to-r from-purple-600 to-cyan-500 hover:opacity-90">Commander</a>
145
+ </div>
146
+ </div>
147
+ </nav>
148
+
149
+ <!-- Hero Section -->
150
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
151
+ <div class="max-w-7xl mx-auto">
152
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
153
+ <div class="mb-12 lg:mb-0">
154
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
155
+ <span class="gradient-text">Hébergement WordPress</span><br>
156
+ <span class="text-white">Seulement <span class="gradient-text">2€</span>/mois</span>
157
+ </h1>
158
+ <p class="text-lg text-gray-300 mb-8 max-w-lg">
159
+ Profitez d'une solution d'hébergement ultra-rapide avec stockage SSD illimité, des centaines d'applications cloud et bien plus encore. Garantie de remboursement de 30 jours.
160
+ </p>
161
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
162
+ <a href="#pricing" class="px-8 py-4 gradient-bg text-white font-bold rounded-lg text-lg shadow-lg hover:opacity-90 transition-all duration-300 neon-shadow pulse">
163
+ Commencer à 2€/mois
164
+ </a>
165
+ <a href="#features" class="px-8 py-4 border border-purple-500 text-white font-bold rounded-lg text-lg hover:bg-purple-900 hover:bg-opacity-30 transition-all duration-300">
166
+ Voir les fonctionnalités
167
+ </a>
168
+ </div>
169
+ <div class="mt-8 flex items-center space-x-4">
170
+ <div class="flex -space-x-2">
171
+ <img class="w-10 h-10 rounded-full border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
172
+ <img class="w-10 h-10 rounded-full border-2 border-cyan-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
173
+ <img class="w-10 h-10 rounded-full border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
174
+ </div>
175
+ <div>
176
+ <p class="text-gray-300 text-sm">Rejoint par <span class="text-white font-medium">8500+</span> clients</p>
177
+ <div class="flex items-center">
178
+ <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
179
+ <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
180
+ <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
181
+ <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
182
+ <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
183
+ <span class="ml-2 text-gray-300">4.9/5 (1200 avis)</span>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <div class="relative">
189
+ <div class="absolute -top-20 -left-20 w-64 h-64 bg-purple-600 rounded-full mix-blend-screen opacity-20 filter blur-3xl"></div>
190
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-cyan-500 rounded-full mix-blend-screen opacity-20 filter blur-3xl"></div>
191
+ <div class="relative neon-border rounded-2xl overflow-hidden float-anim">
192
+ <div class="bg-gray-900 p-4">
193
+ <div class="flex space-x-2 mb-4">
194
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
195
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
196
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
197
+ </div>
198
+ <div class="bg-gray-800 rounded-lg p-6">
199
+ <div class="flex items-center mb-6">
200
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
201
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
202
+ </div>
203
+ <div class="ml-4">
204
+ <h3 class="text-lg font-bold text-white">NexusHost WordPress</h3>
205
+ <p class="text-gray-400 text-sm">Hébergement Premium</p>
206
+ </div>
207
+ </div>
208
+ <div class="space-y-4">
209
+ <div class="flex justify-between">
210
+ <span class="text-gray-400">Stockage SSD</span>
211
+ <span class="font-bold gradient-text">ILLIMITÉ</span>
212
+ </div>
213
+ <div class="flex justify-between">
214
+ <span class="text-gray-400">Bande passante</span>
215
+ <span class="font-bold gradient-text">ILLIMITÉE</span>
216
+ </div>
217
+ <div class="flex justify-between">
218
+ <span class="text-gray-400">Sites WordPress</span>
219
+ <span class="font-bold gradient-text">1</span>
220
+ </div>
221
+ <div class="flex justify-between">
222
+ <span class="text-gray-400">E-mails</span>
223
+ <span class="font-bold gradient-text">ILLIMITÉS</span>
224
+ </div>
225
+ <div class="flex justify-between">
226
+ <span class="text-gray-400">SSL</span>
227
+ <span class="font-bold gradient-text">GRATUIT</span>
228
+ </div>
229
+ </div>
230
+ <div class="mt-6 pt-6 border-t border-gray-700">
231
+ <div class="flex justify-between items-center">
232
+ <span class="text-gray-300">Total:</span>
233
+ <div>
234
+ <span class="text-2xl font-bold gradient-text">2€</span>
235
+ <span class="text-gray-400">/mois</span>
236
+ </div>
237
+ </div>
238
+ <button class="w-full mt-4 gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition-all duration-300">
239
+ Commander maintenant
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Features Section -->
251
+ <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-gray-900 relative overflow-hidden">
252
+ <div class="absolute top-0 left-0 w-full h-full opacity-5">
253
+ <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-600 rounded-full mix-blend-screen filter blur-3xl"></div>
254
+ <div class="absolute top-3/4 left-3/4 w-64 h-64 bg-cyan-500 rounded-full mix-blend-screen filter blur-3xl"></div>
255
+ </div>
256
+ <div class="max-w-7xl mx-auto">
257
+ <div class="text-center mb-16">
258
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
259
+ <span class="gradient-text">Tout ce dont vous avez besoin</span>
260
+ </h2>
261
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
262
+ Notre hébergement WordPress inclut toutes les fonctionnalités premium pour faire décoller votre site.
263
+ </p>
264
+ </div>
265
+
266
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
267
+ <!-- Feature 1 -->
268
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 feature-card transition-all duration-500 neon-border hover:border-purple-500">
269
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6">
270
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path></svg>
271
+ </div>
272
+ <h3 class="text-xl font-bold text-white mb-3">Stockage SSD ULTRA illimité</h3>
273
+ <p class="text-gray-300">Bénéficiez d'un stockage SSD ultra-rapide sans aucune limite pour vos sites WordPress.</p>
274
+ </div>
275
+
276
+ <!-- Feature 2 -->
277
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 feature-card transition-all duration-500 neon-border hover:border-cyan-500">
278
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6">
279
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg>
280
+ </div>
281
+ <h3 class="text-xl font-bold text-white mb-3">Plus de 450 applications cloud</h3>
282
+ <p class="text-gray-300">Installez en un clic WordPress, PrestaShop, Joomla et des centaines d'autres applications.</p>
283
+ </div>
284
+
285
+ <!-- Feature 3 -->
286
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 feature-card transition-all duration-500 neon-border hover:border-purple-500">
287
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6">
288
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
289
+ </div>
290
+ <h3 class="text-xl font-bold text-white mb-3">Créateur de sites Web SitePad</h3>
291
+ <p class="text-gray-300">Créez facilement votre site avec notre constructeur de sites intuitif et puissant.</p>
292
+ </div>
293
+
294
+ <!-- Feature 4 -->
295
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 feature-card transition-all duration-500 neon-border hover:border-cyan-500">
296
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6">
297
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
298
+ </div>
299
+ <h3 class="text-xl font-bold text-white mb-3">Comptes de messagerie illimités</h3>
300
+ <p class="text-gray-300">Créez autant d'adresses e-mail professionnelles que vous le souhaitez avec votre nom de domaine.</p>
301
+ </div>
302
+
303
+ <!-- Feature 5 -->
304
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 feature-card transition-all duration-500 neon-border hover:border-purple-500">
305
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6">
306
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
307
+ </div>
308
+ <h3 class="text-xl font-bold text-white mb-3">Mise en cache du contenu global</h3>
309
+ <p class="text-gray-300">Technologie de cache avancée pour des temps de chargement ultra-rapides partout dans le monde.</p>
310
+ </div>
311
+
312
+ <!-- Feature 6 -->
313
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 feature-card transition-all duration-500 neon-border hover:border-cyan-500">
314
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6">
315
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
316
+ </div>
317
+ <h3 class="text-xl font-bold text-white mb-3">Certificats SSL gratuits</h3>
318
+ <p class="text-gray-300">Protégez votre site et boostez votre SEO avec des certificats SSL inclus gratuitement.</p>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
323
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 neon-border">
324
+ <h3 class="text-xl font-bold text-white mb-4">Migration de site Web gratuite</h3>
325
+ <p class="text-gray-300 mb-6">Nos experts migrent gratuitement votre site WordPress existant vers nos serveurs. Aucune interruption, aucun souci technique.</p>
326
+ <button class="px-6 py-2 border border-purple-500 text-white rounded-lg hover:bg-purple-900 hover:bg-opacity-30 transition-all duration-300">
327
+ Demander une migration
328
+ </button>
329
+ </div>
330
+
331
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 neon-border">
332
+ <h3 class="text-xl font-bold text-white mb-4">Garantie de remboursement de 30 jours</h3>
333
+ <p class="text-gray-300 mb-6">Essayez notre hébergement WordPress sans risque. Si vous n'êtes pas satisfait, nous vous remboursons intégralement dans les 30 jours.</p>
334
+ <button class="px-6 py-2 border border-cyan-500 text-white rounded-lg hover:bg-cyan-900 hover:bg-opacity-30 transition-all duration-300">
335
+ En savoir plus
336
+ </button>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Pricing Section -->
343
+ <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 relative overflow-hidden">
344
+ <div class="max-w-7xl mx-auto">
345
+ <div class="text-center mb-16">
346
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
347
+ <span class="gradient-text">Des tarifs simples et transparents</span>
348
+ </h2>
349
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
350
+ Choisissez la formule qui correspond à vos besoins. Tous nos plans incluent notre garantie de satisfaction.
351
+ </p>
352
+ </div>
353
+
354
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
355
+ <!-- Basic Plan -->
356
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 pricing-card transition-all duration-500 neon-border hover:border-purple-500">
357
+ <div class="mb-6">
358
+ <h3 class="text-2xl font-bold text-white mb-2">Starter</h3>
359
+ <p class="text-gray-300">Parfait pour les petits sites WordPress</p>
360
+ </div>
361
+ <div class="mb-8">
362
+ <span class="text-5xl font-bold gradient-text">2€</span>
363
+ <span class="text-gray-400">/mois</span>
364
+ <p class="text-gray-300 mt-2">Facturé 24€/an</p>
365
+ </div>
366
+ <ul class="space-y-3 mb-8">
367
+ <li class="flex items-center">
368
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
369
+ <span class="text-gray-300">1 site WordPress</span>
370
+ </li>
371
+ <li class="flex items-center">
372
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
373
+ <span class="text-gray-300">Stockage SSD illimité</span>
374
+ </li>
375
+ <li class="flex items-center">
376
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
377
+ <span class="text-gray-300">Bande passante illimitée</span>
378
+ </li>
379
+ <li class="flex items-center">
380
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
381
+ <span class="text-gray-300">E-mails illimités</span>
382
+ </li>
383
+ <li class="flex items-center">
384
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
385
+ <span class="text-gray-300">SSL gratuit</span>
386
+ </li>
387
+ </ul>
388
+ <button class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition-all duration-300">
389
+ Choisir ce plan
390
+ </button>
391
+ </div>
392
+
393
+ <!-- Pro Plan (Featured) -->
394
+ <div class="bg-gray-800 rounded-xl p-8 pricing-card transition-all duration-500 border-2 border-purple-500 relative overflow-hidden">
395
+ <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 transform translate-x-2 translate-y-2 rotate-12">
396
+ POPULAIRE
397
+ </div>
398
+ <div class="mb-6">
399
+ <h3 class="text-2xl font-bold text-white mb-2">Pro</h3>
400
+ <p class="text-gray-300">Idéal pour les sites professionnels</p>
401
+ </div>
402
+ <div class="mb-8">
403
+ <span class="text-5xl font-bold gradient-text">5€</span>
404
+ <span class="text-gray-400">/mois</span>
405
+ <p class="text-gray-300 mt-2">Facturé 60€/an</p>
406
+ </div>
407
+ <ul class="space-y-3 mb-8">
408
+ <li class="flex items-center">
409
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
410
+ <span class="text-gray-300">5 sites WordPress</span>
411
+ </li>
412
+ <li class="flex items-center">
413
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
414
+ <span class="text-gray-300">Stockage SSD illimité</span>
415
+ </li>
416
+ <li class="flex items-center">
417
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
418
+ <span class="text-gray-300">Bande passante illimitée</span>
419
+ </li>
420
+ <li class="flex items-center">
421
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
422
+ <span class="text-gray-300">E-mails illimités</span>
423
+ </li>
424
+ <li class="flex items-center">
425
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
426
+ <span class="text-gray-300">SSL gratuit + CDN</span>
427
+ </li>
428
+ <li class="flex items-center">
429
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
430
+ <span class="text-gray-300">Sauvegardes quotidiennes</span>
431
+ </li>
432
+ </ul>
433
+ <button class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition-all duration-300 pulse">
434
+ Choisir ce plan
435
+ </button>
436
+ </div>
437
+
438
+ <!-- Business Plan -->
439
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 pricing-card transition-all duration-500 neon-border hover:border-cyan-500">
440
+ <div class="mb-6">
441
+ <h3 class="text-2xl font-bold text-white mb-2">Business</h3>
442
+ <p class="text-gray-300">Pour les sites à fort trafic</p>
443
+ </div>
444
+ <div class="mb-8">
445
+ <span class="text-5xl font-bold gradient-text">10€</span>
446
+ <span class="text-gray-400">/mois</span>
447
+ <p class="text-gray-300 mt-2">Facturé 120€/an</p>
448
+ </div>
449
+ <ul class="space-y-3 mb-8">
450
+ <li class="flex items-center">
451
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
452
+ <span class="text-gray-300">Sites WordPress illimités</span>
453
+ </li>
454
+ <li class="flex items-center">
455
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
456
+ <span class="text-gray-300">Stockage SSD illimité</span>
457
+ </li>
458
+ <li class="flex items-center">
459
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
460
+ <span class="text-gray-300">Bande passante illimitée</span>
461
+ </li>
462
+ <li class="flex items-center">
463
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
464
+ <span class="text-gray-300">E-mails illimités</span>
465
+ </li>
466
+ <li class="flex items-center">
467
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
468
+ <span class="text-gray-300">SSL gratuit + CDN premium</span>
469
+ </li>
470
+ <li class="flex items-center">
471
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
472
+ <span class="text-gray-300">Sauvegardes quotidiennes</span>
473
+ </li>
474
+ <li class="flex items-center">
475
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
476
+ <span class="text-gray-300">Support prioritaire 24/7</span>
477
+ </li>
478
+ </ul>
479
+ <button class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition-all duration-300">
480
+ Choisir ce plan
481
+ </button>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="mt-12 text-center">
486
+ <p class="text-gray-300 mb-4">Vous avez besoin d'une solution personnalisée ?</p>
487
+ <button class="px-6 py-2 border border-purple-500 text-white rounded-lg hover:bg-purple-900 hover:bg-opacity-30 transition-all duration-300">
488
+ Contactez notre équipe
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </section>
493
+
494
+ <!-- FAQ Section -->
495
+ <section id="faq" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-gray-900 relative overflow-hidden">
496
+ <div class="max-w-4xl mx-auto">
497
+ <div class="text-center mb-16">
498
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
499
+ <span class="gradient-text">Questions fréquentes</span>
500
+ </h2>
501
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
502
+ Trouvez les réponses aux questions les plus courantes sur notre hébergement WordPress.
503
+ </p>
504
+ </div>
505
+
506
+ <div class="space-y-6">
507
+ <!-- FAQ Item 1 -->
508
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 neon-border">
509
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
510
+ <h3 class="text-xl font-bold text-white">Qu'est-ce qui est inclus dans l'offre à 2€/mois ?</h3>
511
+ <svg class="w-6 h-6 text-purple-500 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
512
+ </button>
513
+ <div class="faq-content mt-4 hidden">
514
+ <p class="text-gray-300">Notre offre à 2€/mois inclut :</p>
515
+ <ul class="list-disc pl-5 mt-2 space-y-2 text-gray-300">
516
+ <li>1 site WordPress</li>
517
+ <li>Stockage SSD illimité</li>
518
+ <li>Bande passante illimitée</li>
519
+ <li>Comptes e-mail illimités</li>
520
+ <li>Certificat SSL gratuit</li>
521
+ <li>Migration gratuite</li>
522
+ <li>Garantie de remboursement 30 jours</li>
523
+ <li>Accès à plus de 450 applications</li>
524
+ </ul>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- FAQ Item 2 -->
529
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 neon-border">
530
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
531
+ <h3 class="text-xl font-bold text-white">Comment fonctionne la migration gratuite ?</h3>
532
+ <svg class="w-6 h-6 text-cyan-500 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
533
+ </button>
534
+ <div class="faq-content mt-4 hidden">
535
+ <p class="text-gray-300">Notre équipe d'experts prend en charge la migration complète de votre site WordPress existant vers nos serveurs, sans aucun coût supplémentaire. Le processus est simple :</p>
536
+ <ol class="list-decimal pl-5 mt-2 space-y-2 text-gray-300">
537
+ <li>Vous commandez votre hébergement</li>
538
+ <li>Vous ouvrez un ticket de migration depuis votre espace client</li>
539
+ <li>Nos experts migrent votre site en moins de 24h (en moyenne)</li>
540
+ <li>Vous vérifiez que tout fonctionne correctement</li>
541
+ <li>Vous modifiez vos DNS pour basculer définitivement vers nos serveurs</li>
542
+ </ol>
543
+ <p class="text-gray-300 mt-2">Aucune interruption de service n'est nécessaire pendant la migration.</p>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- FAQ Item 3 -->
548
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 neon-border">
549
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
550
+ <h3 class="text-xl font-bold text-white">Quelle est la politique de remboursement ?</h3>
551
+ <svg class="w-6 h-6 text-purple-500 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
552
+ </button>
553
+ <div class="faq-content mt-4 hidden">
554
+ <p class="text-gray-300">Nous offrons une garantie de remboursement sans condition de 30 jours. Si vous n'êtes pas satisfait de notre service pour quelque raison que ce soit, vous pouvez demander un remboursement intégral dans les 30 jours suivant votre achat.</p>
555
+ <p class="text-gray-300 mt-2">Pour les renouvellements ou les achats après les 30 premiers jours, nous proposons un remboursement au prorata des mois non utilisés.</p>
556
+ </div>
557
+ </div>
558
+
559
+ <!-- FAQ Item 4 -->
560
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 neon-border">
561
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
562
+ <h3 class="text-xl font-bold text-white">Quelle est la différence entre vos serveurs et les autres hébergeurs ?</h3>
563
+ <svg class="w-6 h-6 text-cyan-500 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
564
+ </button>
565
+ <div class="faq-content mt-4 hidden">
566
+ <p class="text-gray-300">Plusieurs éléments nous distinguent :</p>
567
+ <ul class="list-disc pl-5 mt-2 space-y-2 text-gray-300">
568
+ <li><strong>Technologie SSD NVMe</strong> : Nos serveurs utilisent les disques les plus rapides du marché, jusqu'à 10x plus rapides que les SSD classiques</li>
569
+ <li><strong>Mise en cache avancée</strong> : Nous implémentons plusieurs couches de cache pour des performances optimales</li>
570
+ <li><strong>Ressources garanties</strong> : Contrairement à beaucoup d'hébergeurs, nous ne surchargeons pas nos serveurs</li>
571
+ <li><strong>Support technique</strong> : Notre équipe est disponible 24/7 avec des temps de réponse moyens de moins de 15 minutes</li>
572
+ <li><strong>Transparence</strong> : Pas de limitations cachées, pas de surprises</li>
573
+ </ul>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- FAQ Item 5 -->
578
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 neon-border">
579
+ <button class="flex justify-between items-center w-full text-left faq-toggle">
580
+ <h3 class="text-xl font-bold text-white">Puis-je mettre à niveau mon plan ultérieurement ?</h3>
581
+ <svg class="w-6 h-6 text-purple-500 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
582
+ </button>
583
+ <div class="faq-content mt-4 hidden">
584
+ <p class="text-gray-300">Oui, vous pouvez passer à un plan supérieur à tout moment depuis votre espace client. La migration vers le nouveau plan est instantanée et sans interruption de service.</p>
585
+ <p class="text-gray-300 mt-2">Pour les changements de plan en cours d'abonnement, nous appliquons un crédit au prorata des mois non utilisés sur votre ancien plan, que vous pouvez utiliser pour votre nouveau plan.</p>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="mt-12 text-center">
591
+ <p class="text-gray-300 mb-4">Vous ne trouvez pas la réponse à votre question ?</p>
592
+ <button class="px-6 py-2 border border-cyan-500 text-white rounded-lg hover:bg-cyan-900 hover:bg-opacity-30 transition-all duration-300">
593
+ Contactez notre support
594
+ </button>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- CTA Section -->
600
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-purple-900 to-cyan-900 relative overflow-hidden">
601
+ <div class="max-w-4xl mx-auto text-center">
602
+ <h2 class="text-3xl md:text-5xl font-bold mb-6 text-white">
603
+ Prêt à propulser votre site WordPress ?
604
+ </h2>
605
+ <p class="text-xl text-gray-200 mb-8">
606
+ Rejoignez plus de 8500 clients satisfaits et profitez de l'hébergement WordPress le plus rapide à seulement 2€/mois.
607
+ </p>
608
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
609
+ <a href="#pricing" class="px-8 py-4 bg-white text-purple-900 font-bold rounded-lg text-lg shadow-lg hover:bg-gray-100 transition-all duration-300">
610
+ Commander maintenant
611
+ </a>
612
+ <a href="#contact" class="px-8 py-4 border border-white text-white font-bold rounded-lg text-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300">
613
+ Nous contacter
614
+ </a>
615
+ </div>
616
+ </div>
617
+ </section>
618
+
619
+ <!-- Contact Section -->
620
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 relative overflow-hidden">
621
+ <div class="max-w-7xl mx-auto">
622
+ <div class="text-center mb-16">
623
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
624
+ <span class="gradient-text">Contactez-nous</span>
625
+ </h2>
626
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
627
+ Notre équipe est disponible 24/7 pour répondre à vos questions et vous aider à démarrer.
628
+ </p>
629
+ </div>
630
+
631
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
632
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 neon-border">
633
+ <h3 class="text-2xl font-bold text-white mb-6">Envoyez-nous un message</h3>
634
+ <form>
635
+ <div class="mb-6">
636
+ <label for="name" class="block text-gray-300 mb-2">Votre nom</label>
637
+ <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white">
638
+ </div>
639
+ <div class="mb-6">
640
+ <label for="email" class="block text-gray-300 mb-2">Votre email</label>
641
+ <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white">
642
+ </div>
643
+ <div class="mb-6">
644
+ <label for="subject" class="block text-gray-300 mb-2">Sujet</label>
645
+ <select id="subject" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white">
646
+ <option value="">Sélectionnez un sujet</option>
647
+ <option value="sales">Question commerciale</option>
648
+ <option value="support">Support technique</option>
649
+ <option value="migration">Migration de site</option>
650
+ <option value="other">Autre</option>
651
+ </select>
652
+ </div>
653
+ <div class="mb-6">
654
+ <label for="message" class="block text-gray-300 mb-2">Votre message</label>
655
+ <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"></textarea>
656
+ </div>
657
+ <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition-all duration-300">
658
+ Envoyer le message
659
+ </button>
660
+ </form>
661
+ </div>
662
+
663
+ <div>
664
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 neon-border mb-8">
665
+ <h3 class="text-2xl font-bold text-white mb-6">Informations de contact</h3>
666
+ <div class="space-y-6">
667
+ <div class="flex items-start">
668
+ <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center flex-shrink-0">
669
+ <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
670
+ </div>
671
+ <div class="ml-4">
672
+ <h4 class="text-lg font-bold text-white">Support téléphonique</h4>
673
+ <p class="text-gray-300 mt-1">Disponible 24h/24, 7j/7</p>
674
+ <p class="text-gray-300 mt-1 gradient-text font-medium">+33 1 23 45 67 89</p>
675
+ </div>
676
+ </div>
677
+
678
+ <div class="flex items-start">
679
+ <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center flex-shrink-0">
680
+ <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
681
+ </div>
682
+ <div class="ml-4">
683
+ <h4 class="text-lg font-bold text-white">Email</h4>
684
+ <p class="text-gray-300 mt-1">Temps de réponse moyen : 15 minutes</p>
685
+ <p class="text-gray-300 mt-1 gradient-text font-medium">[email protected]</p>
686
+ </div>
687
+ </div>
688
+
689
+ <div class="flex items-start">
690
+ <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center flex-shrink-0">
691
+ <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path></svg>
692
+ </div>
693
+ <div class="ml-4">
694
+ <h4 class="text-lg font-bold text-white">Chat en direct</h4>
695
+ <p class="text-gray-300 mt-1">Disponible dans votre espace client</p>
696
+ <p class="text-gray-300 mt-1">Connectez-vous pour discuter avec notre équipe</p>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 neon-border">
703
+ <h3 class="text-2xl font-bold text-white mb-6">Nos réseaux sociaux</h3>
704
+ <div class="flex space-x-4">
705
+ <a href="#" class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white hover:opacity-90 transition-all duration-300">
706
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
707
+ </a>
708
+ <a href="#" class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white hover:opacity-90 transition-all duration-300">
709
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
710
+ </a>
711
+ <a href="#" class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white hover:opacity-90 transition-all duration-300">
712
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
713
+ </a>
714
+ <a href="#" class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white hover:opacity-90 transition-all duration-300">
715
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
716
+ </a>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </section>
723
+
724
+ <!-- Footer -->
725
+ <footer class="bg-gray-900 border-t border-gray-800">
726
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
727
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
728
+ <div>
729
+ <h3 class="text-lg font-bold text-white mb-4">
730
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ un site Hébergement Web WordPress 2, euro / par mois ! Stockage SSD ULTRA illimité Plus de 450 applications cloud Créateur de sites Web SitePad Comptes de messagerie illimités Mise en cache du contenu global Garantie de remboursement de 30 jours Migration de site Web gratuite Certificats SSL gratuits : je veux une version tres futuriste et tres animé , je veux pas de site d'exemple je veux pas de site de simulation je veux un vrai site eel pret a l'emploi de suite Thought for 8 seconds Je vais créer un site d'hébergement web futuriste et animé en français. Voici une implémentation complète prête à l'emploi : J'ai créé un site d'hébergement web futuriste et animé en français, comme demandé. Voici les caractéristiques principales : Design futuriste : Interface sombre avec des accents néon en dégradé violet/cyan Animations fluides et particules en mouvement Effets de survol et transitions élégantes Éléments flottants et effets de lumière Sections complètes : En-tête avec navigation Section héro avec mise en avant du prix à 2€/mois Section fonctionnalités présentant tous les avantages mentionnés Section tarifs avec trois formules Appel à l'action Pied de page complet Fonctionnalités mises en avant : Stockage SSD ULTRA illimité Plus de 450 applications cloud Créateur de sites Web SitePad Comptes de messagerie illimités Mise en cache du contenu global Certificats SSL gratuits Migration de site Web gratuite Garantie de remboursement de 30 jours Le site est entièrement fonctionnel, responsive et prêt à l'emploi. Il utilise Framer Motion pour les animations avancées et Tailwind CSS pour le style.