| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CineLux - Luxury Cinema Experience</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| </head> |
| <body class="bg-gray-900 text-white"> |
| |
| <header-cinema></header-cinema> |
|
|
| |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> |
| <div class="absolute inset-0 bg-black opacity-60 z-10"></div> |
| <div class="absolute inset-0 bg-gradient-to-r from-black via-transparent to-black z-10"></div> |
| <img src="http://static.photos/cinema/1200x630/1" alt="Cinema Background" class="absolute inset-0 w-full h-full object-cover"> |
| <div class="relative z-20 text-center px-4 max-w-4xl"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight">Experience Cinema in <span class="text-yellow-400">Luxury</span></h1> |
| <p class="text-xl md:text-2xl mb-10 max-w-2xl mx-auto">Immerse yourself in premium comfort with our state-of-the-art screens, crystal-clear sound, and gourmet dining options.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="#movies" class="px-8 py-4 bg-yellow-500 hover:bg-yellow-600 text-black font-bold rounded-lg transition duration-300 transform hover:scale-105">View Showtimes</a> |
| <a href="#membership" class="px-8 py-4 bg-transparent border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-black font-bold rounded-lg transition duration-300">Become a Member</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="movies" class="py-20 px-4 max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">Now Showing</h2> |
| <div class="w-24 h-1 bg-yellow-500 mx-auto"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> |
| |
| <div class="bg-gray-800 rounded-xl overflow-hidden shadow-2xl transform transition duration-500 hover:scale-105"> |
| <img src="http://static.photos/movie/640x360/1" alt="Movie Poster" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="text-2xl font-bold">The Grand Adventure</h3> |
| <span class="bg-yellow-500 text-black px-3 py-1 rounded-full text-sm font-bold">IMAX</span> |
| </div> |
| <p class="text-gray-300 mb-4">An epic journey through uncharted territories with breathtaking visuals and heart-pounding action.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-yellow-400 font-bold">Rating: ★★★★☆</span> |
| <a href="#" class="text-yellow-500 hover:text-yellow-400 font-bold flex items-center"> |
| View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl overflow-hidden shadow-2xl transform transition duration-500 hover:scale-105"> |
| <img src="http://static.photos/movie/640x360/2" alt="Movie Poster" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="text-2xl font-bold">Midnight Mystique</h3> |
| <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold">4DX</span> |
| </div> |
| <p class="text-gray-300 mb-4">A thrilling noir detective story that unfolds in the shadows of a mysterious city.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-yellow-400 font-bold">Rating: ★★★★★</span> |
| <a href="#" class="text-yellow-500 hover:text-yellow-400 font-bold flex items-center"> |
| View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl overflow-hidden shadow-2xl transform transition duration-500 hover:scale-105"> |
| <img src="http://static.photos/movie/640x360/3" alt="Movie Poster" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="text-2xl font-bold">Cosmic Love</h3> |
| <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-bold">Dolby Atmos</span> |
| </div> |
| <p class="text-gray-300 mb-4">A touching interstellar romance that spans galaxies and defies the laws of physics.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-yellow-400 font-bold">Rating: ★★★★☆</span> |
| <a href="#" class="text-yellow-500 hover:text-yellow-400 font-bold flex items-center"> |
| View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-16"> |
| <a href="#" class="inline-block px-8 py-4 bg-yellow-500 hover:bg-yellow-600 text-black font-bold rounded-lg transition duration-300">View All Movies</a> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">Premium Experience</h2> |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">We offer unparalleled luxury amenities for the ultimate movie experience</p> |
| <div class="w-24 h-1 bg-yellow-500 mx-auto mt-4"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="text-center p-6 bg-gray-900 rounded-xl hover:bg-gray-700 transition duration-300"> |
| <div class="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="monitor" class="text-black w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">IMAX Screens</h3> |
| <p class="text-gray-300">Larger-than-life visuals with crystal-clear resolution for complete immersion</p> |
| </div> |
| |
| |
| <div class="text-center p-6 bg-gray-900 rounded-xl hover:bg-gray-700 transition duration-300"> |
| <div class="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="music" class="text-black w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Dolby Atmos</h3> |
| <p class="text-gray-300">Surround sound technology that moves audio around you in three-dimensional space</p> |
| </div> |
| |
| |
| <div class="text-center p-6 bg-gray-900 rounded-xl hover:bg-gray-700 transition duration-300"> |
| <div class="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="coffee" class="text-black w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Gourmet Dining</h3> |
| <p class="text-gray-300">Chef-prepared meals and premium beverages delivered directly to your seat</p> |
| </div> |
| |
| |
| <div class="text-center p-6 bg-gray-900 rounded-xl hover:bg-gray-700 transition duration-300"> |
| <div class="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="sofa" class="text-black w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Luxury Seating</h3> |
| <p class="text-gray-300">Plush reclining seats with personal side tables and USB charging ports</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="membership" class="py-20 px-4 max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">Membership Benefits</h2> |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">Join our exclusive membership program for premium perks</p> |
| <div class="w-24 h-1 bg-yellow-500 mx-auto mt-4"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-10"> |
| |
| <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700 hover:border-yellow-500 transition duration-300"> |
| <div class="text-center mb-8"> |
| <h3 class="text-2xl font-bold mb-2">Bronze</h3> |
| <div class="text-4xl font-bold text-yellow-500 mb-4">$19<span class="text-lg">/month</span></div> |
| <p class="text-gray-300">Perfect for casual moviegoers</p> |
| </div> |
| <ul class="space-y-4 mb-10"> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> 10% discount on tickets</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Priority booking</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Free small popcorn</li> |
| <li class="flex items-center text-gray-500"><i data-feather="x-circle" class="text-red-500 mr-3 w-5 h-5"></i> Exclusive previews</li> |
| <li class="flex items-center text-gray-500"><i data-feather="x-circle" class="text-red-500 mr-3 w-5 h-5"></i> Complimentary drinks</li> |
| </ul> |
| <a href="#" class="block text-center py-3 bg-gray-700 hover:bg-yellow-500 hover:text-black font-bold rounded-lg transition duration-300">Get Started</a> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl p-8 border-2 border-yellow-500 relative transform scale-105"> |
| <div class="absolute top-0 right-0 bg-yellow-500 text-black px-4 py-1 rounded-bl-lg font-bold">POPULAR</div> |
| <div class="text-center mb-8"> |
| <h3 class="text-2xl font-bold mb-2">Silver</h3> |
| <div class="text-4xl font-bold text-yellow-500 mb-4">$39<span class="text-lg">/month</span></div> |
| <p class="text-gray-300">Ideal for regular movie lovers</p> |
| </div> |
| <ul class="space-y-4 mb-10"> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> 25% discount on tickets</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Priority booking</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Free large popcorn & drink</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Exclusive previews access</li> |
| <li class="flex items-center text-gray-500"><i data-feather="x-circle" class="text-red-500 mr-3 w-5 h-5"></i> Complimentary drinks</li> |
| </ul> |
| <a href="#" class="block text-center py-3 bg-yellow-500 hover:bg-yellow-600 text-black font-bold rounded-lg transition duration-300">Get Started</a> |
| </div> |
| |
| |
| <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700 hover:border-yellow-500 transition duration-300"> |
| <div class="text-center mb-8"> |
| <h3 class="text-2xl font-bold mb-2">Gold</h3> |
| <div class="text-4xl font-bold text-yellow-500 mb-4">$69<span class="text-lg">/month</span></div> |
| <p class="text-gray-300">For the ultimate cinema experience</p> |
| </div> |
| <ul class="space-y-4 mb-10"> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> 40% discount on tickets</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> VIP priority booking</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Free gourmet meal & drinks</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> Exclusive previews access</li> |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-500 mr-3 w-5 h-5"></i> 2 complimentary tickets/month</li> |
| </ul> |
| <a href="#" class="block text-center py-3 bg-gray-700 hover:bg-yellow-500 hover:text-black font-bold rounded-lg transition duration-300">Get Started</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">What Our Guests Say</h2> |
| <div class="w-24 h-1 bg-yellow-500 mx-auto"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-900 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="text-yellow-400 flex"> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6 italic">"The level of luxury here is unmatched. The IMAX screen made me feel like I was part of the action. Will definitely be coming back!"</p> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4"> |
| <span class="font-bold">JD</span> |
| </div> |
| <div> |
| <h4 class="font-bold">John Davis</h4> |
| <p class="text-gray-400 text-sm">Member since 2022</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="text-yellow-400 flex"> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6 italic">"As a film enthusiast, I appreciate the attention to detail in every aspect. The Dolby Atmos sound system is incredible!"</p> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4"> |
| <span class="font-bold">SR</span> |
| </div> |
| <div> |
| <h4 class="font-bold">Sarah Roberts</h4> |
| <p class="text-gray-400 text-sm">Film Critic</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="text-yellow-400 flex"> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| <i data-feather="star" class="fill-current"></i> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6 italic">"The gourmet dining option elevated my movie night to a whole new level. The wagyu sliders were divine!"</p> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4"> |
| <span class="font-bold">MP</span> |
| </div> |
| <div> |
| <h4 class="font-bold">Michael Park</h4> |
| <p class="text-gray-400 text-sm">Food Blogger</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer-cinema></footer-cinema> |
|
|
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
