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

Create a mobile-first, high-conversion landing page for Nioplay — a legally structured U.S. sweepstakes casino platform. This is a modern, cinematic homepage optimized to drive signups, educate users, and showcase popular games. Design must feel futuristic, immersive, and sleek, with full neon theme consistency and real-time animated gold coin immersion throughout the page. GLOBAL VISUAL THEME & DESIGN SYSTEM: • Background: ultra-dark gunmetal gradient o From #0B0B0B → #1A1A1A, angled 135° (top-left to bottom-right) • Primary Accent (CTAs, glow highlights): Neon Orange #FF6A00 • Secondary Accent (borders, icons, links): Electric Blue #00E4FF • Gold Coin Gradient: #FFD700 to #FFA500 with soft neon aura glow • Typography: o Titles: Orbitron (all caps, neon glow) o Subheaders: Inter or Poppins (light glow) o Body: Poppins, clean, white (#F5F5F5) • UI Effects: o Neon glow on all headings, buttons, and outlines o Hover flickers and light shimmer effects o Scroll-triggered animations (fade, slide-in, light streaks) o Glassmorphism panels with backdrops, rounded corners, soft blur o Section separators with subtle light pulses or gradient overlays • Sticky Navbar: o Floating top bar with:  [Sign Up] — orange neon glow pulse  [Log In] — blue outline with flicker effect o Navbar has a blurred, semi-transparent background on scroll FULL-PAGE GOLD COIN ANIMATION (IMMERSIVE FX) • Animate floating gold coins across the entire site. Floating up from the bottom of the page. • Coins: o Float upward like bubbles, gently gleaming. o Move at varying speeds and sizes to create depth and parallax o Layered:  Some pass behind content (lower opacity, blurred)  Some float in front with highlight glints and spark trails • On scroll or CTA hover: o Trigger a burst scatter animation • In dense sections (like FAQ), reduce opacity and apply blur to reduce distraction • All coins should match Nioplay’s theme using SVG, CSS, or canvas (lightweight performance) UNIVERSAL HOVER GLOW RULE: - Every interactive element (buttons, links, cards, icons) must trigger **a hover glow effect** - Glow behavior: - Soft neon outer glow (orange or blue depending on theme) - Light scale-up (105%) on hover - Optional flicker or shimmer animation - Transitions must be **smooth and fast (0.2s–0.3s)** for responsiveness - No static or unstyled hover states allowed - Example: - Links → glow underline + color flicker - Game cards → glow border intensifies + zoom in - Icons → spark on hover PAGE STRUCTURE: 1. HERO SECTION • Large, centered headline: “Play for Free. Win Real Prizes.” (Neon orange, glowing) • Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” • Buttons: o [Start Playing] — solid neon orange, pulse + hover shimmer o [See How It Works] — blue outline, flickers when hovered • Micro-trust bar below buttons: 100% Legal · Instant Crypto Cashouts · 18+ Only • Coins animate across, behind, and over the hero elements with parallax 2. TRUST BAR / LEGAL ASSURANCE • Horizontal glowing icon row: o ✔️ U.S. Legal o 🔐 KYC Compliant o 🪙 Crypto Friendly o ⚡ Instant Redeems o 🔞 18+ Verified • Each icon has: o Neon glow ring o On-hover flicker + label pop 3. HOW NIOPLAY WORKS (3-STEP SECTION) • Scroll-triggered fade-in tiles: 1. Sign Up – Get free coins, no purchase needed 2. Play Games – 1,000+ slots, blackjack, fish, live dealer 3. Win Prizes – Crypto, Debit Card Redeems, Gift card, sweepstakes entries • Each step: o Neon frame, glowing icon o Coins float lightly in the background 4. FEATURED GAMES SHOWCASE (NEON TILE GRID) • Display 6 games in a 2 column glowing grid • Each game card includes: Layout: • Game preview image (slightly zoomed, neon-framed) • Game title (glowing neon orange) • Feature Tags: o “Jackpot”, “Live Dealer”, “Fish Game”, “Bonus Buy”, etc. o Styled as corner-floating neon glow labels • Stat Row (under title): o ⭐ Rating (e.g. 4.8 / 5) o 🎯 RTP: horizontal glowing progress bar (animated on load) o 🎁 Bonus: “+1,000 Free Coins” glowing pill badge • CTA Button: [Play Now] — glowing orange, coin sparkle animation on hover Animation: • Hover: card scales slightly, shimmer moves across image • Coins drift behind cards in parallax • On hover: coins subtly swirl toward the card (magnet effect) 5. PROMO OFFER BANNER • Glowing promo bar: “Claim $3 in FREE Coins by verifying your account” • CTA Button: [Claim Now] — pulsing glow, coin burst on click • Bonus Code Field (optional): o Glowing border, placeholder text flickers when typing 6. ⚡ WHY NIOPLAY (NEON FEATURE GRID) • Grid of 5–6 glowing icon tiles, each with: o Title o Brief caption o Flicker-hover glow icon • Example Features: o 24h Crypto Redemptions o Legal Sweepstakes Model o No Download Needed o VIP Rakeback System o 1,000+ Game Catalog • Section has ambient particle effects and coin layer behind 7. 💬 TESTIMONIALS SECTION • Facebook-style review cards with: o Player avatar o Game they played o Glowing 5-star rating o Short review text • Glowing border + soft slide/fade animation • Background uses low-opacity coin animation and blur motion particles 8. ❓ FAQ SECTION (NEON ACCORDION STYLE) • Questions in glowing accordion cards with neon icons • Example FAQs: o Is Nioplay legal? o Can I win real money? o Do I need to deposit? o What games are available? o How fast are Redeems? • Each accordion expands with glowing border pulse and content fade-in • Floating coins blur and fade behind this section for minimal distraction 9. FINAL CTA SECTION • Full-width glowing gradient spotlight background (black → orange/blue) • Headline: “Join 1,000,000+ players winning daily on Nioplay” • CTA Button: [Start Playing Now] — massive glowing orange pulse, coin scatter • Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” • Floating coins animate upward and around CTA 10. FOOTER • Solid black background • Glow-hover text links: o Terms of Service o Privacy Policy o FAQ o Responsible Gaming o Contact Support • Social Icons: Facebook, Twitter, Discord — glowing hover effects • Placeholder logo (neon-style Nioplay branding) Final Notes: • Use lightweight CSS/SVG/Canvas for all animations (no JavaScript dependencies unless essential) • Ensure mobile-first responsiveness • Maintain neon theme consistency across every single section — no flat or default web styles • Optimize for fast loading with clean code structure • Sticky sign-up bar or CTA on mobile is a plus • Meta & SEO tags should be added post-gen manually if needed - Follow Up Deployment

Browse files
Files changed (2) hide show
  1. index.html +467 -635
  2. prompts.txt +8 -1
index.html CHANGED
@@ -3,269 +3,209 @@
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 {
@@ -273,462 +213,363 @@
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>
@@ -736,152 +577,143 @@
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>
 
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 | Play Free, Win Real Prizes</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
  <style>
12
  :root {
13
  --neon-orange: #FF6A00;
14
+ --electric-blue: #00E4FF;
15
  --gold-light: #FFD700;
16
  --gold-dark: #FFA500;
17
+ --bg-dark: #0B0B0B;
18
+ --bg-light: #1A1A1B;
19
+ --text-light: #F5F5F5;
20
  }
21
 
22
  body {
23
  font-family: 'Poppins', sans-serif;
24
+ background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-light) 100%);
25
+ color: var(--text-light);
26
  overflow-x: hidden;
27
  position: relative;
28
  }
29
 
30
  h1, h2, h3, h4, h5, h6 {
31
  font-family: 'Orbitron', sans-serif;
32
+ text-transform: uppercase;
33
+ letter-spacing: 1px;
34
  }
35
 
36
  .neon-orange {
37
  color: var(--neon-orange);
38
+ text-shadow: 0 0 10px rgba(255, 106, 0, 0.7), 0 0 20px rgba(255, 106, 0, 0.5);
39
  }
40
 
41
  .neon-blue {
42
+ color: var(--electric-blue);
43
+ text-shadow: 0 0 10px rgba(0, 228, 255, 0.7), 0 0 20px rgba(0, 228, 255, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
 
46
  .btn-orange {
47
+ background-color: var(--neon-orange);
 
 
 
 
 
48
  box-shadow: 0 0 15px rgba(255, 106, 0, 0.7);
49
+ transition: all 0.3s ease;
50
  }
51
 
52
  .btn-orange:hover {
53
+ transform: scale(1.05);
54
  box-shadow: 0 0 25px rgba(255, 106, 0, 0.9);
55
  }
56
 
57
  .btn-blue {
58
+ border: 2px solid var(--electric-blue);
59
+ color: var(--electric-blue);
 
 
 
 
60
  box-shadow: 0 0 15px rgba(0, 228, 255, 0.5);
61
+ transition: all 0.3s ease;
62
  }
63
 
64
  .btn-blue:hover {
65
+ transform: scale(1.05);
66
+ box-shadow: 0 0 25px rgba(0, 228, 255, 0.8);
67
+ background-color: rgba(0, 228, 255, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  }
69
 
70
+ .glow-border {
71
+ border: 1px solid rgba(255, 255, 255, 0.1);
72
+ box-shadow: 0 0 10px rgba(255, 106, 0, 0.3);
73
+ transition: all 0.3s ease;
 
 
 
 
 
74
  }
75
 
76
+ .glow-border:hover {
77
+ border: 1px solid rgba(255, 106, 0, 0.5);
78
+ box-shadow: 0 0 20px rgba(255, 106, 0, 0.5);
 
 
 
 
79
  }
80
 
81
+ .glass-card {
82
+ background: rgba(15, 15, 15, 0.6);
83
+ backdrop-filter: blur(10px);
84
+ border-radius: 16px;
85
+ border: 1px solid rgba(255, 255, 255, 0.1);
 
 
 
 
 
 
 
86
  }
87
 
88
+ .coin {
 
89
  position: absolute;
90
+ background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 100%);
 
 
 
 
91
  border-radius: 50%;
92
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
93
+ z-index: 0;
94
+ animation: float 15s infinite ease-in-out;
 
 
 
 
 
 
 
 
 
 
 
95
  }
96
 
97
+ @keyframes float {
98
+ 0% {
99
+ transform: translateY(100vh) rotate(0deg);
100
+ opacity: 0;
101
+ }
102
+ 10% {
103
+ opacity: 1;
104
+ }
105
+ 90% {
106
+ opacity: 1;
107
+ }
108
+ 100% {
109
+ transform: translateY(-100px) rotate(360deg);
110
+ opacity: 0;
111
+ }
112
  }
113
 
114
+ .pulse {
115
+ animation: pulse 2s infinite;
116
  }
117
 
118
+ @keyframes pulse {
119
  0% {
120
+ box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7);
121
  }
122
+ 70% {
123
+ box-shadow: 0 0 0 10px rgba(255, 106, 0, 0);
124
  }
125
  100% {
126
+ box-shadow: 0 0 0 0 rgba(255, 106, 0, 0);
127
  }
128
  }
129
 
130
+ .flicker {
131
+ animation: flicker 3s infinite alternate;
 
 
 
132
  }
133
 
134
+ @keyframes flicker {
135
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
136
+ text-shadow: 0 0 5px var(--electric-blue),
137
+ 0 0 10px var(--electric-blue),
138
+ 0 0 20px var(--electric-blue),
139
+ 0 0 40px var(--electric-blue);
140
+ }
141
+ 20%, 24%, 55% {
142
+ text-shadow: none;
143
+ }
144
  }
