Commit History

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

ProjectGenesis commited on

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

ProjectGenesis commited on