Home
Augustin
Welcome to Cinema

Welcome to Cinema

The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

This tailwind example is contributed by Augustin, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Hero Heading

Author Augustin

Fork Fullscreen

<section id="home" class="hero-bg min-h-screen flex items-center justify-center relative">
        <div class="spotlight top-1/4 left-1/4"></div>
        <div class="spotlight top-3/4 right-1/4" style="animation-delay: -4s;"></div>
        
        <div class="text-center z-10 max-w-4xl mx-auto px-6">
            <h1 class="text-7xl font-bold mb-6 glow-text floating-animation">
                Welcome to Cinema
            </h1>
            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                Discover the magic of movies - from Hollywood blockbusters to indie masterpieces, 
                explore the world of cinema like never before.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <button class="bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-4 rounded-full font-semibold hover:scale-105 transform transition-all duration-300 shadow-lg hover:shadow-blue-500/25" onclick="showSection('genres')">
                    Explore Genres
                </button>
                <button class="border-2 border-white/30 px-8 py-4 rounded-full font-semibold hover:bg-white/10 transition-all duration-300" onclick="showSection('trending')">
                    What's Trending
                </button>
            </div>
        </div>
        
        
        <div class="absolute top-20 left-10 text-4xl floating-animation" style="animation-delay: -1s;">🎭</div>
        <div class="absolute bottom-20 right-10 text-4xl floating-animation" style="animation-delay: -3s;">🍿</div>
        <div class="absolute top-1/2 left-5 text-3xl floating-animation" style="animation-delay: -2s;">🎪</div>
    </section>

<section id="genres" class="py-20 bg-gray-800/50 hidden">
        <div class="container mx-auto px-6">
            <h2 class="text-5xl font-bold text-center mb-16 glow-text">Movie Genres</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <div class="genre-card bg-gradient-to-br from-red-600 to-red-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Action')">
                    <div class="text-4xl mb-4">💥</div>
                    <h3 class="text-2xl font-bold mb-2">Action</h3>
                    <p class="text-red-100">High-octane thrills and explosive adventures</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-yellow-600 to-yellow-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Comedy')">
                    <div class="text-4xl mb-4">😂</div>
                    <h3 class="text-2xl font-bold mb-2">Comedy</h3>
                    <p class="text-yellow-100">Laughter and feel-good moments</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-blue-600 to-blue-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Drama')">
                    <div class="text-4xl mb-4">🎭</div>
                    <h3 class="text-2xl font-bold mb-2">Drama</h3>
                    <p class="text-blue-100">Emotional storytelling and character depth</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-purple-600 to-purple-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Sci-Fi')">
                    <div class="text-4xl mb-4">🚀</div>
                    <h3 class="text-2xl font-bold mb-2">Sci-Fi</h3>
                    <p class="text-purple-100">Future worlds and technological wonders</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-green-600 to-green-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Horror')">
                    <div class="text-4xl mb-4">👻</div>
                    <h3 class="text-2xl font-bold mb-2">Horror</h3>
                    <p class="text-green-100">Spine-chilling scares and supernatural tales</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-pink-600 to-pink-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Romance')">
                    <div class="text-4xl mb-4">💕</div>
                    <h3 class="text-2xl font-bold mb-2">Romance</h3>
                    <p class="text-pink-100">Love stories that touch the heart</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-indigo-600 to-indigo-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Animation')">
                    <div class="text-4xl mb-4">🎨</div>
                    <h3 class="text-2xl font-bold mb-2">Animation</h3>
                    <p class="text-indigo-100">Artistic storytelling through animation</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-gray-600 to-gray-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Documentary')">
                    <div class="text-4xl mb-4">📽️</div>
                    <h3 class="text-2xl font-bold mb-2">Documentary</h3>
                    <p class="text-gray-100">Real stories and factual narratives</p>
                </div>
            </div>
        </div>
    </section>