145
 
146
+ .scroll-fade {
147
+ opacity: 0;
148
+ transform: translateY(20px);
149
+ transition: all 0.8s ease;
150
  }
151
 
152
+ .scroll-fade.active {
153
+ opacity: 1;
154
+ transform: translateY(0);
 
155
  }
156
 
157
+ .sticky-nav {
158
+ position: sticky;
159
+ top: 0;
160
+ z-index: 100;
161
+ backdrop-filter: blur(10px);
162
+ background: rgba(11, 11, 11, 0.8);
163
  transition: all 0.3s ease;
164
  }
165
 
166
+ .sticky-nav.scrolled {
167
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
 
168
  }
169
 
170
+ .game-card:hover .game-image {
171
+ transform: scale(1.05);
 
 
172
  }
173
 
174
+ .rtp-bar {
175
+ height: 6px;
176
+ background: rgba(255, 255, 255, 0.2);
177
+ border-radius: 3px;
178
+ overflow: hidden;
179
  }
180
 
181
+ .rtp-fill {
182
+ height: 100%;
183
+ background: linear-gradient(90deg, var(--neon-orange), var(--gold-light));
184
+ animation: rtpFill 1.5s ease-out forwards;
185
  }
186
 
187
+ @keyframes rtpFill {
188
+ from { width: 0; }
189
+ to { width: var(--rtp-value); }
190
  }
191
 
192
+ .accordion-item {
193
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
194
+ overflow: hidden;
195
+ transition: all 0.3s ease;
196
  }
197
 
198
  .accordion-content {
199
  max-height: 0;
200
+ transition: all 0.3s ease;
 
201
  }
202
 
203
  .accordion-item.active .accordion-content {
204
+ max-height: 300px;
 
 
 
 
205
  }
206
 
207
  .accordion-item.active .accordion-icon {
208
  transform: rotate(45deg);
 
 
 
 
 
 
 
 
 
 
209
  }
210
 
211
  .social-icon {
 
213
  }
214
 
215
  .social-icon:hover {
216
+ transform: scale(1.2);
217
+ filter: drop-shadow(0 0 5px var(--electric-blue));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  }
219
  </style>
220
  </head>
221
  <body class="relative overflow-x-hidden">
222
+ <!-- Floating Gold Coins -->
223
+ <div id="coin-container"></div>
224
+
225
+ <!-- Sticky Navbar -->
226
+ <nav class="sticky-nav py-4 px-6 flex justify-between items-center">
227
+ <div class="text-2xl font-bold neon-orange">NIOPLAY</div>
228
+ <div class="flex space-x-4">
229
+ <a href="#" class="px-4 py-2 rounded-full btn-blue">Log In</a>
230
+ <a href="#" class="px-4 py-2 rounded-full btn-orange pulse">Sign Up</a>
231
+ </div>
232
+ </nav>
233
 
234
  <!-- Hero Section -->
235
+ <section class="relative py-20 px-6 text-center z-10">
236
+ <div class="max-w-4xl mx-auto">
237
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-orange">PLAY FOR FREE. WIN REAL PRIZES.</h1>
238
+ <p class="text-xl md:text-2xl mb-10">Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.</p>
239
+ <div class="flex flex-col md:flex-row justify-center gap-4 mb-10">
240
+ <a href="#" class="px-8 py-4 rounded-full btn-orange text-lg font-bold">Start Playing</a>
241
+ <a href="#" class="px-8 py-4 rounded-full btn-blue text-lg font-bold">See How It Works</a>
 
 
 
 
 
 
 
 
 
242
  </div>
243
+ <div class="flex flex-wrap justify-center gap-4 text-sm md:text-base neon-blue">
244
+ <span>100% Legal</span>
245
+ <span>•</span>
246
+ <span>Instant Crypto Cashouts</span>
247
+ <span>•</span>
248
+ <span>18+ Only</span>
249
  </div>
250
  </div>
251
  </section>
252
 
253
  <!-- Trust Bar -->
254
+ <section class="py-12 px-6 bg-gradient-to-r from-transparent via-black/50 to-transparent">
255
+ <div class="max-w-6xl mx-auto">
256
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-6 text-center">
257
+ <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300">
258
+ <div class="w-12 h-12 mx-auto mb-3 rounded-full border-2 border-green-500 flex items-center justify-center text-green-500 text-2xl">✔️</div>
259
+ <p class="font-bold">U.S. Legal</p>
260
  </div>
261
+ <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300">
262
+ <div class="w-12 h-12 mx-auto mb-3 rounded-full border-2 border-blue-500 flex items-center justify-center text-blue-500 text-2xl">🔐</div>
263
+ <p class="font-bold">KYC Compliant</p>
264
  </div>
265
+ <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300">
266
+ <div class="w-12 h-12 mx-auto mb-3 rounded-full border-2 border-yellow-500 flex items-center justify-center text-yellow-500 text-2xl">🪙</div>
267
+ <p class="font-bold">Crypto Friendly</p>
268
  </div>
269
+ <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300">
270
+ <div class="w-12 h-12 mx-auto mb-3 rounded-full border-2 border-purple-500 flex items-center justify-center text-purple-500 text-2xl">⚡</div>
271
+ <p class="font-bold">Instant Redeems</p>
272
  </div>
273
+ <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300">
274
+ <div class="w-12 h-12 mx-auto mb-3 rounded-full border-2 border-red-500 flex items-center justify-center text-red-500 text-2xl">🔞</div>
275
+ <p class="font-bold">18+ Verified</p>
276
  </div>
277
  </div>
278
  </div>
279
  </section>
280
 
281
  <!-- How It Works -->
282
+ <section class="py-20 px-6">
283
+ <div class="max-w-4xl mx-auto text-center mb-16">
284
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">HOW NIOPLAY WORKS</h2>
285
+ <p class="text-lg">Get started in just 3 simple steps</p>
286
+ </div>
287
+
288
+ <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8">
289
+ <div class="scroll-fade glass-card p-8 text-center">
290
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-black/50 border-2 border-orange-500 flex items-center justify-center text-orange-500 text-4xl">1</div>
291
+ <h3 class="text-xl font-bold mb-4 neon-orange">SIGN UP</h3>
292
+ <p>Get free coins instantly, no purchase needed. Just register with your email to start playing.</p>
293
+ </div>
294
+ <div class="scroll-fade glass-card p-8 text-center">
295
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-black/50 border-2 border-orange-500 flex items-center justify-center text-orange-500 text-4xl">2</div>
296
+ <h3 class="text-xl font-bold mb-4 neon-orange">PLAY GAMES</h3>
297
+ <p>Choose from 1,000+ slots, blackjack, fish games and live dealer tables. All free to play.</p>
298
+ </div>
299
+ <div class="scroll-fade glass-card p-8 text-center">
300
+ <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-black/50 border-2 border-orange-500 flex items-center justify-center text-orange-500 text-4xl">3</div>
301
+ <h3 class="text-xl font-bold mb-4 neon-orange">WIN PRIZES</h3>
302
+ <p>Redeem your winnings as crypto, debit card deposits, gift cards or sweepstakes entries.</p>
 
 
 
 
303
  </div>
304
  </div>
305
  </section>
306
 
307
  <!-- Featured Games -->
308
+ <section class="py-20 px-6 bg-gradient-to-b from-black/50 to-transparent">
309
+ <div class="max-w-6xl mx-auto">
310
+ <div class="text-center mb-16">
311
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">FEATURED GAMES</h2>
312
+ <p class="text-lg">Play the hottest sweepstakes casino games online</p>
313
+ </div>
314
 
315
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
316
  <!-- Game 1 -->
317
+ <div class="game-card glass-card overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20">
318
+ <div class="relative overflow-hidden">
319
+ <div class="absolute top-2 left-2 bg-orange-500 text-xs font-bold px-2 py-1 rounded neon-orange">JACKPOT</div>
320
+ <div class="absolute top-2 right-2 bg-blue-500 text-xs font-bold px-2 py-1 rounded neon-blue">LIVE DEALER</div>
321
+ <img src="https://via.placeholder.com/600x400/1A1A1B/FFFFFF?text=Blackjack+Pro" alt="Blackjack Pro" class="game-image w-full h-48 object-cover transition-transform duration-500">
 
 
 
 
322
  </div>
323
  <div class="p-4">
324
+ <h3 class="text-xl font-bold mb-2 neon-orange">Blackjack Pro</h3>
325
+ <div class="flex items-center mb-2">
326
+ <span class="text-yellow-400 mr-1">⭐</span>
327
+ <span class="text-sm mr-4">4.9/5</span>
328
+ <div class="flex-1">
329
+ <div class="text-xs mb-1">RTP: 98.5%</div>
330
+ <div class="rtp-bar">
331
+ <div class="rtp-fill" style="--rtp-value: 98.5%"></div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div class="flex justify-between items-center mt-4">
336
+ <span class="bg-gradient-to-r from-yellow-500 to-orange-500 text-xs font-bold px-3 py-1 rounded-full">+1,000 Free Coins</span>
337
+ <a href="#" class="px-4 py-2 rounded-full btn-orange text-sm">Play Now</a>
338
+ </div>
339
  </div>
340
  </div>
341
 
342
  <!-- Game 2 -->
