Hugging Face's logo

Spaces:
aias24
/
anycoder-29b9250e
Running

App Files Community
aias24 commited on
Commit
1ce9d30
·
verified ·
1 Parent(s): 24eab44

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1024 -495
index.html CHANGED
@@ -1,630 +1,1159 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Selangit | Beyond the Horizon</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap" rel="stylesheet">
9
  <style>
10
- /* Base Settings */
11
  :root {
12
- --primary: #6366f1;
13
- --secondary: #ec4899;
14
- --accent: #06b6d4;
 
 
 
 
 
 
 
15
  }
16
-
 
 
 
 
 
 
17
  html {
18
  scroll-behavior: smooth;
19
  }
20
 
21
  body {
22
- font-family: 'Outfit', sans-serif;
23
- background-color: #0f172a;
24
- color: white;
25
  overflow-x: hidden;
26
- margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
 
29
- /* Custom Scrollbar */
30
- ::-webkit-scrollbar {
31
- width: 10px;
 
 
 
 
32
  }
33
- ::-webkit-scrollbar-track {
34
- background: #0f172a;
 
 
 
 
 
 
35
  }
36
- ::-webkit-scrollbar-thumb {
37
- background: linear-gradient(to bottom, var(--primary), var(--secondary));
38
- border-radius: 5px;
39
  }
40
 
41
- /* Starfield Animation */
42
- .stars {
43
  position: fixed;
44
  top: 0;
45
  left: 0;
 
 
 
 
 
 
 
 
 
 
 
46
  width: 100%;
47
- height: 100%;
48
- pointer-events: none;
49
- z-index: -1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  }
51
-
52
- .star {
 
53
  position: absolute;
54
- background: white;
55
- border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  opacity: 0;
57
- animation: twinkle var(--duration) ease-in-out infinite;
58
- animation-delay: var(--delay);
59
  }
60
 
61
- @keyframes twinkle {
62
- 0%, 100% { opacity: 0.2; transform: scale(0.8); }
63
- 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px rgba(255,255,255,0.8); }
64
  }
65
 
66
- /* Floating Animation */
67
- .float-element {
68
- animation: float 6s ease-in-out infinite;
 
 
 
 
 
 
69
  }
70
- .float-element-delayed {
71
- animation: float 7s ease-in-out infinite reverse;
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  }
73
 
74
  @keyframes float {
75
- 0%, 100% { transform: translateY(0px); }
76
- 50% { transform: translateY(-20px); }
 
 
77
  }
78
 
79
- /* Glassmorphism */
80
- .glass {
81
- background: rgba(255, 255, 255, 0.05);
82
- backdrop-filter: blur(10px);
83
- -webkit-backdrop-filter: blur(10px);
84
- border: 1px solid rgba(255, 255, 255, 0.1);
85
  }
86
 
87
- /* Gradient Text */
88
- .text-gradient {
89
- background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
90
- -webkit-background-clip: text;
91
- -webkit-text-fill-color: transparent;
 
92
  }
93
-
94
- .text-gradient-accent {
95
- background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
96
  -webkit-background-clip: text;
97
  -webkit-text-fill-color: transparent;
 
 
98
  }
99
 
100
- /* Reveal on Scroll Classes */
101
- .reveal {
 
 
 
 
 
 
 
102
  opacity: 0;
103
- transform: translateY(50px);
104
- transition: all 1s cubic-bezier(0.5, 0, 0, 1);
105
  }
106
-
107
- .reveal.active {
108
- opacity: 1;
109
- transform: translateY(0);
 
 
 
 
 
 
110
  }
111
 
112
- /* 3D Card Effect */
113
- .card-3d {
114
- transition: transform 0.1s;
115
- transform-style: preserve-3d;
 
 
 
116
  }
117
-
118
- .card-content {
119
- transform: translateZ(20px);
 
 
 
 
 
 
 
 
 
 
120
  }
121
 
122
- /* Custom Shapes */
123
- .blob {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  position: absolute;
125
- filter: blur(80px);
126
- z-index: -1;
127
- opacity: 0.6;
128
- animation: pulse-blob 8s infinite alternate;
 
 
 
 
129
  }
130
-
131
- @keyframes pulse-blob {
132
- 0% { transform: scale(1); }
133
- 100% { transform: scale(1.2); }
134
  }
135
 
136
- /* Loader */
137
- #loader {
138
- position: fixed;
139
- inset: 0;
140
- background: #0f172a;
141
- z-index: 9999;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  display: flex;
 
143
  justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  align-items: center;
145
- transition: opacity 0.5s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  }
147
-
148
- .loader-circle {
 
 
 
 
 
 
 
149
  width: 50px;
150
  height: 50px;
151
- border: 3px solid rgba(255,255,255,0.1);
152
- border-top-color: var(--accent);
153
  border-radius: 50%;
154
- animation: spin 1s linear infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
155
  }
156
-
157
- @keyframes spin { to { transform: rotate(360deg); } }
158
 
 
 
 
 
159
  </style>
160
  </head>
161
- <body class="antialiased selection:bg-indigo-500 selection:text-white">
 
 
162
 
163
  <!-- Loader -->
164
- <div id="loader">
165
- <div class="loader-circle"></div>
166
  </div>
167
 
168
- <!-- Background Elements -->
169
- <div id="star-container" class="stars"></div>
170
-
171
- <!-- Ambient Blobs -->
172
- <div class="blob bg-indigo-600 w-96 h-96 rounded-full top-0 left-0 -translate-x-1/2 -translate-y-1/2"></div>
173
- <div class="blob bg-pink-600 w-80 h-80 rounded-full bottom-0 right-0 translate-x-1/3 translate-y-1/3"></div>
174
 
175
  <!-- Navigation -->
176
- <nav class="fixed w-full z-50 top-0 transition-all duration-300" id="navbar">
177
- <div class="max-w-7xl mx-auto px-6 py-4">
178
- <div class="flex justify-between items-center glass rounded-full px-6 py-3">
179
- <a href="#" class="text-2xl font-bold tracking-tighter flex items-center gap-2">
180
- <div class="w-8 h-8 bg-gradient-to-tr from-cyan-400 to-indigo-600 rounded-lg flex items-center justify-center">
181
- <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="M5 11l7-7 7 7M5 19l7-7 7 7"></path></svg>
182
- </div>
183
- SELANGIT
184
- </a>
185
-
186
- <div class="hidden md:flex gap-8 text-sm font-medium text-gray-300">
187
- <a href="#features" class="hover:text-white transition-colors">Features</a>
188
- <a href="#showcase" class="hover:text-white transition-colors">Showcase</a>
189
- <a href="#pricing" class="hover:text-white transition-colors">Pricing</a>
190
- </div>
191
-
192
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hidden md:block text-xs font-bold bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full transition-all border border-white/10">
193
- Built with anycoder
194
- </a>
195
-
196
- <button class="md:hidden text-white" id="mobile-menu-btn">
197
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
198
- </button>
199
  </div>
200
  </div>
201
  </nav>
202
 
203
- <!-- Mobile Menu Overlay -->
204
- <div id="mobile-menu" class="fixed inset-0 bg-slate-900/95 z-40 transform translate-x-full transition-transform duration-300 flex flex-col items-center justify-center gap-8 md:hidden">
205
- <a href="#features" class="text-2xl font-bold text-white mobile-link">Features</a>
206
- <a href="#showcase" class="text-2xl font-bold text-white mobile-link">Showcase</a>
207
- <a href="#pricing" class="text-2xl font-bold text-white mobile-link">Pricing</a>
208
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-indigo-400 mobile-link">Built with anycoder</a>
209
- </div>
210
-
211
  <!-- Hero Section -->
