────────────────────────────────────────────────────────────────────────────── PROJECT: “Nioplay – America’s Premier Sweepstakes Casino” LANDING PAGE – ULTRA-DETAILED VISUAL + INTERACTION SPEC (WITH PROGRESSION BARS) ────────────────────────────────────────────────────────────────────────────── ╭─ GLOBAL STYLE BASELINE ─────────────────────────────────────────────────────╮ │ • Fonts: Orbitron (headings) + Poppins (body) │ │ • Colors: --clr-orange:#FF6A00 · --clr-blue:#00E4FF · --clr-pink:#FF00D4 │ │ • Body: solid #000000, text #F5F5F5, overflow-x:hidden │ │ • Glass Cards: rgba(20,20,20,0.35) bg + blur(10px) + border-white/10 │ │ • Buttons: btn-orange (pulse-orange), btn-blue (flicker-blue) │ │ • All sections animate on scroll via GSAP: fade-in + translateY(-40px) │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 1: BACKGROUND CANVAS (id="meteorCanvas") ──────────────────────────╮ │ • Canvas overlay with 24 meteors at once. │ │ • Path: 45° diagonal (top-left to bottom-right) │ │ • Each meteor: 4px thick, 40–120px long, blur tail (10px) │ │ • Color cycling: #FF6A00 → #00E4FF → #FF00D4 │ │ • Meteor motion is requestAnimationFrame-based for 60fps │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 2: NAVBAR (id="navbar") ───────────────────────────────────────────╮ │ • Sticky top nav, transparent initially, turns .nav-scrolled on scroll │ │ • .nav-scrolled: bg-black/90 + backdrop-blur-md + drop-shadow │ │ • Logo: Orbitron neon-orange glowing │ │ • Buttons: "LOG IN" (btn-blue) and "SIGN UP" (btn-orange) │ │ - Orange: gradient + pulse; Blue: border + flicker effect │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 3: HERO (id="hero") ───────────────────────────────────────────────╮ │ • Centered layout, padding-y 96px │ │ • Headline: Orbitron 56px, neon-orange glowing text │ │ • Subheadline: Poppins 24px, max-w-[700px], centered │ │ • CTAs: 2 buttons → "Start Playing" (orange), "See How It Works" (blue) │ │ • Tagline below: "100% Legal · Instant Redeems · 18+ Only · No Purchase…" │ │ • Jackpot Counter (below headline): │ │ “$<span id='jackpot-amount'>8,437,928.00</span> WON IN JACKPOTS” │ │ - Animated via JS: +$5–15 every 3 seconds │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 4: TRUST BAR (id="trust") ─────────────────────────────────────────╮ │ • Pill-style trust badges (✔ KYC Compliant, 🔐 Crypto Friendly, etc.) │ │ • bg-black/60, border-y white/10, center aligned, glow on hover │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 5: WINNING MARQUEE (id="wins") ────────────────────────────────────╮ │ • Full-width marquee with Orbitron text 14px, glowing orange │ │ • Scrolls left-to-right infinitely, refreshes with new fake winners every │ │ 20 seconds via JS. │ │ • “💰 @SlotQueen won $215 … 🐟 @FishGodX hit $720 … 🎰 @VegasVibe $420 …” │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 6: HOW IT WORKS (id="how") ────────────────────────────────────────╮ │ • 3 Glass Cards: Sign Up & Verify ✅, Play Games 🎰, Redeem 💳 │ │ • Left: neon emoji icon in gradient circle │ │ • Right: Title (Orbitron), Copy (Poppins), mini glowing badge │ │ • Hover effect: slight lift + box shadow neon-orange │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 7: FEATURED GAMES (id="games") – w/ NEON PROGRESSION BARS ────────╮ │ 📦 CARD BASE │ │ • Transparent glass card, rounded-2xl, padding: 24px │ │ • Hover: scale(1.05), translateY(-10px), box-shadow neon glow │ │ 📊 VOLATILITY BAR │ │ • Label row: “Volatility” on left, value (e.g., “High”) on right │ │ • Bar: 100% width, 8px height, bg-white/10 │ │ • Fill: div with class `.vol-fill` + gradient-orange fill │ │ - `bg-gradient-to-r from-[#FF6A00] to-[#FF4500]` │ │ - Width via Tailwind class: `w-[80%]` or dynamic │ │ - Optional animation: drop-shadow flicker │ │ 📊 RTP BAR │ │ • Label row: “RTP” and actual % (e.g., “96.5%”) │ │ • Bar style matches Volatility bar │ │ • Fill: `.rtp-fill` + gradient-blue (`from-[#00E4FF] to-[#0099FF]`) │ │ • Width: `w-[96%]` or set via JS │ │ 🌟 STARS, TAGS, PROMO BADGE, PLAY BTN │ │ • Stars: 5x #FFD700 icons, then “4.7 / 5” text-sm │ │ • Tags: glowing pill badges per game (e.g., Jackpot, Bonus Buy) │ │ • Badge: “+1,000 FREE COINS” glowing pill │ │ • Button: btn-blue full-width │ │ 🧪 OPTIONAL CSS ANIMATION │ │ ```css │ │
@keyframes
neonPulse { │ │ 0%,100% { filter: drop-shadow(0 0 5px rgba(255,106,0,.8)); } │ │ 50% { filter: drop-shadow(0 0 15px rgba(255,106,0,1)); } │ │ } │ │ .vol-fill.neon-glow-orange { animation: neonPulse 2s infinite; } │ │ .rtp-fill.neon-glow-blue { animation: neonPulse 2s infinite; } │ │ ``` │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 8: PROMO BANNER (id="promo") ──────────────────────────────────────╮ │ • 🎁 emoji + Headline: “LIMITED-TIME BONUS: GET 300% MORE IN FREE COINS” │ │ • Input + Apply field (bonus code) with CTA “CLAIM NOW” in btn-orange │ │ • Glowing border + mini coin decoration background │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 9: WHY NIOPLAY (id="why") ─────────────────────────────────────────╮ │ • 6 Grid cards (3x2), alternating glow-orange / glow-blue │ │ • Icons: 🕒 🧾 📱 🧠 🎲 ✅ │ │ • Title: Orbitron + glow, Copy: Poppins 16px │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 10: TESTIMONIALS (id="testimonials") ──────────────────────────────╮ │ • 3 glass cards │ │ • Top: Avatar (letter in gradient bubble), Username (glow text), Game Tag │ │ • Stars: 5 #FFD700 icons │ │ • Quote: Italic, 16px, opacity-90 │ │ • Badge: “Redeemed $720 to Debit Card” or “VIP Tier 4” │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 11: FAQ (id="faq") ────────────────────────────────────────────────╮ │ • Accordion layout, glass items w/ 1px bottom border │ │ • Questions: Orbitron 18px, glow-orange on hover │ │ • Toggle: + / – switch with GSAP height transition │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 12: FINAL CTA (id="cta") ──────────────────────────────────────────╮ │ • Centered, max-w-680 │ │ • Title: Orbitron glow-orange, 40px text │ │ • Button: “START PLAYING NOW” btn-orange, pulse, xl │ │ • Small print below (age, legal, etc.) │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SECTION 13: FOOTER (id="footer") ──────────────────────────────────────────╮ │ • Top: Logo left, nav center, social icons right │ │ • Bottom: “© 2025 Nioplay Inc. All rights reserved.” │ │ • Hover links glow (orange); socials glow-blue │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭─ SCRIPT HOOKS SUMMARY ──────────────────────────────────────────────────────╮ │ ✅ MeteorCanvas: meteor animation from canvas streaks │ │ ✅ updateJackpot(): increments +$5–15 every 3 seconds │ │ ✅ initMarquee(): rotates player wins in ticker every 20s │ │ ✅ GSAP section fade-in + coin burst on CTA hover │ │ ✅ Accordion toggle open/close + icon switch │ ╰─────────────────────────────────────────────────────────────────────────────╯ MANDATORY RULES: • DO NOT invent placeholder copy, games, or structure. • Use all IDs and classes as written to match external JS/CSS system. • Respect every spacing, color, glow, and layout spec. ────────────────────────────────────────────────────────────────────────────── - Follow Up Deployment
441c1c9
verified