343
+ <div class="game-card glass-card overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20">
344
+ <div class="relative overflow-hidden">
345
+ <div class="absolute top-2 left-2 bg-orange-500 text-xs font-bold px-2 py-1 rounded neon-orange">BONUS BUY</div>
346
+ <img src="https://via.placeholder.com/600x400/1A1A1B/FFFFFF?text=Golden+Fish+Fortune" alt="Golden Fish Fortune" class="game-image w-full h-48 object-cover transition-transform duration-500">
 
 
347
  </div>
348
  <div class="p-4">
349
+ <h3 class="text-xl font-bold mb-2 neon-orange">Golden Fish Fortune</h3>
350
+ <div class="flex items-center mb-2">
351
+ <span class="text-yellow-400 mr-1">⭐</span>
352
+ <span class="text-sm mr-4">4.7/5</span>
353
+ <div class="flex-1">
354
+ <div class="text-xs mb-1">RTP: 96.2%</div>
355
+ <div class="rtp-bar">
356
+ <div class="rtp-fill" style="--rtp-value: 96.2%"></div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <div class="flex justify-between items-center mt-4">
361
+ <span class="bg-gradient-to-r from-yellow-500 to-orange-500 text-xs font-bold px-3 py-1 rounded-full">+500 Free Coins</span>
362
+ <a href="#" class="px-4 py-2 rounded-full btn-orange text-sm">Play Now</a>
363
+ </div>
364
  </div>
365
  </div>
366
 
367
  <!-- Game 3 -->
368
+ <div class="game-card glass-card overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20">
369
+ <div class="relative overflow-hidden">
370
+ <div class="absolute top-2 left-2 bg-orange-500 text-xs font-bold px-2 py-1 rounded neon-orange">JACKPOT</div>
371
+ <img src="https://via.placeholder.com/600x400/1A1A1B/FFFFFF?text=Mega+Slot+Bonanza" alt="Mega Slot Bonanza" class="game-image w-full h-48 object-cover transition-transform duration-500">
 
 
372
  </div>
373
  <div class="p-4">
374
+ <h3 class="text-xl font-bold mb-2 neon-orange">Mega Slot Bonanza</h3>
375
+ <div class="flex items-center mb-2">
376
+ <span class="text-yellow-400 mr-1">⭐</span>
377
+ <span class="text-sm mr-4">4.8/5</span>
378
+ <div class="flex-1">
379
+ <div class="text-xs mb-1">RTP: 97.1%</div>
380
+ <div class="rtp-bar">
381
+ <div class="rtp-fill" style="--rtp-value: 97.1%"></div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ <div class="flex justify-between items-center mt-4">
386
+ <span class="bg-gradient-to-r from-yellow-500 to-orange-500 text-xs font-bold px-3 py-1 rounded-full">+750 Free Coins</span>
387
+ <a href="#" class="px-4 py-2 rounded-full btn-orange text-sm">Play Now</a>
388
+ </div>
389
  </div>
390
  </div>
391
  </div>
392
+
393
+ <div class="text-center mt-12">
394
+ <a href="#" class="px-8 py-3 rounded-full btn-blue font-bold">View All Games</a>
395
+ </div>
396
  </div>
397
  </section>
398
 
399
  <!-- Promo Banner -->
400
+ <section class="py-12 px-6 bg-gradient-to-r from-orange-900/50 to-blue-900/50">
401
+ <div class="max-w-4xl mx-auto text-center">
402
+ <h3 class="text-2xl md:text-3xl font-bold mb-4 neon-orange">CLAIM $3 IN FREE COINS</h3>
403
+ <p class="text-lg mb-6">Verify your account now to get your instant bonus</p>
404
+ <a href="#" class="px-8 py-4 rounded-full btn-orange text-lg font-bold pulse">Claim Now</a>
 
 
 
 
 
 
405
  </div>
406
  </section>
407
 
408
  <!-- Why Nioplay -->
409
+ <section class="py-20 px-6">
410
+ <div class="max-w-6xl mx-auto">
411
+ <div class="text-center mb-16">
412
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">WHY PLAYERS CHOOSE NIOPLAY</h2>
413
+ <p class="text-lg">The ultimate sweepstakes gaming experience</p>
414
+ </div>
415
 
416
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
417
+ <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300">
418
+ <div class="w-12 h-12 mb-4 rounded-full bg-orange-500/20 border border-orange-500 flex items-center justify-center text-orange-500 text-2xl">⚡</div>
419
+ <h3 class="text-xl font-bold mb-3 neon-orange">24h Crypto Redemptions</h3>
420
+ <p>Get your winnings in Bitcoin, Ethereum or USDT within 24 hours. No waiting, no hassle.</p>
421
+ </div>
422
+ <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300">
423
+ <div class="w-12 h-12 mb-4 rounded-full bg-orange-500/20 border border-orange-500 flex items-center justify-center text-orange-500 text-2xl">✔️</div>
424
+ <h3 class="text-xl font-bold mb-3 neon-orange">Legal Sweepstakes Model</h3>
425
+ <p>Fully compliant with U.S. sweepstakes laws. Play with confidence knowing it's 100% legal.</p>
426
+ </div>
427
+ <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300">
428
+ <div class="w-12 h-12 mb-4 rounded-full bg-orange-500/20 border border-orange-500 flex items-center justify-center text-orange-500 text-2xl">🌐</div>
429
+ <h3 class="text-xl font-bold mb-3 neon-orange">No Download Needed</h3>
430
+ <p>Instant play in your browser. No apps to install, works on all devices.</p>
431
+ </div>
432
+ <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300">
433
+ <div class="w-12 h-12 mb-4 rounded-full bg-orange-500/20 border border-orange-500 flex items-center justify-center text-orange-500 text-2xl">👑</div>
434
+ <h3 class="text-xl font-bold mb-3 neon-orange">VIP Rakeback System</h3>
435
+ <p>Earn up to 25% rakeback as you climb the VIP tiers. The more you play, the more you earn.</p>
436
+ </div>
437
+ <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300">
438
+ <div class="w-12 h-12 mb-4 rounded-full bg-orange-500/20 border border-orange-500 flex items-center justify-center text-orange-500 text-2xl">🎮</div>
439
+ <h3 class="text-xl font-bold mb-3 neon-orange">1,000+ Game Catalog</h3>
440
+ <p>Massive selection of slots, table games, live dealers and fish games. Always adding new titles.</p>
441
+ </div>
442
+ <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300">
443
+ <div class="w-12 h-12 mb-4 rounded-full bg-orange-500/20 border border-orange-500 flex items-center justify-center text-orange-500 text-2xl">💰</div>
444
+ <h3 class="text-xl font-bold mb-3 neon-orange">Daily Free Coin Rewards</h3>
445
+ <p>Log in daily to claim free coins. No deposit required to keep playing.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
446
  </div>
447
  </div>
448
  </div>
449
  </section>
450
 
451
  <!-- Testimonials -->
452
+ <section class="py-20 px-6 bg-gradient-to-b from-black/50 to-transparent">
453
+ <div class="max-w-6xl mx-auto">
454
+ <div class="text-center mb-16">
455
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">PLAYER TESTIMONIALS</h2>
456
+ <p class="text-lg">See what our community is saying</p>
457
+ </div>
458
 
459
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
460
+ <div class="scroll-fade glass-card p-6">
 
461
  <div class="flex items-center mb-4">
462
+ <div class="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-500 mr-4">👤</div>
463
  <div>
464
+ <h4 class="font-bold">Jason M.</h4>
465
+ <div class="flex">
466
+ <span class="text-yellow-400">⭐</span>
467
+ <span class="text-yellow-400">⭐</span>
468
+ <span class="text-yellow-400">⭐</span>
469
+ <span class="text-yellow-400">⭐</span>
470
+ <span class="text-yellow-400">⭐</span>
471
  </div>
472
  </div>
473
  </div>
474
+ <p class="text-sm italic">"Won $500 in Bitcoin playing blackjack! Withdrawal was in my wallet the next morning. Nioplay is legit!"</p>
475
+ <div class="mt-3 text-xs text-orange-500">Played: Blackjack Pro</div>
 
 
476
  </div>
477
 
478
+ <div class="scroll-fade glass-card p-6">
 
479
  <div class="flex items-center mb-4">
480
+ <div class="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-500 mr-4">👤</div>
481
  <div>
482
  <h4 class="font-bold">Sarah K.</h4>
483
+ <div class="flex">
484
+ <span class="text-yellow-400">⭐</span>
485
+ <span class="text-yellow-400">⭐</span>
486
+ <span class="text-yellow-400">⭐</span>
487
+ <span class="text-yellow-400">⭐</span>
488
+ <span class="text-yellow-400">⭐</span>
489
  </div>
490
  </div>
491
  </div>
492
+ <p class="text-sm italic">"The fish games are so much fun. Cashed out $200 to my PayPal in under 24 hours. Will definitely keep playing!"</p>
493
+ <div class="mt-3 text-xs text-orange-500">Played: Golden Fish Fortune</div>
 
 
494
  </div>
495
 
496
+ <div class="scroll-fade glass-card p-6">
 
497
  <div class="flex items-center mb-4">
498
+ <div class="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-500 mr-4">👤</div>
499
  <div>
500
+ <h4 class="font-bold">Mike T.</h4>
501
+ <div class="flex">
502
+ <span class="text-yellow-400">⭐</span>
503
+ <span class="text-yellow-400">⭐</span>
504
+ <span class="text-yellow-400">⭐</span>
505
+ <span class="text-yellow-400">⭐</span>
506
+ <span class="text-yellow-400">⭐</span>
507
  </div>
508
  </div>
509
  </div>
510
+ <p class="text-sm italic">"Hit a 500x multiplier on Mega Slot Bonanza! The free coins they give daily make it easy to keep playing."</p>
511
+ <div class="mt-3 text-xs text-orange-500">Played: Mega Slot Bonanza</div>
 
 
512
  </div>
513
  </div>
514
  </div>
515
  </section>
516
 
517
  <!-- FAQ -->
518
+ <section class="py-20 px-6">
519
+ <div class="max-w-4xl mx-auto">
520
+ <div class="text-center mb-16">
521
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">FREQUENTLY ASKED QUESTIONS</h2>
522
+ <p class="text-lg">Get answers to common questions about Nioplay</p>
523
+ </div>
524
 
525
  <div class="space-y-4">