212
- <section class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
213
- <div class="container mx-auto px-6 relative z-10">
214
- <div class="flex flex-col lg:flex-row items-center gap-12">
215
-
216
- <!-- Text Content -->
217
- <div class="lg:w-1/2 text-center lg:text-left space-y-8 reveal active">
218
- <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-sm font-semibold">
219
- <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
220
- v2.0 Now Available
221
- </div>
222
-
223
- <h1 class="text-5xl lg:text-7xl font-black leading-tight">
224
- Reach The <br>
225
- <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-indigo-500 to-purple-600">Selangit</span>
226
- </h1>
227
-
228
- <p class="text-lg text-gray-400 max-w-xl mx-auto lg:mx-0 leading-relaxed">
229
- Elevate your digital presence with our celestial design system. Crafted for the modern web, designed for the future.
230
- </p>
231
-
232
- <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
233
- <button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-bold text-white shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50 hover:scale-105 transition-all duration-300">
234
- Get Started
235
- </button>
236
- <button class="px-8 py-4 glass rounded-full font-bold text-white hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2 group">
237
- Watch Demo
238
- <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
239
- </button>
240
- </div>
241
-
242
- <div class="pt-8 flex items-center justify-center lg:justify-start gap-6 text-gray-500 text-sm">
243
- <div class="flex -space-x-3">
244
- <img src="https://i.pravatar.cc/100?img=1" class="w-10 h-10 rounded-full border-2 border-slate-900" alt="User">
245
- <img src="https://i.pravatar.cc/100?img=5" class="w-10 h-10 rounded-full border-2 border-slate-900" alt="User">
246
- <img src="https://i.pravatar.cc/100?img=8" class="w-10 h-10 rounded-full border-2 border-slate-900" alt="User">
247
- </div>
248
- <p>Trusted by 10,000+ creators</p>
249
- </div>
250
- </div>
251
-
252
- <!-- Visual Content -->
253
- <div class="lg:w-1/2 relative perspective-1000">
254
- <!-- Abstract 3D Composition -->
255
- <div class="relative w-full aspect-square max-w-lg mx-auto float-element" id="hero-visual">
256
- <!-- Main Circle -->
257
- <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 rounded-full blur-3xl"></div>
258
-
259
- <!-- Floating Cards -->
260
- <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-slate-800/80 backdrop-blur-xl rounded-3xl border border-white/10 shadow-2xl flex items-center justify-center z-20 transform rotate-6 hover:rotate-0 transition-transform duration-500">
261
- <div class="text-center">
262
- <div class="w-16 h-16 bg-gradient-to-tr from-cyan-400 to-blue-500 rounded-2xl mx-auto mb-4 flex items-center justify-center shadow-lg shadow-cyan-500/20">
263
- <svg class="w-8 h-8 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>
264
- </div>
265
- <h3 class="text-xl font-bold">Fast</h3>
266
- <p class="text-gray-400 text-sm">Lightning speed</p>
267
- </div>
268
- </div>
269
-
270
- <div class="absolute top-10 right-10 w-48 h-48 bg-slate-800/60 backdrop-blur-xl rounded-2xl border border-white/10 shadow-xl z-10 float-element-delayed p-6">
271
- <div class="flex justify-between items-start mb-4">
272
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
273
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
274
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
275
- </div>
276
- <div class="space-y-2">
277
- <div class="h-2 bg-white/10 rounded w-3/4"></div>
278
- <div class="h-2 bg-white/10 rounded w-1/2"></div>
279
- <div class="h-2 bg-white/10 rounded w-5/6"></div>
280
- </div>
281
- </div>
282
-
283
- <div class="absolute bottom-10 left-10 w-56 h-40 bg-gradient-to-br from-pink-500/20 to-orange-500/20 backdrop-blur-md rounded-2xl border border-white/10 shadow-xl z-30 float-element p-6 flex flex-col justify-end">
284
- <div class="flex items-center gap-3 mb-2">
285
- <div class="w-8 h-8 rounded-full bg-green-400 flex items-center justify-center">
286
- <svg class="w-4 h-4 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
287
- </div>
288
- <span class="font-bold text-green-400">Success</span>
289
- </div>
290
- <p class="text-xs text-gray-300">Deployment finished in 0.4s</p>
291
- </div>
292
- </div>
293
- </div>
294
  </div>
295
  </div>
296
-
297
- <!-- Scroll Indicator -->
298
- <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-50 animate-bounce">
299
- <span class="text-xs uppercase tracking-widest">Scroll</span>
300
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
301
  </div>
302
  </section>
303
 
304
- <!-- Features Grid -->
305
- <section id="features" class="py-32 relative">
306
- <div class="container mx-auto px-6">
307
- <div class="text-center max-w-3xl mx-auto mb-20 reveal">
308
- <h2 class="text-4xl md:text-5xl font-bold mb-6">Why go <span class="text-gradient-accent">Selangit?</span></h2>
309
- <p class="text-gray-400 text-lg">We provide the tools you need to build applications that are out of this world. No limits, just sky.</p>
 
 
 
 
310
  </div>
311
-
312
- <div class="grid md:grid-cols-3 gap-8">
313
- <!-- Feature 1 -->
314
- <div class="glass p-8 rounded-3xl hover:bg-white/10 transition-all duration-300 group reveal card-3d">
315
- <div class="card-content">
316
- <div class="w-14 h-14 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
317
- <svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path></svg>
318
- </div>
319
- <h3 class="text-xl font-bold mb-3">Cloud Native</h3>
320
- <p class="text-gray-400 leading-relaxed">Built for the cloud from day one. Scale infinitely without worrying about infrastructure.</p>
321
- </div>
322
  </div>
323
-
324
- <!-- Feature 2 -->
325
- <div class="glass p-8 rounded-3xl hover:bg-white/10 transition-all duration-300 group reveal card-3d" style="transition-delay: 100ms;">
326
- <div class="card-content">
327
- <div class="w-14 h-14 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
328
- <svg class="w-7 h-7 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
329
- </div>
330
- <h3 class="text-xl font-bold mb-3">AI Powered</h3>
331
- <p class="text-gray-400 leading-relaxed">Integrated artificial intelligence to help you automate tasks and predict user behavior.</p>
332
- </div>
333
  </div>
334
-
335
- <!-- Feature 3 -->
336
- <div class="glass p-8 rounded-3xl hover:bg-white/10 transition-all duration-300 group reveal card-3d" style="transition-delay: 200ms;">
337
- <div class="card-content">
338
- <div class="w-14 h-14 bg-pink-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
339
- <svg class="w-7 h-7 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
340
- </div>
341
- <h3 class="text-xl font-bold mb-3">Bank Grade Security</h3>
342
- <p class="text-gray-400 leading-relaxed">Your data is protected by the latest encryption standards and security protocols.</p>
343
- </div>
344
  </div>
 
 
345
  </div>
346
- </div>
347
- </section>
348
-
349
- <!-- Interactive Showcase -->
350
- <section id="showcase" class="py-20 relative overflow-hidden">
351
- <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-indigo-900/20 to-slate-900"></div>
352
- <div class="container mx-auto px-6 relative z-10">
353
- <div class="flex flex-col md:flex-row items-center gap-16">
354
- <div class="md:w-1/2 reveal">
355
- <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/10 group">
356
- <div class="absolute inset-0 bg-indigo-600/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
357
- <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1000&auto=format&fit=crop" alt="Space View" class="w-full h-auto transform group-hover:scale-110 transition-transform duration-700">
358
-
359
- <!-- Overlay UI -->
360
- <div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl z-20 flex items-center justify-between">
361
- <div>
362
- <div class="text-xs text-gray-400 uppercase tracking-wider">System Status</div>
363
- <div class="text-green-400 font-bold flex items-center gap-2">
364
- <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
365
- Operational
366
- </div>
367
- </div>
368
- <div class="text-right">
369
- <div class="text-xs text-gray-400 uppercase tracking-wider">Latency</div>
370
- <div class="font-mono text-white">24ms</div>
371
- </div>
372
- </div>
373
- </div>
374
  </div>
375
- <div class="md:w-1/2 space-y-6 reveal">
376
- <h2 class="text-4xl font-bold">Visualize your data <br>like never before</h2>
377
- <p class="text-gray-400 text-lg">Our dashboard provides real-time insights into your application's performance. Track metrics, monitor logs, and manage deployments all in one place.</p>
378
-
379
- <ul class="space-y-4 mt-6">
380
- <li class="flex items-center gap-3">
381
- <div class="w-6 h-6 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400">✓</div>
382
- <span>Real-time analytics</span>
383
- </li>
384
- <li class="flex items-center gap-3">
385
- <div class="w-6 h-6 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400">✓</div>
386
- <span>Customizable widgets</span>
387
- </li>
388
- <li class="flex items-center gap-3">
389
- <div class="w-6 h-6 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400">✓</div>
390
- <span>Export to PDF/CSV</span>
391
- </li>
392
- </ul>
393
  </div>
 
 
