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