526
+ <div class="accordion-item glass-card p-4 rounded-lg">
527
+ <div class="flex justify-between items-center cursor-pointer">
528
+ <h3 class="font-bold neon-orange">Is Nioplay legal in the United States?</h3>
529
+ <span class="accordion-icon text-xl transition-transform">+</span>
 
 
 
530
  </div>
531
+ <div class="accordion-content mt-2">
532
+ <p class="text-sm">Yes! Nioplay operates under U.S. sweepstakes laws, making 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>
533
  </div>
534
  </div>
535
 
536
+ <div class="accordion-item glass-card p-4 rounded-lg">
537
+ <div class="flex justify-between items-center cursor-pointer">
538
+ <h3 class="font-bold neon-orange">Can I really win real money without depositing?</h3>
539
+ <span class="accordion-icon text-xl transition-transform">+</span>
 
 
 
540
  </div>
541
+ <div class="accordion-content mt-2">
542
+ <p class="text-sm">Absolutely! We give free Sweeps Coins through daily login bonuses, mail-in requests, and promotions. These can be used to play games and redeem real prizes. No purchase is ever necessary.</p>
543
  </div>
544
  </div>
545
 
546
+ <div class="accordion-item glass-card p-4 rounded-lg">
547
+ <div class="flex justify-between items-center cursor-pointer">
548
+ <h3 class="font-bold neon-orange">What games are available on Nioplay?</h3>
549
+ <span class="accordion-icon text-xl transition-transform">+</span>
 
 
 
550
  </div>
551
+ <div class="accordion-content mt-2">
552
+ <p class="text-sm">We offer 1,000+ games including slots, blackjack, roulette, baccarat, video poker, fish games, and live dealer tables. New games are added weekly.</p>
553
  </div>
554
  </div>
555
 
556
+ <div class="accordion-item glass-card p-4 rounded-lg">
557
+ <div class="flex justify-between items-center cursor-pointer">
558
+ <h3 class="font-bold neon-orange">How fast are redemptions processed?</h3>
559
+ <span class="accordion-icon text-xl transition-transform">+</span>
 
 
 
560
  </div>
561
+ <div class="accordion-content mt-2">
562
+ <p class="text-sm">Crypto redemptions are typically processed within 24 hours. Debit card and gift card redemptions take 2-3 business days. All redemptions are subject to verification.</p>
563
  </div>
564
  </div>
565
 
566
+ <div class="accordion-item glass-card p-4 rounded-lg">
567
+ <div class="flex justify-between items-center cursor-pointer">
568
+ <h3 class="font-bold neon-orange">Is there a mobile app?</h3>
569
+ <span class="accordion-icon text-xl transition-transform">+</span>
 
 
 
570
  </div>
571
+ <div class="accordion-content mt-2">
572
+ <p class="text-sm">Nioplay works perfectly in mobile browsers with no app required. However, we do offer an optional app for iOS and Android for a more streamlined experience.</p>
573
  </div>
574
  </div>
575
  </div>
 
577
  </section>
578
 
579
  <!-- Final CTA -->
580
+ <section class="py-20 px-6 bg-gradient-to-b from-black via-orange-900/50 to-black">
581
+ <div class="max-w-4xl mx-auto text-center">
582
+ <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-orange">JOIN 1,000,000+ PLAYERS WINNING DAILY</h2>
583
+ <p class="text-xl mb-10">Sign up now and claim your $3 free coin bonus</p>
584
+ <a href="#" class="px-12 py-5 rounded-full btn-orange text-xl font-bold pulse">Start Playing Now</a>
585
+ <p class="text-xs mt-6 opacity-70">No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.</p>
 
 
 
 
 
 
 
586
  </div>
587
  </section>
588
 
589
  <!-- Footer -->
590
+ <footer class="py-12 px-6 bg-black">
591
+ <div class="max-w-6xl mx-auto">
592
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
593
  <div>
594
+ <h3 class="text-2xl font-bold mb-4 neon-orange">NIOPLAY</h3>
595
+ <p class="text-sm">The next-gen sweepstakes casino platform. Play free, win real prizes.</p>
 
 
 
 
596
  </div>
 
597
  <div>
598
+ <h4 class="font-bold mb-4 neon-blue">LINKS</h4>
599
  <ul class="space-y-2">
600
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Home</a></li>
601
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Games</a></li>
602
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Promotions</a></li>
603
+ <li><a href="#" class="hover:text-orange-500 transition-colors">VIP Club</a></li>
604
  </ul>
605
  </div>
 
606
  <div>
607
+ <h4 class="font-bold mb-4 neon-blue">LEGAL</h4>
608
  <ul class="space-y-2">
609
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Terms of Service</a></li>
610
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Privacy Policy</a></li>
611
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Responsible Gaming</a></li>
612
+ <li><a href="#" class="hover:text-orange-500 transition-colors">Contact Support</a></li>
613
  </ul>
614
  </div>
 
615
  <div>
616
+ <h4 class="font-bold mb-4 neon-blue">CONNECT</h4>
617
+ <div class="flex space-x-4">
618
+ <a href="#" class="social-icon text-2xl hover:text-blue-400">📘</a>
619
+ <a href="#" class="social-icon text-2xl hover:text-blue-300">🐦</a>
620
+ <a href="#" class="social-icon text-2xl hover:text-purple-400">🎮</a>
621
+ <a href="#" class="social-icon text-2xl hover:text-red-500">📹</a>
622
+ </div>
 
 
 
 
 
 
 
 
623
  </div>
624
  </div>
625
+ <div class="pt-8 border-t border-gray-800 text-center text-sm">
626
+ <p>© 2023 Nioplay. All rights reserved. Nioplay operates as a legal sweepstakes platform in the United States.</p>
627
+ <p class="mt-2">This is not a gambling site. No purchase necessary to play or win. 18+ only.</p>
628
  </div>
629
  </div>
630
  </footer>
631
 
632
  <script>
633
+ // Create floating coins
634
+ function createCoins() {
635
+ const container = document.getElementById('coin-container');
636
+ const coinCount = window.innerWidth < 768 ? 15 : 30;
637
+
638
+ for (let i = 0; i < coinCount; i++) {
639
+ const coin = document.createElement('div');
640
+ coin.className = 'coin';
641
+
642
+ // Random size between 8px and 20px
643
+ const size = Math.random() * 12 + 8;
644
+ coin.style.width = `${size}px`;
645
+ coin.style.height = `${size}px`;
646
+
647
+ // Random position
648
+ coin.style.left = `${Math.random() * 100}vw`;
649
+
650
+ // Random animation duration and delay
651
+ const duration = Math.random() * 10 + 10;
652
+ const delay = Math.random() * 15;
653
+ coin.style.animationDuration = `${duration}s`;
654
+ coin.style.animationDelay = `${delay}s`;
655
+
656
+ // Random z-index (some behind, some in front)
657
+ coin.style.zIndex = Math.random() > 0.7 ? '10' : '0';
658
+
659
+ // Apply blur to some coins
660
+ if (Math.random() > 0.5) {
661
+ coin.style.filter = 'blur(1px)';
662
+ coin.style.opacity = '0.7';
663
+ }
664
+
665
+ container.appendChild(coin);
666
+ }
667
+ }
668
+
669
+ // Scroll animation for elements
670
+ function animateOnScroll() {
671
+ const elements = document.querySelectorAll('.scroll-fade');
672
+
673
+ elements.forEach(element => {
674
+ const elementPosition = element.getBoundingClientRect().top;
675
+ const screenPosition = window.innerHeight / 1.3;
676
+
677
+ if (elementPosition < screenPosition) {
678
+ element.classList.add('active');
679
+ }
680
+ });
681
+ }
682
+
683
+ // Accordion functionality
684
+ function setupAccordion() {
685
+ const items = document.querySelectorAll('.accordion-item');
686
+
687
+ items.forEach(item => {
688
+ const header = item.querySelector('h3');
689
+
690
  header.addEventListener('click', () => {
691
  item.classList.toggle('active');
692
  });
693
  });
694
+ }
695
+
696
+ // Sticky navbar on scroll
697
+ function handleNavbarScroll() {
698
+ const navbar = document.querySelector('.sticky-nav');
699
 
700
+ window.addEventListener('scroll', () => {
701
+ if (window.scrollY > 50) {
702
+ navbar.classList.add('scrolled');
703
+ } else {
704
+ navbar.classList.remove('scrolled');
705
+ }
 
 
 
 
 
 
706
  });
707
+ }
708
+
709
+ // Initialize everything
710
+ document.addEventListener('DOMContentLoaded', () => {
711
+ createCoins();
712
+ setupAccordion();
713
+ handleNavbarScroll();
714
 
715
+ window.addEventListener('scroll', animateOnScroll);
716
+ animateOnScroll(); // Run once on load
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
717
  });
718
  </script>
719
  <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>