394
  </div>
395
  </div>
396
  </section>
397
 
398
- <!-- Pricing -->
399
- <section id="pricing" class="py-32">
400
- <div class="container mx-auto px-6">
401
- <div class="text-center mb-16 reveal">
402
- <h2 class="text-4xl font-bold mb-4">Simple Pricing</h2>
403
- <p class="text-gray-400">Choose the plan that fits your needs.</p>
 
404
  </div>
 
 
 
 
 
 
 
 
 
405
 
406
- <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
407
- <!-- Basic -->
408
- <div class="glass p-8 rounded-3xl border border-white/5 hover:border-white/20 transition-all reveal">
409
- <h3 class="text-xl font-medium text-gray-300 mb-2">Starter</h3>
410
- <div class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-500 font-normal">/mo</span></div>
411
- <ul class="space-y-4 mb-8 text-gray-400 text-sm">
412
- <li class="flex gap-3"><span class="text-white">✓</span> 1 Project</li>
413
- <li class="flex gap-3"><span class="text-white">✓</span> Community Support</li>
414
- <li class="flex gap-3"><span class="text-white">✓</span> Basic Analytics</li>
415
- </ul>
416
- <button class="w-full py-3 rounded-xl border border-white/20 hover:bg-white/5 transition-colors font-medium">Get Started</button>
417
- </div>
418
-
419
- <!-- Pro -->
420
- <div class="bg-gradient-to-b from-indigo-600 to-purple-700 p-8 rounded-3xl border border-indigo-400/30 shadow-2xl shadow-indigo-500/20 transform md:-translate-y-4 reveal">
421
- <div class="absolute top-0 right-0 bg-white text-indigo-600 text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-xl">POPULAR</div>
422
- <h3 class="text-xl font-medium text-indigo-100 mb-2">Pro</h3>
423
- <div class="text-4xl font-bold mb-6 text-white">$29<span class="text-lg text-indigo-200 font-normal">/mo</span></div>
424
- <ul class="space-y-4 mb-8 text-indigo-100 text-sm">
425
- <li class="flex gap-3"><span>✓</span> Unlimited Projects</li>
426
- <li class="flex gap-3"><span>✓</span> Priority Support</li>
427
- <li class="flex gap-3"><span>✓</span> Advanced Analytics</li>
428
- <li class="flex gap-3"><span>✓</span> Custom Domain</li>
429
- </ul>
430
- <button class="w-full py-3 rounded-xl bg-white text-indigo-600 hover:bg-indigo-50 transition-colors font-bold shadow-lg">Get Started</button>
431
- </div>
432
-
433
- <!-- Enterprise -->
434
- <div class="glass p-8 rounded-3xl border border-white/5 hover:border-white/20 transition-all reveal">
435
- <h3 class="text-xl font-medium text-gray-300 mb-2">Enterprise</h3>
436
- <div class="text-4xl font-bold mb-6">$99<span class="text-lg text-gray-500 font-normal">/mo</span></div>
437
- <ul class="space-y-4 mb-8 text-gray-400 text-sm">
438
- <li class="flex gap-3"><span class="text-white">✓</span> Everything in Pro</li>
439
- <li class="flex gap-3"><span class="text-white">✓</span> Dedicated Server</li>
440
- <li class="flex gap-3"><span class="text-white">✓</span> SLA Agreement</li>
441
- </ul>
442
- <button class="w-full py-3 rounded-xl border border-white/20 hover:bg-white/5 transition-colors font-medium">Contact Sales</button>
443
  </div>
444
  </div>
445
  </div>
446
  </section>
447
 
448
- <!-- CTA -->
449
- <section class="py-20 relative">
450
- <div class="container mx-auto px-6">
451
- <div class="glass rounded-3xl p-12 md:p-20 text-center relative overflow-hidden reveal">
452
- <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-indigo-500/10 to-purple-500/10"></div>
453
- <div class="relative z-10 max-w-2xl mx-auto">
454
- <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready to touch the sky?</h2>
455
- <p class="text-gray-300 mb-8 text-lg">Join thousands of developers building the future with Selangit today.</p>
456
- <div class="flex flex-col sm:flex-row gap-4 justify-center">
457
- <button class="px-8 py-4 bg-white text-slate-900 rounded-full font-bold hover:bg-gray-100 transition-colors">Start Free Trial</button>
458
- <button class="px-8 py-4 glass rounded-full font-bold text-white hover:bg-white/10 transition-colors">View Documentation</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
459
  </div>
460
  </div>
461
  </div>
 
 
 
 
 
 
 
 
 
 
462
  </div>
463
  </section>
464
 
465
  <!-- Footer -->
466
- <footer class="border-t border-white/10 pt-16 pb-8 bg-slate-900">
467
- <div class="container mx-auto px-6">
468
- <div class="grid md:grid-cols-4 gap-12 mb-12">
469
- <div class="col-span-1 md:col-span-2">
470
- <a href="#" class="text-2xl font-bold tracking-tighter flex items-center gap-2 mb-4">
471
- <div class="w-8 h-8 bg-gradient-to-tr from-cyan-400 to-indigo-600 rounded-lg flex items-center justify-center">
472
- <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="M5 11l7-7 7 7M5 19l7-7 7 7"></path></svg>
473
- </div>
474
- SELANGIT
475
- </a>
476
- <p class="text-gray-400 max-w-sm">Building the infrastructure for the next generation of internet applications. Reach for the stars.</p>
477
- </div>
478
- <div>
479
- <h4 class="font-bold mb-4 text-white">Product</h4>
480
- <ul class="space-y-2 text-gray-400 text-sm">
481
- <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
482
- <li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
483
- <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
484
- <li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
485
- </ul>
486
- </div>
487
- <div>
488
- <h4 class="font-bold mb-4 text-white">Company</h4>
489
- <ul class="space-y-2 text-gray-400 text-sm">
490
- <li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
491
- <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
492
- <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
493
- <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
494
- </ul>
495
- </div>
496
  </div>
497
- <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500">
498
- <p>&copy; 2023 Selangit Inc. All rights reserved.</p>
499
- <div class="flex gap-6">
500
- <a href="#" class="hover:text-white transition-colors">Privacy</a>
501
- <a href="#" class="hover:text-white transition-colors">Terms</a>
502
- </div>
503
  </div>
504
  </div>
505
  </footer>
506
 
507
  <script>
508
- // --- 1. Loader Logic ---
509
- window.addEventListener('load', () => {
510
- const loader = document.getElementById('loader');
511
- loader.style.opacity = '0';
512
- setTimeout(() => {
513
- loader.style.display = 'none';
514
- }, 500);
515
- });
 
 
 
 
 
 
 
 
 
516
 
517
- // --- 2. Starfield Generation ---
518
- const starContainer = document.getElementById('star-container');
519
- const starCount = 150;
 
 
 
 
 
 
520
 
521
- for (let i = 0; i < starCount; i++) {
522
- const star = document.createElement('div');
523
- star.classList.add('star');
524
 
525
- // Random positioning
526
- const x = Math.random() * 100;
527
- const y = Math.random() * 100;
528
- const size = Math.random() * 2 + 1; // 1px to 3px
529
- const duration = Math.random() * 3 + 2; // 2s to 5s
530
- const delay = Math.random() * 5;
531
-
532
- star.style.left = `${x}%`;
533
- star.style.top = `${y}%`;
534
- star.style.width = `${size}px`;
535
- star.style.height = `${size}px`;
536
- star.style.setProperty('--duration', `${duration}s`);
537
- star.style.setProperty('--delay', `${delay}s`);
538
-
539
- starContainer.appendChild(star);
540
- }
541
-
542
- // --- 3. Scroll Reveal Animation ---
543
- const revealElements = document.querySelectorAll('.reveal');
544
-
545
- const revealOnScroll = () => {
546
- const windowHeight = window.innerHeight;
547
- const elementVisible = 100;
548
-
549
- revealElements.forEach((reveal) => {
550
- const elementTop = reveal.getBoundingClientRect().top;
551
- if (elementTop < windowHeight - elementVisible) {
552
- reveal.classList.add('active');
553
- }
554
  });
555
- };
556
 
