Hugging Face's logo

Spaces:
ProjectGenesis
/
half-done-landing
Running

App Files Community
half-done-landing / index.html
ProjectGenesis's picture
ProjectGenesis
generate mobile first (make sure the mobile page is optimized and the layout makes sense) a neon blue, magenta and black theme (black background) landing page for my sweepstakes social casino name "Royale Casino". Leave a place holder for me to upload a logo wherever applicable. Glass card style for blocks. The top right should have a sign up and login button, use a modern design with creativity and animation. It need to have multiple sections starting with; 1. Create a sticky jackpot counter on top (middle) that gradually increases and is always available when scrolling. Use a modern design with creativity. 2. Introduction section with a trust bar with icons, marquee animation to introduce 12 game providers (with a logo placeholder). Use a modern design with creativity. 3. 3 easy step sign up instruction (horizontal). Use a modern design with creativity. 4. a section for why chose us, Use a modern design with creativity. 5. a grid displaying game thumbnails (marquee animation) 12 on each row and 3 column with rtp and volatility meters when hovered over and a button to view more games. Code in each individual games with an image placeholder, and not copy and paste. 6. additional features at Golden Clovers and promo banner with a promo code field + CTA claim button. Also include a timer counting down how long the promotion last starting at 23:11:09. Use a modern design with creativity. 7. a Trustpilot section for testimonials, Use a modern design with creativity. 8. FAQ section, Use a modern design with creativity. 9. final CTA section displaying a counter to indicate new players joining that gradually increases in value with a CTA button. Use a modern design with creativity. 10. footer with logo place holder, links, and social media buttons like Facebook, instagram, twitter, discord. Also a disclaimer section below the footer. Use a modern design with creativity. All buttons need to have a redirection link to https://nioplay.net , and each section should have a placeholder for a large image. Triple check to make sure you have the correct quantity of content I specified, and ensure the correct marquee animation. Do not be lazy and make sure you code in each individual sections properly and not copy and paste. GLOWING ORB EFFECT BACKGROUND <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-neonblue opacity-20 blur-3xl animate-pulse"></div> <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-neonpink opacity-20 blur-3xl animate-pulse"></div> FAQ ACCORDION // FAQ accordion const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); const icon = question.querySelector('i'); question.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all items first faqItems.forEach(faq => { faq.classList.remove('active'); faq.querySelector('i').className = 'fa-solid fa-plus text-neonBlue'; }); // Toggle current item if wasn't active if(!isActive) { item.classList.add('active'); icon.className = 'fa-solid fa-minus text-neonBlue'; } }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); FAQ SECTION CODE <!-- FAQ --> <section class="py-16"> <div class="max-w-5xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-16"> Frequently <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">Asked Questions</span> </h2> <div class="glass-card rounded-2xl overflow-hidden"> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">How do I get started at Royale Casino?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Getting started is simple! Just click the 'Sign Up' button at the top right, fill in your details, and verify your email. You'll get 10,000 free coins instantly to start playing. </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">Is Royale Casino free to play?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Yes! Royale Casino is a sweepstakes social casino where you play for fun with virtual coins. We offer multiple ways to get free coins daily without spending any money. </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">Can I win real prizes?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Absolutely! While we focus on social gaming, we frequently run sweepstakes events where players can win real cash prizes, gift cards, and other exciting rewards. </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer border-b border-neonBlue/20"> <h3 class="text-lg font-bold">How do I claim my daily free coins?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> Simply log in to your account every 24 hours and visit the 'Promotions' page. You'll see your daily free coins waiting to be claimed, with bigger bonuses for consecutive days! </p> </div> </div> </div> <div class="faq-item"> <div class="faq-question p-6 flex justify-between items-center cursor-pointer"> <h3 class="text-lg font-bold">What makes Royale Casino different from others?</h3> <i class="fa-solid fa-plus text-neonBlue"></i> </div> <div class="faq-answer"> <div class="p-6 pt-0"> <p class="text-gray-300"> We pride ourselves on premium graphics, smooth gameplay, and generous rewards. Our unique sweepstakes model gives everyone a chance at real prizes without risking real money. </p> </div> </div> </div> </div> </div> </section> DOWNLOAD OUR APP <div> <h3 class="text-lg font-bold mb-6 text-neonBlue">Download Our App</h3> <p class="text-gray-400 mb-6"> Take Royale Casino with you wherever you go! </p> <div class="flex flex-col space-y-4"> <a href="https://nioplay.net" class="bg-black/30 border border-gray-700 rounded-xl py-3 px-6 flex items-center hover:bg-neonBlue/10 transition"> <i class="fab fa-apple text-3xl mr-3"></i> <div> <div class="text-xs">Download on the</div> <div class="font-bold">App Store</div> </div> </a> <a href="https://nioplay.net" class="bg-black/30 border border-gray-700 rounded-xl py-3 px-6 flex items-center hover:bg-neonBlue/10 transition"> <i class="fab fa-google-play text-2xl mr-3"></i> <div> <div class="text-xs">Get it on</div> <div class="font-bold">Google Play</div> </div> - Initial Deployment
7763718 verified
raw
history blame contribute delete
50.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Royale Casino - Social Casino Sweepstakes</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
dark: '#0c0b10',
neonBlue: '#00f5ff',
neonMagenta: '#ff00e6',
neonRed: '#ff003c',
glassBorder: 'rgba(255, 255, 255, 0.05)',
glassBg: 'rgba(0, 0, 0, 0.25)',
glassEffect: 'rgba(255, 255, 255, 0.05)'
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'marquee': 'marquee 20s linear infinite',
'marquee-reverse': 'marquee 25s linear infinite reverse',
'bounce-slow': 'bounce 2s infinite',
'ping-slow': 'ping 1.5s cubic-bezier(0,0,0.2,1) infinite'
},
keyframes: {
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
}
}
}
}
}
</script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background-color: #0c0b10;
color: #ffffff;
overflow-x: hidden;
position: relative;
}
.glass-card {
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
border-radius: 16px;
}
.glow-effect {
text-shadow: 0 0 5px rgba(0, 245, 255, 0.5),
0 0 15px rgba(0, 245, 255, 0.3),
0 0 25px rgba(0, 245, 255, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, #00f5ff, #ff00e6);
color: #ffffff;
border-radius: 10px;
padding: 10px 25px;
font-weight: 700;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ff00e6, #00f5ff);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.btn-primary:hover::before {
opacity: 1;
}
.btn-primary:hover {
box-shadow: 0 0 20px rgba(0, 245, 255, 0.7),
0 0 30px rgba(255, 0, 230, 0.5);
transform: translateY(-2px);
}
.jackpot-digit {
background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(255, 0, 230, 0.1));
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 245, 255, 0.2);
width: 45px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.5rem;
position: relative;
overflow: hidden;
}
.game-card {
transition: all 0.3s ease;
transform-origin: center bottom;
position: relative;
}
.game-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.game-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.85);
padding: 15px;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 2;
}
.game-card:hover .game-overlay {
transform: translateY(0);
}
.rtp-meter {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.rtp-fill {
height: 100%;
background: linear-gradient(to right, #00f5ff, #ff00e6);
border-radius: 4px;
}
.progress-meter {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, #ff00e6, #00f5ff);
border-radius: 4px;
}
.timer-block {
background: rgba(0, 0, 0, 0.5);
border-radius: 8px;
width: 60px;
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 700;
position: relative;
overflow: hidden;
}
.timer-block::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #00f5ff, #ff00e6);
}
.timer-value {
font-size: 1.5rem;
letter-spacing: -1px;
}
.testimonial-card {
transform: perspective(1200px) rotateY(20deg);
transition: all 0.5s ease;
opacity: 0.7;
}
.testimonial-card.active {
transform: perspective(1200px) rotateY(0);
opacity: 1;
z-index: 10;
}
.clover-badge {
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(255, 0, 230, 0.1));
border: 2px solid rgba(0, 245, 255, 0.3);
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.clover-badge:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
}
.clover-badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(rgba(0, 245, 255, 0.2), transparent);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.clover-badge:hover::before {
opacity: 1;
}
.join-counter {
position: relative;
overflow: hidden;
border-radius: 10px;
}
.counter-digit {
transition: transform 0.5s ease;
display: inline-block;
min-width: 20px;
}
.player-card {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
opacity: 0.1;
transition: all 0.5s ease;
}
.player-card.active {
opacity: 1;
}
.social-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon:hover {
background: rgba(0, 245, 255, 0.2);
transform: translateY(-3px);
box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
}
@media (min-width: 768px) {
.jackpot-digit {
width: 55px;
height: 70px;
font-size: 1.8rem;
}
.timer-block {
width: 80px;
height: 90px;
}
.timer-value {
font-size: 2rem;
}
}
</style>
</head>
<body class="bg-dark text-white overflow-x-hidden">
<!-- Background Glowing Orbs -->
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-neonBlue opacity-20 blur-3xl animate-pulse -z-10"></div>
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-neonMagenta opacity-20 blur-3xl animate-pulse -z-10"></div>
<div class="absolute top-1/2 left-1/4 w-32 h-32 rounded-full bg-neonBlue opacity-15 blur-2xl animate-pulse-slow -z-10"></div>
<div class="absolute bottom-1/4 right-1/3 w-48 h-48 rounded-full bg-neonMagenta opacity-15 blur-2xl animate-pulse-slow -z-10"></div>
<!-- Sticky Header with Jackpot Counter -->
<header class="bg-dark/90 backdrop-blur-sm sticky top-0 z-50 border-b border-glassBorder">
<div class="container mx-auto px-4">
<div class="h-16 flex items-center justify-between">
<div class="flex items-center">
<!-- Logo placeholder -->
<div class="bg-glassBg border border-glassBorder w-32 h-10 rounded-lg flex items-center justify-center">
<span class="font-bold bg-gradient-to-r from-neonBlue to-neonMagenta bg-clip-text text-transparent">ROYALE CASINO</span>
</div>
</div>
<!-- Jackpot Counter - Middle -->
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-400 uppercase tracking-widest hidden sm:block">Jackpot:</span>
<div class="flex">
<div class="jackpot-digit">8</div>
<div class="jackpot-digit">9</div>
<div class="jackpot-digit">1</div>
<div class="jackpot-digit mx-1 text-neonMagenta">,</div>
<div class="jackpot-digit">7</div>
<div class="jackpot-digit">2</div>
<div class="jackpot-digit">5</div>
<div class="jackpot-digit mx-1 text-neonMagenta">,</div>
<div class="jackpot-digit">0</div>
<div class="jackpot-digit">0</div>
<div class="jackpot-digit">0</div>
</div>
</div>
<!-- Login & Signup Buttons - Right -->
<div class="flex items-center space-x-2">
<button class="text-sm text-gray-300 hover:text-white transition-colors">Login</button>
<a href="https://nioplay.net" class="btn-primary">
Sign Up
</a>
</div>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="py-16 relative">
<div class="container mx-auto px-4 flex flex-col items-center">
<h1 class="text-4xl md:text-6xl font-black text-center mb-4">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">PLAY FOR FREE</span>
<br>
<span>WIN REAL PRIZES!</span>
</h1>
<p class="text-lg md:text-xl text-center max-w-2xl text-gray-300 mb-8">
Experience the thrill of Vegas from your device with Royale Casino - the ultimate social casino where fun meets fortune!
</p>
<a href="https://nioplay.net" class="btn-primary text-lg px-8 py-3 mb-12">
Play Now &rarr;
</a>
<div class="glass-card rounded-xl w-full max-w-4xl">
<img src="https://placehold.co/1200x500/0c0b10/ffffff?text=Hero+Image" alt="Casino Games" class="w-full rounded-xl">
</div>
</div>
</section>
<!-- Game Providers Marquee -->
<section class="py-12 relative">
<div class="container mx-auto px-4 mb-10">
<h2 class="text-3xl font-bold text-center mb-4">
Trusted by <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">Leading</span> Providers
</h2>
<p class="text-center text-gray-400 max-w-2xl mx-auto">
We partner with the most renowned game studios in the industry for an unparalleled gaming experience
</p>
</div>
<div class="overflow-hidden">
<div class="animate-marquee flex space-x-10 py-4">
<!-- 12 provider logos -->
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
<div class="flex-shrink-0 w-40 glass-card p-4 rounded-xl">
<div class="bg-gray-800 h-20 rounded-lg flex items-center justify-center">
<span class="font-bold text-xs">Provider Logo</span>
</div>
</div>
</div>
</div>
</section>
<!-- 3-Step Sign Up -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="glass-card rounded-2xl p-6 sm:p-10">
<h2 class="text-3xl font-bold text-center mb-8">
Get Started in <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">3 Easy Steps</span>
</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Step 1 -->
<div class="flex flex-col items-center text-center">
<div class="relative mb-6">
<div class="absolute -top-4 -left-4 w-8 h-8 rounded-full bg-neonBlue blur-lg opacity-50"></div>
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-neonBlue/20 to-neonMagenta/20 flex items-center justify-center border border-neonBlue/30">
<span class="text-4xl text-white font-bold">1</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2">Create Account</h3>
<p class="text-gray-300 mb-4">Register with email or social media to get started</p>
<div class="flex space-x-4">
<div class="social-icon text-neonBlue">
<i class="fab fa-google"></i>
</div>
<div class="social-icon text-neonMagenta">
<i class="fab fa-facebook-f"></i>
</div>
<div class="social-icon text-neonBlue">
<i class="fab fa-apple"></i>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center text-center">
<div class="relative mb-6">
<div class="absolute -top-4 -left-4 w-8 h-8 rounded-full bg-neonMagenta blur-lg opacity-50"></div>
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-neonMagenta/20 to-neonBlue/20 flex items-center justify-center border border-neonMagenta/30">
<span class="text-4xl text-white font-bold">2</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2">Get Free Coins</h3>
<p class="text-gray-300 mb-4">Receive 10,000 free coins instantly to play with</p>
<div class="flex justify-center">
<div class="bg-gray-800 border border-glassBorder rounded-xl px-4 py-2 flex items-center text-xl">
<span class="text-neonMagenta mr-2">+10,000</span>
<i class="fas fa-coins text-yellow-400"></i>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center text-center">
<div class="relative mb-6">
<div class="absolute -top-4 -left-4 w-8 h-8 rounded-full bg-neonBlue blur-lg opacity-50"></div>
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-neonBlue/20 to-neonMagenta/20 flex items-center justify-center border border-neonBlue/30">
<span class="text-4xl text-white font-bold">3</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2">Start Playing</h3>
<p class="text-gray-300 mb-4">Choose a game and start winning exciting prizes</p>
<a href="https://nioplay.net" class="btn-primary">
Play Now &rarr;
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Us -->
<section class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">
Why Choose <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">Royale Casino</span>
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Feature 1 -->
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-neonBlue/10 flex items-center justify-center mr-4">
<i class="fas fa-coins text-2xl text-yellow-400"></i>
</div>
<h3 class="text-xl font-bold">Free Daily Rewards</h3>
</div>
<p class="text-gray-300">Login daily to receive free coins and bonus spins every 24 hours. The more consecutive days you play, the bigger the rewards!</p>
</div>
<!-- Feature 2 -->
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-neonMagenta/10 flex items-center justify-center mr-4">
<i class="fas fa-trophy text-2xl text-neonMagenta"></i>
</div>
<h3 class="text-xl font-bold">Real Prize Sweepstakes</h3>
</div>
<p class="text-gray-300">Participate in exciting sweepstakes events where you can win real cash prizes, gift cards, and premium electronics.</p>
</div>
<!-- Feature 3 -->
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-neonBlue/10 flex items-center justify-center mr-4">
<i class="fas fa-shield-alt text-2xl text-neonBlue"></i>
</div>
<h3 class="text-xl font-bold">Secure & Fair Play</h3>
</div>
<p class="text-gray-300">Our platform employs advanced security protocols and RNG certified systems to ensure fair play for all users.</p>
</div>
<!-- Feature 4 -->
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-neonMagenta/10 flex items-center justify-center mr-4">
<i class="fas fa-sync-alt text-2xl text-neonMagenta"></i>
</div>
<h3 class="text-xl font-bold">Play Anywhere</h3>
</div>
<p class="text-gray-300">Seamlessly switch between devices with our responsive platform - pick up where you left off on mobile, tablet, or desktop.</p>
</div>
<!-- Feature 5 -->
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-neonBlue/10 flex items-center justify-center mr-4">
<i class="fas fa-users text-2xl text-neonBlue"></i>
</div>
<h3 class="text-xl font-bold">Vibrant Community</h3>
</div>
<p class="text-gray-300">Join our community of players, participate in tournaments, and compete on our global leaderboards for exclusive rewards.</p>
</div>
<!-- Feature 6 -->
<div class="glass-card p-6 rounded-2xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-neonMagenta/10 flex items-center justify-center mr-4">
<i class="fas fa-headset text-2xl text-neonMagenta"></i>
</div>
<h3 class="text-xl font-bold">24/7 Support</h3>
</div>
<p class="text-gray-300">Our dedicated support team is available around the clock to assist you with any questions or issues you might have.</p>
</div>
</div>
<div class="glass-card p-8 rounded-2xl mt-8">
<div class="flex flex-col md:flex-row items-center justify-between">
<div>
<h3 class="text-2xl font-bold mb-2">Ready to Play?</h3>
<p class="text-gray-300">Join thousands of players enjoying premium casino experiences</p>
</div>
<a href="https://nioplay.net" class="btn-primary mt-4 md:mt-0">
Get Started Now
</a>
</div>
</div>
</div>
</section>
<!-- Featured Games -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="flex flex-col sm:flex-row justify-between items-center mb-8">
<h2 class="text-3xl font-bold">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonMagenta">Featured</span> Games
</h2>
<div class="flex items-center">
<span class="text-gray-400 mr-4">Swipe to explore</span>
<div class="text-2xl text-neonMagenta">
<i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="overflow-hidden">
<div class="animate-marquee flex space-x-6 py-4">
<!-- Game 1 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+1" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Diamond Riches</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>96.5% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonBlue mr-1"></i>
<span>High Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>96.5%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 96.5%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>High</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 85%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 2 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+2" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Neon Dreams</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>97.2% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonMagenta mr-1"></i>
<span>Medium Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>97.2%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 97.2%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>Medium</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 60%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 3 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+3" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Pharaoh's Gold</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>95.8% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonBlue mr-1"></i>
<span>High Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>95.8%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 95.8%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>High</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 80%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 4 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+4" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Jungle Adventure</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>96.3% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonMagenta mr-1"></i>
<span>Low Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>96.3%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 96.3%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>Low</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 40%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- ... Add 8 more games following the same pattern ... -->
<!-- Game 5 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+5" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Mystic Fortune</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>97.1% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonBlue mr-1"></i>
<span>Medium Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>97.1%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 97.1%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>Medium</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 55%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 6 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+6" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Ocean Treasures</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>96.0% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonMagenta mr-1"></i>
<span>High Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>96.0%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 96%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>High</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 75%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 7 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+7" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Wild West Gold</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>95.5% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonBlue mr-1"></i>
<span>Very High Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>95.5%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 95.5%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>Very High</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 92%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 8 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+8" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Space Odyssey</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center mr-4">
<i class="fas fa-coins text-yellow-400 mr-1"></i>
<span>96.8% RTP</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-neonMagenta mr-1"></i>
<span>Medium Volatility</span>
</div>
</div>
</div>
<div class="game-overlay">
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>RTP</span>
<span>96.8%</span>
</div>
<div class="rtp-meter">
<div class="rtp-fill" style="width: 96.8%"></div>
</div>
</div>
<div class="mb-3">
<div class="flex justify-between text-xs mb-1">
<span>Volatility</span>
<span>Medium</span>
</div>
<div class="progress-meter">
<div class="progress-fill" style="width: 50%"></div>
</div>
</div>
<button class="btn-primary w-full">
Play Now
</button>
</div>
</div>
<!-- Game 9 -->
<div class="game-card glass-card rounded-xl w-72 flex-shrink-0 relative overflow-hidden">
<img src="https://placehold.co/600x400/0c0b10/ffffff?text=Game+9" alt="Game Name" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Dragon's Hoard</h3>
<div class="flex items-center text-sm text-gray-400">
<div class="flex items-center