Hugging Face's logo

Spaces:
adriano2005
/
ddsaasdsda
Running

App Files Community
adriano2005 commited on
Commit
c79b275
·
verified ·
1 Parent(s): 79682f8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +538 -19
index.html CHANGED
@@ -1,19 +1,538 @@
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="pt-br">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>VPS Vitalícia - Elite Cloud Computing</title>
7
+
8
+ <!-- Fonts -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- Scripts -->
14
+ <script src="https://cdn.tailwindcss.com"></script>
15
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
16
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
17
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
18
+
19
+ <script>
20
+ tailwind.config = {
21
+ theme: {
22
+ extend: {
23
+ colors: {
24
+ 'neon': '#00ff00',
25
+ 'neon-glow': '#00ff0044',
26
+ 'dark-bg': '#020202',
27
+ 'dark-card': '#0a0a0a',
28
+ 'dark-border': '#1a1a1a',
29
+ 'red-pill': '#ff3333',
30
+ },
31
+ fontFamily: {
32
+ 'sans': ['Inter', 'sans-serif'],
33
+ 'mono': ['JetBrains Mono', 'monospace'],
34
+ },
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+
40
+ <style>
41
+ :root {
42
+ --neon: #00ff00;
43
+ --red-pill: #ff3333;
44
+ --dark-bg: #020202;
45
+ --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
46
+ --transition-medium: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
47
+ }
48
+ body {
49
+ background-color: var(--dark-bg);
50
+ color: #e0e0e0;
51
+ overflow-x: hidden;
52
+ scroll-behavior: smooth;
53
+ }
54
+ /* == GRADIENT TEXT == */
55
+ .text-gradient-green {
56
+ background: linear-gradient(135deg, #fff 30%, var(--neon) 100%);
57
+ -webkit-background-clip: text;
58
+ -webkit-text-fill-color: transparent;
59
+ background-clip: text;
60
+ }
61
+ /* == PROFESSIONAL GRADIENTS == */
62
+ .bg-grad-dark {
63
+ background: radial-gradient(circle at top, #0a1a0a 0%, #020202 100%);
64
+ }
65
+ .glass-panel {
66
+ background: rgba(10, 10, 10, 0.8);
67
+ backdrop-filter: blur(12px);
68
+ border: 1px solid rgba(0, 255, 0, 0.05);
69
+ transition: var(--transition-medium);
70
+ }
71
+ .glass-panel:hover {
72
+ border-color: rgba(0, 255, 0, 0.3);
73
+ box-shadow: 0 0 40px rgba(0, 255, 0, 0.08);
74
+ transform: translateY(-8px);
75
+ }
76
+ /* == MONITOR PLAYER == */
77
+ .monitor-frame {
78
+ position: relative;
79
+ border: 2px solid #1a1a1a;
80
+ border-radius: 24px;
81
+ background: #000;
82
+ padding: 8px;
83
+ box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
84
+ transition: var(--transition-slow);
85
+ }
86
+ .monitor-frame:hover {
87
+ border-color: var(--neon);
88
+ box-shadow: 0 0 60px rgba(0, 255, 0, 0.15);
89
+ transform: translateY(-10px) scale(1.01);
90
+ }
91
+ /* == VSL VERTICAL MOCKUP == */
92
+ .vsl-vertical {
93
+ width: 100%;
94
+ max-width: 300px;
95
+ aspect-ratio: 9/16;
96
+ margin: 0 auto;
97
+ border-radius: 32px;
98
+ border: 6px solid #1a1a1a;
99
+ background: #000;
100
+ overflow: hidden;
101
+ box-shadow: 0 20px 40px rgba(0,0,0,0.6);
102
+ position: relative;
103
+ transition: var(--transition-slow);
104
+ }
105
+
106
+ .vsl-vertical:hover {
107
+ transform: translateY(-10px) rotate(1deg);
108
+ box-shadow: 0 30px 60px rgba(0, 255, 0, 0.1);
109
+ }
110
+ .vsl-vertical::after {
111
+ content: '';
112
+ position: absolute;
113
+ top: 0; left: 50%;
114
+ transform: translateX(-50%);
115
+ width: 35%; height: 18px;
116
+ background: #1a1a1a;
117
+ border-bottom-left-radius: 12px;
118
+ border-bottom-right-radius: 12px;
119
+ z-index: 10;
120
+ }
121
+ /* == BUTTONS == */
122
+ .btn-elite {
123
+ background: linear-gradient(135deg, var(--neon) 0%, #00cc00 100%);
124
+ color: #000;
125
+ font-weight: 800;
126
+ text-transform: uppercase;
127
+ letter-spacing: 1px;
128
+ transition: var(--transition-medium);
129
+ box-shadow: 0 10px 20px rgba(0, 255, 0, 0.1);
130
+ }
131
+ .btn-elite:hover {
132
+ transform: scale(1.08) translateY(-3px);
133
+ box-shadow: 0 20px 40px rgba(0, 255, 0, 0.4);
134
+ }
135
+ /* == ANCHOR SECTION (RED vs GREEN) == */
136
+ .anchor-card-red {
137
+ background: rgba(255, 51, 51, 0.01);
138
+ border: 1px solid rgba(255, 51, 51, 0.05);
139
+ transition: var(--transition-slow);
140
+ }
141
+ .anchor-card-red:hover {
142
+ border-color: rgba(255, 51, 51, 0.3);
143
+ background: rgba(255, 51, 51, 0.03);
144
+ transform: translateY(-10px);
145
+ }
146
+ .anchor-card-green {
147
+ background: rgba(0, 255, 0, 0.01);
148
+ border: 1px solid rgba(0, 255, 0, 0.05);
149
+ transition: var(--transition-slow);
150
+ }
151
+ .anchor-card-green:hover {
152
+ border-color: rgba(0, 255, 0, 0.4);
153
+ background: rgba(0, 255, 0, 0.04);
154
+ transform: translateY(-12px);
155
+ box-shadow: 0 20px 50px rgba(0, 255, 0, 0.1);
156
+ }
157
+ /* == UTILITIES == */
158
+ .neon-dot {
159
+ width: 8px; height: 8px;
160
+ background: var(--neon);
161
+ border-radius: 50%;
162
+ display: inline-block;
163
+ box-shadow: 0 0 10px var(--neon);
164
+ margin-right: 8px;
165
+ }
166
+ .custom-grid {
167
+ background-image: linear-gradient(rgba(0, 255, 0, 0.015) 1px, transparent 1px),
168
+ linear-gradient(90deg, rgba(0, 255, 0, 0.015) 1px, transparent 1px);
169
+ background-size: 40px 40px;
170
+ }
171
+ /* == AESTHETIC GLOW ORBS == */
172
+ .glow-orb {
173
+ position: fixed;
174
+ width: 600px;
175
+ height: 600px;
176
+ border-radius: 50%;
177
+ background: radial-gradient(circle, rgba(0, 255, 0, 0.03) 0%, transparent 70%);
178
+ filter: blur(80px);
179
+ z-index: -1;
180
+ pointer-events: none;
181
+ animation: float 8s infinite ease-in-out;
182
+ }
183
+ @keyframes float {
184
+ 0%, 100% { transform: translate(0, 0); }
185
+ 50% { transform: translate(50px, 50px); }
186
+ }
187
+ /* == AUTO GLOW ANIMATION (SIMULATING HOVER) == */
188
+ @keyframes autoGlowEffect {
189
+ 0%, 100% {
190
+ filter: drop-shadow(0 0 0px transparent);
191
+ transform: scale(1);
192
+ color: inherit;
193
+ }
194
+ 50% {
195
+ filter: drop-shadow(0 0 12px var(--neon)) drop-shadow(0 0 20px var(--neon));
196
+ transform: scale(1.2);
197
+ color: var(--neon);
198
+ }
199
+ }
200
+ .auto-glow-icon {
201
+ animation: autoGlowEffect 3s infinite ease-in-out !important;
202
+ display: inline-block;
203
+ }
204
+ /* == PERFORMANCE HIBERNATION (ULTRA FLUIDITY) == */
205
+ .vps-active .glow-orb { animation: none !important; display: none !important; }
206
+ .vps-active .custom-grid { background-image: none !important; background-color: #000 !important; }
207
+ .vps-active #siteContent { display: none !important; visibility: hidden !important; pointer-events: none !important; }
208
+ .vps-active body { overflow: hidden !important; background: #000 !important; }
209
+ </style>
210
+ </head>
211
+ <body class="custom-grid">
212
+ <div class="glow-orb top-[-200px] left-[-200px]"></div>
213
+ <div class="glow-orb bottom-[-200px] right-[-200px]" style="animation-delay: -4s;"></div>
214
+
215
+ <div id="siteContent">
216
+ <!-- Navigation -->
217
+ <nav class="fixed top-0 w-full z-50 border-b border-dark-border bg-dark-bg/60 backdrop-blur-xl transition-all duration-400">
218
+ <div class="container mx-auto px-6 py-5 flex justify-between items-center">
219
+ <div class="flex items-center space-x-2 group cursor-pointer">
220
+ <span class="text-2xl font-black tracking-tighter text-white transition-all duration-300 group-hover:text-neon">INFINITY<span class="text-neon">VPS</span></span>
221
+ </div>
222
+ <div class="hidden md:flex items-center space-x-10 text-[10px] font-black uppercase tracking-[0.3em] text-gray-500">
223
+ <a href="#teste" class="hover:text-neon transition-all duration-300">Teste Real</a>
224
+ <a href="#vsl" class="hover:text-neon transition-all duration-300">O Método</a>
225
+ <a href="#precos" class="hover:text-neon transition-all duration-300">Planos</a>
226
+ <a href="https://wa.me/SEU_NUMERO_AQUI" class="btn-elite px-8 py-2.5 rounded-full">Acesso Vitalício</a>
227
+ </div>
228
+ </div>
229
+ </nav>
230
+
231
+ <!-- Hero & Player Section -->
232
+ <section id="teste" class="pt-40 pb-24 px-6 bg-grad-dark">
233
+ <div class="container mx-auto text-center">
234
+ <div data-aos="fade-down" data-aos-duration="800" class="inline-flex items-center space-x-2 px-5 py-2 rounded-full bg-neon/5 border border-neon/10 text-neon text-[9px] font-black uppercase tracking-[0.4em] mb-10">
235
+ <span class="neon-dot animate-pulse"></span> Servidor Online & Disponível
236
+ </div>
237
+
238
+ <h1 data-aos="fade-up" data-aos-duration="800" class="text-6xl md:text-8xl font-black leading-[0.9] mb-8 text-gradient-green tracking-tighter">
239
+ Sua Liberdade<br>Digital <span class="text-neon">Aqui.</span>
240
+ </h1>
241
+
242
+ <p data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="text-gray-500 text-xl max-w-2xl mx-auto mb-16 font-medium leading-relaxed">
243
+ Pague uma única vez. Use para sempre. Experimente agora mesmo o poder de um computador 8GB RAM na nuvem.
244
+ </p>
245
+
246
+ <!-- MONITOR PLAYER -->
247
+ <div data-aos="zoom-in" data-aos-duration="1000" class="max-w-5xl mx-auto monitor-frame group cursor-pointer overflow-hidden" onclick="ativarExperienciaTotal()">
248
+ <div class="aspect-video bg-black relative overflow-hidden rounded-2xl">
249
+ <img src="https://storage.googleapis.com/telepost-local/files-v2/69739aaa01498c987624aadc/photo/O5YNYODYC.jpg" alt="VPS Preview" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-all duration-500">
250
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
251
+ <div class="flex items-center justify-center transition-all duration-500 group-hover:scale-125">
252
+ <div class="w-20 h-20 flex items-center justify-center">
253
+ <i data-feather="play" class="text-neon/40 fill-current w-16 h-16 ml-1"></i>
254
+ </div>
255
+ </div>
256
+ <span class="mt-10 text-white font-black uppercase tracking-[0.5em] text-[10px] opacity-60 group-hover:opacity-100 transition-all duration-500">INICIAR PC REMOTO TESTE GRATUITO</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- PROVA SOCIAL RÁPIDA -->
262
+ <div data-aos="fade-up" data-aos-delay="500" class="mt-12 flex flex-wrap justify-center items-center gap-8 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
263
+ <div class="flex items-center space-x-2">
264
+ <i data-feather="users" class="w-4 h-4 auto-glow-icon" style="animation-delay: 0s;"></i>
265
+ <span class="text-[10px] font-bold uppercase tracking-widest text-gray-300">+<span class="counter" data-target="2400" data-speed="2000">0</span> Usuários Ativos</span>
266
+ </div>
267
+ <div class="flex items-center space-x-2">
268
+ <i data-feather="star" class="w-4 h-4 text-neon fill-current auto-glow-icon" style="animation-delay: 1s;"></i>
269
+ <span class="text-[10px] font-bold uppercase tracking-widest text-gray-300"><span class="counter" data-target="4.9" data-decimals="1" data-speed="2000">0.0</span>/5 Avaliação Média</span>
270
+ </div>
271
+ <div class="flex items-center space-x-2">
272
+ <i data-feather="check-circle" class="text-neon auto-glow-icon" style="animation-delay: 2s;"></i>
273
+ <span class="text-[10px] font-bold uppercase tracking-widest text-gray-300">Entrega Instantânea</span>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- VSL Section -->
280
+ <section id="vsl" class="py-32 px-6 border-y border-dark-border">
281
+ <div class="container mx-auto">
282
+ <div class="grid lg:grid-cols-2 gap-24 items-center max-w-6xl mx-auto">
283
+ <div data-aos="fade-right" data-aos-duration="800" class="relative order-2 lg:order-1">
284
+ <div class="absolute -inset-20 bg-neon/5 blur-[120px] rounded-full opacity-50"></div>
285
+ <div class="vsl-vertical">
286
+ <iframe
287
+ class="w-full h-full"
288
+ src="https://www.youtube.com/embed/SEU_VIDEO_ID"
289
+ frameborder="0"
290
+ allow="autoplay; encrypted-media"
291
+ allowfullscreen>
292
+ </iframe>
293
+ </div>
294
+ </div>
295
+
296
+ <div data-aos="fade-left" data-aos-duration="800" class="order-1 lg:order-2">
297
+ <h2 class="text-5xl font-black mb-10 leading-tight tracking-tighter">O Segredo dos <span class="text-neon">Devs</span> Finalmente Revelado.</h2>
298
+ <p class="text-gray-500 text-xl mb-12 leading-relaxed font-medium">Assista ao vídeo ao lado e entenda como configuramos uma infraestrutura de alta performance que roda 24h por dia sem cobrar um centavo de mensalidade.</p>
299
+
300
+ <div class="space-y-8 mb-16">
301
+ <div class="flex items-start space-x-6 group">
302
+ <div class="mt-1 bg-neon/5 p-3 rounded-xl border border-neon/10 transition-all duration-300 group-hover:bg-neon group-hover:border-transparent"><i data-feather="cpu" class="text-neon group-hover:text-black w-6 h-6 transition-colors duration-300"></i></div>
303
+ <div>
304
+ <h4 class="text-white font-bold text-lg">Hardware de Elite</h4>
305
+ <p class="text-gray-500 text-base">8GB de RAM e Processamento de última geração.</p>
306
+ </div>
307
+ </div>
308
+ <div class="flex items-start space-x-6 group">
309
+ <div class="mt-1 bg-neon/5 p-3 rounded-xl border border-neon/10 transition-all duration-300 group-hover:bg-neon group-hover:border-transparent"><i data-feather="shield" class="text-neon group-hover:text-black w-6 h-6 transition-colors duration-300"></i></div>
310
+ <div>
311
+ <h4 class="text-white font-bold text-lg">Privacidade Total</h4>
312
+ <p class="text-gray-500 text-base">Seu rastro digital termina aqui. 100% anônimo.</p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <a href="#precos" class="btn-elite w-full py-6 rounded-2xl flex items-center justify-center text-xl">
318
+ <i data-feather="arrow-down" class="mr-3"></i> Ver Oferta Vitalícia
319
+ </a>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </section>
324
+
325
+ <!-- ANCHOR PRICING SECTION (RED vs GREEN) -->
326
+ <section id="precos" class="py-32 px-6 bg-dark-bg">
327
+ <div class="container mx-auto max-w-5xl">
328
+ <div class="text-center mb-20">
329
+ <h2 data-aos="fade-up" data-aos-duration="800" class="text-5xl font-black mb-6 tracking-tighter">Você tem <span class="text-neon">Duas Opções</span></h2>
330
+ <p data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="text-gray-500 uppercase tracking-[0.5em] text-[9px] font-black">Escolha o seu caminho digital</p>
331
+ </div>
332
+
333
+ <div class="grid md:grid-cols-2 gap-10 items-stretch">
334
+ <!-- OPTION 1: RED PILL -->
335
+ <div data-aos="fade-right" data-aos-duration="800" class="anchor-card-red p-14 rounded-[3rem] flex flex-col text-center">
336
+ <span class="text-red-pill text-[13px] font-black uppercase tracking-[0.5em] mb-8">Caminho Comum</span>
337
+ <p class="text-white text-lg mb-4 font-medium">Continuar pagando</p>
338
+ <div class="flex items-baseline justify-center mb-6">
339
+ <span class="text-red-pill text-3xl font-black mr-2">R$</span>
340
+ <span class="text-red-pill text-8xl font-black tracking-tighter" style="text-shadow: 0 0 30px rgba(255, 51, 51, 0.2);"><span class="counter" data-target="150" data-speed="2000">0</span></span>
341
+ <span class="text-red-pill/60 text-2xl font-bold ml-2">/ mês</span>
342
+ </div>
343
+ <p class="text-white/70 text-base mb-10 leading-relaxed">Todos os meses para alugar servidores lentos e limitados.</p>
344
+ <div class="mt-auto pt-10 border-t border-white/5">
345
+ <span class="text-red-pill text-[11px] font-black uppercase tracking-[0.4em]">Gasto Anual: R$ <span class="counter" data-target="1800" data-speed="2000">0</span>,00</span>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- OPTION 2: GREEN PILL -->
350
+ <div data-aos="fade-left" data-aos-duration="800" class="anchor-card-green p-14 rounded-[3rem] flex flex-col text-center border-neon/20 bg-neon/[0.02] relative overflow-hidden">
351
+ <div class="absolute top-0 right-0 bg-neon text-black text-[10px] font-black px-6 py-2 rounded-bl-2xl uppercase tracking-tighter">Recomendado</div>
352
+ <span class="text-neon text-[13px] font-black uppercase tracking-[0.5em] mb-8">Caminho Infinity</span>
353
+ <p class="text-white text-lg mb-4 font-medium">Garantir sua liberdade hoje por</p>
354
+ <div class="flex items-baseline justify-center mb-6">
355
+ <span class="text-neon text-3xl font-black mr-2">R$</span>
356
+ <span class="text-neon text-7xl font-black tracking-tighter" style="text-shadow: 0 0 40px rgba(0, 255, 0, 0.4);"><span class="counter" data-target="85.25" data-decimals="2" data-speed="2000">0.00</span></span>
357
+ </div>
358
+ <p class="text-white font-bold text-base mb-12 leading-relaxed">Pagamento ÚNICO. Acesso Vitalício. Sem taxas escondidas.</p>
359
+
360
+ <a href="https://wa.me/SEU_NUMERO_AQUI" class="btn-elite w-full py-6 rounded-2xl flex items-center justify-center text-xl mt-auto">
361
+ <i data-feather="zap" class="mr-3 fill-current"></i> Ativar Vitalício
362
+ </a>
363
+ </div>
364
+ </div>
365
+
366
+ <p class="text-center mt-16 text-gray-300 text-[10px] font-black uppercase tracking-[0.5em]">Acesso Imediato • Ativação em 2 Minutos • Suporte 24/7</p>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Benefits Section -->
371
+ <section id="beneficios" class="py-32 px-6 border-t border-dark-border">
372
+ <div class="container mx-auto">
373
+ <div class="text-center mb-24">
374
+ <h2 data-aos="fade-up" data-aos-duration="800" class="text-5xl font-black mb-6 tracking-tighter">Infraestrutura <span class="text-neon">Sem Limites</span></h2>
375
+ <p data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="text-gray-500 uppercase tracking-[0.5em] text-[9px] font-black">Tecnologia Cloud de Próxima Geração</p>
376
+ </div>
377
+
378
+ <div class="grid md:grid-cols-3 gap-10">
379
+ <div data-aos="fade-up" data-aos-delay="100" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
380
+ <i data-feather="globe" class="text-neon w-12 h-12 mb-10"></i>
381
+ <h3 class="text-2xl font-bold mb-6 text-white tracking-tight">IP Americano Nativo</h3>
382
+ <p class="text-gray-500 text-base leading-relaxed">Acesse serviços exclusivos dos EUA com latência mínima e compatibilidade total com proxies residenciais.</p>
383
+ </div>
384
+ <div data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
385
+ <i data-feather="activity" class="text-neon w-12 h-12 mb-10"></i>
386
+ <h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Uptime de 99.9%</h3>
387
+ <p class="text-gray-500 text-base leading-relaxed">Seus bots e automações nunca param. Estabilidade garantida por clusters de servidores redundantes.</p>
388
+ </div>
389
+ <div data-aos="fade-up" data-aos-delay="300" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
390
+ <i data-feather="unlock" class="text-neon w-12 h-12 mb-10"></i>
391
+ <h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Zero Mensalidade</h3>
392
+ <p class="text-gray-500 text-base leading-relaxed">O fim dos boletos. Um único investimento para uma vida inteira de processamento na nuvem.</p>
393
+ </div>
394
+ <div data-aos="fade-up" data-aos-delay="400" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
395
+ <i data-feather="zap" class="text-neon w-12 h-12 mb-10"></i>
396
+ <h3 class="text-2xl font-bold mb-6 text-white tracking-tight">NVMe SSD Storage</h3>
397
+ <p class="text-gray-500 text-base leading-relaxed">Velocidade de leitura e escrita ultra-rápida para carregar qualquer aplicação em segundos.</p>
398
+ </div>
399
+ <div data-aos="fade-up" data-aos-delay="500" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
400
+ <i data-feather="server" class="text-neon w-12 h-12 mb-10"></i>
401
+ <h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Escalabilidade</h3>
402
+ <p class="text-gray-500 text-base leading-relaxed">Precisa de mais poder? Nossa rede cresce com você, sem interrupções ou migrações complexas.</p>
403
+ </div>
404
+ <div data-aos="fade-up" data-aos-delay="600" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
405
+ <i data-feather="cpu" class="text-neon w-12 h-12 mb-10"></i>
406
+ <h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Processamento Isolado</h3>
407
+ <p class="text-gray-500 text-base leading-relaxed">Sua VPS roda em um ambiente dedicado, garantindo que 100% dos recursos contratados sejam seus.</p>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- Footer (RODAPÉ COMPLETO PARA CONVERSÃO) -->
414
+ <footer class="py-24 border-t border-dark-border bg-dark-card/30">
415
+ <div class="container mx-auto px-6">
416
+ <div class="grid md:grid-cols-3 gap-16 mb-20">
417
+ <!-- GARANTIA -->
418
+ <div class="flex flex-col items-center md:items-start text-center md:text-left">
419
+ <div class="flex items-center space-x-4 mb-6">
420
+ <i data-feather="shield" class="text-neon w-10 h-10"></i>
421
+ <h4 class="text-white font-black uppercase tracking-widest text-sm">Garantia Incondicional</h4>
422
+ </div>
423
+ <p class="text-gray-500 text-sm leading-relaxed">Compre nossa infraestrutura sem riscos. Se não for o que você esperava, devolvemos seu investimento em até 7 dias.</p>
424
+ </div>
425
+
426
+ <!-- CONTATOS -->
427
+ <div class="flex flex-col items-center text-center">
428
+ <h4 class="text-white font-black uppercase tracking-widest text-sm mb-8">Suporte & Redes</h4>
429
+ <div class="flex space-x-6">
430
+ <a href="#" class="w-12 h-12 rounded-full border border-dark-border flex items-center justify-center hover:border-neon hover:text-neon transition-all duration-300"><i data-feather="instagram"></i></a>
431
+ <a href="#" class="w-12 h-12 rounded-full border border-dark-border flex items-center justify-center hover:border-neon hover:text-neon transition-all duration-300"><i data-feather="youtube"></i></a>
432
+ <a href="https://wa.me/SEU_NUMERO_AQUI" class="w-12 h-12 rounded-full border border-dark-border flex items-center justify-center hover:border-neon hover:text-neon transition-all duration-300"><i data-feather="message-circle"></i></a>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- LOGO & COPY -->
437
+ <div class="flex flex-col items-center md:items-end text-center md:text-right">
438
+ <span class="text-2xl font-black tracking-tighter text-white mb-4">INFINITY<span class="text-neon">VPS</span></span>
439
+ <p class="text-gray-600 text-[10px] font-bold uppercase tracking-widest">© 2024 Elite Cloud Computing. Todos os direitos reservados.</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </footer>
444
+ </div>
445
+
446
+ <!-- VPS EXPERIENCE OVERLAY -->
447
+ <div id="appContainer" class="fixed inset-0 z-[100] bg-black hidden flex-col">
448
+ <div class="h-14 bg-[#0a0a0a] border-b border-white/5 flex items-center justify-between px-6">
449
+ <div class="flex items-center space-x-4">
450
+ <div class="flex space-x-1.5">
451
+ <div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/40"></div>
452
+ <div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/40"></div>
453
+ <div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/40"></div>
454
+ </div>
455
+ <span class="text-[10px] font-mono text-white uppercase tracking-widest">Aviso: Outro usuário testando interromperá seu controle.</span>
456
+ </div>
457
+ <button onclick="fecharExperiencia()" class="bg-red-600 hover:bg-red-700 text-white p-1 rounded-sm transition-colors">
458
+ <i data-feather="x" class="w-5 h-5"></i>
459
+ </button>
460
+ </div>
461
+ <div class="flex-1 relative">
462
+ <iframe id="mainIframe" src="" class="w-full h-full border-none"></iframe>
463
+ </div>
464
+ </div>
465
+
466
+ <script>
467
+ // INITIALIZE AOS & FEATHER
468
+ AOS.init({
469
+ once: true,
470
+ mirror: false
471
+ });
472
+ feather.replace();
473
+ // COUNTER ANIMATION (OPTIMIZED FOR MOBILE FLUIDITY)
474
+ function initCounters() {
475
+ const counters = document.querySelectorAll('.counter');
476
+ const animate = (counter) => {
477
+ const target = parseFloat(counter.getAttribute('data-target'));
478
+ const decimals = parseInt(counter.getAttribute('data-decimals')) || 0;
479
+ const duration = parseInt(counter.getAttribute('data-speed')) || 2000;
480
+
481
+ let startTime = null;
482
+ const updateCount = (timestamp) => {
483
+ if (!startTime) startTime = timestamp;
484
+ const progress = Math.min((timestamp - startTime) / duration, 1);
485
+ const currentCount = progress * target;
486
+
487
+ counter.innerText = currentCount.toFixed(decimals).replace('.', ',');
488
+
489
+ if (progress < 1) {
490
+ requestAnimationFrame(updateCount);
491
+ } else {
492
+ counter.innerText = target.toFixed(decimals).replace('.', ',');
493
+ }
494
+ };
495
+
496
+ requestAnimationFrame(updateCount);
497
+ };
498
+ const observerOptions = {
499
+ threshold: 0.2
500
+ };
501
+ const observer = new IntersectionObserver((entries) => {
502
+ entries.forEach(entry => {
503
+ if (entry.isIntersecting) {
504
+ animate(entry.target);
505
+ observer.unobserve(entry.target);
506
+ }
507
+ });
508
+ }, observerOptions);
509
+ counters.forEach(counter => observer.observe(counter));
510
+ }
511
+ document.addEventListener('DOMContentLoaded', initCounters);
512
+ // VPS EXPERIENCE LOGIC
513
+ function ativarExperienciaTotal() {
514
+ // HIBERNAÇÃO: Esconde o site e ativa o modo VPS
515
+ document.body.classList.add('vps-active');
516
+
517
+ const overlay = document.getElementById('appContainer');
518
+ const mainIframe = document.getElementById('mainIframe');
519
+
520
+ overlay.style.display = 'flex';
521
+ mainIframe.src = "https://vpsgratuita.shop"; // Link correto restaurado
522
+
523
+ feather.replace();
524
+ }
525
+ function fecharExperiencia() {
526
+ // RESTAURAÇÃO: Remove a hibernação e volta o site
527
+ document.body.classList.remove('vps-active');
528
+
529
+ const overlay = document.getElementById('appContainer');
530
+ const mainIframe = document.getElementById('mainIframe');
531
+ overlay.style.display = 'none';
532
+ mainIframe.src = "about:blank";
533
+
534
+ feather.replace();
535
+ }
536
+ </script>
537
+ </body>
538
+ </html>