557
- window.addEventListener('scroll', revealOnScroll);
558
- // Trigger once on load
559
- revealOnScroll();
 
 
 
 
560
 
561
- // --- 4. 3D Tilt Effect for Cards ---
562
- const cards = document.querySelectorAll('.card-3d');
 
 
 
 
 
 
 
 
 
 
 
563
 
564
- cards.forEach(card => {
565
- card.addEventListener('mousemove', (e) => {
566
- const rect = card.getBoundingClientRect();
567
- const x = e.clientX - rect.left;
568
- const y = e.clientY - rect.top;
 
 
 
 
 
 
 
 
569
 
570
- const centerX = rect.width / 2;
571
- const centerY = rect.height / 2;
 
 
 
 
 
572
 
573
- const rotateX = ((y - centerY) / centerY) * -10; // Max 10deg rotation
574
- const rotateY = ((x - centerX) / centerX) * 10;
575
 
576
- card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
577
  });
578
 
579
- card.addEventListener('mouseleave', () => {
580
- card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
581
  });
582
- });
583
 
584
- // --- 5. Navbar Scroll Effect ---
585
- const navbar = document.getElementById('navbar');
586
- window.addEventListener('scroll', () => {
587
- if (window.scrollY > 50) {
588
- navbar.classList.add('py-2');
589
- navbar.classList.remove('py-4');
590
- } else {
591
- navbar.classList.add('py-4');
592
- navbar.classList.remove('py-2');
 
 
 
 
 
 
 
 
 
 
593
  }
594
- });
595
 
596
- // --- 6. Mobile Menu Toggle ---
597
- const mobileBtn = document.getElementById('mobile-menu-btn');
598
- const mobileMenu = document.getElementById('mobile-menu');
599
- const mobileLinks = document.querySelectorAll('.mobile-link');
600
- let isMenuOpen = false;
601
-
602
- mobileBtn.addEventListener('click', () => {
603
- isMenuOpen = !isMenuOpen;
604
- if (isMenuOpen) {
605
- mobileMenu.classList.remove('translate-x-full');
606
- } else {
607
- mobileMenu.classList.add('translate-x-full');
608
  }
609
- });
610
 
611
- mobileLinks.forEach(link => {
612
- link.addEventListener('click', () => {
613
- isMenuOpen = false;
614
- mobileMenu.classList.add('translate-x-full');
615
- });
616
- });
617
 
618
- // --- 7. Parallax Effect for Hero Visual ---
619
- const heroVisual = document.getElementById('hero-visual');
620
- document.addEventListener('mousemove', (e) => {
621
- const x = (window.innerWidth - e.pageX * 2) / 100;
622
- const y = (window.innerHeight - e.pageY * 2) / 100;
623
-
624
- // Subtle movement
625
- heroVisual.style.transform = `translateX(${x}px) translateY(${y}px)`;
626
  });
627
-
628
  </script>
629
  </body>
630
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="id">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nebula - Landing Page Futuristik</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
9
  <style>
10
+ /* CSS Modern dengan Custom Properties */
11
  :root {
12
+ --primary-color: #6366f1;
13
+ --secondary-color: #ec4899;
14
+ --accent-color: #f59e0b;
15
+ --dark-bg: #0f172a;
16
+ --darker-bg: #020617;
17
+ --text-primary: #f1f5f9;
18
+ --text-secondary: #94a3b8;
19
+ --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
20
+ --glass-bg: rgba(30, 41, 59, 0.4);
21
+ --glass-border: rgba(255, 255, 255, 0.1);
22
  }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ }
29
+
30
  html {
31
  scroll-behavior: smooth;
32
  }
33
 
34
  body {
35
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
36
+ background: var(--darker-bg);
37
+ color: var(--text-primary);
38
  overflow-x: hidden;
39
+ line-height: 1.6;
40
+ }
41
+
42
+ /* Loader Animation */
43
+ .loader {
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ background: var(--darker-bg);
50
+ display: flex;
51
+ justify-content: center;
52
+ align-items: center;
53
+ z-index: 9999;
54
+ transition: opacity 0.5s ease;
55
+ }
56
+
57
+ .loader.hidden {
58
+ opacity: 0;
59
+ pointer-events: none;
60
+ }
61
+
62
+ .loader-spinner {
63
+ width: 60px;
64
+ height: 60px;
65
+ border: 3px solid transparent;
66
+ border-top-color: var(--primary-color);
67
+ border-radius: 50%;
68
+ animation: spin 1s linear infinite;
69
+ position: relative;
70
+ }
71
+
72
+ .loader-spinner::before,
73
+ .loader-spinner::after {
74
+ content: '';
75
+ position: absolute;
76
+ border: 3px solid transparent;
77
+ border-radius: 50%;
78
  }
79
 
80
+ .loader-spinner::before {
81
+ top: -5px;
82
+ left: -5px;
83
+ right: -5px;
84
+ bottom: -5px;
85
+ border-top-color: var(--secondary-color);
86
+ animation: spin 1.5s linear infinite;
87
  }
88
+
89
+ .loader-spinner::after {
90
+ top: -10px;
91
+ left: -10px;
92
+ right: -10px;
93
+ bottom: -10px;
94
+ border-top-color: var(--accent-color);
95
+ animation: spin 2s linear infinite;
96
  }
97
+
98
+ @keyframes spin {
99
+ to { transform: rotate(360deg); }
100
  }
101
 
102
+ /* Scroll Progress Bar */
103
+ .scroll-progress {
104
  position: fixed;
105
  top: 0;
106
  left: 0;
107
+ width: 0%;
108
+ height: 4px;
109
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
110
+ z-index: 1000;
111
+ transition: width 0.1s ease;
112
+ }
113
+
114
+ /* Navigation */
115
+ .navbar {
116
+ position: fixed;
117
+ top: 0;
118
  width: 100%;
119
+ padding: 1.5rem 5%;
120
+ background: var(--glass-bg);
121
+ backdrop-filter: blur(12px);
122
+ border-bottom: 1px solid var(--glass-border);
123
+ z-index: 1000;
124
+ transition: var(--transition);
125
+ }
126
+
127
+ .navbar.scrolled {
128
+ padding: 1rem 5%;
129
+ background: rgba(15, 23, 42, 0.85);
130
+ }
131
+
132
+ .nav-container {
133
+ display: flex;
134
+ justify-content: space-between;
135
+ align-items: center;
136
+ max-width: 1400px;
137
+ margin: 0 auto;
138
+ }
139
+
140
+ .logo {
141
+ font-size: 1.8rem;
142
+ font-weight: 900;
143
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
144
+ -webkit-background-clip: text;
145
+ -webkit-text-fill-color: transparent;
146
+ cursor: pointer;
147
+ transition: var(--transition);
148
+ }
149
+
150
+ .logo:hover {
151
+ transform: scale(1.05);
152
+ }
153
+
154
+ .nav-menu {
155
+ display: flex;
156
+ gap: 2rem;
157
+ list-style: none;
158
+ }
159
+
160
+ .nav-link {
161
+ color: var(--text-primary);
162
+ text-decoration: none;
163
+ font-weight: 500;
164
+ position: relative;
165
+ transition: var(--transition);
166
+ padding: 0.5rem 0;
167
  }
168
+
169
+ .nav-link::after {
170
+ content: '';
171
  position: absolute;
172
+ bottom: 0;
173
+ left: 0;
174
+ width: 0;
175
+ height: 2px;
176
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
177
+ transition: var(--transition);
178
+ }
179
+
180
+ .nav-link:hover::after {
181
+ width: 100%;
182
+ }
183
+
184
+ .nav-link:hover {
185
+ color: var(--primary-color);
186
+ }
187
+
188
+ .hamburger {
189
+ display: none;
190
+ flex-direction: column;
191
+ cursor: pointer;
192
+ gap: 5px;
193
+ }
194
+
195
+ .hamburger span {
196
+ width: 25px;
197
+ height: 3px;
198
+ background: var(--text-primary);
199
+ transition: var(--transition);
200
+ }
201
+
202
+ .hamburger.active span:nth-child(1) {
203
+ transform: rotate(45deg) translate(5px, 5px);
204
+ }
205
+
206
+ .hamburger.active span:nth-child(2) {
207
  opacity: 0;
 
 
208
  }
