ProjectGenesis commited on
Commit
7bbdda5
·
verified ·
1 Parent(s): 0bbd710

Create a high-conversion, mobile-first landing page for Nioplay — a legally structured U.S. sweepstakes casino. The visual style must be cinematic and futuristic with a strong **neon aesthetic** across the entire design. The theme should reflect a bold, high-stakes digital casino, with glowing neon elements layered over a dark black background. 🎨 Visual Theme: - Use a **pure black or gunmetal background** (#0A0A0A) - Apply glowing **neon orange (#FF6A00)** for CTAs, key highlights, and glow frames - Use **electric blue (#00E4FF)** for link hovers, accents, icons, and outlines - Add light **gradient flares, glow particles, and blurred motion glows** - Fonts: Orbitron or Inter for headings, Poppins for body — all headings should glow - Use **glowing borders, pulsing buttons, and animated scroll transitions** - Add **subtle ambient backlighting and horizontal light streaks** behind major sections 💰 **Immersive Gold Coin Animation (Full Page Effect):** - Create a site-wide animated gold coin system that flows across the entire page - Coins should float, spin, drift, and gleam — not just in the hero section - Apply **parallax layering**: some coins pass behind sections, others float in front - Vary coin size, speed, and opacity to simulate depth - Blur coins in dense content areas (e.g., FAQ) for minimal distraction - Include **light gleams or spark trail effects** on occasional coins - Use gold gradients from #FFD700 to #FFA500, with a soft neon aura - Add coin pulse or scatter animations when scrolling into key CTAs or bonus sections - Animate using CSS/SVG/Canvas for smooth, lightweight performance (no JS required) 📄 Page Content Structure: 1. **Hero Section** - Glowing headline: “Play for Free. Win Real Prizes.” - Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” - Buttons: - [Start Playing] — orange neon glow + pulsing animation - [See How It Works] — outlined in blue with flicker hover effect - Coins animate actively across and behind hero elements - Micro-trust bar: “100% Legal · Instant Crypto Cashouts · 18+ Only” 2. **Trust Bar / Legal Assurance** - Neon-outlined icons (with glow on hover): U.S.-Legal ✔️ · Crypto-Friendly 🪙 · 18+ Verified 🔞 · Instant Payouts ⚡ · KYC Compliant 🔐 3. **How Nioplay Works (3-Step Reveal)** - Scroll-triggered animation or fade-in: 1. Sign Up (Get free coins) 2. Play Games (Slots, Fish, Blackjack) 3. Win Prizes (Crypto, Gift Cards) - Include subtle coin drift or glow streak background 4. **Featured Games Carousel** - Horizontal slider or glow-tiled grid - Each game card has zoom glow on hover, glowing labels: “Top Rated,” “Jackpot,” “Exclusive,” etc. 5. **Promo Offer Section** - Glowing banner: “Claim $10 in FREE Coins by verifying your account” - CTA button: [Claim Now] — orange glow pulse, coin pop on hover - Optional bonus code field with animated outline 6. **Why Nioplay? (Neon Feature Grid)** - Icons glow on hover with flicker effect - 24h Crypto Redemptions - Legal Sweepstakes Model - No Download Required - VIP Rakeback Rewards - 50+ Games - Use neon-glow card outlines + fade-ins 7. **Testimonials Section** - Neon-bordered Facebook-style cards: avatar, review, game preview - Slide-in or fade-up animation with soft glowing particle background 8. **FAQ Section (Accordion Glow Style)** - Each FAQ entry uses toggle accordion with neon icon + border - Sample questions: – Is Nioplay legal? – Can I win real money? – Do I need to deposit? – What games are available? – How fast are payouts? - Section should feel bright and active — not a dead zone 9. **Final CTA Section** - Glowing neon spotlight background (black → blue/orange mixed gradient) - Text: “Join 100,000+ players winning daily on Nioplay” - CTA button: [Start Playing Now] — large, centered, pulsing orange glow - Coins animate into view from side or behind - Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” 10. **Footer** - Black background with neon hover link effects - Include: - Terms of Service - Privacy Policy - FAQ - Responsible Gaming - Support - Social icons (Facebook, Twitter, Discord) with glow hover animation - Placeholder for Nioplay neon-style logo - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +888 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nioplay Landing
3
- emoji:
4
- colorFrom: pink
5
- colorTo: indigo
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: nioplay-landing
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
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,888 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nioplay - Next-Gen Sweepstakes Casino</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=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --neon-orange: #FF6A00;
13
+ --neon-blue: #00E4FF;
14
+ --gold-light: #FFD700;
15
+ --gold-dark: #FFA500;
16
+ --bg-dark: #0A0A0A;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Poppins', sans-serif;
21
+ background-color: var(--bg-dark);
22
+ color: white;
23
+ overflow-x: hidden;
24
+ position: relative;
25
+ }
26
+
27
+ h1, h2, h3, h4, h5, h6 {
28
+ font-family: 'Orbitron', sans-serif;
29
+ text-shadow: 0 0 10px rgba(255, 106, 0, 0.7);
30
+ }
31
+
32
+ .neon-orange {
33
+ color: var(--neon-orange);
34
+ text-shadow: 0 0 10px rgba(255, 106, 0, 0.7);
35
+ }
36
+
37
+ .neon-blue {
38
+ color: var(--neon-blue);
39
+ text-shadow: 0 0 10px rgba(0, 228, 255, 0.5);
40
+ }
41
+
42
+ .neon-orange-border {
43
+ border: 2px solid var(--neon-orange);
44
+ box-shadow: 0 0 15px rgba(255, 106, 0, 0.7);
45
+ }
46
+
47
+ .neon-blue-border {
48
+ border: 2px solid var(--neon-blue);
49
+ box-shadow: 0 0 15px rgba(0, 228, 255, 0.5);
50
+ }
51
+
52
+ .neon-orange-glow {
53
+ box-shadow: 0 0 15px 5px rgba(255, 106, 0, 0.7);
54
+ }
55
+
56
+ .neon-blue-glow {
57
+ box-shadow: 0 0 15px 5px rgba(0, 228, 255, 0.5);
58
+ }
59
+
60
+ .btn-orange {
61
+ background: linear-gradient(135deg, var(--neon-orange), #FF8C00);
62
+ color: white;
63
+ border: none;
64
+ position: relative;
65
+ overflow: hidden;
66
+ transition: all 0.3s ease;
67
+ box-shadow: 0 0 15px rgba(255, 106, 0, 0.7);
68
+ animation: pulse 2s infinite;
69
+ }
70
+
71
+ .btn-orange:hover {
72
+ transform: translateY(-3px);
73
+ box-shadow: 0 0 25px rgba(255, 106, 0, 0.9);
74
+ }
75
+
76
+ .btn-blue {
77
+ background: transparent;
78
+ color: var(--neon-blue);
79
+ border: 2px solid var(--neon-blue);
80
+ position: relative;
81
+ overflow: hidden;
82
+ transition: all 0.3s ease;
83
+ box-shadow: 0 0 15px rgba(0, 228, 255, 0.5);
84
+ }
85
+
86
+ .btn-blue:hover {
87
+ color: white;
88
+ background: rgba(0, 228, 255, 0.2);
89
+ box-shadow: 0 0 25px rgba(0, 228, 255, 0.7);
90
+ animation: flicker 1.5s infinite;
91
+ }
92
+
93
+ @keyframes pulse {
94
+ 0% {
95
+ box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7);
96
+ }
97
+ 70% {
98
+ box-shadow: 0 0 0 15px rgba(255, 106, 0, 0);
99
+ }
100
+ 100% {
101
+ box-shadow: 0 0 0 0 rgba(255, 106, 0, 0);
102
+ }
103
+ }
104
+
105
+ @keyframes flicker {
106
+ 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
107
+ opacity: 1;
108
+ box-shadow: 0 0 15px rgba(0, 228, 255, 0.7);
109
+ }
110
+ 20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
111
+ opacity: 0.7;
112
+ box-shadow: none;
113
+ }
114
+ }
115
+
116
+ .coin {
117
+ position: absolute;
118
+ background: radial-gradient(circle at center, var(--gold-light), var(--gold-dark));
119
+ border-radius: 50%;
120
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
121
+ z-index: -1;
122
+ opacity: 0.7;
123
+ }
124
+
125
+ .coin:before {
126
+ content: '';
127
+ position: absolute;
128
+ top: 5%;
129
+ left: 10%;
130
+ width: 20%;
131
+ height: 20%;
132
+ background: white;
133
+ border-radius: 50%;
134
+ transform: rotate(45deg);
135
+ filter: blur(1px);
136
+ opacity: 0.8;
137
+ }
138
+
139
+ .coin:after {
140
+ content: '';
141
+ position: absolute;
142
+ top: 10%;
143
+ right: 10%;
144
+ width: 15%;
145
+ height: 15%;
146
+ background: white;
147
+ border-radius: 50%;
148
+ filter: blur(0.5px);
149
+ opacity: 0.6;
150
+ }
151
+
152
+ .coin-1 {
153
+ animation: float 15s ease-in-out infinite;
154
+ }
155
+
156
+ .coin-2 {
157
+ animation: float 12s ease-in-out infinite reverse;
158
+ }
159
+
160
+ .coin-3 {
161
+ animation: float 18s ease-in-out infinite;
162
+ }
163
+
164
+ .coin-4 {
165
+ animation: float 14s ease-in-out infinite reverse;
166
+ }
167
+
168
+ .coin-5 {
169
+ animation: float 16s ease-in-out infinite;
170
+ }
171
+
172
+ @keyframes float {
173
+ 0% {
174
+ transform: translate(0, 0) rotate(0deg);
175
+ }
176
+ 50% {
177
+ transform: translate(50px, 100px) rotate(180deg);
178
+ }
179
+ 100% {
180
+ transform: translate(0, 0) rotate(360deg);
181
+ }
182
+ }
183
+
184
+ .game-card {
185
+ transition: all 0.3s ease;
186
+ border: 1px solid rgba(255, 255, 255, 0.1);
187
+ background: rgba(10, 10, 10, 0.7);
188
+ backdrop-filter: blur(5px);
189
+ }
190
+
191
+ .game-card:hover {
192
+ transform: scale(1.05);
193
+ box-shadow: 0 0 20px rgba(255, 106, 0, 0.7);
194
+ border: 1px solid var(--neon-orange);
195
+ }
196
+
197
+ .feature-card {
198
+ transition: all 0.3s ease;
199
+ border: 1px solid rgba(0, 228, 255, 0.2);
200
+ background: rgba(10, 10, 10, 0.7);
201
+ }
202
+
203
+ .feature-card:hover {
204
+ transform: translateY(-5px);
205
+ box-shadow: 0 0 20px rgba(0, 228, 255, 0.5);
206
+ border: 1px solid var(--neon-blue);
207
+ }
208
+
209
+ .feature-icon {
210
+ transition: all 0.3s ease;
211
+ }
212
+
213
+ .feature-card:hover .feature-icon {
214
+ color: var(--neon-blue);
215
+ text-shadow: 0 0 15px rgba(0, 228, 255, 0.7);
216
+ }
217
+
218
+ .testimonial-card {
219
+ background: rgba(15, 15, 15, 0.8);
220
+ border: 1px solid rgba(255, 106, 0, 0.3);
221
+ transition: all 0.3s ease;
222
+ }
223
+
224
+ .testimonial-card:hover {
225
+ transform: translateY(-5px);
226
+ box-shadow: 0 0 20px rgba(255, 106, 0, 0.5);
227
+ border: 1px solid var(--neon-orange);
228
+ }
229
+
230
+ .accordion-item {
231
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
232
+ }
233
+
234
+ .accordion-header {
235
+ cursor: pointer;
236
+ transition: all 0.3s ease;
237
+ }
238
+
239
+ .accordion-header:hover {
240
+ color: var(--neon-orange);
241
+ }
242
+
243
+ .accordion-content {
244
+ max-height: 0;
245
+ overflow: hidden;
246
+ transition: max-height 0.3s ease;
247
+ }
248
+
249
+ .accordion-item.active .accordion-content {
250
+ max-height: 500px;
251
+ }
252
+
253
+ .accordion-icon {
254
+ transition: transform 0.3s ease;
255
+ }
256
+
257
+ .accordion-item.active .accordion-icon {
258
+ transform: rotate(45deg);
259
+ color: var(--neon-orange);
260
+ }
261
+
262
+ .footer-link {
263
+ transition: all 0.3s ease;
264
+ }
265
+
266
+ .footer-link:hover {
267
+ color: var(--neon-orange);
268
+ text-shadow: 0 0 10px rgba(255, 106, 0, 0.7);
269
+ }
270
+
271
+ .social-icon {
272
+ transition: all 0.3s ease;
273
+ }
274
+
275
+ .social-icon:hover {
276
+ color: var(--neon-blue);
277
+ transform: translateY(-3px);
278
+ text-shadow: 0 0 15px rgba(0, 228, 255, 0.7);
279
+ }
280
+
281
+ .promo-banner {
282
+ background: linear-gradient(90deg, rgba(255, 106, 0, 0.1), rgba(0, 228, 255, 0.1), rgba(255, 106, 0, 0.1));
283
+ position: relative;
284
+ overflow: hidden;
285
+ }
286
+
287
+ .promo-banner:before {
288
+ content: '';
289
+ position: absolute;
290
+ top: -50%;
291
+ left: -50%;
292
+ width: 200%;
293
+ height: 200%;
294
+ background: linear-gradient(45deg, transparent 33%, rgba(255, 106, 0, 0.1) 50%, transparent 66%);
295
+ animation: shine 3s linear infinite;
296
+ z-index: 0;
297
+ }
298
+
299
+ @keyframes shine {
300
+ 0% {
301
+ transform: translateX(-50%) translateY(-50%) rotate(0deg);
302
+ }
303
+ 100% {
304
+ transform: translateX(-50%) translateY(-50%) rotate(360deg);
305
+ }
306
+ }
307
+
308
+ .promo-btn {
309
+ position: relative;
310
+ overflow: hidden;
311
+ }
312
+
313
+ .promo-btn:hover:after {
314
+ content: '💰';
315
+ position: absolute;
316
+ font-size: 1.5rem;
317
+ animation: coinPop 0.5s ease-out;
318
+ }
319
+
320
+ @keyframes coinPop {
321
+ 0% {
322
+ transform: translateY(0) scale(1);
323
+ opacity: 1;
324
+ }
325
+ 100% {
326
+ transform: translateY(-50px) scale(1.5);
327
+ opacity: 0;
328
+ }
329
+ }
330
+
331
+ .section-divider {
332
+ height: 2px;
333
+ background: linear-gradient(90deg, transparent, var(--neon-orange), var(--neon-blue), transparent);
334
+ opacity: 0.3;
335
+ }
336
+
337
+ .how-it-works-step {
338
+ opacity: 0;
339
+ transform: translateY(20px);
340
+ transition: all 0.5s ease;
341
+ }
342
+
343
+ .how-it-works-step.visible {
344
+ opacity: 1;
345
+ transform: translateY(0);
346
+ }
347
+
348
+ /* Responsive adjustments */
349
+ @media (max-width: 768px) {
350
+ .coin {
351
+ display: none;
352
+ }
353
+
354
+ h1 {
355
+ font-size: 2rem;
356
+ }
357
+
358
+ .btn-orange, .btn-blue {
359
+ padding: 0.75rem 1.5rem;
360
+ font-size: 1rem;
361
+ }
362
+ }
363
+ </style>
364
+ </head>
365
+ <body class="relative overflow-x-hidden">
366
+ <!-- Floating Coins -->
367
+ <div class="coin coin-1" style="width: 40px; height: 40px; top: 20%; left: 10%;"></div>
368
+ <div class="coin coin-2" style="width: 30px; height: 30px; top: 30%; right: 15%;"></div>
369
+ <div class="coin coin-3" style="width: 25px; height: 25px; top: 60%; left: 20%;"></div>
370
+ <div class="coin coin-4" style="width: 35px; height: 35px; top: 70%; right: 10%;"></div>
371
+ <div class="coin coin-5" style="width: 50px; height: 50px; top: 80%; left: 15%;"></div>
372
+
373
+ <!-- Hero Section -->
374
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden px-4">
375
+ <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-30 z-0"></div>
376
+ <div class="container mx-auto text-center relative z-10">
377
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-orange">
378
+ Play for Free. <span class="neon-blue">Win Real Prizes.</span>
379
+ </h1>
380
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">
381
+ Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.
382
+ </p>
383
+ <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
384
+ <button class="btn-orange px-8 py-4 rounded-full text-lg font-bold mx-2">
385
+ Start Playing
386
+ </button>
387
+ <button class="btn-blue px-8 py-4 rounded-full text-lg font-bold mx-2">
388
+ See How It Works
389
+ </button>
390
+ </div>
391
+ <div class="text-sm opacity-80 flex flex-wrap justify-center gap-4">
392
+ <span class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 100% Legal</span>
393
+ <span class="flex items-center"><i class="fas fa-bolt text-yellow-500 mr-2"></i> Instant Crypto Cashouts</span>
394
+ <span class="flex items-center"><i class="fas fa-user-shield text-blue-500 mr-2"></i> 18+ Only</span>
395
+ </div>
396
+ </div>
397
+ </section>
398
+
399
+ <!-- Trust Bar -->
400
+ <section class="py-8 bg-black bg-opacity-70 border-t border-b border-gray-800">
401
+ <div class="container mx-auto">
402
+ <div class="flex flex-wrap justify-center items-center gap-6 md:gap-12">
403
+ <div class="flex items-center neon-blue hover:text-white transition-all">
404
+ <i class="fas fa-shield-alt text-2xl mr-2"></i>
405
+ <span>U.S.-Legal</span>
406
+ </div>
407
+ <div class="flex items-center neon-blue hover:text-white transition-all">
408
+ <i class="fas fa-coins text-2xl mr-2"></i>
409
+ <span>Crypto-Friendly</span>
410
+ </div>
411
+ <div class="flex items-center neon-blue hover:text-white transition-all">
412
+ <i class="fas fa-user-lock text-2xl mr-2"></i>
413
+ <span>18+ Verified</span>
414
+ </div>
415
+ <div class="flex items-center neon-blue hover:text-white transition-all">
416
+ <i class="fas fa-wallet text-2xl mr-2"></i>
417
+ <span>Instant Payouts</span>
418
+ </div>
419
+ <div class="flex items-center neon-blue hover:text-white transition-all">
420
+ <i class="fas fa-fingerprint text-2xl mr-2"></i>
421
+ <span>KYC Compliant</span>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </section>
426
+
427
+ <!-- How It Works -->
428
+ <section class="py-20 px-4 relative">
429
+ <div class="container mx-auto">
430
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-orange">How Nioplay Works</h2>
431
+
432
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
433
+ <!-- Step 1 -->
434
+ <div class="how-it-works-step bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800 hover:neon-orange-border transition-all">
435
+ <div class="text-5xl neon-blue mb-6 text-center">1</div>
436
+ <h3 class="text-2xl font-bold mb-4 text-center">Sign Up</h3>
437
+ <p class="text-gray-300 text-center">Create your free account and get your first bonus coins instantly.</p>
438
+ </div>
439
+
440
+ <!-- Step 2 -->
441
+ <div class="how-it-works-step bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800 hover:neon-orange-border transition-all" style="transition-delay: 0.2s">
442
+ <div class="text-5xl neon-blue mb-6 text-center">2</div>
443
+ <h3 class="text-2xl font-bold mb-4 text-center">Play Games</h3>
444
+ <p class="text-gray-300 text-center">Enjoy our collection of slots, fish tables, blackjack and more.</p>
445
+ </div>
446
+
447
+ <!-- Step 3 -->
448
+ <div class="how-it-works-step bg-black bg-opacity-70 p-8 rounded-xl border border-gray-800 hover:neon-orange-border transition-all" style="transition-delay: 0.4s">
449
+ <div class="text-5xl neon-blue mb-6 text-center">3</div>
450
+ <h3 class="text-2xl font-bold mb-4 text-center">Win Prizes</h3>
451
+ <p class="text-gray-300 text-center">Redeem your winnings for crypto, gift cards, and other rewards.</p>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Featured Games -->
458
+ <section class="py-20 px-4 bg-black bg-opacity-50">
459
+ <div class="container mx-auto">
460
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-orange">Featured Games</h2>
461
+
462
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
463
+ <!-- Game 1 -->
464
+ <div class="game-card rounded-xl overflow-hidden">
465
+ <div class="relative">
466
+ <img src="https://via.placeholder.com/600x400/0A0A0A/FF6A00?text=Golden+Jackpot" alt="Golden Jackpot" class="w-full h-48 object-cover">
467
+ <div class="absolute top-2 left-2 bg-orange-600 text-white text-xs font-bold px-2 py-1 rounded neon-orange-glow">
468
+ HOT
469
+ </div>
470
+ <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">
471
+ JACKPOT
472
+ </div>
473
+ </div>
474
+ <div class="p-4">
475
+ <h3 class="text-xl font-bold mb-2">Golden Jackpot</h3>
476
+ <p class="text-gray-400 text-sm mb-3">Spin to win massive progressive prizes</p>
477
+ <button class="btn-blue w-full py-2 rounded">Play Now</button>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Game 2 -->
482
+ <div class="game-card rounded-xl overflow-hidden">
483
+ <div class="relative">
484
+ <img src="https://via.placeholder.com/600x400/0A0A0A/00E4FF?text=Crypto+Fish" alt="Crypto Fish" class="w-full h-48 object-cover">
485
+ <div class="absolute top-2 left-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded neon-blue-glow">
486
+ NEW
487
+ </div>
488
+ </div>
489
+ <div class="p-4">
490
+ <h3 class="text-xl font-bold mb-2">Crypto Fish</h3>
491
+ <p class="text-gray-400 text-sm mb-3">Shoot fish, win big crypto rewards</p>
492
+ <button class="btn-blue w-full py-2 rounded">Play Now</button>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Game 3 -->
497
+ <div class="game-card rounded-xl overflow-hidden">
498
+ <div class="relative">
499
+ <img src="https://via.placeholder.com/600x400/0A0A0A/FFFFFF?text=Blackjack+Pro" alt="Blackjack Pro" class="w-full h-48 object-cover">
500
+ <div class="absolute top-2 left-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded">
501
+ VIP
502
+ </div>
503
+ </div>
504
+ <div class="p-4">
505
+ <h3 class="text-xl font-bold mb-2">Blackjack Pro</h3>
506
+ <p class="text-gray-400 text-sm mb-3">Classic 21 with high-stakes action</p>
507
+ <button class="btn-blue w-full py-2 rounded">Play Now</button>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </section>
513
+
514
+ <!-- Promo Banner -->
515
+ <section class="py-16 px-4 promo-banner">
516
+ <div class="container mx-auto text-center relative z-10">
517
+ <h2 class="text-2xl md:text-3xl font-bold mb-6 neon-orange">
518
+ Claim $10 in FREE Coins by verifying your account
519
+ </h2>
520
+ <button class="promo-btn btn-orange px-8 py-4 rounded-full text-lg font-bold mx-2">
521
+ Claim Now
522
+ </button>
523
+ <div class="mt-6 text-sm opacity-80">
524
+ <p>Use code: <span class="font-bold neon-blue">WELCOME10</span> at registration</p>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <!-- Why Nioplay -->
530
+ <section class="py-20 px-4 relative">
531
+ <div class="container mx-auto">
532
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-orange">Why Choose Nioplay?</h2>
533
+
534
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
535
+ <!-- Feature 1 -->
536
+ <div class="feature-card p-6 rounded-xl">
537
+ <div class="feature-icon text-4xl neon-orange mb-4 text-center">
538
+ <i class="fas fa-clock"></i>
539
+ </div>
540
+ <h3 class="text-xl font-bold mb-3 text-center">24h Crypto Redemptions</h3>
541
+ <p class="text-gray-400 text-center">Get your winnings in crypto within 24 hours, no waiting.</p>
542
+ </div>
543
+
544
+ <!-- Feature 2 -->
545
+ <div class="feature-card p-6 rounded-xl">
546
+ <div class="feature-icon text-4xl neon-orange mb-4 text-center">
547
+ <i class="fas fa-gavel"></i>
548
+ </div>
549
+ <h3 class="text-xl font-bold mb-3 text-center">Legal Sweepstakes Model</h3>
550
+ <p class="text-gray-400 text-center">100% compliant with U.S. sweepstakes laws.</p>
551
+ </div>
552
+
553
+ <!-- Feature 3 -->
554
+ <div class="feature-card p-6 rounded-xl">
555
+ <div class="feature-icon text-4xl neon-orange mb-4 text-center">
556
+ <i class="fas fa-laptop"></i>
557
+ </div>
558
+ <h3 class="text-xl font-bold mb-3 text-center">No Download Required</h3>
559
+ <p class="text-gray-400 text-center">Play instantly in your browser on any device.</p>
560
+ </div>
561
+
562
+ <!-- Feature 4 -->
563
+ <div class="feature-card p-6 rounded-xl">
564
+ <div class="feature-icon text-4xl neon-orange mb-4 text-center">
565
+ <i class="fas fa-crown"></i>
566
+ </div>
567
+ <h3 class="text-xl font-bold mb-3 text-center">VIP Rakeback Rewards</h3>
568
+ <p class="text-gray-400 text-center">Earn up to 50% rakeback as you climb VIP tiers.</p>
569
+ </div>
570
+
571
+ <!-- Feature 5 -->
572
+ <div class="feature-card p-6 rounded-xl">
573
+ <div class="feature-icon text-4xl neon-orange mb-4 text-center">
574
+ <i class="fas fa-gamepad"></i>
575
+ </div>
576
+ <h3 class="text-xl font-bold mb-3 text-center">50+ Games</h3>
577
+ <p class="text-gray-400 text-center">Massive selection of slots, tables, and specialty games.</p>
578
+ </div>
579
+
580
+ <!-- Feature 6 -->
581
+ <div class="feature-card p-6 rounded-xl">
582
+ <div class="feature-icon text-4xl neon-orange mb-4 text-center">
583
+ <i class="fas fa-headset"></i>
584
+ </div>
585
+ <h3 class="text-xl font-bold mb-3 text-center">24/7 Support</h3>
586
+ <p class="text-gray-400 text-center">Real support anytime you need help.</p>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </section>
591
+
592
+ <!-- Testimonials -->
593
+ <section class="py-20 px-4 bg-black bg-opacity-50">
594
+ <div class="container mx-auto">
595
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-orange">What Players Say</h2>
596
+
597
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
598
+ <!-- Testimonial 1 -->
599
+ <div class="testimonial-card p-6 rounded-xl">
600
+ <div class="flex items-center mb-4">
601
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
602
+ <div>
603
+ <h4 class="font-bold">Michael T.</h4>
604
+ <div class="flex text-yellow-400">
605
+ <i class="fas fa-star"></i>
606
+ <i class="fas fa-star"></i>
607
+ <i class="fas fa-star"></i>
608
+ <i class="fas fa-star"></i>
609
+ <i class="fas fa-star"></i>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ <p class="mb-4">"I won $500 in Bitcoin on my first day playing Golden Jackpot. The withdrawal was processed in just 2 hours!"</p>
614
+ <div class="text-sm text-gray-400 flex items-center">
615
+ <i class="fas fa-gamepad mr-2"></i> Playing: Crypto Fish
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Testimonial 2 -->
620
+ <div class="testimonial-card p-6 rounded-xl">
621
+ <div class="flex items-center mb-4">
622
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
623
+ <div>
624
+ <h4 class="font-bold">Sarah K.</h4>
625
+ <div class="flex text-yellow-400">
626
+ <i class="fas fa-star"></i>
627
+ <i class="fas fa-star"></i>
628
+ <i class="fas fa-star"></i>
629
+ <i class="fas fa-star"></i>
630
+ <i class="fas fa-star-half-alt"></i>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ <p class="mb-4">"The VIP program is amazing. I get weekly bonuses and my rakeback keeps increasing. Best sweepstakes site!"</p>
635
+ <div class="text-sm text-gray-400 flex items-center">
636
+ <i class="fas fa-gamepad mr-2"></i> Playing: Blackjack Pro
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Testimonial 3 -->
641
+ <div class="testimonial-card p-6 rounded-xl">
642
+ <div class="flex items-center mb-4">
643
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
644
+ <div>
645
+ <h4 class="font-bold">David R.</h4>
646
+ <div class="flex text-yellow-400">
647
+ <i class="fas fa-star"></i>
648
+ <i class="fas fa-star"></i>
649
+ <i class="fas fa-star"></i>
650
+ <i class="fas fa-star"></i>
651
+ <i class="fas fa-star"></i>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ <p class="mb-4">"I was skeptical at first but the payouts are real. Got $200 in Amazon gift cards just from playing casually."</p>
656
+ <div class="text-sm text-gray-400 flex items-center">
657
+ <i class="fas fa-gamepad mr-2"></i> Playing: Golden Jackpot
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </section>
663
+
664
+ <!-- FAQ -->
665
+ <section class="py-20 px-4 relative">
666
+ <div class="container mx-auto max-w-4xl">
667
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-orange">Frequently Asked Questions</h2>
668
+
669
+ <div class="space-y-4">
670
+ <!-- FAQ 1 -->
671
+ <div class="accordion-item bg-black bg-opacity-70 rounded-xl p-4 border border-gray-800">
672
+ <div class="accordion-header flex justify-between items-center">
673
+ <h3 class="text-lg font-bold">Is Nioplay legal?</h3>
674
+ <div class="accordion-icon text-xl neon-blue">
675
+ <i class="fas fa-plus"></i>
676
+ </div>
677
+ </div>
678
+ <div class="accordion-content mt-4 text-gray-300">
679
+ <p>Yes! Nioplay operates under U.S. sweepstakes laws, which makes it 100% legal in most states. We use a dual-currency system (Gold Coins for fun, Sweeps Coins for prizes) that complies with sweepstakes regulations.</p>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- FAQ 2 -->
684
+ <div class="accordion-item bg-black bg-opacity-70 rounded-xl p-4 border border-gray-800">
685
+ <div class="accordion-header flex justify-between items-center">
686
+ <h3 class="text-lg font-bold">Can I win real money?</h3>
687
+ <div class="accordion-icon text-xl neon-blue">
688
+ <i class="fas fa-plus"></i>
689
+ </div>
690
+ </div>
691
+ <div class="accordion-content mt-4 text-gray-300">
692
+ <p>Absolutely! While you play for free using Gold Coins, you can redeem Sweeps Coins for real prizes including cryptocurrency (Bitcoin, Ethereum), gift cards (Amazon, Walmart), and cash prizes.</p>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- FAQ 3 -->
697
+ <div class="accordion-item bg-black bg-opacity-70 rounded-xl p-4 border border-gray-800">
698
+ <div class="accordion-header flex justify-between items-center">
699
+ <h3 class="text-lg font-bold">Do I need to deposit?</h3>
700
+ <div class="accordion-icon text-xl neon-blue">
701
+ <i class="fas fa-plus"></i>
702
+ </div>
703
+ </div>
704
+ <div class="accordion-content mt-4 text-gray-300">
705
+ <p>No purchase is necessary to play and win. You'll receive free Gold Coins just for signing up, and can earn Sweeps Coins through daily bonuses, mail-in requests, and promotions.</p>
706
+ </div>
707
+ </div>
708
+
709
+ <!-- FAQ 4 -->
710
+ <div class="accordion-item bg-black bg-opacity-70 rounded-xl p-4 border border-gray-800">
711
+ <div class="accordion-header flex justify-between items-center">
712
+ <h3 class="text-lg font-bold">What games are available?</h3>
713
+ <div class="accordion-icon text-xl neon-blue">
714
+ <i class="fas fa-plus"></i>
715
+ </div>
716
+ </div>
717
+ <div class="accordion-content mt-4 text-gray-300">
718
+ <p>We offer a wide variety of games including slots, fish tables, blackjack, roulette, keno, and more. New games are added every month based on player feedback.</p>
719
+ </div>
720
+ </div>
721
+
722
+ <!-- FAQ 5 -->
723
+ <div class="accordion-item bg-black bg-opacity-70 rounded-xl p-4 border border-gray-800">
724
+ <div class="accordion-header flex justify-between items-center">
725
+ <h3 class="text-lg font-bold">How fast are payouts?</h3>
726
+ <div class="accordion-icon text-xl neon-blue">
727
+ <i class="fas fa-plus"></i>
728
+ </div>
729
+ </div>
730
+ <div class="accordion-content mt-4 text-gray-300">
731
+ <p>Crypto withdrawals are typically processed within 24 hours. Gift cards are delivered instantly via email. For larger cash prizes, processing may take 3-5 business days after verification.</p>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </section>
737
+
738
+ <!-- Final CTA -->
739
+ <section class="py-32 px-4 bg-gradient-to-b from-black via-blue-900/20 to-black relative overflow-hidden">
740
+ <div class="coin coin-1" style="width: 60px; height: 60px; top: 30%; left: 5%;"></div>
741
+ <div class="coin coin-2" style="width: 50px; height: 50px; top: 40%; right: 10%;"></div>
742
+ <div class="container mx-auto text-center relative z-10">
743
+ <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-orange">
744
+ Join 100,000+ players winning daily on Nioplay
745
+ </h2>
746
+ <button class="btn-orange px-12 py-6 rounded-full text-xl md:text-2xl font-bold mx-2 mb-8">
747
+ Start Playing Now
748
+ </button>
749
+ <p class="text-sm opacity-80 max-w-2xl mx-auto">
750
+ No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform. Void where prohibited. Please play responsibly.
751
+ </p>
752
+ </div>
753
+ </section>
754
+
755
+ <!-- Footer -->
756
+ <footer class="bg-black py-12 px-4 border-t border-gray-900">
757
+ <div class="container mx-auto">
758
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8">
759
+ <div class="mb-6 md:mb-0">
760
+ <h2 class="text-2xl font-bold neon-orange">NIOPLAY</h2>
761
+ <p class="text-gray-500 text-sm mt-2">The next-gen sweepstakes casino</p>
762
+ </div>
763
+
764
+ <div class="flex space-x-6 mb-6 md:mb-0">
765
+ <a href="#" class="social-icon text-2xl text-gray-400 hover:text-blue-400">
766
+ <i class="fab fa-facebook"></i>
767
+ </a>
768
+ <a href="#" class="social-icon text-2xl text-gray-400 hover:text-blue-400">
769
+ <i class="fab fa-twitter"></i>
770
+ </a>
771
+ <a href="#" class="social-icon text-2xl text-gray-400 hover:text-purple-400">
772
+ <i class="fab fa-discord"></i>
773
+ </a>
774
+ </div>
775
+ </div>
776
+
777
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-6 mb-8">
778
+ <div>
779
+ <h3 class="text-lg font-bold mb-4 neon-blue">Legal</h3>
780
+ <ul class="space-y-2">
781
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Terms of Service</a></li>
782
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Privacy Policy</a></li>
783
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Responsible Gaming</a></li>
784
+ </ul>
785
+ </div>
786
+
787
+ <div>
788
+ <h3 class="text-lg font-bold mb-4 neon-blue">Support</h3>
789
+ <ul class="space-y-2">
790
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">FAQ</a></li>
791
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Contact Us</a></li>
792
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Verification</a></li>
793
+ </ul>
794
+ </div>
795
+
796
+ <div>
797
+ <h3 class="text-lg font-bold mb-4 neon-blue">About</h3>
798
+ <ul class="space-y-2">
799
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Our Story</a></li>
800
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Games</a></li>
801
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">VIP Program</a></li>
802
+ </ul>
803
+ </div>
804
+
805
+ <div>
806
+ <h3 class="text-lg font-bold mb-4 neon-blue">Resources</h3>
807
+ <ul class="space-y-2">
808
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Blog</a></li>
809
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Winners</a></li>
810
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Promotions</a></li>
811
+ </ul>
812
+ </div>
813
+
814
+ <div>
815
+ <h3 class="text-lg font-bold mb-4 neon-blue">Contact</h3>
816
+ <ul class="space-y-2">
817
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">support@nioplay.com</a></li>
818
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Live Chat</a></li>
819
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Help Center</a></li>
820
+ </ul>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
825
+ <p>© 2023 Nioplay. All rights reserved. Nioplay does not offer real money gambling or an opportunity to win real money or prizes. Practice or success at social casino gaming does not imply future success at real money gambling.</p>
826
+ </div>
827
+ </div>
828
+ </footer>
829
+
830
+ <script>
831
+ // Animate how it works steps on scroll
832
+ document.addEventListener('DOMContentLoaded', function() {
833
+ // Accordion functionality
834
+ const accordionItems = document.querySelectorAll('.accordion-item');
835
+ accordionItems.forEach(item => {
836
+ const header = item.querySelector('.accordion-header');
837
+ header.addEventListener('click', () => {
838
+ item.classList.toggle('active');
839
+ });
840
+ });
841
+
842
+ // Animate how it works steps when they come into view
843
+ const howItWorksSteps = document.querySelectorAll('.how-it-works-step');
844
+ const observer = new IntersectionObserver((entries) => {
845
+ entries.forEach(entry => {
846
+ if (entry.isIntersecting) {
847
+ entry.target.classList.add('visible');
848
+ }
849
+ });
850
+ }, { threshold: 0.1 });
851
+
852
+ howItWorksSteps.forEach(step => {
853
+ observer.observe(step);
854
+ });
855
+
856
+ // Add more coins dynamically
857
+ function addCoins() {
858
+ const sections = document.querySelectorAll('section');
859
+ sections.forEach(section => {
860
+ const sectionTop = section.offsetTop;
861
+ const sectionHeight = section.offsetHeight;
862
+
863
+ // Add 2-3 coins per section
864
+ for (let i = 0; i < 3; i++) {
865
+ const coinSize = Math.random() * 30 + 20;
866
+ const coin = document.createElement('div');
867
+ coin.className = `coin coin-${Math.floor(Math.random() * 5) + 1}`;
868
+ coin.style.width = `${coinSize}px`;
869
+ coin.style.height = `${coinSize}px`;
870
+ coin.style.top = `${sectionTop + Math.random() * sectionHeight}px`;
871
+ coin.style.left = `${Math.random() * 100}%`;
872
+ coin.style.opacity = Math.random() * 0.5 + 0.3;
873
+
874
+ // Random animation duration
875
+ const duration = Math.random() * 20 + 10;
876
+ coin.style.animationDuration = `${duration}s`;
877
+
878
+ section.appendChild(coin);
879
+ }
880
+ });
881
+ }
882
+
883
+ // Call addCoins after a slight delay to ensure DOM is fully loaded
884
+ setTimeout(addCoins, 500);
885
+ });
886
+ </script>
887
+ <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=ProjectGenesis/nioplay-landing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
888
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Create a high-conversion, mobile-first landing page for Nioplay — a legally structured U.S. sweepstakes casino. The visual style must be cinematic and futuristic with a strong **neon aesthetic** across the entire design. The theme should reflect a bold, high-stakes digital casino, with glowing neon elements layered over a dark black background. 🎨 Visual Theme: - Use a **pure black or gunmetal background** (#0A0A0A) - Apply glowing **neon orange (#FF6A00)** for CTAs, key highlights, and glow frames - Use **electric blue (#00E4FF)** for link hovers, accents, icons, and outlines - Add light **gradient flares, glow particles, and blurred motion glows** - Fonts: Orbitron or Inter for headings, Poppins for body — all headings should glow - Use **glowing borders, pulsing buttons, and animated scroll transitions** - Add **subtle ambient backlighting and horizontal light streaks** behind major sections 💰 **Immersive Gold Coin Animation (Full Page Effect):** - Create a site-wide animated gold coin system that flows across the entire page - Coins should float, spin, drift, and gleam — not just in the hero section - Apply **parallax layering**: some coins pass behind sections, others float in front - Vary coin size, speed, and opacity to simulate depth - Blur coins in dense content areas (e.g., FAQ) for minimal distraction - Include **light gleams or spark trail effects** on occasional coins - Use gold gradients from #FFD700 to #FFA500, with a soft neon aura - Add coin pulse or scatter animations when scrolling into key CTAs or bonus sections - Animate using CSS/SVG/Canvas for smooth, lightweight performance (no JS required) 📄 Page Content Structure: 1. **Hero Section** - Glowing headline: “Play for Free. Win Real Prizes.” - Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” - Buttons: - [Start Playing] — orange neon glow + pulsing animation - [See How It Works] — outlined in blue with flicker hover effect - Coins animate actively across and behind hero elements - Micro-trust bar: “100% Legal · Instant Crypto Cashouts · 18+ Only” 2. **Trust Bar / Legal Assurance** - Neon-outlined icons (with glow on hover): U.S.-Legal ✔️ · Crypto-Friendly 🪙 · 18+ Verified 🔞 · Instant Payouts ⚡ · KYC Compliant 🔐 3. **How Nioplay Works (3-Step Reveal)** - Scroll-triggered animation or fade-in: 1. Sign Up (Get free coins) 2. Play Games (Slots, Fish, Blackjack) 3. Win Prizes (Crypto, Gift Cards) - Include subtle coin drift or glow streak background 4. **Featured Games Carousel** - Horizontal slider or glow-tiled grid - Each game card has zoom glow on hover, glowing labels: “Top Rated,” “Jackpot,” “Exclusive,” etc. 5. **Promo Offer Section** - Glowing banner: “Claim $10 in FREE Coins by verifying your account” - CTA button: [Claim Now] — orange glow pulse, coin pop on hover - Optional bonus code field with animated outline 6. **Why Nioplay? (Neon Feature Grid)** - Icons glow on hover with flicker effect - 24h Crypto Redemptions - Legal Sweepstakes Model - No Download Required - VIP Rakeback Rewards - 50+ Games - Use neon-glow card outlines + fade-ins 7. **Testimonials Section** - Neon-bordered Facebook-style cards: avatar, review, game preview - Slide-in or fade-up animation with soft glowing particle background 8. **FAQ Section (Accordion Glow Style)** - Each FAQ entry uses toggle accordion with neon icon + border - Sample questions: – Is Nioplay legal? – Can I win real money? – Do I need to deposit? – What games are available? – How fast are payouts? - Section should feel bright and active — not a dead zone 9. **Final CTA Section** - Glowing neon spotlight background (black → blue/orange mixed gradient) - Text: “Join 100,000+ players winning daily on Nioplay” - CTA button: [Start Playing Now] — large, centered, pulsing orange glow - Coins animate into view from side or behind - Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” 10. **Footer** - Black background with neon hover link effects - Include: - Terms of Service - Privacy Policy - FAQ - Responsible Gaming - Support - Social icons (Facebook, Twitter, Discord) with glow hover animation - Placeholder for Nioplay neon-style logo
2
+ Create a high-conversion, mobile-first landing page for Nioplay — a legally structured U.S. sweepstakes casino. The visual style must be cinematic and futuristic with a strong **neon aesthetic** across the entire design. The theme should reflect a bold, high-stakes digital casino, with glowing neon elements layered over a dark black background. 🎨 Visual Theme: - Use a **pure black or gunmetal background** (#0A0A0A) - Apply glowing **neon orange (#FF6A00)** for CTAs, key highlights, and glow frames - Use **electric blue (#00E4FF)** for link hovers, accents, icons, and outlines - Add light **gradient flares, glow particles, and blurred motion glows** - Fonts: Orbitron or Inter for headings, Poppins for body — all headings should glow - Use **glowing borders, pulsing buttons, and animated scroll transitions** - Add **subtle ambient backlighting and horizontal light streaks** behind major sections 💰 **Immersive Gold Coin Animation (Full Page Effect):** - Create a site-wide animated gold coin system that flows across the entire page - Coins should float, spin, drift, and gleam — not just in the hero section - Apply **parallax layering**: some coins pass behind sections, others float in front - Vary coin size, speed, and opacity to simulate depth - Blur coins in dense content areas (e.g., FAQ) for minimal distraction - Include **light gleams or spark trail effects** on occasional coins - Use gold gradients from #FFD700 to #FFA500, with a soft neon aura - Add coin pulse or scatter animations when scrolling into key CTAs or bonus sections - Animate using CSS/SVG/Canvas for smooth, lightweight performance (no JS required) 📄 Page Content Structure: 1. **Hero Section** - Glowing headline: “Play for Free. Win Real Prizes.” - Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” - Buttons: - [Start Playing] — orange neon glow + pulsing animation - [See How It Works] — outlined in blue with flicker hover effect - Coins animate actively across and behind hero elements - Micro-trust bar: “100% Legal · Instant Crypto Cashouts · 18+ Only” 2. **Trust Bar / Legal Assurance** - Neon-outlined icons (with glow on hover): U.S.-Legal ✔️ · Crypto-Friendly 🪙 · 18+ Verified 🔞 · Instant Payouts ⚡ · KYC Compliant 🔐 3. **How Nioplay Works (3-Step Reveal)** - Scroll-triggered animation or fade-in: 1. Sign Up (Get free coins) 2. Play Games (Slots, Fish, Blackjack) 3. Win Prizes (Crypto, Gift Cards) - Include subtle coin drift or glow streak background 4. **Featured Games Carousel** - Horizontal slider or glow-tiled grid - Each game card has zoom glow on hover, glowing labels: “Top Rated,” “Jackpot,” “Exclusive,” etc. 5. **Promo Offer Section** - Glowing banner: “Claim $10 in FREE Coins by verifying your account” - CTA button: [Claim Now] — orange glow pulse, coin pop on hover - Optional bonus code field with animated outline 6. **Why Nioplay? (Neon Feature Grid)** - Icons glow on hover with flicker effect - 24h Crypto Redemptions - Legal Sweepstakes Model - No Download Required - VIP Rakeback Rewards - 50+ Games - Use neon-glow card outlines + fade-ins 7. **Testimonials Section** - Neon-bordered Facebook-style cards: avatar, review, game preview - Slide-in or fade-up animation with soft glowing particle background 8. **FAQ Section (Accordion Glow Style)** - Each FAQ entry uses toggle accordion with neon icon + border - Sample questions: – Is Nioplay legal? – Can I win real money? – Do I need to deposit? – What games are available? – How fast are payouts? - Section should feel bright and active — not a dead zone 9. **Final CTA Section** - Glowing neon spotlight background (black → blue/orange mixed gradient) - Text: “Join 100,000+ players winning daily on Nioplay” - CTA button: [Start Playing Now] — large, centered, pulsing orange glow - Coins animate into view from side or behind - Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” 10. **Footer** - Black background with neon hover link effects - Include: - Terms of Service - Privacy Policy - FAQ - Responsible Gaming - Support - Social icons (Facebook, Twitter, Discord) with glow hover animation - Placeholder for Nioplay neon-style logo