Spaces:
Running
Running
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- index.html +467 -635
- 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="
|
| 9 |
-
<link href="https://fonts.
|
|
|
|
| 10 |
<style>
|
| 11 |
:root {
|
| 12 |
--neon-orange: #FF6A00;
|
| 13 |
-
--
|
| 14 |
--gold-light: #FFD700;
|
| 15 |
--gold-dark: #FFA500;
|
| 16 |
-
--bg-dark: #
|
|
|
|
|
|
|
| 17 |
}
|
| 18 |
|
| 19 |
body {
|
| 20 |
font-family: 'Poppins', sans-serif;
|
| 21 |
-
background
|
| 22 |
-
color:
|
| 23 |
overflow-x: hidden;
|
| 24 |
position: relative;
|
| 25 |
}
|
| 26 |
|
| 27 |
h1, h2, h3, h4, h5, h6 {
|
| 28 |
font-family: 'Orbitron', sans-serif;
|
| 29 |
-
text-
|
|
|
|
| 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(--
|
| 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:
|
| 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 |
-
|
| 69 |
}
|
| 70 |
|
| 71 |
.btn-orange:hover {
|
| 72 |
-
transform:
|
| 73 |
box-shadow: 0 0 25px rgba(255, 106, 0, 0.9);
|
| 74 |
}
|
| 75 |
|
| 76 |
.btn-blue {
|
| 77 |
-
|
| 78 |
-
color: var(--
|
| 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 |
-
|
| 88 |
-
|
| 89 |
-
|
| 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 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
}
|
| 110 |
-
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
|
| 111 |
-
opacity: 0.7;
|
| 112 |
-
box-shadow: none;
|
| 113 |
-
}
|
| 114 |
}
|
| 115 |
|
| 116 |
-
.
|
| 117 |
-
|
| 118 |
-
|
| 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 |
-
.
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 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
|
| 140 |
-
content: '';
|
| 141 |
position: absolute;
|
| 142 |
-
|
| 143 |
-
right: 10%;
|
| 144 |
-
width: 15%;
|
| 145 |
-
height: 15%;
|
| 146 |
-
background: white;
|
| 147 |
border-radius: 50%;
|
| 148 |
-
|
| 149 |
-
|
| 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 |
-
|
| 165 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 166 |
}
|
| 167 |
|
| 168 |
-
.
|
| 169 |
-
animation:
|
| 170 |
}
|
| 171 |
|
| 172 |
-
@keyframes
|
| 173 |
0% {
|
| 174 |
-
|
| 175 |
}
|
| 176 |
-
|
| 177 |
-
|
| 178 |
}
|
| 179 |
100% {
|
| 180 |
-
|
| 181 |
}
|
| 182 |
}
|
| 183 |
|
| 184 |
-
.
|
| 185 |
-
|
| 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 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 195 |
}
|
| 196 |
|
| 197 |
-
.
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
}
|
| 202 |
|
| 203 |
-
.
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
border: 1px solid var(--neon-blue);
|
| 207 |
}
|
| 208 |
|
| 209 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 210 |
transition: all 0.3s ease;
|
| 211 |
}
|
| 212 |
|
| 213 |
-
.
|
| 214 |
-
|
| 215 |
-
text-shadow: 0 0 15px rgba(0, 228, 255, 0.7);
|
| 216 |
}
|
| 217 |
|
| 218 |
-
.
|
| 219 |
-
|
| 220 |
-
border: 1px solid rgba(255, 106, 0, 0.3);
|
| 221 |
-
transition: all 0.3s ease;
|
| 222 |
}
|
| 223 |
|
| 224 |
-
.
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
border:
|
|
|
|
| 228 |
}
|
| 229 |
|
| 230 |
-
.
|
| 231 |
-
|
|
|
|
|
|
|
| 232 |
}
|
| 233 |
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
|
| 237 |
}
|
| 238 |
|
| 239 |
-
.accordion-
|
| 240 |
-
|
|
|
|
|
|
|
| 241 |
}
|
| 242 |
|
| 243 |
.accordion-content {
|
| 244 |
max-height: 0;
|
| 245 |
-
|
| 246 |
-
transition: max-height 0.3s ease;
|
| 247 |
}
|
| 248 |
|
| 249 |
.accordion-item.active .accordion-content {
|
| 250 |
-
max-height:
|
| 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 |
-
|
| 277 |
-
|
| 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
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
<
|
| 371 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 372 |
|
| 373 |
<!-- Hero Section -->
|
| 374 |
-
<section class="
|
| 375 |
-
<div class="
|
| 376 |
-
|
| 377 |
-
<
|
| 378 |
-
|
| 379 |
-
|
| 380 |
-
|
| 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="
|
| 392 |
-
<span
|
| 393 |
-
<span
|
| 394 |
-
<span
|
|
|
|
|
|
|
| 395 |
</div>
|
| 396 |
</div>
|
| 397 |
</section>
|
| 398 |
|
| 399 |
<!-- Trust Bar -->
|
| 400 |
-
<section class="py-
|
| 401 |
-
<div class="
|
| 402 |
-
<div class="
|
| 403 |
-
<div class="
|
| 404 |
-
<
|
| 405 |
-
<
|
| 406 |
</div>
|
| 407 |
-
<div class="
|
| 408 |
-
<
|
| 409 |
-
<
|
| 410 |
</div>
|
| 411 |
-
<div class="
|
| 412 |
-
<
|
| 413 |
-
<
|
| 414 |
</div>
|
| 415 |
-
<div class="
|
| 416 |
-
<
|
| 417 |
-
<
|
| 418 |
</div>
|
| 419 |
-
<div class="
|
| 420 |
-
<
|
| 421 |
-
<
|
| 422 |
</div>
|
| 423 |
</div>
|
| 424 |
</div>
|
| 425 |
</section>
|
| 426 |
|
| 427 |
<!-- How It Works -->
|
| 428 |
-
<section class="py-20 px-
|
| 429 |
-
<div class="
|
| 430 |
-
<h2 class="text-3xl md:text-4xl font-bold
|
| 431 |
-
|
| 432 |
-
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
|
| 436 |
-
|
| 437 |
-
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
<div class="
|
| 442 |
-
|
| 443 |
-
|
| 444 |
-
|
| 445 |
-
|
| 446 |
-
|
| 447 |
-
|
| 448 |
-
<
|
| 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-
|
| 459 |
-
<div class="
|
| 460 |
-
<
|
|
|
|
|
|
|
|
|
|
| 461 |
|
| 462 |
-
<div class="grid grid-cols-1
|
| 463 |
<!-- Game 1 -->
|
| 464 |
-
<div class="game-card
|
| 465 |
-
<div class="relative">
|
| 466 |
-
<
|
| 467 |
-
<div class="absolute top-2
|
| 468 |
-
|
| 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">
|
| 476 |
-
<
|
| 477 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 478 |
</div>
|
| 479 |
</div>
|
| 480 |
|
| 481 |
<!-- Game 2 -->
|
| 482 |
-
<div class="game-card
|
| 483 |
-
<div class="relative">
|
| 484 |
-
<
|
| 485 |
-
<
|
| 486 |
-
NEW
|
| 487 |
-
</div>
|
| 488 |
</div>
|
| 489 |
<div class="p-4">
|
| 490 |
-
<h3 class="text-xl font-bold mb-2">
|
| 491 |
-
<
|
| 492 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 493 |
</div>
|
| 494 |
</div>
|
| 495 |
|
| 496 |
<!-- Game 3 -->
|
| 497 |
-
<div class="game-card
|
| 498 |
-
<div class="relative">
|
| 499 |
-
<
|
| 500 |
-
<
|
| 501 |
-
VIP
|
| 502 |
-
</div>
|
| 503 |
</div>
|
| 504 |
<div class="p-4">
|
| 505 |
-
<h3 class="text-xl font-bold mb-2">
|
| 506 |
-
<
|
| 507 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 508 |
</div>
|
| 509 |
</div>
|
| 510 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 511 |
</div>
|
| 512 |
</section>
|
| 513 |
|
| 514 |
<!-- Promo Banner -->
|
| 515 |
-
<section class="py-
|
| 516 |
-
<div class="
|
| 517 |
-
<
|
| 518 |
-
|
| 519 |
-
</
|
| 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-
|
| 531 |
-
<div class="
|
| 532 |
-
<
|
|
|
|
|
|
|
|
|
|
| 533 |
|
| 534 |
-
<div class="grid grid-cols-1
|
| 535 |
-
|
| 536 |
-
|
| 537 |
-
<
|
| 538 |
-
|
| 539 |
-
|
| 540 |
-
|
| 541 |
-
<
|
| 542 |
-
|
| 543 |
-
|
| 544 |
-
|
| 545 |
-
<div class="
|
| 546 |
-
<div class="
|
| 547 |
-
|
| 548 |
-
|
| 549 |
-
|
| 550 |
-
|
| 551 |
-
|
| 552 |
-
|
| 553 |
-
|
| 554 |
-
|
| 555 |
-
|
| 556 |
-
|
| 557 |
-
</
|
| 558 |
-
<
|
| 559 |
-
|
| 560 |
-
|
| 561 |
-
|
| 562 |
-
|
| 563 |
-
|
| 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-
|
| 594 |
-
<div class="
|
| 595 |
-
<
|
|
|
|
|
|
|
|
|
|
| 596 |
|
| 597 |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 598 |
-
|
| 599 |
-
<div class="testimonial-card p-6 rounded-xl">
|
| 600 |
<div class="flex items-center mb-4">
|
| 601 |
-
<
|
| 602 |
<div>
|
| 603 |
-
<h4 class="font-bold">
|
| 604 |
-
<div class="flex
|
| 605 |
-
<
|
| 606 |
-
<
|
| 607 |
-
<
|
| 608 |
-
<
|
| 609 |
-
<
|
| 610 |
</div>
|
| 611 |
</div>
|
| 612 |
</div>
|
| 613 |
-
<p class="
|
| 614 |
-
<div class="text-
|
| 615 |
-
<i class="fas fa-gamepad mr-2"></i> Playing: Crypto Fish
|
| 616 |
-
</div>
|
| 617 |
</div>
|
| 618 |
|
| 619 |
-
|
| 620 |
-
<div class="testimonial-card p-6 rounded-xl">
|
| 621 |
<div class="flex items-center mb-4">
|
| 622 |
-
<
|
| 623 |
<div>
|
| 624 |
<h4 class="font-bold">Sarah K.</h4>
|
| 625 |
-
<div class="flex
|
| 626 |
-
<
|
| 627 |
-
<
|
| 628 |
-
<
|
| 629 |
-
<
|
| 630 |
-
<
|
| 631 |
</div>
|
| 632 |
</div>
|
| 633 |
</div>
|
| 634 |
-
<p class="
|
| 635 |
-
<div class="text-
|
| 636 |
-
<i class="fas fa-gamepad mr-2"></i> Playing: Blackjack Pro
|
| 637 |
-
</div>
|
| 638 |
</div>
|
| 639 |
|
| 640 |
-
|
| 641 |
-
<div class="testimonial-card p-6 rounded-xl">
|
| 642 |
<div class="flex items-center mb-4">
|
| 643 |
-
<
|
| 644 |
<div>
|
| 645 |
-
<h4 class="font-bold">
|
| 646 |
-
<div class="flex
|
| 647 |
-
<
|
| 648 |
-
<
|
| 649 |
-
<
|
| 650 |
-
<
|
| 651 |
-
<
|
| 652 |
</div>
|
| 653 |
</div>
|
| 654 |
</div>
|
| 655 |
-
<p class="
|
| 656 |
-
<div class="text-
|
| 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-
|
| 666 |
-
<div class="
|
| 667 |
-
<
|
|
|
|
|
|
|
|
|
|
| 668 |
|
| 669 |
<div class="space-y-4">
|
| 670 |
-
|
| 671 |
-
|
| 672 |
-
|
| 673 |
-
<
|
| 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-
|
| 679 |
-
<p>Yes! Nioplay operates under U.S. sweepstakes laws,
|
| 680 |
</div>
|
| 681 |
</div>
|
| 682 |
|
| 683 |
-
|
| 684 |
-
|
| 685 |
-
|
| 686 |
-
<
|
| 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-
|
| 692 |
-
<p>Absolutely!
|
| 693 |
</div>
|
| 694 |
</div>
|
| 695 |
|
| 696 |
-
|
| 697 |
-
|
| 698 |
-
|
| 699 |
-
<
|
| 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-
|
| 705 |
-
<p>
|
| 706 |
</div>
|
| 707 |
</div>
|
| 708 |
|
| 709 |
-
|
| 710 |
-
|
| 711 |
-
|
| 712 |
-
<
|
| 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-
|
| 718 |
-
<p>
|
| 719 |
</div>
|
| 720 |
</div>
|
| 721 |
|
| 722 |
-
|
| 723 |
-
|
| 724 |
-
|
| 725 |
-
<
|
| 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-
|
| 731 |
-
<p>
|
| 732 |
</div>
|
| 733 |
</div>
|
| 734 |
</div>
|
|
@@ -736,152 +577,143 @@
|
|
| 736 |
</section>
|
| 737 |
|
| 738 |
<!-- Final CTA -->
|
| 739 |
-
<section class="py-
|
| 740 |
-
<div class="
|
| 741 |
-
|
| 742 |
-
|
| 743 |
-
<
|
| 744 |
-
|
| 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="
|
| 757 |
-
<div class="
|
| 758 |
-
<div class="
|
| 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-
|
| 780 |
-
<
|
| 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 |
-
<
|
| 789 |
<ul class="space-y-2">
|
| 790 |
-
<li><a href="#" class="
|
| 791 |
-
<li><a href="#" class="
|
| 792 |
-
<li><a href="#" class="
|
|
|
|
| 793 |
</ul>
|
| 794 |
</div>
|
| 795 |
-
|
| 796 |
<div>
|
| 797 |
-
<
|
| 798 |
<ul class="space-y-2">
|
| 799 |
-
<li><a href="#" class="
|
| 800 |
-
<li><a href="#" class="
|
| 801 |
-
<li><a href="#" class="
|
|
|
|
| 802 |
</ul>
|
| 803 |
</div>
|
| 804 |
-
|
| 805 |
<div>
|
| 806 |
-
<
|
| 807 |
-
<
|
| 808 |
-
<
|
| 809 |
-
<
|
| 810 |
-
<
|
| 811 |
-
|
| 812 |
-
|
| 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 |
-
|
| 825 |
-
<p
|
| 826 |
</div>
|
| 827 |
</div>
|
| 828 |
</footer>
|
| 829 |
|
| 830 |
<script>
|
| 831 |
-
//
|
| 832 |
-
|
| 833 |
-
|
| 834 |
-
const
|
| 835 |
-
|
| 836 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 837 |
header.addEventListener('click', () => {
|
| 838 |
item.classList.toggle('active');
|
| 839 |
});
|
| 840 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 841 |
|
| 842 |
-
|
| 843 |
-
|
| 844 |
-
|
| 845 |
-
|
| 846 |
-
|
| 847 |
-
|
| 848 |
-
}
|
| 849 |
-
});
|
| 850 |
-
}, { threshold: 0.1 });
|
| 851 |
-
|
| 852 |
-
howItWorksSteps.forEach(step => {
|
| 853 |
-
observer.observe(step);
|
| 854 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 855 |
|
| 856 |
-
|
| 857 |
-
|
| 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
|