209
 
210
+ .hamburger.active span:nth-child(3) {
211
+ transform: rotate(-45deg) translate(7px, -6px);
 
212
  }
213
 
214
+ /* Hero Section */
215
+ .hero {
216
+ min-height: 100vh;
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ position: relative;
221
+ overflow: hidden;
222
+ padding: 2rem;
223
  }
224
+
225
+ .particles {
226
+ position: absolute;
227
+ top: 0;
228
+ left: 0;
229
+ width: 100%;
230
+ height: 100%;
231
+ z-index: -1;
232
+ }
233
+
234
+ .particle {
235
+ position: absolute;
236
+ border-radius: 50%;
237
+ pointer-events: none;
238
+ animation: float 20s infinite linear;
239
  }
240
 
241
  @keyframes float {
242
+ 0% { transform: translateY(0) translateX(0) rotate(0deg); }
243
+ 33% { transform: translateY(-100px) translateX(100px) rotate(120deg); }
244
+ 66% { transform: translateY(100px) translateX(-100px) rotate(240deg); }
245
+ 100% { transform: translateY(0) translateX(0) rotate(360deg); }
246
  }
247
 
248
+ .hero-content {
249
+ text-align: center;
250
+ max-width: 1000px;
251
+ z-index: 1;
252
+ padding: 2rem;
 
253
  }
254
 
255
+ .hero-title {
256
+ font-size: clamp(3rem, 8vw, 6rem);
257
+ font-weight: 900;
258
+ margin-bottom: 1.5rem;
259
+ position: relative;
260
+ display: inline-block;
261
  }
262
+
263
+ .gradient-text {
264
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
265
  -webkit-background-clip: text;
266
  -webkit-text-fill-color: transparent;
267
+ background-size: 300% 300%;
268
+ animation: gradient-shift 4s ease infinite;
269
  }
270
 
271
+ @keyframes gradient-shift {
272
+ 0%, 100% { background-position: 0% 50%; }
273
+ 50% { background-position: 100% 50%; }
274
+ }
275
+
276
+ .hero-subtitle {
277
+ font-size: clamp(1.2rem, 3vw, 1.8rem);
278
+ color: var(--text-secondary);
279
+ margin-bottom: 2.5rem;
280
  opacity: 0;
281
+ animation: fadeInUp 1s ease 0.5s forwards;
 
282
  }
283
+
284
+ @keyframes fadeInUp {
285
+ from {
286
+ opacity: 0;
287
+ transform: translateY(30px);
288
+ }
289
+ to {
290
+ opacity: 1;
291
+ transform: translateY(0);
292
+ }
293
  }
294
 
295
+ .hero-buttons {
296
+ display: flex;
297
+ gap: 1.5rem;
298
+ justify-content: center;
299
+ flex-wrap: wrap;
300
+ opacity: 0;
301
+ animation: fadeInUp 1s ease 0.8s forwards;
302
  }
303
+
304
+ .btn {
305
+ padding: 1rem 2.5rem;
306
+ border: none;
307
+ border-radius: 50px;
308
+ font-size: 1.1rem;
309
+ font-weight: 600;
310
+ cursor: pointer;
311
+ transition: var(--transition);
312
+ text-decoration: none;
313
+ display: inline-block;
314
+ position: relative;
315
+ overflow: hidden;
316
  }
317
 
318
+ .btn-primary {
319
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
320
+ color: white;
321
+ box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
322
+ }
323
+
324
+ .btn-primary:hover {
325
+ transform: translateY(-5px) scale(1.05);
326
+ box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
327
+ }
328
+
329
+ .btn-secondary {
330
+ background: transparent;
331
+ color: var(--text-primary);
332
+ border: 2px solid var(--glass-border);
333
+ backdrop-filter: blur(10px);
334
+ }
335
+
336
+ .btn-secondary:hover {
337
+ border-color: var(--primary-color);
338
+ background: rgba(99, 102, 241, 0.1);
339
+ transform: translateY(-5px);
340
+ }
341
+
342
+ .btn::before {
343
+ content: '';
344
  position: absolute;
345
+ top: 50%;
346
+ left: 50%;
347
+ width: 0;
348
+ height: 0;
349
+ border-radius: 50%;
350
+ background: rgba(255, 255, 255, 0.3);
351
+ transform: translate(-50%, -50%);
352
+ transition: width 0.6s, height 0.6s;
353
  }
354
+
355
+ .btn:hover::before {
356
+ width: 300px;
357
+ height: 300px;
358
  }
359
 