prompts.txt CHANGED
@@ -1,2 +1,9 @@
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
 
 
 
 
 
 
 
 
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
3
+ Create a high-conversion, mobile-first landing page for Nioplay — New Generation Sweepstakes Casino. The site should blend a cinematic neon aesthetic with clear, trust-focused information and a rich, engaging experience. The theme should feel like a premium digital casino vault — exciting, secure, immersive. 🎨 Visual Design: - Background: #0A0A0A black or deep charcoal - Neon accents: - **Orange (#FF6A00)** for CTA buttons, bonus badges, promo ribbons - **Electric Blue (#00E4FF)** for borders, icons, hover outlines - White or light gray text for readability - Fonts: Orbitron or Inter for glowing headings, Poppins for clean body text - Design flourishes: glowing borders, soft motion blurs, pulsing buttons, parallax transitions, and ambient particle glows - Sticky nav bar with neon glow when scrolling 💰 **Gold Coin Animation (Upward Bubble Effect, Site-Wide):** - Coins float upward across the page like glowing bubbles - Layered parallax: foreground coins are larger and faster, background coins are slower and semi-transparent - Vary coin size, blur, rotation, and spark gleams to simulate depth - Coins float through all sections subtly; fade or blur more in text-heavy zones (like FAQ) - Trigger mild coin burst/pulse on scroll reveal of CTAs or bonus areas - Use gold gradient (#FFD700 → #FFA500) with soft neon glow 📄 Page Structure: --- ### 1. **Hero Section (First Impression)** - Headline: “Play for Free. Win Real Prizes.” - Subheadline: “Nioplay is the next-gen sweepstakes casino built for players who want excitement without risk.” - CTA Buttons: - [Start Playing] — glowing orange pulse - [See How It Works] — blue outline with hover flicker - Background: coins gently float upward behind hero content with a dark overlay glow - Subtext row: “100% Legal · Crypto-Friendly · Instant Redeems · 18+ Only” --- ### 2. **Trust Strip / Legal Proof** - Neon-glow icon bar (horizontal layout): - ✅ Legal U.S. Sweepstakes Model - ⚡ 24-Hour Redeems - 🔐 KYC & ID Verified - 🪙 Crypto (USDC, ETH, BTC) - 🧠 Responsible Gaming Certified - Hover glow effects on icons; subtle entry animation --- ### 3. **How It Works (Scroll-Triggered Timeline)** - Vertically stacked 3-step visual: 1. **Sign Up** – No credit card required, instant free coins 2. **Play Games** – Over 1,000+ exclusive games: MegaWay slots, fish shooter, live dealer games 3. **Redeem Prizes** – Redeem to your Debit Card or Crypto - Add animated icons or SVGs per step - Coins float softly in the background layer --- ### 4. **Game Showcase Grid (Rich Details)** Display 6 featured games in a 2x3 card layout. Each card includes: - Game Image - Game Title (Neon Blue) - ⭐ Rating (1–5 stars) - 🎯 RTP (e.g., “96.7% Return to Player”) - 💸 Sign-Up Bonus (e.g., “+1,000 Free Coins on First Spin!”) - Tags/Badges: - “Jackpot Eligible” - “High RTP” - “Exclusive” - “Skill-Based” - CTA Button: [Play Now] — glowing orange mini button - Hover effects: scale glow + tooltip with game mechanics or volatility (e.g., “High volatility • Max Win: 5,000x”) --- ### 5. **Promo Banner** - Neon-outlined bar with promo text: “🎁 New Players Get $10 in FREE Coins + Up to 50% Rakeback!” - Countdown Timer (optional animation) - [Claim Bonus Now] CTA with gold coin burst on hover --- ### 6. **Why Nioplay? (Highlight Grid w/ Icons)** Feature grid with glowing icons, bold headlines, and 1-line subtext: - 🧾 **Legal & Compliant** – Verified sweepstakes model - ⚡ **Fast Crypto Redeems** – Most Redeems processed in 24 hours - 🎁 **VIP Loyalty & Rakeback** – Get rewarded just for playing - 📱 **Mobile-First Experience** – No app needed - 🎮 **1,000+ Unique Games** – Slots, Fish Shooter, Instant Win, Crash, Live Dealers - 🔒 **Secure Identity Verification** – Age and residency verified --- ### 7. **Player Testimonials** Carousel or stacked cards with: - Avatar - Player handle (e.g., @LuckyLyne) - Game played + win amount - Star rating - “I withdrew $100 in USDC same-day — this site is LEGIT.” - Soft glow card borders, animated in on scroll --- ### 8. **FAQ Section (Accordion, Neon-Glowing Style)** - Toggle menu with glowing blue outlines and hover flickers - Questions: – Is Nioplay legal? – Can I win real prizes? – How do I get free coins? – How fast are payouts? – Is this gambling? - Smooth toggle animation + coin float layer in background (blurred) --- ### 9. **Final CTA Section** - Text: “Join 1,000,000+ players already winning at Nioplay” - [Start Playing Now] CTA — glowing orange with coin burst on hover - Background spotlight gradient with faint coin shimmer overlay - Legal copy: “No purchase necessary. 18+ only. Sweepstakes-based casino platform.” --- ### 10. **Footer** - Black background with neon-hover link glow - Sections: - Terms of Service - Privacy Policy - FAQ - Responsible Gaming - Support - Neon social icons: Facebook, Twitter, Discord (glow hover) - Placeholder for Nioplay neon logo --- 🧠 Technical Notes: - Static HTML/CSS — exportable and deployable - Fully responsive on mobile - Performance-optimized (coin animations via CSS/SVG) - SEO-ready with semantic markup and meta sections
4
+ Create a high-conversion, mobile-first landing page for **Nioplay**, a legal U.S. sweepstakes casino. Design must be immersive, cinematic, and visually magnetic, with **neon casino aesthetics** and **floating gold coin animations** running seamlessly across every section. Prioritize modern CSS/SVG animations over JS. Export clean, responsive HTML/CSS optimized for fast load times and SEO. --- 🎨 **Global Theme** - Background: pure black (#0A0A0A) - Neon Glow Colors: - CTA / Highlights: Orange (#FF6A00) - Accents / Borders: Electric Blue (#00E4FF) - Gold Coins: Gradient from #FFD700 → #FFA500 with glowing aura - Typography: - Headers: Orbitron or Inter with neon glow text-shadow - Body: Poppins, crisp and readable - Global Effects: - Animated glowing borders on sections - Hover flickers on links/buttons - Scroll-triggered fade-ups, slide-ins, and glow-pops - Light particle trails and horizontal light streaks in backgrounds - Coin Animation (Full Page): - Coins float **upward like bubbles** with randomized speed, size, opacity - Mix of **foreground (bright) and background (blurred)** coins - Coins interact subtly with CTA buttons and scroll events (burst, shimmer) - Animation should persist throughout entire scrollable page --- ## 🧩 Section-by-Section Breakdown --- ### 1. 🔥 Hero Section - **Full viewport height** - Background: dense coin layer behind and mid-layer coins in front (lower opacity) - Headline: “Play for Free. Win Real Prizes.” (Orange neon glow, flicker effect) - Subheadline: “The next-gen legal sweepstakes casino. Free to play, real to win.” (Blue glow) - Buttons: - [Start Playing]: Pulsing orange glow, mild scale on hover, coin sparkle on click - [See How It Works]: Outlined in blue, flickers subtly on hover - Micro Trust Row: - Icons: 100% Legal ✔️ · Instant Crypto ⚡ · 18+ Verified 🔞 - Each icon glows and bounces slightly on hover - **Coin Behavior:** High density; multiple parallax layers; larger, brighter coins float in foreground with gleam trails --- ### 2. 🛡️ Trust / Legal Assurance Bar - Horizontal strip of 5 glowing icons with labels: U.S. Legal · KYC Compliant · Crypto Friendly · Instant Payouts · 18+ - On hover: icons enlarge slightly, border pulses blue or orange - Coins: **Low-density floaters** in background layer only --- ### 3. ⚙️ How Nioplay Works (3-Step Scroll Reveal) - 3 wide horizontal cards: - Step 1: Sign Up (Get free coins) - Step 2: Play Games (Slots, Fish, Blackjack) - Step 3: Win Prizes (Crypto, Gift Cards) - Each card includes: - Animated neon icon - Title with soft glow (orange or blue) - Supporting text - Light animation on scroll (e.g., fade-in + vertical float) - On hover: - Border glows brighter - Coin cluster animation nearby (small burst) - Coin Behavior: Background drift only, lower opacity; step entry animates coins brighter --- ### 4. 🎮 Game Showcase Grid - 6 game tiles (3 per row, 2 rows) with hover interactivity - Each tile includes: - Game image (use placeholder) - Game title (neon glow text) - ⭐ 4.8 Rating (hover glow) - 🎯 RTP 96.5% (gold glowing badge) - 💰 “+1,000 Free Coins” (animated glow ribbon) - On hover: - Game image zoom-in slightly - Border glows orange - "Play Now" button appears with glow + pulse - Coin Behavior: - Coins drift **behind cards** - Hovering a card causes local coin gleam burst or mini pulse --- ### 5. 🎁 Promo Banner / Offer Highlight - Full-width dark strip with orange glowing gradient - Title: “Claim $10 in FREE Coins + Up to 50% VIP Rakeback” - CTA: [Claim Now] — bright orange button with glowing scatter effect on hover - Optional promo code box with glowing outline - Coin Behavior: mid-density flow behind + small burst on CTA hover --- ### 6. 💡 Why Nioplay? (Neon Icon Grid) - 6 feature boxes: - Legal Sweepstakes Model - 24h Crypto Redemptions - VIP Rakeback Rewards - No App Download Needed - 50+ Games - Live Support - Each box: - Glowing icon + neon flicker hover - Short line of text - On scroll: fade-in with slight glow pop - Coin Behavior: **mid-layer coins** drift slowly with slight gleams --- ### 7. 🗣️ Testimonials Section - Slider or 3 card layout of glowing Facebook-style reviews - Each card includes: - Avatar (neon ring glow) - Player name, short review - Game image (or name) - Text glows slightly or has subtle highlight underline - Coin Behavior: very soft, blurred background coins only (avoid distraction here) --- ### 8. ❓ FAQ Accordion - Glowing accordion list with toggle animation - Blue glowing outline box + "+" or "−" icon with pulse on toggle - Sample entries: - Is Nioplay legal? - Can I win real money? - Do I need to deposit? - How fast are payouts? - Coin Behavior: - Blur coins behind content - Very low opacity coins drift upward gently --- ### 9. 🚀 Final CTA Banner - Large CTA area with spotlight glow gradient background (black → orange/blue) - Headline: “Join 100,000+ Players Winning Daily on Nioplay” - Button: [Start Playing Now] — massive, glowing, coin-pulsing on hover - Coin Behavior: - High coin density resumes here - Parallax coins float fast behind - CTA hover triggers full-page coin pulse and sparkle --- ### 10. 🧱 Footer - Solid black with glowing text links - Sections: - Terms of Service - Privacy Policy - FAQ - Responsible Gaming - Contact Support - Social Icons: - Facebook, Twitter, Discord - Hover: icons glow neon blue/orange - Coin Behavior: minimal, faded background coins only for ambiance --- 🛠 Technical Output Instructions: - Export clean HTML & CSS - Prefer CSS/SVG for animations (no JS unless needed) - Responsive for mobile-first - Include meta tags and semantic structure - All styles and sections should be visually consistent with dark neon casino branding
5
+ Build a high-conversion, mobile-first, responsive landing page for **Nioplay** — a legal U.S.-based sweepstakes casino. The design must be bold, immersive, and visually striking, blending **futuristic neon aesthetics** with a **cinematic user experience**. Structure the page into clean, scrollable sections with consistent visual flow. Include **full-site animated coin effects**, responsive behavior, and optimized code for fast loading, SEO, and high engagement. --- 🎨 GLOBAL VISUAL THEME & DESIGN LANGUAGE: - **Background**: gunmetal gradient from **#1A1A1A to #2C2C2C**, angled 135° (top-left to bottom-right) - **Primary Glow Color**: Neon Orange (#FF6A00) — used in CTAs, headings, buttons - **Accent Glow Color**: Electric Blue (#00E4FF) — used in borders, hovers, outlines - **Gold Coins**: Gradient #FFD700 → #FFA500 with soft glow and light trail effects - **Typography**: - **Headings**: Orbitron or Inter, glowing neon text-shadow - **Body**: Poppins, clean and modern - **UI/UX Effects**: - Glow pulsing buttons - Neon flicker hovers on links - Scroll-triggered animations (fade, glow-pop, slight parallax) - Smooth section transitions with subtle blur overlays or streak lighting - Mobile-first layout that maintains animations and performance --- 💰 FULL-SITE COIN ANIMATION SYSTEM (**Site-Wide, Bubbly & Immersive**): - Floating gold coins rise **upward like bubbles** across all sections - Use layered **CSS/SVG animations**, no JS required unless necessary - **Vary coin size, opacity, and speed** for parallax depth illusion - Foreground coins: brighter, occasional sparkle trail or spin - Background coins: dimmed, blurred, pass behind content - Coins should never obscure main text or buttons (use z-indexing) - Coin activity: - **Dense in Hero and Final CTA** - **Subtle/blurred in Testimonials and FAQ** - **Interactive**: glow pulse near CTAs and on hover events --- 🧩 SECTION-BY-SECTION CONTENT STRUCTURE + ANIMATIONS: --- ### 1. 🎯 HERO SECTION - Full-screen layout with glowing, cinematic impact - Headline: **“Play for Free. Win Real Prizes.”** — Neon orange glow, pulsing flicker - Subheadline: “The next-gen legal sweepstakes casino — free to play, real to win.” — Soft electric blue glow - CTA Buttons: - [Start Playing]: Pulsing orange glow, scale-on-hover, coin sparkle on click - [See How It Works]: Blue outline with flicker and light trail hover - Micro Trust Bar: - Icons: ✔️ 100% Legal · ⚡ Instant Crypto · 🔞 18+ Only — glows on hover - Coin behavior: High density, parallax coins float in background AND foreground --- ### 2. 🛡️ TRUST & LEGAL BAR - Horizontal row of neon-glowing icons: - U.S. Legal, KYC Compliant, Crypto-Friendly, Instant Payouts, 18+ Verified - Icons animate slightly on hover (bounce or glow intensify) - Coin flow: **faint**, behind icons only --- ### 3. ⚙️ HOW NIOPLAY WORKS (3-STEP SCROLL REVEAL) - Layout: 3 horizontal cards with icon, title, short description 1. Sign Up (Free Coins) 2. Play Games (Slots, Fish, Blackjack) 3. Win Prizes (Crypto, Gift Cards) - Scroll-triggered glow fade-in for each card - On hover: - Cards glow brighter - Coin shimmer or pulse nearby - Coin flow: subtle, background only; step entrance triggers small bursts --- ### 4. 🎮 GAME SHOWCASE GRID - 6 game cards with hover interactivity - Each card includes: - Game image (placeholder) - Glowing title - ⭐ Rating (e.g. 4.8) - 🎯 RTP (e.g. 96.5%) - 💰 Sign-up Bonus Label: “+1,000 Free Coins” (gold glow) - On hover: - Image zooms in slightly - Border glows - "Play Now" CTA appears, pulsing - Coin flow: coins drift **behind** cards; hover causes shimmer/spark near card --- ### 5. 🎁 PROMO BANNER / VIP OFFER - Full-width dark neon banner - Text: “Claim $10 in FREE Coins + Up to 50% VIP Rakeback” — Glowing gradient text - CTA: [Claim Now] — bright neon orange button with ripple glow on click - Promo code input box: animated outline that pulses when focused - Coin behavior: light stream in background, coin pop effect on CTA hover --- ### 6. 💡 WHY NIOPLAY? (FEATURE GRID) - 6 glowing tiles, 3 per row - Each box includes: - Animated neon icon - Title text with flicker glow - One-liner explanation - Hover effect: - Border pulses blue/orange - Icon shimmer animation - Coin behavior: background-only, smooth drift; more vibrant on scroll-in --- ### 7. 🗣️ TESTIMONIALS - 3–5 player reviews in Facebook-style glowing cards - Each card: - Avatar with glowing neon ring - Username, game played, short review - Subtle hover float-in animation - Coin behavior: **reduced**; blurred background only for readability --- ### 8. ❓ FAQ (ACCORDION STYLE) - Glowing accordion with animated toggle - When clicked: - Border glows brighter - Icon shifts from + to − with pulse - Coin flow: **extremely soft**, blurred coins drift behind content only - FAQ entries: - Is Nioplay legal? - Can I win real money? - Do I need to deposit? - What games are available? - How fast are payouts? --- ### 9. 🚀 FINAL CTA SECTION - Spotlight glow background (gradient: black → blue/orange) - Title: “Join 100,000+ Players Winning Daily on Nioplay” - Button: [Start Playing Now] — massive, pulsing orange glow - Coin behavior: high density; full-layer parallax; scrolling into this section triggers **coin scatter burst** - Microcopy below CTA: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” --- ### 10. 🧱 FOOTER - Simple dark layout with neon hover links: - Terms of Service - Privacy Policy - FAQ - Responsible Gaming - Support - Social Icons: - Facebook, Twitter, Discord - Hover glow effect (blue/orange pulse) - Coin behavior: minimal; 1–2 blurred coins drifting behind only --- 🔧 TECHNICAL OUTPUT INSTRUCTIONS: - Output clean, exportable HTML & CSS - CSS/SVG animations only (avoid JS unless absolutely necessary) - Include SEO meta tags and semantic structure - Fully responsive and mobile-first - Page must look cinematic and immersive across devices
6
+ MASTER PROMPT – NIOPLAY LANDING PAGE (HIGH-CONVERSION, NEON-THEMED) Create a mobile-first, high-conversion landing page for Nioplay — a legally structured U.S. sweepstakes casino platform. This is a modern, cinematic homepage optimized to drive signups, educate users, and showcase popular games. Design must feel futuristic, immersive, and sleek, with full neon theme consistency and real-time animated gold coin immersion throughout the page. ⸻ 🎨 GLOBAL VISUAL THEME & DESIGN SYSTEM: • Background: ultra-dark gunmetal gradient • From #0B0B0B → #1A1A1A, angled 135° (top-left to bottom-right) • Primary Accent (CTAs, glow highlights): Neon Orange #FF6A00 • Secondary Accent (borders, icons, links): Electric Blue #00E4FF • Gold Coin Gradient: #FFD700 to #FFA500 with soft neon aura glow • Typography: • Titles: Orbitron (all caps, neon glow) • Subheaders: Inter or Poppins (light glow) • Body: Poppins, clean, white (#F5F5F5) • UI Effects: • Neon glow on all headings, buttons, and outlines • Hover flickers and light shimmer effects • Scroll-triggered animations (fade, slide-in, light streaks) • Glassmorphism panels with backdrops, rounded corners, soft blur • Section separators with subtle light pulses or gradient overlays • Sticky Navbar: • Floating top bar with: • [Sign Up] — orange neon glow pulse • [Log In] — blue outline with flicker effect • Navbar has a blurred, semi-transparent background on scroll ⸻ 🪙 FULL-PAGE GOLD COIN ANIMATION (IMMERSIVE FX) • Animate floating gold coins across the entire site (not just Hero section) • Coins: • Float upward like bubbles, gently rotating and gleaming • Move at varying speeds and sizes to create depth and parallax • Layered: • Some pass behind content (lower opacity, blurred) • Some float in front with highlight glints and spark trails • On scroll or CTA hover: • Trigger a burst scatter animation • In dense sections (like FAQ), reduce opacity and apply blur to reduce distraction • All coins should match Nioplay’s theme using SVG, CSS, or canvas (lightweight performance) ⸻ 📄 PAGE STRUCTURE: ⸻ 1. 🎬 HERO SECTION • Large, centered headline: “Play for Free. Win Real Prizes.” (Neon orange, glowing) • Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” • Buttons: • [Start Playing] — solid neon orange, pulse + hover shimmer • [See How It Works] — blue outline, flickers when hovered • Micro-trust bar below buttons: 100% Legal · Instant Crypto Cashouts · 18+ Only • Coins animate across, behind, and over the hero elements with parallax ⸻ 2. 🛡 TRUST BAR / LEGAL ASSURANCE • Horizontal glowing icon row: • ✔️ U.S. Legal • 🔐 KYC Compliant • 🪙 Crypto Friendly • ⚡ Instant Payouts • 🔞 18+ Verified • Each icon has: • Neon glow ring • On-hover flicker + label pop ⸻ 3. 📊 HOW NIOPLAY WORKS (3-STEP SECTION) • Scroll-triggered fade-in tiles: 1. Sign Up – Get free coins, no purchase needed 2. Play Games – 50+ slots, blackjack, fish, live dealer 3. Win Prizes – Crypto, gift cards, sweepstakes entries • Each step: • Neon frame, glowing icon • Coins float lightly in the background ⸻ 4. 🎮 FEATURED GAMES SHOWCASE (NEON TILE GRID) • Display 6–8 games in a 2–3-column glowing grid • Each game card includes: Layout: • Game preview image (slightly zoomed, neon-framed) • Game title (glowing neon orange) • Feature Tags: • “Jackpot”, “Live Dealer”, “Fish Game”, “Bonus Buy”, etc. • Styled as corner-floating neon glow labels • Stat Row (under title): • ⭐ Rating (e.g. 4.8 / 5) • 🎯 RTP: horizontal glowing progress bar (animated on load) • 🎁 Bonus: “+1,000 Free Coins” glowing pill badge • CTA Button: [Play Now] — glowing orange, coin sparkle animation on hover Animation: • Hover: card scales slightly, shimmer moves across image • Coins drift behind cards in parallax • On hover: coins subtly swirl toward the card (magnet effect) ⸻ 5. 🎁 PROMO OFFER BANNER • Glowing promo bar: “Claim $10 in FREE Coins by verifying your account” • CTA Button: [Claim Now] — pulsing glow, coin burst on click • Bonus Code Field (optional): • Glowing border, placeholder text flickers when typing ⸻ 6. ⚡ WHY NIOPLAY (NEON FEATURE GRID) • Grid of 5–6 glowing icon tiles, each with: • Title • Brief caption • Flicker-hover glow icon • Example Features: • 24h Crypto Redemptions • Legal Sweepstakes Model • No Download Needed • VIP Rakeback System • 50+ Game Catalog • Section has ambient particle effects and coin layer behind ⸻ 7. 💬 TESTIMONIALS SECTION • Facebook-style review cards with: • Player avatar • Game they played • Glowing 5-star rating • Short review text • Glowing border + soft slide/fade animation • Background uses low-opacity coin animation and blur motion particles ⸻ 8. ❓ FAQ SECTION (NEON ACCORDION STYLE) • Questions in glowing accordion cards with neon icons • Example FAQs: • Is Nioplay legal? • Can I win real money? • Do I need to deposit? • What games are available? • How fast are payouts? • Each accordion expands with glowing border pulse and content fade-in • Floating coins blur and fade behind this section for minimal distraction ⸻ 9. 🧲 FINAL CTA SECTION • Full-width glowing gradient spotlight background (black → orange/blue) • Headline: “Join 100,000+ players winning daily on Nioplay” • CTA Button: [Start Playing Now] — massive glowing orange pulse, coin scatter • Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” • Floating coins animate upward and around CTA ⸻ 10. 🦶 FOOTER • Solid black background • Glow-hover text links: • Terms of Service • Privacy Policy • FAQ • Responsible Gaming • Contact Support • Social Icons: Facebook, Twitter, Discord — glowing hover effects • Placeholder logo (neon-style Nioplay branding) ⸻ 🧠 Final Notes: • Use lightweight CSS/SVG/Canvas for all animations (no JavaScript dependencies unless essential) • Ensure mobile-first responsiveness • Maintain neon theme consistency across every single section — no flat or default web styles • Optimize for fast loading with clean code structure • Sticky sign-up bar or CTA on mobile is a plus • Meta & SEO tags should be added post-gen manually if needed
7
+ Create a mobile-first, high-conversion landing page for Nioplay — a legally structured U.S. sweepstakes casino platform. This is a modern, cinematic homepage optimized to drive signups, educate users, and showcase popular games. Design must feel futuristic, immersive, and sleek, with full neon theme consistency and real-time animated gold coin immersion throughout the page. GLOBAL VISUAL THEME & DESIGN SYSTEM: • Background: ultra-dark gunmetal gradient o From #0B0B0B → #1A1A1A, angled 135° (top-left to bottom-right) • Primary Accent (CTAs, glow highlights): Neon Orange #FF6A00 • Secondary Accent (borders, icons, links): Electric Blue #00E4FF • Gold Coin Gradient: #FFD700 to #FFA500 with soft neon aura glow • Typography: o Titles: Orbitron (all caps, neon glow) o Subheaders: Inter or Poppins (light glow) o Body: Poppins, clean, white (#F5F5F5) • UI Effects: o Neon glow on all headings, buttons, and outlines o Hover flickers and light shimmer effects o Scroll-triggered animations (fade, slide-in, light streaks) o Glassmorphism panels with backdrops, rounded corners, soft blur o Section separators with subtle light pulses or gradient overlays • Sticky Navbar: o Floating top bar with:  [Sign Up] — orange neon glow pulse  [Log In] — blue outline with flicker effect o Navbar has a blurred, semi-transparent background on scroll FULL-PAGE GOLD COIN ANIMATION (IMMERSIVE FX) • Animate floating gold coins across the entire site (not just Hero section) • Coins: o Float upward like bubbles, gently rotating and gleaming o Move at varying speeds and sizes to create depth and parallax o Layered:  Some pass behind content (lower opacity, blurred)  Some float in front with highlight glints and spark trails • On scroll or CTA hover: o Trigger a burst scatter animation • In dense sections (like FAQ), reduce opacity and apply blur to reduce distraction • All coins should match Nioplay’s theme using SVG, CSS, or canvas (lightweight performance) PAGE STRUCTURE: 1. HERO SECTION • Large, centered headline: “Play for Free. Win Real Prizes.” (Neon orange, glowing) • Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” • Buttons: o [Start Playing] — solid neon orange, pulse + hover shimmer o [See How It Works] — blue outline, flickers when hovered • Micro-trust bar below buttons: 100% Legal · Instant Crypto Cashouts · 18+ Only • Coins animate across, behind, and over the hero elements with parallax 2. TRUST BAR / LEGAL ASSURANCE • Horizontal glowing icon row: o ✔️ U.S. Legal o 🔐 KYC Compliant o 🪙 Crypto Friendly o ⚡ Instant Payouts o 🔞 18+ Verified • Each icon has: o Neon glow ring o On-hover flicker + label pop 3. HOW NIOPLAY WORKS (3-STEP SECTION) • Scroll-triggered fade-in tiles: 1. Sign Up – Get free coins, no purchase needed 2. Play Games – 50+ slots, blackjack, fish, live dealer 3. Win Prizes – Crypto, gift cards, sweepstakes entries • Each step: o Neon frame, glowing icon o Coins float lightly in the background 4. FEATURED GAMES SHOWCASE (NEON TILE GRID) • Display 6–8 games in a 2–3-column glowing grid • Each game card includes: Layout: • Game preview image (slightly zoomed, neon-framed) • Game title (glowing neon orange) • Feature Tags: o “Jackpot”, “Live Dealer”, “Fish Game”, “Bonus Buy”, etc. o Styled as corner-floating neon glow labels • Stat Row (under title): o ⭐ Rating (e.g. 4.8 / 5) o 🎯 RTP: horizontal glowing progress bar (animated on load) o 🎁 Bonus: “+1,000 Free Coins” glowing pill badge • CTA Button: [Play Now] — glowing orange, coin sparkle animation on hover Animation: • Hover: card scales slightly, shimmer moves across image • Coins drift behind cards in parallax • On hover: coins subtly swirl toward the card (magnet effect) 5. PROMO OFFER BANNER • Glowing promo bar: “Claim $10 in FREE Coins by verifying your account” • CTA Button: [Claim Now] — pulsing glow, coin burst on click • Bonus Code Field (optional): o Glowing border, placeholder text flickers when typing 6. ⚡ WHY NIOPLAY (NEON FEATURE GRID) • Grid of 5–6 glowing icon tiles, each with: o Title o Brief caption o Flicker-hover glow icon • Example Features: o 24h Crypto Redemptions o Legal Sweepstakes Model o No Download Needed o VIP Rakeback System o 50+ Game Catalog • Section has ambient particle effects and coin layer behind 7. 💬 TESTIMONIALS SECTION • Facebook-style review cards with: o Player avatar o Game they played o Glowing 5-star rating o Short review text • Glowing border + soft slide/fade animation • Background uses low-opacity coin animation and blur motion particles 8. ❓ FAQ SECTION (NEON ACCORDION STYLE) • Questions in glowing accordion cards with neon icons • Example FAQs: o Is Nioplay legal? o Can I win real money? o Do I need to deposit? o What games are available? o How fast are payouts? • Each accordion expands with glowing border pulse and content fade-in • Floating coins blur and fade behind this section for minimal distraction 9. FINAL CTA SECTION • Full-width glowing gradient spotlight background (black → orange/blue) • Headline: “Join 100,000+ players winning daily on Nioplay” • CTA Button: [Start Playing Now] — massive glowing orange pulse, coin scatter • Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” • Floating coins animate upward and around CTA 10. FOOTER • Solid black background • Glow-hover text links: o Terms of Service o Privacy Policy o FAQ o Responsible Gaming o Contact Support • Social Icons: Facebook, Twitter, Discord — glowing hover effects • Placeholder logo (neon-style Nioplay branding) Final Notes: • Use lightweight CSS/SVG/Canvas for all animations (no JavaScript dependencies unless essential) • Ensure mobile-first responsiveness • Maintain neon theme consistency across every single section — no flat or default web styles • Optimize for fast loading with clean code structure • Sticky sign-up bar or CTA on mobile is a plus • Meta & SEO tags should be added post-gen manually if needed
8
+ Create a mobile-first, high-conversion landing page for Nioplay — a legally structured U.S. sweepstakes casino platform. This is a modern, cinematic homepage optimized to drive signups, educate users, and showcase popular games. Design must feel futuristic, immersive, and sleek, with full neon theme consistency and real-time animated gold coin immersion throughout the page. GLOBAL VISUAL THEME & DESIGN SYSTEM: • Background: ultra-dark gunmetal gradient o From #0B0B0B → #1A1A1A, angled 135° (top-left to bottom-right) • Primary Accent (CTAs, glow highlights): Neon Orange #FF6A00 • Secondary Accent (borders, icons, links): Electric Blue #00E4FF • Gold Coin Gradient: #FFD700 to #FFA500 with soft neon aura glow • Typography: o Titles: Orbitron (all caps, neon glow) o Subheaders: Inter or Poppins (light glow) o Body: Poppins, clean, white (#F5F5F5) • UI Effects: o Neon glow on all headings, buttons, and outlines o Hover flickers and light shimmer effects o Scroll-triggered animations (fade, slide-in, light streaks) o Glassmorphism panels with backdrops, rounded corners, soft blur o Section separators with subtle light pulses or gradient overlays • Sticky Navbar: o Floating top bar with:  [Sign Up] — orange neon glow pulse  [Log In] — blue outline with flicker effect o Navbar has a blurred, semi-transparent background on scroll FULL-PAGE GOLD COIN ANIMATION (IMMERSIVE FX) • Animate floating gold coins across the entire site (not just Hero section) • Coins: o Float upward like bubbles, gently rotating and gleaming o Move at varying speeds and sizes to create depth and parallax o Layered:  Some pass behind content (lower opacity, blurred)  Some float in front with highlight glints and spark trails • On scroll or CTA hover: o Trigger a burst scatter animation • In dense sections (like FAQ), reduce opacity and apply blur to reduce distraction • All coins should match Nioplay’s theme using SVG, CSS, or canvas (lightweight performance) PAGE STRUCTURE: 1. HERO SECTION • Large, centered headline: “Play for Free. Win Real Prizes.” (Neon orange, glowing) • Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” • Buttons: o [Start Playing] — solid neon orange, pulse + hover shimmer o [See How It Works] — blue outline, flickers when hovered • Micro-trust bar below buttons: 100% Legal · Instant Crypto Cashouts · 18+ Only • Coins animate across, behind, and over the hero elements with parallax 2. TRUST BAR / LEGAL ASSURANCE • Horizontal glowing icon row: o ✔️ U.S. Legal o 🔐 KYC Compliant o 🪙 Crypto Friendly o ⚡ Instant Redeems o 🔞 18+ Verified • Each icon has: o Neon glow ring o On-hover flicker + label pop 3. HOW NIOPLAY WORKS (3-STEP SECTION) • Scroll-triggered fade-in tiles: 1. Sign Up – Get free coins, no purchase needed 2. Play Games – 1,000+ slots, blackjack, fish, live dealer 3. Win Prizes – Crypto, Debit Card Redeems, Gift card, sweepstakes entries • Each step: o Neon frame, glowing icon o Coins float lightly in the background 4. FEATURED GAMES SHOWCASE (NEON TILE GRID) • Display 6 games in a 2 column glowing grid • Each game card includes: Layout: • Game preview image (slightly zoomed, neon-framed) • Game title (glowing neon orange) • Feature Tags: o “Jackpot”, “Live Dealer”, “Fish Game”, “Bonus Buy”, etc. o Styled as corner-floating neon glow labels • Stat Row (under title): o ⭐ Rating (e.g. 4.8 / 5) o 🎯 RTP: horizontal glowing progress bar (animated on load) o 🎁 Bonus: “+1,000 Free Coins” glowing pill badge • CTA Button: [Play Now] — glowing orange, coin sparkle animation on hover Animation: • Hover: card scales slightly, shimmer moves across image • Coins drift behind cards in parallax • On hover: coins subtly swirl toward the card (magnet effect) 5. PROMO OFFER BANNER • Glowing promo bar: “Claim $3 in FREE Coins by verifying your account” • CTA Button: [Claim Now] — pulsing glow, coin burst on click • Bonus Code Field (optional): o Glowing border, placeholder text flickers when typing 6. ⚡ WHY NIOPLAY (NEON FEATURE GRID) • Grid of 5–6 glowing icon tiles, each with: o Title o Brief caption o Flicker-hover glow icon • Example Features: o 24h Crypto Redemptions o Legal Sweepstakes Model o No Download Needed o VIP Rakeback System o 1,000+ Game Catalog • Section has ambient particle effects and coin layer behind 7. 💬 TESTIMONIALS SECTION • Facebook-style review cards with: o Player avatar o Game they played o Glowing 5-star rating o Short review text • Glowing border + soft slide/fade animation • Background uses low-opacity coin animation and blur motion particles 8. ❓ FAQ SECTION (NEON ACCORDION STYLE) • Questions in glowing accordion cards with neon icons • Example FAQs: o Is Nioplay legal? o Can I win real money? o Do I need to deposit? o What games are available? o How fast are Redeems? • Each accordion expands with glowing border pulse and content fade-in • Floating coins blur and fade behind this section for minimal distraction 9. FINAL CTA SECTION • Full-width glowing gradient spotlight background (black → orange/blue) • Headline: “Join 1,000,000+ players winning daily on Nioplay” • CTA Button: [Start Playing Now] — massive glowing orange pulse, coin scatter • Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” • Floating coins animate upward and around CTA 10. FOOTER • Solid black background • Glow-hover text links: o Terms of Service o Privacy Policy o FAQ o Responsible Gaming o Contact Support • Social Icons: Facebook, Twitter, Discord — glowing hover effects • Placeholder logo (neon-style Nioplay branding) Final Notes: • Use lightweight CSS/SVG/Canvas for all animations (no JavaScript dependencies unless essential) • Ensure mobile-first responsiveness • Maintain neon theme consistency across every single section — no flat or default web styles • Optimize for fast loading with clean code structure • Sticky sign-up bar or CTA on mobile is a plus • Meta & SEO tags should be added post-gen manually if needed
9
+ Create a mobile-first, high-conversion landing page for Nioplay — a legally structured U.S. sweepstakes casino platform. This is a modern, cinematic homepage optimized to drive signups, educate users, and showcase popular games. Design must feel futuristic, immersive, and sleek, with full neon theme consistency and real-time animated gold coin immersion throughout the page. GLOBAL VISUAL THEME & DESIGN SYSTEM: • Background: ultra-dark gunmetal gradient o From #0B0B0B → #1A1A1A, angled 135° (top-left to bottom-right) • Primary Accent (CTAs, glow highlights): Neon Orange #FF6A00 • Secondary Accent (borders, icons, links): Electric Blue #00E4FF • Gold Coin Gradient: #FFD700 to #FFA500 with soft neon aura glow • Typography: o Titles: Orbitron (all caps, neon glow) o Subheaders: Inter or Poppins (light glow) o Body: Poppins, clean, white (#F5F5F5) • UI Effects: o Neon glow on all headings, buttons, and outlines o Hover flickers and light shimmer effects o Scroll-triggered animations (fade, slide-in, light streaks) o Glassmorphism panels with backdrops, rounded corners, soft blur o Section separators with subtle light pulses or gradient overlays • Sticky Navbar: o Floating top bar with:  [Sign Up] — orange neon glow pulse  [Log In] — blue outline with flicker effect o Navbar has a blurred, semi-transparent background on scroll FULL-PAGE GOLD COIN ANIMATION (IMMERSIVE FX) • Animate floating gold coins across the entire site. Floating up from the bottom of the page. • Coins: o Float upward like bubbles, gently gleaming. o Move at varying speeds and sizes to create depth and parallax o Layered:  Some pass behind content (lower opacity, blurred)  Some float in front with highlight glints and spark trails • On scroll or CTA hover: o Trigger a burst scatter animation • In dense sections (like FAQ), reduce opacity and apply blur to reduce distraction • All coins should match Nioplay’s theme using SVG, CSS, or canvas (lightweight performance) UNIVERSAL HOVER GLOW RULE: - Every interactive element (buttons, links, cards, icons) must trigger **a hover glow effect** - Glow behavior: - Soft neon outer glow (orange or blue depending on theme) - Light scale-up (105%) on hover - Optional flicker or shimmer animation - Transitions must be **smooth and fast (0.2s–0.3s)** for responsiveness - No static or unstyled hover states allowed - Example: - Links → glow underline + color flicker - Game cards → glow border intensifies + zoom in - Icons → spark on hover PAGE STRUCTURE: 1. HERO SECTION • Large, centered headline: “Play for Free. Win Real Prizes.” (Neon orange, glowing) • Subheadline: “Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.” • Buttons: o [Start Playing] — solid neon orange, pulse + hover shimmer o [See How It Works] — blue outline, flickers when hovered • Micro-trust bar below buttons: 100% Legal · Instant Crypto Cashouts · 18+ Only • Coins animate across, behind, and over the hero elements with parallax 2. TRUST BAR / LEGAL ASSURANCE • Horizontal glowing icon row: o ✔️ U.S. Legal o 🔐 KYC Compliant o 🪙 Crypto Friendly o ⚡ Instant Redeems o 🔞 18+ Verified • Each icon has: o Neon glow ring o On-hover flicker + label pop 3. HOW NIOPLAY WORKS (3-STEP SECTION) • Scroll-triggered fade-in tiles: 1. Sign Up – Get free coins, no purchase needed 2. Play Games – 1,000+ slots, blackjack, fish, live dealer 3. Win Prizes – Crypto, Debit Card Redeems, Gift card, sweepstakes entries • Each step: o Neon frame, glowing icon o Coins float lightly in the background 4. FEATURED GAMES SHOWCASE (NEON TILE GRID) • Display 6 games in a 2 column glowing grid • Each game card includes: Layout: • Game preview image (slightly zoomed, neon-framed) • Game title (glowing neon orange) • Feature Tags: o “Jackpot”, “Live Dealer”, “Fish Game”, “Bonus Buy”, etc. o Styled as corner-floating neon glow labels • Stat Row (under title): o ⭐ Rating (e.g. 4.8 / 5) o 🎯 RTP: horizontal glowing progress bar (animated on load) o 🎁 Bonus: “+1,000 Free Coins” glowing pill badge • CTA Button: [Play Now] — glowing orange, coin sparkle animation on hover Animation: • Hover: card scales slightly, shimmer moves across image • Coins drift behind cards in parallax • On hover: coins subtly swirl toward the card (magnet effect) 5. PROMO OFFER BANNER • Glowing promo bar: “Claim $3 in FREE Coins by verifying your account” • CTA Button: [Claim Now] — pulsing glow, coin burst on click • Bonus Code Field (optional): o Glowing border, placeholder text flickers when typing 6. ⚡ WHY NIOPLAY (NEON FEATURE GRID) • Grid of 5–6 glowing icon tiles, each with: o Title o Brief caption o Flicker-hover glow icon • Example Features: o 24h Crypto Redemptions o Legal Sweepstakes Model o No Download Needed o VIP Rakeback System o 1,000+ Game Catalog • Section has ambient particle effects and coin layer behind 7. 💬 TESTIMONIALS SECTION • Facebook-style review cards with: o Player avatar o Game they played o Glowing 5-star rating o Short review text • Glowing border + soft slide/fade animation • Background uses low-opacity coin animation and blur motion particles 8. ❓ FAQ SECTION (NEON ACCORDION STYLE) • Questions in glowing accordion cards with neon icons • Example FAQs: o Is Nioplay legal? o Can I win real money? o Do I need to deposit? o What games are available? o How fast are Redeems? • Each accordion expands with glowing border pulse and content fade-in • Floating coins blur and fade behind this section for minimal distraction 9. FINAL CTA SECTION • Full-width glowing gradient spotlight background (black → orange/blue) • Headline: “Join 1,000,000+ players winning daily on Nioplay” • CTA Button: [Start Playing Now] — massive glowing orange pulse, coin scatter • Micro-copy: “No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.” • Floating coins animate upward and around CTA 10. FOOTER • Solid black background • Glow-hover text links: o Terms of Service o Privacy Policy o FAQ o Responsible Gaming o Contact Support • Social Icons: Facebook, Twitter, Discord — glowing hover effects • Placeholder logo (neon-style Nioplay branding) Final Notes: • Use lightweight CSS/SVG/Canvas for all animations (no JavaScript dependencies unless essential) • Ensure mobile-first responsiveness • Maintain neon theme consistency across every single section — no flat or default web styles • Optimize for fast loading with clean code structure • Sticky sign-up bar or CTA on mobile is a plus • Meta & SEO tags should be added post-gen manually if needed