Hugging Face's logo

Spaces:
christjeason
/
cccc
Running

App Files Community
christjeason commited on
Commit
3762ac0
·
verified ·
1 Parent(s): 28405e6

🎯 Prompt pour gĂ©nĂ©rer un site internet premium d'agence de sĂ©curitĂ© Nom de l'agence : Riane Babet SĂ©curity (RBS) Positionnement : Agence de sĂ©curitĂ© rapprochĂ©e & Ă©vĂ©nementielle prestige, spĂ©cialisĂ©e dans la protection des personnalitĂ©s publiques, artistes, VIP et Ă©vĂ©nements de haut niveau. đŸ’» Prompt Ă  copier/coller dans un gĂ©nĂ©rateur de site ou Ă  fournir Ă  un dĂ©veloppeur : CrĂ©e un site vitrine premium, Ă©lĂ©gant et impactant pour une agence de sĂ©curitĂ© privĂ©e haut de gamme nommĂ©e Riane Babet SĂ©curity (RBS). Le site doit Ă©voquer prestige, discrĂ©tion, expertise et protection haut niveau. ✅ Structure du site (Ă  respecter) : Page d’accueil immersive Fond en vidĂ©o plein Ă©cran : scĂšnes de sĂ©curitĂ© rapprochĂ©e (VIP escortĂ©, concert, tapis rouge, etc.) Slogan accrocheur style : “Riane Babet SĂ©curity – L’ombre qui protĂšge la lumiĂšre.” Bouton d’action : « Demande de devis express » et « Contact 24h/24 » Nos Expertises SĂ©curitĂ© rapprochĂ©e (garde du corps, escorte VIP, sĂ©curisation dĂ©placements) SĂ©curitĂ© Ă©vĂ©nementielle (festivals, concerts, mariages VIP) Gestion de foule, filtrage, accĂšs VIP Nos RĂ©alisations Mise en avant d’évĂ©nements couverts avec photos anonymisĂ©es Clients prestigieux sans nom (ex : “TournĂ©e internationale 2024”, “CĂ©rĂ©monie privĂ©e”) Notre Équipe Profils des agents (photos floutĂ©es / silhouettes) CertifiĂ©s, multilingues, experts en sĂ©curitĂ© rapprochĂ©e Tenues sobres, discrĂštes et professionnelles MĂ©thodologie & DiscrĂ©tion Code de conduite, confidentialitĂ© ProcĂ©dures d’intervention Engagement zĂ©ro faille Devis Express / RĂ©servation rapide Formulaire court, responsive Choix de prestation, localisation, date, heure PossibilitĂ© d’appel WhatsApp ou contact direct 24h/24 Page Contact WhatsApp pro intĂ©grĂ© Mail / tĂ©lĂ©phone / rĂ©seaux sociaux DisponibilitĂ© : 24h/24 – 7j/7 🎹 Design souhaitĂ© : Couleurs dominantes : noir Ă©lĂ©gant, or discret, blanc pur Police sobre, moderne et luxueuse IcĂŽnes animĂ©es, transitions fluides Responsive mobile first Style premium Ă  la James Bond / Maison de luxe - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +412 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cccc
3
- emoji: 🌍
4
- colorFrom: indigo
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: cccc
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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,412 @@
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>Riane Babet SĂ©curity - Protection Haut de Gamme</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
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Montserrat', sans-serif;
13
+ color: #f8f8f8;
14
+ overflow-x: hidden;
15
+ }
16
+
17
+ .hero-video {
18
+ position: absolute;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ height: 100%;
23
+ object-fit: cover;
24
+ z-index: -1;
25
+ filter: brightness(0.4);
26
+ }
27
+
28
+ .title-font {
29
+ font-family: 'Playfair Display', serif;
30
+ }
31
+
32
+ .gold-line {
33
+ height: 2px;
34
+ width: 80px;
35
+ background: linear-gradient(90deg, #D4AF37, #F4E5C2, #D4AF37);
36
+ margin: 20px auto;
37
+ }
38
+
39
+ .service-card:hover {
40
+ transform: translateY(-10px);
41
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
42
+ }
43
+
44
+ .team-member {
45
+ transition: all 0.3s ease;
46
+ }
47
+
48
+ .team-member:hover {
49
+ transform: scale(1.05);
50
+ }
51
+
52
+ .contact-icon {
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .contact-icon:hover {
57
+ transform: scale(1.2);
58
+ color: #D4AF37;
59
+ }
60
+
61
+ .nav-link {
62
+ position: relative;
63
+ }
64
+
65
+ .nav-link::after {
66
+ content: '';
67
+ position: absolute;
68
+ width: 0;
69
+ height: 2px;
70
+ bottom: -2px;
71
+ left: 0;
72
+ background-color: #D4AF37;
73
+ transition: width 0.3s ease;
74
+ }
75
+
76
+ .nav-link:hover::after {
77
+ width: 100%;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-black">
82
+ <!-- Navigation -->
83
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="flex justify-between h-24 items-center">
86
+ <div class="flex-shrink-0 flex items-center">
87
+ <span class="text-white title-font text-2xl font-bold tracking-wider">RBS</span>
88
+ <span class="ml-2 text-white title-font text-xl hidden sm:block">Riane Babet SĂ©curity</span>
89
+ </div>
90
+ <div class="hidden md:block">
91
+ <div class="ml-10 flex items-baseline space-x-8">
92
+ <a href="#home" class="nav-link text-white hover:text-gold-500 px-3 py-2 text-sm font-medium">Accueil</a>
93
+ <a href="#expertise" class="nav-link text-white hover:text-gold-500 px-3 py-2 text-sm font-medium">Expertises</a>
94
+ <a href="#realisations" class="nav-link text-white hover:text-gold-500 px-3 py-2 text-sm font-medium">RĂ©alisations</a>
95
+ <a href="#equipe" class="nav-link text-white hover:text-gold-500 px-3 py-2 text-sm font-medium">Équipe</a>
96
+ <a href="#methodologie" class="nav-link text-white hover:text-gold-500 px-3 py-2 text-sm font-medium">MĂ©thodologie</a>
97
+ <a href="#contact" class="nav-link text-white hover:text-gold-500 px-3 py-2 text-sm font-medium">Contact</a>
98
+ </div>
99
+ </div>
100
+ <div class="md:hidden">
101
+ <button type="button" class="text-white hover:text-gold-500 focus:outline-none" id="mobile-menu-button">
102
+ <i class="fas fa-bars text-2xl"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Mobile menu -->
109
+ <div class="hidden bg-black bg-opacity-90" id="mobile-menu">
110
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
111
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-white hover:text-gold-500">Accueil</a>
112
+ <a href="#expertise" class="block px-3 py-2 text-base font-medium text-white hover:text-gold-500">Expertises</a>
113
+ <a href="#realisations" class="block px-3 py-2 text-base font-medium text-white hover:text-gold-500">RĂ©alisations</a>
114
+ <a href="#equipe" class="block px-3 py-2 text-base font-medium text-white hover:text-gold-500">Équipe</a>
115
+ <a href="#methodologie" class="block px-3 py-2 text-base font-medium text-white hover:text-gold-500">MĂ©thodologie</a>
116
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-white hover:text-gold-500">Contact</a>
117
+ </div>
118
+ </div>
119
+ </nav>
120
+
121
+ <!-- Hero Section -->
122
+ <section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
123
+ <video autoplay muted loop class="hero-video">
124
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-bodyguard-walking-with-a-celebrity-in-a-crowd-42950-large.mp4" type="video/mp4">
125
+ Your browser does not support the video tag.
126
+ </video>
127
+
128
+ <div class="absolute inset-0 bg-black opacity-40"></div>
129
+
130
+ <div class="relative z-10 text-center px-4">
131
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white title-font mb-6">
132
+ Riane Babet SĂ©curity
133
+ </h1>
134
+ <div class="gold-line"></div>
135
+ <p class="text-xl md:text-2xl text-white mt-6 mb-10 italic">
136
+ "L'ombre qui protĂšge la lumiĂšre."
137
+ </p>
138
+ <div class="flex flex-col sm:flex-row justify-center gap-4 mt-8">
139
+ <a href="#devis" class="bg-gradient-to-r from-yellow-600 to-yellow-800 hover:from-yellow-700 hover:to-yellow-900 text-white font-bold py-3 px-8 rounded-sm transition duration-300 transform hover:scale-105">
140
+ Demande de devis express
141
+ </a>
142
+ <a href="#contact" class="bg-transparent border-2 border-yellow-600 hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-sm transition duration-300 transform hover:scale-105">
143
+ Contact 24h/24
144
+ </a>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
149
+ <a href="#expertise" class="text-white animate-bounce">
150
+ <i class="fas fa-chevron-down text-3xl"></i>
151
+ </a>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Expertises Section -->
156
+ <section id="expertise" class="py-20 bg-black">
157
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
158
+ <div class="text-center mb-16">
159
+ <h2 class="text-3xl md:text-4xl font-bold text-white title-font">Nos Expertises</h2>
160
+ <div class="gold-line mt-4"></div>
161
+ <p class="mt-6 text-gray-300 max-w-3xl mx-auto">
162
+ Des solutions de sécurité sur mesure pour répondre aux besoins les plus exigeants.
163
+ </p>
164
+ </div>
165
+
166
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
167
+ <!-- Card 1 -->
168
+ <div class="service-card bg-gray-900 rounded-sm overflow-hidden transition duration-500 ease-in-out">
169
+ <div class="h-48 bg-gradient-to-r from-yellow-800 to-yellow-900 flex items-center justify-center">
170
+ <i class="fas fa-user-shield text-6xl text-white opacity-80"></i>
171
+ </div>
172
+ <div class="p-6">
173
+ <h3 class="text-xl font-bold text-white mb-3">Sécurité rapprochée</h3>
174
+ <p class="text-gray-300">
175
+ Protection discrÚte et efficace pour VIP, personnalités et dirigeants. Escorte sécurisée et gestion des déplacements sensibles.
176
+ </p>
177
+ <ul class="mt-4 space-y-2 text-gray-400">
178
+ <li class="flex items-center">
179
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
180
+ Garde du corps professionnel
181
+ </li>
182
+ <li class="flex items-center">
183
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
184
+ Escorte VIP
185
+ </li>
186
+ <li class="flex items-center">
187
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
188
+ Sécurisation des déplacements
189
+ </li>
190
+ </ul>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Card 2 -->
195
+ <div class="service-card bg-gray-900 rounded-sm overflow-hidden transition duration-500 ease-in-out">
196
+ <div class="h-48 bg-gradient-to-r from-yellow-800 to-yellow-900 flex items-center justify-center">
197
+ <i class="fas fa-calendar-star text-6xl text-white opacity-80"></i>
198
+ </div>
199
+ <div class="p-6">
200
+ <h3 class="text-xl font-bold text-white mb-3">Sécurité événementielle</h3>
201
+ <p class="text-gray-300">
202
+ Protection complÚte pour vos événements prestigieux, qu'il s'agisse de concerts, festivals ou mariages VIP.
203
+ </p>
204
+ <ul class="mt-4 space-y-2 text-gray-400">
205
+ <li class="flex items-center">
206
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
207
+ Festivals et concerts
208
+ </li>
209
+ <li class="flex items-center">
210
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
211
+ Mariages VIP
212
+ </li>
213
+ <li class="flex items-center">
214
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
215
+ ÉvĂ©nements corporatifs
216
+ </li>
217
+ </ul>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Card 3 -->
222
+ <div class="service-card bg-gray-900 rounded-sm overflow-hidden transition duration-500 ease-in-out">
223
+ <div class="h-48 bg-gradient-to-r from-yellow-800 to-yellow-900 flex items-center justify-center">
224
+ <i class="fas fa-users text-6xl text-white opacity-80"></i>
225
+ </div>
226
+ <div class="p-6">
227
+ <h3 class="text-xl font-bold text-white mb-3">Gestion de foule</h3>
228
+ <p class="text-gray-300">
229
+ Expertise en contrÎle d'accÚs, filtrage et création de zones VIP sécurisées pour une expérience sans faille.
230
+ </p>
231
+ <ul class="mt-4 space-y-2 text-gray-400">
232
+ <li class="flex items-center">
233
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
234
+ ContrĂŽle d'accĂšs
235
+ </li>
236
+ <li class="flex items-center">
237
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
238
+ Zones VIP sécurisées
239
+ </li>
240
+ <li class="flex items-center">
241
+ <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
242
+ Gestion des flux
243
+ </li>
244
+ </ul>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </section>
250
+
251
+ <!-- RĂ©alisations Section -->
252
+ <section id="realisations" class="py-20 bg-gray-900">
253
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
254
+ <div class="text-center mb-16">
255
+ <h2 class="text-3xl md:text-4xl font-bold text-white title-font">Nos RĂ©alisations</h2>
256
+ <div class="gold-line mt-4"></div>
257
+ <p class="mt-6 text-gray-300 max-w-3xl mx-auto">
258
+ Des interventions discrÚtes pour des clients exigeants. Confidentialité absolue garantie.
259
+ </p>
260
+ </div>
261
+
262
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
263
+ <!-- Project 1 -->
264
+ <div class="relative group overflow-hidden rounded-sm">
265
+ <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Concert sécurisé" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
266
+ <div class="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300">
267
+ <h3 class="text-xl font-bold text-white">Tournée internationale 2024</h3>
268
+ <p class="text-gray-300 mt-2">Sécurité rapprochée pour une star internationale lors de sa tournée mondiale.</p>
269
+ </div>
270
+ <div class="absolute inset-0 flex items-center justify-center">
271
+ <i class="fas fa-search-plus text-white text-4xl opacity-70 group-hover:opacity-0 transition duration-300"></i>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Project 2 -->
276
+ <div class="relative group overflow-hidden rounded-sm">
277
+ <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mariage VIP" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
278
+ <div class="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300">
279
+ <h3 class="text-xl font-bold text-white">Mariage privé exclusif</h3>
280
+ <p class="text-gray-300 mt-2">Protection discrÚte pour un mariage de célébrités à Saint-Tropez.</p>
281
+ </div>
282
+ <div class="absolute inset-0 flex items-center justify-center">
283
+ <i class="fas fa-search-plus text-white text-4xl opacity-70 group-hover:opacity-0 transition duration-300"></i>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Project 3 -->
288
+ <div class="relative group overflow-hidden rounded-sm">
289
+ <img src="https://images.unsplash.com/photo-1533175269721-d9ec5f6686d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Festival" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
290
+ <div class="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300">
291
+ <h3 class="text-xl font-bold text-white">Festival international</h3>
292
+ <p class="text-gray-300 mt-2">Gestion de foule et sécurité pour un festival accueillant 50,000 personnes.</p>
293
+ </div>
294
+ <div class="absolute inset-0 flex items-center justify-center">
295
+ <i class="fas fa-search-plus text-white text-4xl opacity-70 group-hover:opacity-0 transition duration-300"></i>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Project 4 -->
300
+ <div class="relative group overflow-hidden rounded-sm">
301
+ <img src="https://images.unsplash.com/photo-1497032628192-86f99bcd90bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Conférence" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
302
+ <div class="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300">
303
+ <h3 class="text-xl font-bold text-white">Sommet Ă©conomique</h3>
304
+ <p class="text-gray-300 mt-2">Protection de dirigeants lors d'un sommet Ă©conomique international.</p>
305
+ </div>
306
+ <div class="absolute inset-0 flex items-center justify-center">
307
+ <i class="fas fa-search-plus text-white text-4xl opacity-70 group-hover:opacity-0 transition duration-300"></i>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Project 5 -->
312
+ <div class="relative group overflow-hidden rounded-sm">
313
+ <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tapis rouge" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
314
+ <div class="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300">
315
+ <h3 class="text-xl font-bold text-white">Cérémonie de remise de prix</h3>
316
+ <p class="text-gray-300 mt-2">Sécurité rapprochée pour des personnalités sur tapis rouge.</p>
317
+ </div>
318
+ <div class="absolute inset-0 flex items-center justify-center">
319
+ <i class="fas fa-search-plus text-white text-4xl opacity-70 group-hover:opacity-0 transition duration-300"></i>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Project 6 -->
324
+ <div class="relative group overflow-hidden rounded-sm">
325
+ <img src="https://images.unsplash.com/photo-1556760544-74068565f05c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Transport sécurisé" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
326
+ <div class="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition duration-300">
327
+ <h3 class="text-xl font-bold text-white">Transport sécurisé</h3>
328
+ <p class="text-gray-300 mt-2">Convoi sĂ©curisĂ© pour le dĂ©placement d'Ɠuvres d'art de grande valeur.</p>
329
+ </div>
330
+ <div class="absolute inset-0 flex items-center justify-center">
331
+ <i class="fas fa-search-plus text-white text-4xl opacity-70 group-hover:opacity-0 transition duration-300"></i>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="text-center mt-16">
337
+ <p class="text-gray-400 italic">
338
+ * Par respect pour la confidentialité de nos clients, certains détails ont été omis ou modifiés.
339
+ </p>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <!-- Équipe Section -->
345
+ <section id="equipe" class="py-20 bg-black">
346
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
347
+ <div class="text-center mb-16">
348
+ <h2 class="text-3xl md:text-4xl font-bold text-white title-font">Notre Équipe</h2>
349
+ <div class="gold-line mt-4"></div>
350
+ <p class="mt-6 text-gray-300 max-w-3xl mx-auto">
351
+ Des professionnels triés sur le volet, formés aux meilleures pratiques de sécurité internationale.
352
+ </p>
353
+ </div>
354
+
355
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
356
+ <!-- Membre 1 -->
357
+ <div class="team-member bg-gray-900 rounded-sm overflow-hidden text-center p-6">
358
+ <div class="relative w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-2 border-yellow-600">
359
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Agent" class="w-full h-full object-cover filter blur-sm">
360
+ </div>
361
+ <h3 class="text-xl font-bold text-white">Agent M.</h3>
362
+ <p class="text-yellow-600 text-sm mb-4">Responsable Sécurité Rapprochée</p>
363
+ <p class="text-gray-400 text-sm">
364
+ Ancien membre des forces spéciales, 15 ans d'expérience en protection VIP.
365
+ </p>
366
+ <div class="mt-4 flex justify-center space-x-2">
367
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Certifié CIP</span>
368
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Anglais</span>
369
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Krav Maga</span>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Membre 2 -->
374
+ <div class="team-member bg-gray-900 rounded-sm overflow-hidden text-center p-6">
375
+ <div class="relative w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-2 border-yellow-600">
376
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Agent" class="w-full h-full object-cover filter blur-sm">
377
+ </div>
378
+ <h3 class="text-xl font-bold text-white">Agent S.</h3>
379
+ <p class="text-yellow-600 text-sm mb-4">Chef de Mission ÉvĂ©nementiel</p>
380
+ <p class="text-gray-400 text-sm">
381
+ Spécialiste en gestion de crise et coordination d'équipes sur grands événements.
382
+ </p>
383
+ <div class="mt-4 flex justify-center space-x-2">
384
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Certifié PSP</span>
385
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Espagnol</span>
386
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Premiers Secours</span>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Membre 3 -->
391
+ <div class="team-member bg-gray-900 rounded-sm overflow-hidden text-center p-6">
392
+ <div class="relative w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-2 border-yellow-600">
393
+ <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80" alt="Agent" class="w-full h-full object-cover filter blur-sm">
394
+ </div>
395
+ <h3 class="text-xl font-bold text-white">Agent L.</h3>
396
+ <p class="text-yellow-600 text-sm mb-4">Expert en Protection FĂ©minine</p>
397
+ <p class="text-gray-400 text-sm">
398
+ DiscrÚte et efficace, spécialisée dans la protection des personnalités féminines.
399
+ </p>
400
+ <div class="mt-4 flex justify-center space-x-2">
401
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Certifié EP</span>
402
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Arabe</span>
403
+ <span class="bg-gray-800 text-yellow-600 text-xs px-2 py-1 rounded">Self-défense</span>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Membre 4 -->
408
+ <div class="team-member bg-gray-900 rounded-sm overflow-hidden text-center p-6">
409
+ <div class="relative w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-2 border-yellow-600">
410
+ <img src="https://images.unsplash.com/photo-1542190891-2093d38760f2?ixlib=rb-4.0
411
+ <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=christjeason/cccc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
412
+ </html>