360
+ /* Scroll Indicator */
361
+ .scroll-indicator {
362
+ position: absolute;
363
+ bottom: 2rem;
364
+ left: 50%;
365
+ transform: translateX(-50%);
366
+ animation: bounce 2s infinite;
367
+ }
368
+
369
+ @keyframes bounce {
370
+ 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
371
+ 40% { transform: translateX(-50%) translateY(-20px); }
372
+ 60% { transform: translateX(-50%) translateY(-10px); }
373
+ }
374
+
375
+ .scroll-indicator i {
376
+ font-size: 2rem;
377
+ color: var(--text-secondary);
378
+ }
379
+
380
+ /* Features Section */
381
+ .features {
382
+ padding: 8rem 5%;
383
+ background: var(--dark-bg);
384
+ position: relative;
385
+ }
386
+
387
+ .section-title {
388
+ font-size: clamp(2.5rem, 5vw, 4rem);
389
+ text-align: center;
390
+ margin-bottom: 4rem;
391
+ font-weight: 800;
392
+ }
393
+
394
+ .features-grid {
395
+ display: grid;
396
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
397
+ gap: 2rem;
398
+ max-width: 1400px;
399
+ margin: 0 auto;
400
+ }
401
+
402
+ .feature-card {
403
+ background: var(--glass-bg);
404
+ border: 1px solid var(--glass-border);
405
+ border-radius: 20px;
406
+ padding: 2.5rem 2rem;
407
+ transition: var(--transition);
408
+ position: relative;
409
+ overflow: hidden;
410
+ backdrop-filter: blur(10px);
411
+ }
412
+
413
+ .feature-card::before {
414
+ content: '';
415
+ position: absolute;
416
+ top: -50%;
417
+ left: -50%;
418
+ width: 200%;
419
+ height: 200%;
420
+ background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
421
+ opacity: 0;
422
+ transition: opacity 0.5s ease;
423
+ }
424
+
425
+ .feature-card:hover::before {
426
+ opacity: 0.1;
427
+ }
428
+
429
+ .feature-card:hover {
430
+ transform: translateY(-10px) scale(1.02);
431
+ border-color: var(--primary-color);
432
+ box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
433
+ }
434
+
435
+ .feature-icon {
436
+ width: 80px;
437
+ height: 80px;
438
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
439
+ border-radius: 20px;
440
  display: flex;
441
+ align-items: center;
442
  justify-content: center;
443
+ font-size: 2rem;
444
+ margin-bottom: 1.5rem;
445
+ transition: var(--transition);
446
+ }
447
+
448
+ .feature-card:hover .feature-icon {
449
+ transform: rotate(15deg) scale(1.1);
450
+ box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
451
+ }
452
+
453
+ .feature-title {
454
+ font-size: 1.5rem;
455
+ margin-bottom: 1rem;
456
+ font-weight: 700;
457
+ }
458
+
459
+ .feature-description {
460
+ color: var(--text-secondary);
461
+ line-height: 1.8;
462
+ }
463
+
464
+ /* Showcase Section */
465
+ .showcase {
466
+ padding: 8rem 5%;
467
+ position: relative;
468
+ overflow: hidden;
469
+ }
470
+
471
+ .showcase-container {
472
+ display: grid;
473
+ grid-template-columns: 1fr 1fr;
474
+ gap: 4rem;
475
  align-items: center;
476
+ max-width: 1400px;
477
+ margin: 0 auto;
478
+ }
479
+
480
+ .showcase-content h2 {
481
+ font-size: clamp(2rem, 4vw, 3rem);
482
+ margin-bottom: 1.5rem;
483
+ font-weight: 800;
484
+ }
485
+
486
+ .showcase-content p {
487
+ color: var(--text-secondary);
488
+ font-size: 1.2rem;
489
+ line-height: 1.8;
490
+ margin-bottom: 2rem;
491
+ }
492
+
493
+ .showcase-visual {
494
+ position: relative;
495
+ perspective: 1000px;
496
+ }
497
+
498
+ .showcase-card {
499
+ background: var(--glass-bg);
500
+ border: 1px solid var(--glass-border);
501
+ border-radius: 20px;
502
+ padding: 2rem;
503
+ transform: rotateY(-10deg) rotateX(5deg);
504
+ transition: var(--transition);
505
+ backdrop-filter: blur(10px);
506
+ }
507
+
508
+ .showcase-card:hover {
509
+ transform: rotateY(0) rotateX(0) scale(1.05);
510
+ }
511
+
512
+ .code-block {
513
+ background: rgba(0, 0, 0, 0.5);
514
+ border-radius: 10px;
515
+ padding: 1.5rem;
516
+ font-family: 'Courier New', monospace;
517
+ color: #10b981;
518
+ overflow-x: auto;
519
+ }
520
+
521
+ /* Testimonials */
522
+ .testimonials {
523
+ padding: 8rem 5%;
524
+ background: var(--dark-bg);
525
+ }
526
+
527
+ .testimonial-slider {
528
+ max-width: 1000px;
529
+ margin: 0 auto;
530
+ position: relative;
531
+ overflow: hidden;
532
+ }
533
+
534
+ .testimonial-track {
535
+ display: flex;
536
+ transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
537
+ }
538
+
539
+ .testimonial-item {
540
+ min-width: 100%;
541
+ padding: 2rem;
542
+ text-align: center;
543
+ }
544
+
545
+ .testimonial-text {
546
+ font-size: 1.5rem;
547
+ font-style: italic;
548
+ margin-bottom: 2rem;
549
+ color: var(--text-secondary);
550
+ line-height: 1.6;
551
+ }
552
+
553
+ .testimonial-author {
554
+ display: flex;
555
+ align-items: center;
556
+ justify-content: center;
557
+ gap: 1rem;
558
+ }
559
+
560
+ .author-avatar {
561
+ width: 60px;
562
+ height: 60px;
563
+ border-radius: 50%;
564
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
565
+ display: flex;
566
+ align-items: center;
567
+ justify-content: center;
568
+ font-size: 1.5rem;
569
+ font-weight: 700;
570
+ }
571
+
572
+ .author-info h4 {
573
+ font-size: 1.2rem;
574
+ margin-bottom: 0.25rem;
575
+ }
576
+
577
+ .author-info p {
578
+ color: var(--text-secondary);
579
+ }
580
+
581
+ .slider-controls {
582
+ display: flex;
583
+ justify-content: center;
584
+ gap: 1rem;
585
+ margin-top: 2rem;
586
+ }
587
+
588
+ .slider-btn {
589
+ width: 12px;
590
+ height: 12px;
591
+ border-radius: 50%;
592
+ background: var(--glass-border);
593
+ cursor: pointer;
594
+ transition: var(--transition);
595
+ }
596
+
597
+ .slider-btn.active {
598
+ background: var(--primary-color);
599
+ transform: scale(1.3);
600
+ }
601
+
602
+ /* CTA Section */
603
+ .cta {
604
+ padding: 8rem 5%;
605
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
606
+ text-align: center;
607
+ position: relative;
608
+ overflow: hidden;
609
+ }
610
+
611
+ .cta::before {
612
+ content: '';
613
+ position: absolute;
614
+ top: 0;
615
+ left: 0;
616
+ width: 100%;
617
+ height: 100%;
618
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
619
+ background-size: 50px 50px;
620
+ animation: backgroundMove 20s linear infinite;
621
+ }
622
+
623
+ @keyframes backgroundMove {
624
+ 0% { background-position: 0 0; }
625
+ 100% { background-position: 50px 50px; }
626
+ }
627
+
628
+ .cta-content {
629
+ position: relative;
630
+ z-index: 1;
631
+ max-width: 800px;
632
+ margin: 0 auto;
633
+ }
634
+
635
+ .cta h2 {
636
+ font-size: clamp(2.5rem, 5vw, 4rem);
637
+ margin-bottom: 1.5rem;
638
+ }
639
+
640
+ .cta p {
641
+ font-size: 1.3rem;
642
+ margin-bottom: 2.5rem;
643
+ opacity: 0.9;
644
+ }
645
+
646
+ .btn-white {
647
+ background: white;
648
+ color: var(--primary-color);
649
+ font-weight: 700;
650
+ }
651
+
652
+ .btn-white:hover {
653
+ transform: translateY(-5px);
654
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
655
+ }
656
+
657
+ /* Footer */
658
+ footer {
659
+ padding: 3rem 5%;
660
+ background: var(--darker-bg);
661
+ text-align: center;
662
+ border-top: 1px solid var(--glass-border);
663
+ }
664
+
665
+ .footer-content {
666
+ max-width: 1400px;
667
+ margin: 0 auto;
668
  }
669
+
670
+ .social-links {
671
+ display: flex;
672
+ justify-content: center;
673
+ gap: 1.5rem;
674
+ margin-bottom: 2rem;
675
+ }
676
+
677
+ .social-link {
678
  width: 50px;
679
  height: 50px;
 
 
680
  border-radius: 50%;
681
+ background: var(--glass-bg);
682
+ border: 1px solid var(--glass-border);
683
+ display: flex;
684
+ align-items: center;
685
+ justify-content: center;
686
+ color: var(--text-primary);
687
+ font-size: 1.5rem;
688
+ transition: var(--transition);
689
+ }
690
+
691
+ .social-link:hover {
692
+ background: var(--primary-color);
693
+ transform: translateY(-5px) rotate(10deg);
694
+ border-color: var(--primary-color);
695
+ }
696
+
697
+ .footer-text {
698
+ color: var(--text-secondary);
699
+ margin-top: 1rem;
700
+ }
701
+
702
+ .footer-text a {
703
+ color: var(--primary-color);
704
+ text-decoration: none;
705
+ transition: var(--transition);
706
+ }
707
+
708
+ .footer-text a:hover {
709
+ text-decoration: underline;
710
+ }
711
+
712
+ /* Anycoder Attribution */
713
+ .anycoder-badge {
714
+ position: fixed;
715
+ top: 20px;
716
+ right: 20px;
717
+ background: var(--glass-bg);
718
+ backdrop-filter: blur(10px);
719
+ border: 1px solid var(--glass-border);
720
+ padding: 0.5rem 1rem;
721
+ border-radius: 50px;
722
+ font-size: 0.9rem;
723
+ z-index: 1001;
724
+ transition: var(--transition);
725
+ }
726
+
727
+ .anycoder-badge:hover {
728
+ transform: scale(1.05);
729
+ background: var(--primary-color);
730
+ }
731
+
732
+ .anycoder-badge a {
733
+ color: var(--text-primary);
734
+ text-decoration: none;
735
+ font-weight: 600;
736
+ }
737
+
738
+ /* Responsive Design */
739
+ @media (max-width: 768px) {
740
+ .nav-menu {
741
+ position: fixed;
742
+ top: 0;
743
+ right: -100%;
744
+ width: 70%;
745
+ height: 100vh;
746
+ background: var(--dark-bg);
747
+ flex-direction: column;
748
+ padding: 6rem 2rem;
749
+ transition: var(--transition);
750
+ border-left: 1px solid var(--glass-border);
751
+ }
752
+
753
+ .nav-menu.active {
754
+ right: 0;
755
+ }
756
+
757
+ .hamburger {
758
+ display: flex;
759
+ z-index: 1001;
760
+ }
761
+
762
+ .hero-title {
763
+ font-size: 2.5rem;
764
+ }
765
+
766
+ .showcase-container {
767
+ grid-template-columns: 1fr;
768
+ }
769
+
770
+ .showcase-card {
771
+ transform: none;
772
+ }
773
+
774
+ .features-grid {
775
+ grid-template-columns: 1fr;
776
+ }
777
+
778
+ .cta h2 {
779
+ font-size: 2rem;
780
+ }
781
+ }
782
+
783
+ /* Reduced Motion */
784
+ @media (prefers-reduced-motion: reduce) {
785
+ * {
786
+ animation-duration: 0.01ms !important;
787
+ animation-iteration-count: 1 !important;
788
+ transition-duration: 0.01ms !important;
789
+ }
790
+ }
791
+
792
+ /* Fade in animation for scroll */
793
+ .fade-in {
794
+ opacity: 0;
795
+ transform: translateY(50px);
796
+ transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
797
  }
 
 