<section id="trending" class="py-20 bg-gray-900 hidden">
        <div class="container mx-auto px-6">
            <h2 class="text-5xl font-bold text-center mb-16 glow-text">Trending Now</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="movie-card rounded-xl p-6 hover:shadow-2xl transition-all duration-300">
                    <div class="bg-gradient-to-br from-blue-500 to-purple-600 h-64 rounded-lg mb-4 flex items-center justify-center text-6xl">🦸‍♂️</div>
                    <h3 class="text-2xl font-bold mb-2">Superhero Epic</h3>
                    <div class="flex items-center mb-2">
                        <span class="rating-stars text-lg">★★★★★</span>
                        <span class="ml-2 text-gray-400">9.2/10</span>
                    </div>
                    <p class="text-gray-300 mb-4">A groundbreaking superhero adventure that redefines the genre.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Action</span>
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Adventure</span>
                    </div>
                </div>
                
                <div class="movie-card rounded-xl p-6 hover:shadow-2xl transition-all duration-300">
                    <div class="bg-gradient-to-br from-green-500 to-teal-600 h-64 rounded-lg mb-4 flex items-center justify-center text-6xl">🌌</div>
                    <h3 class="text-2xl font-bold mb-2">Cosmic Journey</h3>
                    <div class="flex items-center mb-2">
                        <span class="rating-stars text-lg">★★★★☆</span>
                        <span class="ml-2 text-gray-400">8.7/10</span>
                    </div>
                    <p class="text-gray-300 mb-4">An interstellar adventure that explores the vastness of space.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Sci-Fi</span>
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Drama</span>
                    </div>
                </div>
                
                <div class="movie-card rounded-xl p-6 hover:shadow-2xl transition-all duration-300">
                    <div class="bg-gradient-to-br from-red-500 to-orange-600 h-64 rounded-lg mb-4 flex items-center justify-center text-6xl">🎭</div>
                    <h3 class="text-2xl font-bold mb-2">The Artist's Tale</h3>
                    <div class="flex items-center mb-2">
                        <span class="rating-stars text-lg">★★★★★</span>
                        <span class="ml-2 text-gray-400">9.5/10</span>
                    </div>
                    <p class="text-gray-300 mb-4">A deeply moving drama about passion, sacrifice, and art.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Drama</span>
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Biography</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="awards" class="py-20 bg-gradient-to-br from-yellow-900/20 to-yellow-800/20 hidden">
        <div class="container mx-auto px-6">
            <h2 class="text-5xl font-bold text-center mb-16 glow-text">Award Winners</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="text-center">
                    <div class="text-8xl mb-6">🏆</div>
                    <h3 class="text-3xl font-bold mb-4 text-yellow-400">Best Picture Winners</h3>
                    <div class="space-y-4">
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">2024: Oppenheimer</h4>
                            <p class="text-gray-300">Christopher Nolan's biographical thriller</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">2023: Everything Everywhere All at Once</h4>
                            <p class="text-gray-300">Mind-bending multiverse adventure</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">2022: CODA</h4>
                            <p class="text-gray-300">Coming-of-age deaf family drama</p>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <div class="text-8xl mb-6">🎭</div>
                    <h3 class="text-3xl font-bold mb-4 text-yellow-400">International Recognition</h3>
                    <div class="space-y-4">
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">Palme d'Or 2024</h4>
                            <p class="text-gray-300">Cannes Film Festival's highest honor</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">BAFTA Winners</h4>
                            <p class="text-gray-300">British Academy's finest selections</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">Golden Globe Champions</h4>
                            <p class="text-gray-300">Hollywood Foreign Press favorites</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div id="movieModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50 flex items-center justify-center p-6">
        <div class="bg-gray-800 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-8">
                <div class="flex justify-between items-start mb-6">
                    <h3 id="modalTitle" class="text-3xl font-bold glow-text">Movie Title</h3>
                    <button onclick="closeModal()" class="text-gray-400 hover:text-white text-2xl">&times;</button>
                </div>
                <div id="modalContent" class="space-y-4">
                    
                </div>
            </div>
        </div>
    </div>

<footer class="bg-black py-12">
        <div class="container mx-auto px-6 text-center">
            <div class="film-strip w-full mb-6"></div>
            <p class="text-gray-400">© 2025 Cinema Explorer. Celebrating the magic of movies worldwide.</p>
            <div class="mt-4 text-2xl space-x-4">
                🎬 🍿 🎭 🎪 📽️
            </div>
        </div>
    </footer>

function closeModal() {
            document.getElementById('movieModal').classList.add('hidden');
        }

// Close modal when clicking outside
        document.getElementById('movieModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

// Add some interactive sparkle effects
        function createSparkle() {
            const sparkle = document.createElement('div');
            sparkle.style.position = 'fixed';
            sparkle.style.pointerEvents = 'none';
            sparkle.style.color = '#3b82f6';
            sparkle.style.fontSize = '20px';
            sparkle.style.zIndex = '1000';
            sparkle.textContent = '✨';
            sparkle.style.left = Math.random() * window.innerWidth + 'px';
            sparkle.style.top = Math.random() * window.innerHeight + 'px';
            sparkle.style.animation = 'float 3s ease-out forwards';
            
            document.body.appendChild(sparkle);
            
            setTimeout(() => {
                sparkle.remove();
            }, 3000);
        }

// Create sparkles periodically
        setInterval(createSparkle, 2000);

// Add keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });
    </script>

Related Examples