-
1.52 kB
initial commit
-
222 Bytes
Build a mobile-first, cinematic landing page for **Nioplay**, a legally structured U.S. sweepstakes casino. Use a dark, futuristic neon theme, immersive animated floating coins (canvas-based), glassmorphism panels, and optimized conversion copy as written below. No placeholder text. No assumptions. GLOBAL VISUAL SYSTEM ──────────────────── • Background gradient: 135° → `#0B0B0B → #1A1A1A` • Primary Accent: `#FF6A00` (CTAs, glow elements) • Secondary Accent: `#00E4FF` (outline buttons, links) • Text: `#F5F5F5` (primary), `#DDDDDD` (muted) • Typography: - Titles: `Orbitron`, uppercase, neon glow - Body: `Poppins`, light white, clean • Hover behavior: - All interactive elements scale to `1.05`, glow with matching accent - Buttons shimmer or flicker based on role - Transitions: `ease 0.25s` or `ease 0.3s` • Glassmorphism: - Cards use `rgba()` backgrounds, soft blur (`backdrop-filter: blur(8px)`), and rounded edges — COIN ANIMATION SYSTEM (FULL PAGE IMMERSION) ──────────────────────────────────────────── Use `<canvas id="coinCanvas">`, `position: fixed`, `z-index: -1`, full width/height. COIN BEHAVIOR: - 40–60 coins float **straight upward only** - No wobble, no random drift - Coin style: - Gold gradient: `#FFD700 → #FFA500` - Glow via: `filter: drop-shadow(0 0 6px #FFD700)` - Three coin layers: 1. Background drift (behind all content) 2. Mid-layer (behind text headings and hero cards) 3. Foreground: appears on hover or scroll-triggered animations INTERACTIVITY: - Hover on CTA or Game Card: 5–8 coins burst upward with GSAP tween - Scroll to new section: short 2–3 coin burst - Game card hover: magnet-style pull (50–100px inward) PERFORMANCE: - `requestAnimationFrame()` or GSAP ticker - Adapt to devicePixelRatio - Respect `prefers-reduced-motion` STICKY NAVBAR ───────────── - Fixed, top: full width, glass background (`backdrop-filter: blur(10px)`) - Left: Nioplay logo - Right: - **[Sign Up]** → solid neon orange, pulsing glow - **[Log In]** → outline blue, flicker hover effect - Navbar becomes slightly more opaque on scroll — SECTION 1 — HERO ──────────────── Headline: > **PLAY FOR FREE. WIN REAL PRIZES.** (Orbitron, neon orange, centered) Subheadline: > *Nioplay is America’s most popular sweepstakes casino — Fully legal, Fast rewards, and Always Free to Play.* Buttons: - [**Start Playing**] → neon orange shimmer - [**See How It Works**] → blue outline + flicker Microtrust Line: > **100% Legal · Instant Redeems · 18+ Only** Coin FX: - Coins float upward behind headline - CTA button hover = burst animation of foreground coins — SECTION 2 — TRUST BAR ────────────────────── Horizontal strip of glowing icons with text: ✔ **U.S. Legal** 🔐 **KYC Compliant** 🪙 **Crypto Friendly** ⚡ **Instant Redeems** 🔞 **18+ Verified** - Each icon glows with neon ring - Flicker and label pulse on hover — SECTION 3 — HOW NIOPLAY WORKS ────────────────────────────── Vertical scroll-reveal with 3 cards. All use the **same glowing orange pill-style bonus badge** for consistency. 1. ✅ **Sign Up & Verify** Description: *Create your account in seconds. Verify your identity to unlock daily bonuses and redemptions.* 🔶 Pill Badge: **+300% FREE COINS ON VERIFICATION** 2. 🎰 **Play Games & Win** Description: *Explore 1,000+ games including Megaways, fish shooters, blackjack, and live dealers. Earn Gold Coins or Sweeps Coins with every spin.* 🔶 Pill Badge: **100% MOBILE FRIENDLY – NO DOWNLOAD NEEDED** 3. 💳 **Redeem for Real Rewards** Description: *Withdraw prizes in 24 hours or less via Debit Card, Bank Transfer, Crypto, or Gift Cards. Fast, easy, secure.* 🔶 Pill Badge: **24H CRYPTO + CASH REDEMPTION GUARANTEED** Divider lines between cards trigger a **coin spark burst** (3–4 coins upward). Each card fades and slides in on scroll. — SECTION 4 — FEATURED GAME SLIDER ──────────────────────────────── Mobile: scroll-snap horizontal Desktop: 6-card carousel (SwiperJS) Each game card includes: - Game title (Orbitron, white glow) - Image preview with glowing outline - ★ Rating (e.g., ★★★★☆ 4.7 / 5) - Volatility meter (orange glowing progress bar) - RTP meter (blue glowing bar) - Bonus Pill: **+1,000 Free Coins** - Feature Tags: e.g. “Jackpot”, “Bonus Buy”, with glow + flicker - [Play Now] → Orange CTA with glow + coin burst hover Game Hover: - Zoom in (`scale 1.05`), glow intensifies - Coins magnet-swirled toward center — SECTION 5 — PROMO BANNER ───────────────────────── Headline: 🎁 **LIMITED-TIME BONUS: GET 300% MORE IN FREE COINS** Subheadline: 💬 *Verify your account and claim your free coins instantly — No Purchase Necessary.* Bonus Code Input: - Placeholder: “Enter bonus code (optional)” - [Apply] button flickers when user types CTA Button: **[CLAIM NOW]** — pulsing orange glow, burst effect on hover Fine print (small, muted): *No purchase necessary. Offer valid for verified accounts only. 18+ to play.* — SECTION 6 — WHY NIOPLAY GRID ──────────────────────────── 6 glowing icon tiles. Flicker and intensify on hover. | Icon | Title | Text | |------|-------|------| | 🕒 | 24h Crypto Redemptions | Get your crypto prizes fast — verified redemptions processed in 24 hours. | | 🧾 | Legal Sweepstakes Model | Nioplay is fully U.S.-compliant under federal sweepstakes law. | | 📱 | No Download Needed | Instant-play on mobile or desktop with no app required. | | 🧠 | VIP Rakeback System | Climb tiers and earn daily rakeback, streak bonuses, and exclusive perks. | | 🎲 | 1,000+ Game Catalog | From classic slots to high-volatility bonus buys — something for every style. | | ✅ | Fast KYC Process | Identity verification is instant — no waiting days to redeem. | — SECTION 7 — TESTIMONIALS ───────────────────────── Carousel with 3 card mobile / 3 cards desktop. Each includes: • Glowing circular avatar • Username (e.g., @TonyTrickz) • Game played (e.g., 🎮 Fish Frenzy X) • Star rating (e.g., ⭐⭐⭐⭐⭐) • Quote (25 words max) • Bonus info: e.g. “Redeemed $75 in Crypto” Hover glow on quote and avatar. Carousel autoplays + swipeable. — SECTION 8 — FAQ ACCORDION ────────────────────────── Neon accordion layout: Q: Is Nioplay legal? A: *Yes. Nioplay is a U.S.-based sweepstakes casino, fully compliant with sweepstakes gaming laws…* Q: Can I win real money? A: *Absolutely. You can win gift cards, crypto redemptions, and other cash-equivalent prizes…* Q: What games can I play? A: *Nioplay offers slots, table games, live dealers, fish games, and instant win titles…* Q: Do I need to make a purchase? A: *No purchase is required. You’ll receive daily free coins…* Q: How fast are redeems? A: *All redemptions are processed within 24 hours for verified users.* Interaction: - Question expands on click - Toggle icon glows/flickers on hover - Coin blur in background layer (soft + subtle) — SECTION 9 — FINAL CTA ────────────────────── Headline: **JOIN 1,000,000+ PLAYERS WINNING DAILY ON NIOPLAY** CTA Button: **[START PLAYING NOW]** — giant pulsing orange glow + coin burst Subtext (centered, small): *No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform and is fully compliant with all Federal and State laws.* Coin FX: - Coins float upward faster + denser - Visual climax effect — FOOTER ────── - Background: solid black - Text links (glow on hover): Terms of Service · Privacy Policy · FAQ · Responsible Gaming · Contact Support - Social icons: Facebook, Instagram, Twitter/X, Discord — hover = blue neon glow - Mini neon Nioplay logo - Copyright: *© 2025 Nioplay Inc. All rights reserved.* — TECH SPECS ────────── • Tech stack: - Vanilla HTML5 - Modular BEM-based `styles.css` - `script.js` = GSAP v3.13, SwiperJS • Optimized: - Preload fonts - Lazy-load images - Defer all JS - LCP < 2.5s, CLS < 0.05 • Accessibility: - Keyboard focus ring - `aria-labels` on all key elements - `role="status"` for coin bursts - Respects `prefers-reduced-motion` - Initial Deployment
-
44.7 kB
Build a mobile-first, cinematic landing page for **Nioplay**, a legally structured U.S. sweepstakes casino. Use a dark, futuristic neon theme, immersive animated floating coins (canvas-based), glassmorphism panels, and optimized conversion copy as written below. No placeholder text. No assumptions. GLOBAL VISUAL SYSTEM ──────────────────── • Background gradient: 135° → `#0B0B0B → #1A1A1A` • Primary Accent: `#FF6A00` (CTAs, glow elements) • Secondary Accent: `#00E4FF` (outline buttons, links) • Text: `#F5F5F5` (primary), `#DDDDDD` (muted) • Typography: - Titles: `Orbitron`, uppercase, neon glow - Body: `Poppins`, light white, clean • Hover behavior: - All interactive elements scale to `1.05`, glow with matching accent - Buttons shimmer or flicker based on role - Transitions: `ease 0.25s` or `ease 0.3s` • Glassmorphism: - Cards use `rgba()` backgrounds, soft blur (`backdrop-filter: blur(8px)`), and rounded edges — COIN ANIMATION SYSTEM (FULL PAGE IMMERSION) ──────────────────────────────────────────── Use `<canvas id="coinCanvas">`, `position: fixed`, `z-index: -1`, full width/height. COIN BEHAVIOR: - 40–60 coins float **straight upward only** - No wobble, no random drift - Coin style: - Gold gradient: `#FFD700 → #FFA500` - Glow via: `filter: drop-shadow(0 0 6px #FFD700)` - Three coin layers: 1. Background drift (behind all content) 2. Mid-layer (behind text headings and hero cards) 3. Foreground: appears on hover or scroll-triggered animations INTERACTIVITY: - Hover on CTA or Game Card: 5–8 coins burst upward with GSAP tween - Scroll to new section: short 2–3 coin burst - Game card hover: magnet-style pull (50–100px inward) PERFORMANCE: - `requestAnimationFrame()` or GSAP ticker - Adapt to devicePixelRatio - Respect `prefers-reduced-motion` STICKY NAVBAR ───────────── - Fixed, top: full width, glass background (`backdrop-filter: blur(10px)`) - Left: Nioplay logo - Right: - **[Sign Up]** → solid neon orange, pulsing glow - **[Log In]** → outline blue, flicker hover effect - Navbar becomes slightly more opaque on scroll — SECTION 1 — HERO ──────────────── Headline: > **PLAY FOR FREE. WIN REAL PRIZES.** (Orbitron, neon orange, centered) Subheadline: > *Nioplay is America’s most popular sweepstakes casino — Fully legal, Fast rewards, and Always Free to Play.* Buttons: - [**Start Playing**] → neon orange shimmer - [**See How It Works**] → blue outline + flicker Microtrust Line: > **100% Legal · Instant Redeems · 18+ Only** Coin FX: - Coins float upward behind headline - CTA button hover = burst animation of foreground coins — SECTION 2 — TRUST BAR ────────────────────── Horizontal strip of glowing icons with text: ✔ **U.S. Legal** 🔐 **KYC Compliant** 🪙 **Crypto Friendly** ⚡ **Instant Redeems** 🔞 **18+ Verified** - Each icon glows with neon ring - Flicker and label pulse on hover — SECTION 3 — HOW NIOPLAY WORKS ────────────────────────────── Vertical scroll-reveal with 3 cards. All use the **same glowing orange pill-style bonus badge** for consistency. 1. ✅ **Sign Up & Verify** Description: *Create your account in seconds. Verify your identity to unlock daily bonuses and redemptions.* 🔶 Pill Badge: **+300% FREE COINS ON VERIFICATION** 2. 🎰 **Play Games & Win** Description: *Explore 1,000+ games including Megaways, fish shooters, blackjack, and live dealers. Earn Gold Coins or Sweeps Coins with every spin.* 🔶 Pill Badge: **100% MOBILE FRIENDLY – NO DOWNLOAD NEEDED** 3. 💳 **Redeem for Real Rewards** Description: *Withdraw prizes in 24 hours or less via Debit Card, Bank Transfer, Crypto, or Gift Cards. Fast, easy, secure.* 🔶 Pill Badge: **24H CRYPTO + CASH REDEMPTION GUARANTEED** Divider lines between cards trigger a **coin spark burst** (3–4 coins upward). Each card fades and slides in on scroll. — SECTION 4 — FEATURED GAME SLIDER ──────────────────────────────── Mobile: scroll-snap horizontal Desktop: 6-card carousel (SwiperJS) Each game card includes: - Game title (Orbitron, white glow) - Image preview with glowing outline - ★ Rating (e.g., ★★★★☆ 4.7 / 5) - Volatility meter (orange glowing progress bar) - RTP meter (blue glowing bar) - Bonus Pill: **+1,000 Free Coins** - Feature Tags: e.g. “Jackpot”, “Bonus Buy”, with glow + flicker - [Play Now] → Orange CTA with glow + coin burst hover Game Hover: - Zoom in (`scale 1.05`), glow intensifies - Coins magnet-swirled toward center — SECTION 5 — PROMO BANNER ───────────────────────── Headline: 🎁 **LIMITED-TIME BONUS: GET 300% MORE IN FREE COINS** Subheadline: 💬 *Verify your account and claim your free coins instantly — No Purchase Necessary.* Bonus Code Input: - Placeholder: “Enter bonus code (optional)” - [Apply] button flickers when user types CTA Button: **[CLAIM NOW]** — pulsing orange glow, burst effect on hover Fine print (small, muted): *No purchase necessary. Offer valid for verified accounts only. 18+ to play.* — SECTION 6 — WHY NIOPLAY GRID ──────────────────────────── 6 glowing icon tiles. Flicker and intensify on hover. | Icon | Title | Text | |------|-------|------| | 🕒 | 24h Crypto Redemptions | Get your crypto prizes fast — verified redemptions processed in 24 hours. | | 🧾 | Legal Sweepstakes Model | Nioplay is fully U.S.-compliant under federal sweepstakes law. | | 📱 | No Download Needed | Instant-play on mobile or desktop with no app required. | | 🧠 | VIP Rakeback System | Climb tiers and earn daily rakeback, streak bonuses, and exclusive perks. | | 🎲 | 1,000+ Game Catalog | From classic slots to high-volatility bonus buys — something for every style. | | ✅ | Fast KYC Process | Identity verification is instant — no waiting days to redeem. | — SECTION 7 — TESTIMONIALS ───────────────────────── Carousel with 3 card mobile / 3 cards desktop. Each includes: • Glowing circular avatar • Username (e.g., @TonyTrickz) • Game played (e.g., 🎮 Fish Frenzy X) • Star rating (e.g., ⭐⭐⭐⭐⭐) • Quote (25 words max) • Bonus info: e.g. “Redeemed $75 in Crypto” Hover glow on quote and avatar. Carousel autoplays + swipeable. — SECTION 8 — FAQ ACCORDION ────────────────────────── Neon accordion layout: Q: Is Nioplay legal? A: *Yes. Nioplay is a U.S.-based sweepstakes casino, fully compliant with sweepstakes gaming laws…* Q: Can I win real money? A: *Absolutely. You can win gift cards, crypto redemptions, and other cash-equivalent prizes…* Q: What games can I play? A: *Nioplay offers slots, table games, live dealers, fish games, and instant win titles…* Q: Do I need to make a purchase? A: *No purchase is required. You’ll receive daily free coins…* Q: How fast are redeems? A: *All redemptions are processed within 24 hours for verified users.* Interaction: - Question expands on click - Toggle icon glows/flickers on hover - Coin blur in background layer (soft + subtle) — SECTION 9 — FINAL CTA ────────────────────── Headline: **JOIN 1,000,000+ PLAYERS WINNING DAILY ON NIOPLAY** CTA Button: **[START PLAYING NOW]** — giant pulsing orange glow + coin burst Subtext (centered, small): *No purchase necessary. 18+ only. Nioplay is a sweepstakes gaming platform and is fully compliant with all Federal and State laws.* Coin FX: - Coins float upward faster + denser - Visual climax effect — FOOTER ────── - Background: solid black - Text links (glow on hover): Terms of Service · Privacy Policy · FAQ · Responsible Gaming · Contact Support - Social icons: Facebook, Instagram, Twitter/X, Discord — hover = blue neon glow - Mini neon Nioplay logo - Copyright: *© 2025 Nioplay Inc. All rights reserved.* — TECH SPECS ────────── • Tech stack: - Vanilla HTML5 - Modular BEM-based `styles.css` - `script.js` = GSAP v3.13, SwiperJS • Optimized: - Preload fonts - Lazy-load images - Defer all JS - LCP < 2.5s, CLS < 0.05 • Accessibility: - Keyboard focus ring - `aria-labels` on all key elements - `role="status"` for coin bursts - Respects `prefers-reduced-motion` - Initial Deployment
-
388 Bytes
initial commit