798
 
799
+ .fade-in.visible {
800
+ opacity: 1;
801
+ transform: translateY(0);
802
+ }
803
  </style>
804
  </head>
805
+ <body>
806
+ <!-- Scroll Progress Bar -->
807
+ <div class="scroll-progress"></div>
808
 
809
  <!-- Loader -->
810
+ <div class="loader">
811
+ <div class="loader-spinner"></div>
812
  </div>
813
 
814
+ <!-- Anycoder Badge -->
815
+ <div class="anycoder-badge">
816
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
817
+ </div>
 
 
818
 
819
  <!-- Navigation -->
820
+ <nav class="navbar">
821
+ <div class="nav-container">
822
+ <div class="logo">NEBULA</div>
823
+ <ul class="nav-menu">
824
+ <li><a href="#home" class="nav-link">Beranda</a></li>
825
+ <li><a href="#features" class="nav-link">Fitur</a></li>
826
+ <li><a href="#showcase" class="nav-link">Showcase</a></li>
827
+ <li><a href="#testimonials" class="nav-link">Testimoni</a></li>
828
+ <li><a href="#cta" class="nav-link">Kontak</a></li>
829
+ </ul>
830
+ <div class="hamburger">
831
+ <span></span>
832
+ <span></span>
833
+ <span></span>
 
 
 
 
 
 
 
 
 
834
  </div>
835
  </div>
836
  </nav>
837
 
 
 
 
 
 
 
 
 
838
  <!-- Hero Section -->
839
+ <section class="hero" id="home">
840
+ <div class="particles" id="particles"></div>
841
+ <div class="hero-content">
842
+ <h1 class="hero-title gradient-text">REVOLUSI DIGITAL</h1>
843
+ <p class="hero-subtitle">Transformasi bisnis Anda dengan teknologi terkini dan solusi inovatif</p>
844
+ <div class="hero-buttons">
845
+ <a href="#features" class="btn btn-primary">Mulai Sekarang</a>
846
+ <a href="#showcase" class="btn btn-secondary">Lihat Demo</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
847
  </div>
848
  </div>
849
+ <div class="scroll-indicator">
850
+ <i class="fas fa-chevron-down"></i>
 
 
 
851
  </div>
852
  </section>
853
 
854
+ <!-- Features Section -->
855
+ <section class="features fade-in" id="features">
856
+ <h2 class="section-title gradient-text">Fitur Unggulan</h2>
857
+ <div class="features-grid">
858
+ <div class="feature-card">
859
+ <div class="feature-icon">
860
+ <i class="fas fa-rocket"></i>
861
+ </div>
862
+ <h3 class="feature-title">Performa Cepat</h3>
863
+ <p class="feature-description">Kecepatan optimal dengan teknologi terbaru untuk pengalaman terbaik pengguna</p>
864
  </div>
865
+ <div class="feature-card">
866
+ <div class="feature-icon">
867
+ <i class="fas fa-shield-alt"></i>
 
 
 
 
 
 
 
 
868
  </div>
869
+ <h3 class="feature-title">Keamanan Tinggi</h3>
870
+ <p class="feature-description">Proteksi data terbaik dengan enkripsi end-to-end dan sistem keamanan canggih</p>
871
+ </div>
872
+ <div class="feature-card">
873
+ <div class="feature-icon">
874
+ <i class="fas fa-palette"></i>
 
 
 
 
875
  </div>
876
+ <h3 class="feature-title">Desain Modern</h3>
877
+ <p class="feature-description">Antarmuka yang elegan dan intuitif dengan animasi halus yang memukau</p>
878
+ </div>
879
+ <div class="feature-card">
880
+ <div class="feature-icon">
881
+ <i class="fas fa-mobile-alt"></i>
 
 
 
 
882
  </div>
883
+ <h3 class="feature-title">Responsif 100%</h3>
884
+ <p class="feature-description">Tampil sempurna di semua perangkat, dari desktop hingga smartphone</p>
885
  </div>
886
+ <div class="feature-card">
887
+ <div class="feature-icon">
888
+ <i class="fas fa-code"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
889
  </div>
890
+ <h3 class="feature-title">Kode Bersih</h3>
891
+ <p class="feature-description">Arsitektur terstruktur dengan komentar jelas untuk kemudahan pengembangan</p>
892
+ </div>
893
+ <div class="feature-card">
894
+ <div class="feature-icon">
895
+ <i class="fas fa-headset"></i>
 
 
 
 
 
 
 
 
 
 
 
 
896
  </div>
897
+ <h3 class="feature-title">Dukungan 24/7</h3>
898
+ <p class="feature-description">Tim ahli siap membantu kapan saja untuk kelancaran operasional Anda</p>
899
  </div>
900
  </div>
901
  </section>
902
 
903
+ <!-- Showcase Section -->
904
+ <section class="showcase fade-in" id="showcase">
905
+ <div class="showcase-container">
906
+ <div class="showcase-content">
907
+ <h2 class="gradient-text">Teknologi Masa Depan</h2>
908
+ <p>Integrasi teknologi terkini seperti AI, Machine Learning, dan Cloud Computing untuk solusi bisnis yang cerdas dan efisien.</p>
909
+ <a href="#" class="btn btn-primary">Pelajari Lebih Lanjut</a>
910
  </div>
911
+ <div class="showcase-visual">
912
+ <div class="showcase-card">
913
+ <div class="code-block">
914
+ <pre>// Contoh implementasi
915
+ const nebula = new Nebula({
916
+ apiKey: 'your-api-key',
917
+ features: ['ai', 'analytics', 'cloud'],
918
+ autoScale: true
919
+ });
920
 
921
+ nebula.init().then(() => {
922
+ console.log('Nebula aktif!');
923
+ });</pre>
924
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
925
  </div>
926
  </div>
927
  </div>
928
  </section>
929
 
930
+ <!-- Testimonials Section -->
931
+ <section class="testimonials fade-in" id="testimonials">
932
+ <h2 class="section-title gradient-text">Apa Kata Mereka</h2>
933
+ <div class="testimonial-slider">
934
+ <div class="testimonial-track" id="testimonial-track">
935
+ <div class="testimonial-item">
936
+ <p class="testimonial-text">"Nebula mengubah cara kami berbisnis. Performa luar biasa dan dukungan yang sangat responsif!"</p>
937
+ <div class="testimonial-author">
938
+ <div class="author-avatar">JD</div>
939
+ <div class="author-info">
940
+ <h4>John Doe</h4>
941
+ <p>CEO TechCorp</p>
942
+ </div>
943
+ </div>
944
+ </div>
945
+ <div class="testimonial-item">
946
+ <p class="testimonial-text">"Antarmuka yang indah dan fungsionalitas yang powerful. Sangat direkomendasikan!"</p>
947
+ <div class="testimonial-author">
948
+ <div class="author-avatar">SM</div>
949
+ <div class="author-info">
950
+ <h4>Sarah Miller</h4>
951
+ <p>Product Manager</p>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ <div class="testimonial-item">
956
+ <p class="testimonial-text">"Efisiensi meningkat 300% sejak menggunakan Nebula. Investasi terbaik tahun ini!"</p>
957
+ <div class="testimonial-author">
958
+ <div class="author-avatar">AC</div>
959
+ <div class="author-info">
960
+ <h4>Alex Chen</h4>
961
+ <p>Startup Founder</p>
962
+ </div>
963
  </div>
