Hugging Face's logo

Spaces:
docto41
/
grc-pro
Running

App Files Community
docto41 commited on
Commit
28d4e15
·
verified ·
1 Parent(s): d8dad9f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +715 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Grc Pro
3
- emoji: 📉
4
- colorFrom: gray
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: grc-pro
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,715 @@
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>GRC Site Pro - Créateur de Sites Web Professionnels</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
12
+ }
13
+ .feature-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .template-card:hover .template-overlay {
18
+ opacity: 1;
19
+ }
20
+ .template-overlay {
21
+ transition: all 0.3s ease;
22
+ opacity: 0;
23
+ }
24
+ .floating-animation {
25
+ animation: float 6s ease-in-out infinite;
26
+ }
27
+ @keyframes float {
28
+ 0% { transform: translateY(0px); }
29
+ 50% { transform: translateY(-20px); }
30
+ 100% { transform: translateY(0px); }
31
+ }
32
+ .mobile-menu {
33
+ display: none;
34
+ }
35
+ .mobile-menu.active {
36
+ display: block;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="font-sans antialiased text-gray-800">
41
+ <!-- Navigation -->
42
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
43
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
44
+ <div class="flex justify-between h-16">
45
+ <div class="flex items-center">
46
+ <div class="flex-shrink-0 flex items-center">
47
+ <i class="fas fa-shield-alt text-blue-600 text-2xl mr-2"></i>
48
+ <span class="text-xl font-bold text-blue-600">GRC Site Pro</span>
49
+ </div>
50
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
51
+ <a href="#home" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a>
52
+ <a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Fonctionnalités</a>
53
+ <a href="#templates" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Modèles</a>
54
+ <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tarifs</a>
55
+ </div>
56
+ </div>
57
+ <div class="hidden md:ml-6 md:flex md:items-center">
58
+ <button id="free-trial-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Essai gratuit</button>
59
+ </div>
60
+ <div class="-mr-2 flex items-center md:hidden">
61
+ <button id="mobile-menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
62
+ <span class="sr-only">Open main menu</span>
63
+ <i class="fas fa-bars"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Mobile menu -->
70
+ <div id="mobile-menu" class="mobile-menu md:hidden">
71
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
72
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Accueil</a>
73
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Fonctionnalités</a>
74
+ <a href="#templates" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Modèles</a>
75
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Tarifs</a>
76
+ <button id="mobile-free-trial-btn" class="w-full text-left px-3 py-2 rounded-md text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50">Essai gratuit</button>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Hero Section -->
82
+ <div id="home" class="gradient-bg">
83
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
84
+ <div class="text-center">
85
+ <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
86
+ Créez votre site GRC professionnel en minutes
87
+ </h1>
88
+ <p class="mt-6 max-w-lg mx-auto text-xl text-blue-100">
89
+ Plus de 1 000 modèles, outils de conversion et e-commerce intégré. Hébergement gratuit inclus.
90
+ </p>
91
+ <div class="mt-10 flex justify-center space-x-4">
92
+ <button id="start-free-btn" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 md:py-4 md:text-lg md:px-10">
93
+ Commencer gratuitement
94
+ </button>
95
+ <button id="see-demo-btn" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 bg-opacity-60 hover:bg-opacity-80 md:py-4 md:text-lg md:px-10">
96
+ Voir la démo
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Features Section -->
104
+ <div id="features" class="py-12 bg-white">
105
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
+ <div class="lg:text-center">
107
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Fonctionnalités</h2>
108
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
109
+ Tout ce dont vous avez besoin pour réussir en ligne
110
+ </p>
111
+ </div>
112
+
113
+ <div class="mt-10">
114
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
115
+ <!-- Feature 1 -->
116
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
117
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
118
+ <i class="fas fa-paint-brush text-xl"></i>
119
+ </div>
120
+ <h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">+1000 modèles professionnels</h3>
121
+ <p class="mt-2 text-base text-gray-500">
122
+ Choisissez parmi plus de 1 000 modèles conçus par des experts pour tous les secteurs d'activité.
123
+ </p>
124
+ </div>
125
+
126
+ <!-- Feature 2 -->
127
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
128
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
129
+ <i class="fas fa-funnel-dollar text-xl"></i>
130
+ </div>
131
+ <h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">Entonnoirs de conversion</h3>
132
+ <p class="mt-2 text-base text-gray-500">
133
+ Optimisez vos taux de conversion avec nos entonnoirs pré-conçus et personnalisables.
134
+ </p>
135
+ </div>
136
+
137
+ <!-- Feature 3 -->
138
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
139
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
140
+ <i class="fas fa-store text-xl"></i>
141
+ </div>
142
+ <h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">E-commerce & Dropshipping</h3>
143
+ <p class="mt-2 text-base text-gray-500">
144
+ Lancez votre boutique en ligne avec gestion des stocks, paiements et intégration dropshipping.
145
+ </p>
146
+ </div>
147
+
148
+ <!-- Feature 4 -->
149
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
150
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
151
+ <i class="fas fa-robot text-xl"></i>
152
+ </div>
153
+ <h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">Créateur IA</h3>
154
+ <p class="mt-2 text-base text-gray-500">
155
+ Notre IA génère automatiquement du contenu, des images et des designs optimisés pour votre secteur.
156
+ </p>
157
+ </div>
158
+
159
+ <!-- Feature 5 -->
160
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
161
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
162
+ <i class="fas fa-server text-xl"></i>
163
+ </div>
164
+ <h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">Hébergement gratuit</h3>
165
+ <p class="mt-2 text-base text-gray-500">
166
+ Bénéficiez d'un hébergement haute performance et d'un nom de domaine gratuit pendant 1 an.
167
+ </p>
168
+ </div>
169
+
170
+ <!-- Feature 6 -->
171
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
172
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
173
+ <i class="fas fa-shield-alt text-xl"></i>
174
+ </div>
175
+ <h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">GRC intégré</h3>
176
+ <p class="mt-2 text-base text-gray-500">
177
+ Outils de conformité, gestion des risques et tableau de bord de gouvernance intégrés.
178
+ </p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Templates Showcase -->
186
+ <div id="templates" class="py-16 bg-gray-50">
187
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
188
+ <div class="text-center">
189
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Modèles</h2>
190
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
191
+ Parcourez nos modèles les plus populaires
192
+ </p>
193
+ </div>
194
+
195
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
196
+ <!-- Template 1 -->
197
+ <div class="template-card group relative bg-white rounded-lg overflow-hidden shadow-md">
198
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Template 1" class="w-full h-64 object-cover">
199
+ <div class="template-overlay absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center">
200
+ <button class="use-template-btn text-white font-medium px-6 py-3 bg-blue-800 rounded-md hover:bg-blue-900" data-template="Corporate GRC">Utiliser ce modèle</button>
201
+ </div>
202
+ <div class="p-4">
203
+ <h3 class="text-lg font-medium text-gray-900">Corporate GRC</h3>
204
+ <p class="mt-1 text-sm text-gray-500">Parfait pour les grandes entreprises</p>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Template 2 -->
209
+ <div class="template-card group relative bg-white rounded-lg overflow-hidden shadow-md">
210
+ <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Template 2" class="w-full h-64 object-cover">
211
+ <div class="template-overlay absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center">
212
+ <button class="use-template-btn text-white font-medium px-6 py-3 bg-blue-800 rounded-md hover:bg-blue-900" data-template="E-commerce Sécurisé">Utiliser ce modèle</button>
213
+ </div>
214
+ <div class="p-4">
215
+ <h3 class="text-lg font-medium text-gray-900">E-commerce Sécurisé</h3>
216
+ <p class="mt-1 text-sm text-gray-500">Boutique en ligne avec paiements sécurisés</p>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Template 3 -->
221
+ <div class="template-card group relative bg-white rounded-lg overflow-hidden shadow-md">
222
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Template 3" class="w-full h-64 object-cover">
223
+ <div class="template-overlay absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center">
224
+ <button class="use-template-btn text-white font-medium px-6 py-3 bg-blue-800 rounded-md hover:bg-blue-900" data-template="Consulting Professionnel">Utiliser ce modèle</button>
225
+ </div>
226
+ <div class="p-4">
227
+ <h3 class="text-lg font-medium text-gray-900">Consulting Professionnel</h3>
228
+ <p class="mt-1 text-sm text-gray-500">Pour consultants et indépendants</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="mt-10 text-center">
234
+ <button id="view-all-templates-btn" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
235
+ Voir tous les modèles <i class="fas fa-arrow-right ml-2"></i>
236
+ </button>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- AI Builder Demo -->
242
+ <div class="py-16 bg-white">
243
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
244
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
245
+ <div class="relative">
246
+ <div class="floating-animation">
247
+ <img class="mx-auto rounded-lg shadow-xl w-full" src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="AI Builder">
248
+ </div>
249
+ <div class="absolute -bottom-8 -left-8 bg-blue-100 rounded-lg p-4 shadow-lg">
250
+ <div class="flex">
251
+ <div class="flex-shrink-0">
252
+ <i class="fas fa-magic text-blue-600"></i>
253
+ </div>
254
+ <div class="ml-3">
255
+ <p class="text-sm font-medium text-blue-900">Notre IA a généré ce design en 27 secondes</p>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="mt-12 lg:mt-0">
261
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
262
+ Création de site automatisée par IA
263
+ </h2>
264
+ <p class="mt-3 text-lg text-gray-500">
265
+ Notre intelligence artificielle analyse votre secteur d'activité et crée automatiquement un site web optimisé pour vos besoins spécifiques.
266
+ </p>
267
+ <div class="mt-8">
268
+ <div class="inline-flex rounded-md shadow">
269
+ <button id="try-ai-builder-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
270
+ Essayer le créateur IA <i class="fas fa-robot ml-2"></i>
271
+ </button>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Testimonials -->
280
+ <div class="gradient-bg py-16">
281
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
282
+ <div class="lg:text-center">
283
+ <h2 class="text-base text-blue-200 font-semibold tracking-wide uppercase">Témoignages</h2>
284
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
285
+ Ce que nos clients disent
286
+ </p>
287
+ </div>
288
+ <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
289
+ <!-- Testimonial 1 -->
290
+ <div class="bg-white p-6 rounded-lg shadow">
291
+ <div class="flex items-center">
292
+ <div class="flex-shrink-0">
293
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Client 1">
294
+ </div>
295
+ <div class="ml-4">
296
+ <h4 class="text-lg font-medium text-gray-900">Sophie Martin</h4>
297
+ <p class="text-blue-600">Consultante en conformité</p>
298
+ </div>
299
+ </div>
300
+ <div class="mt-4">
301
+ <p class="text-gray-600">
302
+ "J'ai pu créer un site professionnel pour mon cabinet en moins d'une heure. Les outils de conformité intégrés sont un vrai plus pour mon activité."
303
+ </p>
304
+ </div>
305
+ <div class="mt-4 flex">
306
+ <i class="fas fa-star text-yellow-400"></i>
307
+ <i class="fas fa-star text-yellow-400"></i>
308
+ <i class="fas fa-star text-yellow-400"></i>
309
+ <i class="fas fa-star text-yellow-400"></i>
310
+ <i class="fas fa-star text-yellow-400"></i>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Testimonial 2 -->
315
+ <div class="bg-white p-6 rounded-lg shadow">
316
+ <div class="flex items-center">
317
+ <div class="flex-shrink-0">
318
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Client 2">
319
+ </div>
320
+ <div class="ml-4">
321
+ <h4 class="text-lg font-medium text-gray-900">Jean Dupont</h4>
322
+ <p class="text-blue-600">Directeur GRC</p>
323
+ </div>
324
+ </div>
325
+ <div class="mt-4">
326
+ <p class="text-gray-600">
327
+ "La gestion des risques intégrée au site a révolutionné notre façon de travailler. Plus besoin de multiples outils, tout est centralisé."
328
+ </p>
329
+ </div>
330
+ <div class="mt-4 flex">
331
+ <i class="fas fa-star text-yellow-400"></i>
332
+ <i class="fas fa-star text-yellow-400"></i>
333
+ <i class="fas fa-star text-yellow-400"></i>
334
+ <i class="fas fa-star text-yellow-400"></i>
335
+ <i class="fas fa-star text-yellow-400"></i>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Testimonial 3 -->
340
+ <div class="bg-white p-6 rounded-lg shadow">
341
+ <div class="flex items-center">
342
+ <div class="flex-shrink-0">
343
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Client 3">
344
+ </div>
345
+ <div class="ml-4">
346
+ <h4 class="text-lg font-medium text-gray-900">Marie Leroy</h4>
347
+ <p class="text-blue-600">Entrepreneure e-commerce</p>
348
+ </div>
349
+ </div>
350
+ <div class="mt-4">
351
+ <p class="text-gray-600">
352
+ "Mon chiffre d'affaires a augmenté de 40% après avoir optimisé les entonnoirs de vente. L'intégration dropshipping est parfaite."
353
+ </p>
354
+ </div>
355
+ <div class="mt-4 flex">
356
+ <i class="fas fa-star text-yellow-400"></i>
357
+ <i class="fas fa-star text-yellow-400"></i>
358
+ <i class="fas fa-star text-yellow-400"></i>
359
+ <i class="fas fa-star text-yellow-400"></i>
360
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Pricing -->
368
+ <div id="pricing" class="py-16 bg-gray-50">
369
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
370
+ <div class="text-center">
371
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Tarifs</h2>
372
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
373
+ Des options pour chaque besoin
374
+ </p>
375
+ </div>
376
+
377
+ <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto">
378
+ <!-- Basic Plan -->
379
+ <div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
380
+ <div class="p-6">
381
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Basique</h2>
382
+ <p class="mt-4 text-sm text-gray-500">Parfait pour les particuliers et petits projets</p>
383
+ <p class="mt-8">
384
+ <span class="text-4xl font-extrabold text-gray-900">9€</span>
385
+ <span class="text-base font-medium text-gray-500">/mois</span>
386
+ </p>
387
+ <button class="select-plan-btn mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900" data-plan="basique">
388
+ Choisir ce plan
389
+ </button>
390
+ </div>
391
+ <div class="pt-6 pb-8 px-6">
392
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Ce qui est inclus</h3>
393
+ <ul class="mt-6 space-y-4">
394
+ <li class="flex space-x-3">
395
+ <i class="fas fa-check text-green-500"></i>
396
+ <span class="text-sm text-gray-500">1 site web</span>
397
+ </li>
398
+ <li class="flex space-x-3">
399
+ <i class="fas fa-check text-green-500"></i>
400
+ <span class="text-sm text-gray-500">100 modèles</span>
401
+ </li>
402
+ <li class="flex space-x-3">
403
+ <i class="fas fa-check text-green-500"></i>
404
+ <span class="text-sm text-gray-500">5 pages maximum</span>
405
+ </li>
406
+ <li class="flex space-x-3">
407
+ <i class="fas fa-check text-green-500"></i>
408
+ <span class="text-sm text-gray-500">Hébergement basique</span>
409
+ </li>
410
+ </ul>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Pro Plan -->
415
+ <div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
416
+ <div class="p-6">
417
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Professionnel</h2>
418
+ <p class="mt-4 text-sm text-gray-500">Pour les professionnels et petites entreprises</p>
419
+ <p class="mt-8">
420
+ <span class="text-4xl font-extrabold text-gray-900">29€</span>
421
+ <span class="text-base font-medium text-gray-500">/mois</span>
422
+ </p>
423
+ <button class="select-plan-btn mt-8 block w-full bg-blue-600 border border-blue-600 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-blue-700" data-plan="professionnel">
424
+ Choisir ce plan
425
+ </button>
426
+ </div>
427
+ <div class="pt-6 pb-8 px-6">
428
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Ce qui est inclus</h3>
429
+ <ul class="mt-6 space-y-4">
430
+ <li class="flex space-x-3">
431
+ <i class="fas fa-check text-green-500"></i>
432
+ <span class="text-sm text-gray-500">3 sites web</span>
433
+ </li>
434
+ <li class="flex space-x-3">
435
+ <i class="fas fa-check text-green-500"></i>
436
+ <span class="text-sm text-gray-500">Tous les modèles</span>
437
+ </li>
438
+ <li class="flex space-x-3">
439
+ <i class="fas fa-check text-green-500"></i>
440
+ <span class="text-sm text-gray-500">Pages illimitées</span>
441
+ </li>
442
+ <li class="flex space-x-3">
443
+ <i class="fas fa-check text-green-500"></i>
444
+ <span class="text-sm text-gray-500">Hébergement premium</span>
445
+ </li>
446
+ <li class="flex space-x-3">
447
+ <i class="fas fa-check text-green-500"></i>
448
+ <span class="text-sm text-gray-500">Nom de domaine gratuit</span>
449
+ </li>
450
+ <li class="flex space-x-3">
451
+ <i class="fas fa-check text-green-500"></i>
452
+ <span class="text-sm text-gray-500">Outils GRC de base</span>
453
+ </li>
454
+ </ul>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Enterprise Plan -->
459
+ <div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
460
+ <div class="p-6">
461
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Entreprise</h2>
462
+ <p class="mt-4 text-sm text-gray-500">Pour les grandes entreprises et e-commerce</p>
463
+ <p class="mt-8">
464
+ <span class="text-4xl font-extrabold text-gray-900">99€</span>
465
+ <span class="text-base font-medium text-gray-500">/mois</span>
466
+ </p>
467
+ <button class="select-plan-btn mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900" data-plan="entreprise">
468
+ Choisir ce plan
469
+ </button>
470
+ </div>
471
+ <div class="pt-6 pb-8 px-6">
472
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Ce qui est inclus</h3>
473
+ <ul class="mt-6 space-y-4">
474
+ <li class="flex space-x-3">
475
+ <i class="fas fa-check text-green-500"></i>
476
+ <span class="text-sm text-gray-500">Sites web illimités</span>
477
+ </li>
478
+ <li class="flex space-x-3">
479
+ <i class="fas fa-check text-green-500"></i>
480
+ <span class="text-sm text-gray-500">Tous les modèles premium</span>
481
+ </li>
482
+ <li class="flex space-x-3">
483
+ <i class="fas fa-check text-green-500"></i>
484
+ <span class="text-sm text-gray-500">E-commerce complet</span>
485
+ </li>
486
+ <li class="flex space-x-3">
487
+ <i class="fas fa-check text-green-500"></i>
488
+ <span class="text-sm text-gray-500">Hébergement enterprise</span>
489
+ </li>
490
+ <li class="flex space-x-3">
491
+ <i class="fas fa-check text-green-500"></i>
492
+ <span class="text-sm text-gray-500">Noms de domaine gratuits</span>
493
+ </li>
494
+ <li class="flex space-x-3">
495
+ <i class="fas fa-check text-green-500"></i>
496
+ <span class="text-sm text-gray-500">Suite GRC complète</span>
497
+ </li>
498
+ <li class="flex space-x-3">
499
+ <i class="fas fa-check text-green-500"></i>
500
+ <span class="text-sm text-gray-500">Support prioritaire</span>
501
+ </li>
502
+ </ul>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- CTA Section -->
510
+ <div class="bg-white">
511
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
512
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
513
+ <span class="block">Prêt à lancer votre site ?</span>
514
+ <span class="block text-blue-600">Commencez gratuitement dès aujourd'hui.</span>
515
+ </h2>
516
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
517
+ <div class="inline-flex rounded-md shadow">
518
+ <button id="create-site-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
519
+ Créer mon site <i class="fas fa-arrow-right ml-2"></i>
520
+ </button>
521
+ </div>
522
+ <div class="ml-3 inline-flex rounded-md shadow">
523
+ <button id="see-demo-cta-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50">
524
+ Voir la démo
525
+ </button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- Footer -->
532
+ <footer class="bg-gray-800">
533
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
534
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
535
+ <div>
536
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Produit</h3>
537
+ <ul class="mt-4 space-y-4">
538
+ <li><a href="#features" class="text-base text-gray-300 hover:text-white">Fonctionnalités</a></li>
539
+ <li><a href="#templates" class="text-base text-gray-300 hover:text-white">Modèles</a></li>
540
+ <li><a href="#pricing" class="text-base text-gray-300 hover:text-white">Tarifs</a></li>
541
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li>
542
+ </ul>
543
+ </div>
544
+ <div>
545
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3>
546
+ <ul class="mt-4 space-y-4">
547
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li>
548
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
549
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li>
550
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Presse</a></li>
551
+ </ul>
552
+ </div>
553
+ <div>
554
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
555
+ <ul class="mt-4 space-y-4">
556
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Centre d'aide</a></li>
557
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
558
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Sécurité</a></li>
559
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Statut</a></li>
560
+ </ul>
561
+ </div>
562
+ <div>
563
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Légal</h3>
564
+ <ul class="mt-4 space-y-4">
565
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Confidentialité</a></li>
566
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Conditions</a></li>
567
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Politique cookies</a></li>
568
+ </ul>
569
+ </div>
570
+ </div>
571
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
572
+ <div class="flex space-x-6 md:order-2">
573
+ <a href="#" class="text-gray-400 hover:text-gray-300">
574
+ <span class="sr-only">Facebook</span>
575
+ <i class="fab fa-facebook-f"></i>
576
+ </a>
577
+ <a href="#" class="text-gray-400 hover:text-gray-300">
578
+ <span class="sr-only">Instagram</span>
579
+ <i class="fab fa-instagram"></i>
580
+ </a>
581
+ <a href="#" class="text-gray-400 hover:text-gray-300">
582
+ <span class="sr-only">Twitter</span>
583
+ <i class="fab fa-twitter"></i>
584
+ </a>
585
+ <a href="#" class="text-gray-400 hover:text-gray-300">
586
+ <span class="sr-only">LinkedIn</span>
587
+ <i class="fab fa-linkedin-in"></i>
588
+ </a>
589
+ </div>
590
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
591
+ &copy; 2023 GRC Site Pro. Tous droits réservés.
592
+ </p>
593
+ </div>
594
+ </div>
595
+ </footer>
596
+
597
+ <!-- Modal -->
598
+ <div id="modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
599
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
600
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
601
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
602
+ </div>
603
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
604
+ <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
605
+ <div>
606
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
607
+ <i class="fas fa-check text-blue-600"></i>
608
+ </div>
609
+ <div class="mt-3 text-center sm:mt-5">
610
+ <h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900"></h3>
611
+ <div class="mt-2">
612
+ <p id="modal-content" class="text-sm text-gray-500"></p>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ <div class="mt-5 sm:mt-6">
617
+ <button id="modal-close-btn" type="button" class="inline-flex justify-center w-full 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:text-sm">
618
+ Fermer
619
+ </button>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <script>
626
+ // Mobile menu toggle
627
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
628
+ const mobileMenu = document.getElementById('mobile-menu');
629
+
630
+ mobileMenuBtn.addEventListener('click', () => {
631
+ mobileMenu.classList.toggle('active');
632
+ });
633
+
634
+ // Modal functionality
635
+ const modal = document.getElementById('modal');
636
+ const modalTitle = document.getElementById('modal-title');
637
+ const modalContent = document.getElementById('modal-content');
638
+ const modalCloseBtn = document.getElementById('modal-close-btn');
639
+
640
+ function showModal(title, content) {
641
+ modalTitle.textContent = title;
642
+ modalContent.textContent = content;
643
+ modal.classList.remove('hidden');
644
+ document.body.style.overflow = 'hidden';
645
+ }
646
+
647
+ function hideModal() {
648
+ modal.classList.add('hidden');
649
+ document.body.style.overflow = 'auto';
650
+ }
651
+
652
+ modalCloseBtn.addEventListener('click', hideModal);
653
+
654
+ // Button event handlers
655
+ document.getElementById('free-trial-btn').addEventListener('click', () => {
656
+ showModal('Essai gratuit', 'Vous allez être redirigé vers la page d\'inscription pour votre essai gratuit de 14 jours.');
657
+ });
658
+
659
+ document.getElementById('mobile-free-trial-btn').addEventListener('click', () => {
660
+ showModal('Essai gratuit', 'Vous allez être redirigé vers la page d\'inscription pour votre essai gratuit de 14 jours.');
661
+ mobileMenu.classList.remove('active');
662
+ });
663
+
664
+ document.getElementById('start-free-btn').addEventListener('click', () => {
665
+ showModal('Commencer gratuitement', 'Créez votre compte maintenant et commencez à construire votre site GRC professionnel en quelques minutes.');
666
+ });
667
+
668
+ document.getElementById('see-demo-btn').addEventListener('click', () => {
669
+ showModal('Démo en direct', 'Découvrez notre plateforme avec une démonstration interactive de toutes les fonctionnalités.');
670
+ });
671
+
672
+ document.getElementById('see-demo-cta-btn').addEventListener('click', () => {
673
+ showModal('Démo en direct', 'Découvrez notre plateforme avec une démonstration interactive de toutes les fonctionnalités.');
674
+ });
675
+
676
+ document.getElementById('try-ai-builder-btn').addEventListener('click', () => {
677
+ showModal('Créateur IA', 'Notre intelligence artificielle va vous poser quelques questions pour générer un site parfaitement adapté à vos besoins.');
678
+ });
679
+
680
+ document.getElementById('view-all-templates-btn').addEventListener('click', () => {
681
+ showModal('Tous les modèles', 'Parcourez notre bibliothèque complète de plus de 1000 modèles professionnels pour tous les secteurs.');
682
+ });
683
+
684
+ document.getElementById('create-site-btn').addEventListener('click', () => {
685
+ showModal('Création de site', 'Choisissez un modèle ou laissez notre IA créer un site personnalisé pour vous.');
686
+ });
687
+
688
+ // Template buttons
689
+ document.querySelectorAll('.use-template-btn').forEach(btn => {
690
+ btn.addEventListener('click', (e) => {
691
+ const templateName = e.target.getAttribute('data-template');
692
+ showModal('Utiliser un modèle', `Vous avez sélectionné le modèle "${templateName}". Nous allons maintenant personnaliser ce modèle pour votre activité.`);
693
+ });
694
+ });
695
+
696
+ // Plan selection buttons
697
+ document.querySelectorAll('.select-plan-btn').forEach(btn => {
698
+ btn.addEventListener('click', (e) => {
699
+ const plan = e.target.getAttribute('data-plan');
700
+ showModal('Souscription', `Vous avez choisi le plan ${plan}. Vous allez être redirigé vers notre formulaire de paiement sécurisé.`);
701
+ });
702
+ });
703
+
704
+ // Smooth scrolling for anchor links
705
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
706
+ anchor.addEventListener('click', function (e) {
707
+ e.preventDefault();
708
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
709
+ behavior: 'smooth'
710
+ });
711
+ });
712
+ });
713
+ </script>
714
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/grc-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
715
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Logiciel de création de site Web GRC, plus de 1 000 modèles, formulaires, entonnoirs de conversion, commerce électronique, création de boutique en ligne dropshipping, hébergement de domaine gratuit et créateur d'IA
2
+ activer toutes les bouton qui ne fonctionne pas