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
f1cbbd7
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nioplay - Next-Gen Sweepstakes Casino | Play Free, Win Real Prizes</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <style> | |
| :root { | |
| --neon-orange: #FF6A00; | |
| --electric-blue: #00E4FF; | |
| --gold-light: #FFD700; | |
| --gold-dark: #FFA500; | |
| --bg-dark: #0B0B0B; | |
| --bg-light: #1A1A1B; | |
| --text-light: #F5F5F5; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-light) 100%); | |
| color: var(--text-light); | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Orbitron', sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .neon-orange { | |
| color: var(--neon-orange); | |
| text-shadow: 0 0 10px rgba(255, 106, 0, 0.7), 0 0 20px rgba(255, 106, 0, 0.5); | |
| } | |
| .neon-blue { | |
| color: var(--electric-blue); | |
| text-shadow: 0 0 10px rgba(0, 228, 255, 0.7), 0 0 20px rgba(0, 228, 255, 0.5); | |
| } | |
| .btn-orange { | |
| background-color: var(--neon-orange); | |
| box-shadow: 0 0 15px rgba(255, 106, 0, 0.7); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-orange:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 25px rgba(255, 106, 0, 0.9); | |
| } | |
| .btn-blue { | |
| border: 2px solid var(--electric-blue); | |
| color: var(--electric-blue); | |
| box-shadow: 0 0 15px rgba(0, 228, 255, 0.5); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-blue:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 25px rgba(0, 228, 255, 0.8); | |
| background-color: rgba(0, 228, 255, 0.1); | |
| } | |
| .glow-border { | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 0 10px rgba(255, 106, 0, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .glow-border:hover { | |
| border: 1px solid rgba(255, 106, 0, 0.5); | |
| box-shadow: 0 0 20px rgba(255, 106, 0, 0.5); | |
| } | |
| .glass-card { | |
| background: rgba(15, 15, 15, 0.6); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .coin { | |
| position: absolute; | |
| background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 100%); | |
| border-radius: 50%; | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); | |
| z-index: 0; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(100vh) rotate(0deg); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100px) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); | |
| } | |
| } | |
| .flicker { | |
| animation: flicker 3s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { | |
| text-shadow: 0 0 5px var(--electric-blue), | |
| 0 0 10px var(--electric-blue), | |
| 0 0 20px var(--electric-blue), | |
| 0 0 40px var(--electric-blue); | |
| } | |
| 20%, 24%, 55% { | |
| text-shadow: none; | |
| } | |
| } | |
| .scroll-fade { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.8s ease; | |
| } | |
| .scroll-fade.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .sticky-nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| background: rgba(11, 11, 11, 0.8); | |
| transition: all 0.3s ease; | |
| } | |
| .sticky-nav.scrolled { | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .game-card:hover .game-image { | |
| transform: scale(1.05); | |
| } | |
| .rtp-bar { | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .rtp-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--neon-orange), var(--gold-light)); | |
| animation: rtpFill 1.5s ease-out forwards; | |
| } | |
| @keyframes rtpFill { | |
| from { width: 0; } | |
| to { width: var(--rtp-value); } | |
| } | |
| .accordion-item { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .accordion-item.active .accordion-content { | |
| max-height: 300px; | |
| } | |
| .accordion-item.active .accordion-icon { | |
| transform: rotate(45deg); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.2); | |
| filter: drop-shadow(0 0 5px var(--electric-blue)); | |
| } | |
| </style> | |
| </head> | |
| <body class="relative overflow-x-hidden"> | |
| <!-- Floating Gold Coins --> | |
| <div id="coin-container"></div> | |
| <!-- Sticky Navbar --> | |
| <nav class="sticky-nav py-4 px-6 flex justify-between items-center"> | |
| <div class="text-2xl font-bold neon-orange">NIOPLAY</div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="px-4 py-2 rounded-full btn-blue">Log In</a> | |
| <a href="#" class="px-4 py-2 rounded-full btn-orange pulse">Sign Up</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 px-6 text-center z-10"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-orange">PLAY FOR FREE. WIN REAL PRIZES.</h1> | |
| <p class="text-xl md:text-2xl mb-10">Nioplay is the next-gen sweepstakes casino — legal, rewarding, and free to play.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4 mb-10"> | |
| <a href="#" class="px-8 py-4 rounded-full btn-orange text-lg font-bold">Start Playing</a> | |
| <a href="#" class="px-8 py-4 rounded-full btn-blue text-lg font-bold">See How It Works</a> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4 text-sm md:text-base neon-blue"> | |
| <span>100% Legal</span> | |
| <span>•</span> | |
| <span>Instant Crypto Cashouts</span> | |
| <span>•</span> | |
| <span>18+ Only</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust Bar --> | |
| <section class="py-12 px-6 bg-gradient-to-r from-transparent via-black/50 to-transparent"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-6 text-center"> | |
| <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <p class="font-bold">U.S. Legal</p> | |
| </div> | |
| <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <p class="font-bold">KYC Compliant</p> | |
| </div> | |
| <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <p class="font-bold">Crypto Friendly</p> | |
| </div> | |
| <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <p class="font-bold">Instant Redeems</p> | |
| </div> | |
| <div class="glass-card p-4 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <p class="font-bold">18+ Verified</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 px-6"> | |
| <div class="max-w-4xl mx-auto text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">HOW NIOPLAY WORKS</h2> | |
| <p class="text-lg">Get started in just 3 simple steps</p> | |
| </div> | |
| <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8"> | |
| <div class="scroll-fade glass-card p-8 text-center"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-4 neon-orange">SIGN UP</h3> | |
| <p>Get free coins instantly, no purchase needed. Just register with your email to start playing.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-8 text-center"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-4 neon-orange">PLAY GAMES</h3> | |
| <p>Choose from 1,000+ slots, blackjack, fish games and live dealer tables. All free to play.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-8 text-center"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-4 neon-orange">WIN PRIZES</h3> | |
| <p>Redeem your winnings as crypto, debit card deposits, gift cards or sweepstakes entries.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Games --> | |
| <section class="py-20 px-6 bg-gradient-to-b from-black/50 to-transparent"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">FEATURED GAMES</h2> | |
| <p class="text-lg">Play the hottest sweepstakes casino games online</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Game 1 --> | |
| <div class="game-card glass-card overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20"> | |
| <div class="relative overflow-hidden"> | |
| <div class="absolute top-2 left-2 bg-orange-500 text-xs font-bold px-2 py-1 rounded neon-orange">JACKPOT</div> | |
| <div class="absolute top-2 right-2 bg-blue-500 text-xs font-bold px-2 py-1 rounded neon-blue">LIVE DEALER</div> | |
| <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"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2 neon-orange">Blackjack Pro</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-yellow-400 mr-1">⭐</span> | |
| <span class="text-sm mr-4">4.9/5</span> | |
| <div class="flex-1"> | |
| <div class="text-xs mb-1">RTP: 98.5%</div> | |
| <div class="rtp-bar"> | |
| <div class="rtp-fill" style="--rtp-value: 98.5%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <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> | |
| <a href="#" class="px-4 py-2 rounded-full btn-orange text-sm">Play Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 2 --> | |
| <div class="game-card glass-card overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20"> | |
| <div class="relative overflow-hidden"> | |
| <div class="absolute top-2 left-2 bg-orange-500 text-xs font-bold px-2 py-1 rounded neon-orange">BONUS BUY</div> | |
| <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"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2 neon-orange">Golden Fish Fortune</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-yellow-400 mr-1">⭐</span> | |
| <span class="text-sm mr-4">4.7/5</span> | |
| <div class="flex-1"> | |
| <div class="text-xs mb-1">RTP: 96.2%</div> | |
| <div class="rtp-bar"> | |
| <div class="rtp-fill" style="--rtp-value: 96.2%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <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> | |
| <a href="#" class="px-4 py-2 rounded-full btn-orange text-sm">Play Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 3 --> | |
| <div class="game-card glass-card overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20"> | |
| <div class="relative overflow-hidden"> | |
| <div class="absolute top-2 left-2 bg-orange-500 text-xs font-bold px-2 py-1 rounded neon-orange">JACKPOT</div> | |
| <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"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2 neon-orange">Mega Slot Bonanza</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-yellow-400 mr-1">⭐</span> | |
| <span class="text-sm mr-4">4.8/5</span> | |
| <div class="flex-1"> | |
| <div class="text-xs mb-1">RTP: 97.1%</div> | |
| <div class="rtp-bar"> | |
| <div class="rtp-fill" style="--rtp-value: 97.1%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <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> | |
| <a href="#" class="px-4 py-2 rounded-full btn-orange text-sm">Play Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="px-8 py-3 rounded-full btn-blue font-bold">View All Games</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Promo Banner --> | |
| <section class="py-12 px-6 bg-gradient-to-r from-orange-900/50 to-blue-900/50"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h3 class="text-2xl md:text-3xl font-bold mb-4 neon-orange">CLAIM $3 IN FREE COINS</h3> | |
| <p class="text-lg mb-6">Verify your account now to get your instant bonus</p> | |
| <a href="#" class="px-8 py-4 rounded-full btn-orange text-lg font-bold pulse">Claim Now</a> | |
| </div> | |
| </section> | |
| <!-- Why Nioplay --> | |
| <section class="py-20 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">WHY PLAYERS CHOOSE NIOPLAY</h2> | |
| <p class="text-lg">The ultimate sweepstakes gaming experience</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3 neon-orange">24h Crypto Redemptions</h3> | |
| <p>Get your winnings in Bitcoin, Ethereum or USDT within 24 hours. No waiting, no hassle.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3 neon-orange">Legal Sweepstakes Model</h3> | |
| <p>Fully compliant with U.S. sweepstakes laws. Play with confidence knowing it's 100% legal.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3 neon-orange">No Download Needed</h3> | |
| <p>Instant play in your browser. No apps to install, works on all devices.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3 neon-orange">VIP Rakeback System</h3> | |
| <p>Earn up to 25% rakeback as you climb the VIP tiers. The more you play, the more you earn.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3 neon-orange">1,000+ Game Catalog</h3> | |
| <p>Massive selection of slots, table games, live dealers and fish games. Always adding new titles.</p> | |
| </div> | |
| <div class="scroll-fade glass-card p-6 hover:bg-black/30 transition-all duration-300"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3 neon-orange">Daily Free Coin Rewards</h3> | |
| <p>Log in daily to claim free coins. No deposit required to keep playing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 px-6 bg-gradient-to-b from-black/50 to-transparent"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">PLAYER TESTIMONIALS</h2> | |
| <p class="text-lg">See what our community is saying</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="scroll-fade glass-card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-500 mr-4">👤</div> | |
| <div> | |
| <h4 class="font-bold">Jason M.</h4> | |
| <div class="flex"> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm italic">"Won $500 in Bitcoin playing blackjack! Withdrawal was in my wallet the next morning. Nioplay is legit!"</p> | |
| <div class="mt-3 text-xs text-orange-500">Played: Blackjack Pro</div> | |
| </div> | |
| <div class="scroll-fade glass-card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-500 mr-4">👤</div> | |
| <div> | |
| <h4 class="font-bold">Sarah K.</h4> | |
| <div class="flex"> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="mt-3 text-xs text-orange-500">Played: Golden Fish Fortune</div> | |
| </div> | |
| <div class="scroll-fade glass-card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-500 mr-4">👤</div> | |
| <div> | |
| <h4 class="font-bold">Mike T.</h4> | |
| <div class="flex"> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| <span class="text-yellow-400">⭐</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="mt-3 text-xs text-orange-500">Played: Mega Slot Bonanza</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-20 px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-orange">FREQUENTLY ASKED QUESTIONS</h2> | |
| <p class="text-lg">Get answers to common questions about Nioplay</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="accordion-item glass-card p-4 rounded-lg"> | |
| <div class="flex justify-between items-center cursor-pointer"> | |
| <h3 class="font-bold neon-orange">Is Nioplay legal in the United States?</h3> | |
| <span class="accordion-icon text-xl transition-transform">+</span> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="accordion-item glass-card p-4 rounded-lg"> | |
| <div class="flex justify-between items-center cursor-pointer"> | |
| <h3 class="font-bold neon-orange">Can I really win real money without depositing?</h3> | |
| <span class="accordion-icon text-xl transition-transform">+</span> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="accordion-item glass-card p-4 rounded-lg"> | |
| <div class="flex justify-between items-center cursor-pointer"> | |
| <h3 class="font-bold neon-orange">What games are available on Nioplay?</h3> | |
| <span class="accordion-icon text-xl transition-transform">+</span> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="accordion-item glass-card p-4 rounded-lg"> | |
| <div class="flex justify-between items-center cursor-pointer"> | |
| <h3 class="font-bold neon-orange">How fast are redemptions processed?</h3> | |
| <span class="accordion-icon text-xl transition-transform">+</span> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="accordion-item glass-card p-4 rounded-lg"> | |
| <div class="flex justify-between items-center cursor-pointer"> | |
| <h3 class="font-bold neon-orange">Is there a mobile app?</h3> | |
| <span class="accordion-icon text-xl transition-transform">+</span> | |
| </div> | |
| <div class="accordion-content mt-2"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 px-6 bg-gradient-to-b from-black via-orange-900/50 to-black"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-orange">JOIN 1,000,000+ PLAYERS WINNING DAILY</h2> | |
| <p class="text-xl mb-10">Sign up now and claim your $3 free coin bonus</p> | |
| <a href="#" class="px-12 py-5 rounded-full btn-orange text-xl font-bold pulse">Start Playing Now</a> | |
| <p class="text-xs mt-6 opacity-70">No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform.</p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-black"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4 neon-orange">NIOPLAY</h3> | |
| <p class="text-sm">The next-gen sweepstakes casino platform. Play free, win real prizes.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 neon-blue">LINKS</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Home</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Games</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Promotions</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">VIP Club</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 neon-blue">LEGAL</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Terms of Service</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Responsible Gaming</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition-colors">Contact Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 neon-blue">CONNECT</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon text-2xl hover:text-blue-400">📘</a> | |
| <a href="#" class="social-icon text-2xl hover:text-blue-300">🐦</a> | |
| <a href="#" class="social-icon text-2xl hover:text-purple-400">🎮</a> | |
| <a href="#" class="social-icon text-2xl hover:text-red-500">📹</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-sm"> | |
| <p>© 2023 Nioplay. All rights reserved. Nioplay operates as a legal sweepstakes platform in the United States.</p> | |
| <p class="mt-2">This is not a gambling site. No purchase necessary to play or win. 18+ only.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Create floating coins | |
| function createCoins() { | |
| const container = document.getElementById('coin-container'); | |
| const coinCount = window.innerWidth < 768 ? 15 : 30; | |
| for (let i = 0; i < coinCount; i++) { | |
| const coin = document.createElement('div'); | |
| coin.className = 'coin'; | |
| // Random size between 8px and 20px | |
| const size = Math.random() * 12 + 8; | |
| coin.style.width = `${size}px`; | |
| coin.style.height = `${size}px`; | |
| // Random position | |
| coin.style.left = `${Math.random() * 100}vw`; | |
| // Random animation duration and delay | |
| const duration = Math.random() * 10 + 10; | |
| const delay = Math.random() * 15; | |
| coin.style.animationDuration = `${duration}s`; | |
| coin.style.animationDelay = `${delay}s`; | |
| // Random z-index (some behind, some in front) | |
| coin.style.zIndex = Math.random() > 0.7 ? '10' : '0'; | |
| // Apply blur to some coins | |
| if (Math.random() > 0.5) { | |
| coin.style.filter = 'blur(1px)'; | |
| coin.style.opacity = '0.7'; | |
| } | |
| container.appendChild(coin); | |
| } | |
| } | |
| // Scroll animation for elements | |
| function animateOnScroll() { | |
| const elements = document.querySelectorAll('.scroll-fade'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if (elementPosition < screenPosition) { | |
| element.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Accordion functionality | |
| function setupAccordion() { | |
| const items = document.querySelectorAll('.accordion-item'); | |
| items.forEach(item => { | |
| const header = item.querySelector('h3'); | |
| header.addEventListener('click', () => { | |
| item.classList.toggle('active'); | |
| }); | |
| }); | |
| } | |
| // Sticky navbar on scroll | |
| function handleNavbarScroll() { | |
| const navbar = document.querySelector('.sticky-nav'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('scrolled'); | |
| } else { | |
| navbar.classList.remove('scrolled'); | |
| } | |
| }); | |
| } | |
| // Initialize everything | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createCoins(); | |
| setupAccordion(); | |
| handleNavbarScroll(); | |
| window.addEventListener('scroll', animateOnScroll); | |
| animateOnScroll(); // Run once on load | |
| }); | |
| </script> | |
| <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> | |
| </html> |