964
  </div>
965
  </div>
966
+ <div class="slider-controls" id="slider-controls"></div>
967
+ </div>
968
+ </section>
969
+
970
+ <!-- CTA Section -->
971
+ <section class="cta fade-in" id="cta">
972
+ <div class="cta-content">
973
+ <h2>Siap Memulai Perjalanan Digital?</h2>
974
+ <p>Bergabunglah dengan ribuan perusahaan yang telah transformasi bersama Nebula</p>
975
+ <a href="#" class="btn btn-white">Dapatkan Demo Gratis</a>
976
  </div>
977
  </section>
978
 
979
  <!-- Footer -->
980
+ <footer>
981
+ <div class="footer-content">
982
+ <div class="social-links">
983
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
984
+ <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
985
+ <a href="#" class="social-link"><i class="fab fa-github"></i></a>
986
+ <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
987
  </div>
988
+ <div class="footer-text">
989
+ <p>&copy; 2024 Nebula. All rights reserved. | Made with <i class="fas fa-heart" style="color: var(--secondary-color);"></i> by <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
 
 
 
 
990
  </div>
991
  </div>
992
  </footer>
993
 
994
  <script>
995
+ // JavaScript Modern dengan Intersection Observer dan Event Delegation
996
+ document.addEventListener('DOMContentLoaded', () => {
997
+ // Loader
998
+ window.addEventListener('load', () => {
999
+ setTimeout(() => {
1000
+ document.querySelector('.loader').classList.add('hidden');
1001
+ }, 1000);
1002
+ });
1003
+
1004
+ // Scroll Progress Bar
1005
+ const scrollProgress = document.querySelector('.scroll-progress');
1006
+ window.addEventListener('scroll', () => {
1007
+ const scrollTop = window.pageYOffset;
1008
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight;
1009
+ const scrollPercent = (scrollTop / docHeight) * 100;
1010
+ scrollProgress.style.width = scrollPercent + '%';
1011
+ });
1012
 
1013
+ // Navbar Scroll Effect
1014
+ const navbar = document.querySelector('.navbar');
1015
+ window.addEventListener('scroll', () => {
1016
+ if (window.scrollY > 50) {
1017
+ navbar.classList.add('scrolled');
1018
+ } else {
1019
+ navbar.classList.remove('scrolled');
1020
+ }
1021
+ });
1022
 
1023
+ // Mobile Menu Toggle
1024
+ const hamburger = document.querySelector('.hamburger');
1025
+ const navMenu = document.querySelector('.nav-menu');
1026
 
1027
+ hamburger.addEventListener('click', () => {
1028
+ hamburger.classList.toggle('active');
1029
+ navMenu.classList.toggle('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1030
  });
 
1031
 
1032
+ // Close menu on link click
1033
+ document.querySelectorAll('.nav-link').forEach(link => {
1034
+ link.addEventListener('click', () => {
1035
+ hamburger.classList.remove('active');
1036
+ navMenu.classList.remove('active');
1037
+ });
1038
+ });
1039
 
1040
+ // Smooth Scroll
1041
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1042
+ anchor.addEventListener('click', function (e) {
1043
+ e.preventDefault();
1044
+ const target = document.querySelector(this.getAttribute('href'));
1045
+ if (target) {
1046
+ target.scrollIntoView({
1047
+ behavior: 'smooth',
1048
+ block: 'start'
1049
+ });
1050
+ }
1051
+ });
1052
+ });
1053
 
1054
+ // Particles System
1055
+ const particlesContainer = document.getElementById('particles');
1056
+ const particleCount = 50;
1057
+
1058
+ for (let i = 0; i < particleCount; i++) {
1059
+ const particle = document.createElement('div');
1060
+ particle.classList.add('particle');
1061
+
1062
+ const size = Math.random() * 4 + 1;
1063
+ const posX = Math.random() * 100;
1064
+ const posY = Math.random() * 100;
1065
+ const animationDelay = Math.random() * 20;
1066
+ const animationDuration = Math.random() * 20 + 20;
1067
 
1068
+ particle.style.width = `${size}px`;
1069
+ particle.style.height = `${size}px`;
1070
+ particle.style.left = `${posX}%`;
1071
+ particle.style.top = `${posY}%`;
1072
+ particle.style.animationDelay = `${animationDelay}s`;
1073
+ particle.style.animationDuration = `${animationDuration}s`;
1074
+ particle.style.background = `radial-gradient(circle, rgba(99, 102, 241, ${Math.random() * 0.5 + 0.2}) 0%, transparent 70%)`;
1075
 
1076
+ particlesContainer.appendChild(particle);
1077
+ }
1078
 
1079
+ // Parallax Mouse Effect
1080
+ const hero = document.querySelector('.hero');
1081
+ hero.addEventListener('mousemove', (e) => {
1082
+ const { clientX, clientY } = e;
1083
+ const { innerWidth, innerHeight } = window;
1084
+
1085
+ const centerX = clientX - innerWidth / 2;
1086
+ const centerY = clientY - innerHeight / 2;
1087
+
1088
+ const parallaxElements = document.querySelectorAll('.particle');
1089
+ parallaxElements.forEach((el, index) => {
1090
+ const speed = (index % 5 + 1) * 0.5;
1091
+ const x = centerX * speed * 0.001;
1092
+ const y = centerY * speed * 0.001;
1093
+ el.style.transform = `translate(${x}px, ${y}px)`;
1094
+ });
1095
  });
1096
 
1097
+ // Intersection Observer for fade-in animations
1098
+ const observerOptions = {
1099
+ threshold: 0.1,
1100
+ rootMargin: '0px 0px -50px 0px'
1101
+ };
1102
+
1103
+ const observer = new IntersectionObserver((entries) => {
1104
+ entries.forEach(entry => {
1105
+ if (entry.isIntersecting) {
1106
+ entry.target.classList.add('visible');
1107
+ }
1108
+ });
1109
+ }, observerOptions);
1110
+
1111
+ document.querySelectorAll('.fade-in').forEach(el => {
1112
+ observer.observe(el);
1113
  });
 
1114
 
1115
+ // Testimonial Slider
1116
+ const track = document.getElementById('testimonial-track');
1117
+ const controls = document.getElementById('slider-controls');
1118
+ const testimonials = document.querySelectorAll('.testimonial-item');
1119
+ let currentIndex = 0;
1120
+
1121
+ // Create controls
1122
+ testimonials.forEach((_, index) => {
1123
+ const btn = document.createElement('div');
1124
+ btn.classList.add('slider-btn');
1125
+ if (index === 0) btn.classList.add('active');
1126
+ btn.addEventListener('click', () => goToSlide(index));
1127
+ controls.appendChild(btn);
1128
+ });
1129
+
1130
+ function goToSlide(index) {
1131
+ currentIndex = index;
1132
+ track.style.transform = `translateX(-${index * 100}%)`;
1133
+ updateControls();
1134
  }
 
1135
 
1136
+ function updateControls() {
1137
+ document.querySelectorAll('.slider-btn').forEach((btn, index) => {
1138
+ btn.classList.toggle('active', index === currentIndex);
1139
+ });
 
 
 
 
 
 
 
 
1140
  }
 
1141
 
1142
+ // Auto-play testimonial
1143
+ setInterval(() => {
1144
+ currentIndex = (currentIndex + 1) % testimonials.length;
1145
+ goToSlide(currentIndex);
1146
+ }, 5000);
 
1147
 
1148
+ // Glitch Effect on Hero Title
1149
+ const heroTitle = document.querySelector('.hero-title');
1150
+ setInterval(() => {
1151
+ heroTitle.style.textShadow = `${Math.random() * 5}px ${Math.random() * 5}px var(--primary-color)`;
1152
+ setTimeout(() => {
1153
+ heroTitle.style.textShadow = 'none';
1154
+ }, 100);
1155
+ }, 3000);
1156
  });
 
1157
  </script>
1158
  </body>
1159
  </html>