index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACCESS - Event Discovery Platform</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">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --color-primary: #000000;
            --color-secondary: #FFFFFF;
            --color-accent-yellow: #FFFF00;
            --color-accent-blue: #007AFF;
            --color-accent-orange: #FF5733;
            --color-accent-purple: #8A2BE2;
            --color-light-gray: #F0F0F0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }
        
        .heading-font {
            font-family: 'Bebas Neue', sans-serif;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 0.9;
        }
        
        .hero-bg {
            background-image: url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .phone-mockup {
            position: relative;
            width: 300px;
            height: 600px;
            background-color: #000;
            border-radius: 40px;
            padding: 10px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }
        
        .phone-screen {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }
        
        .ticker {
            overflow: hidden;
            white-space: nowrap;
        }
        
        .ticker-content {
            display: inline-block;
            animation: ticker 20s linear infinite;
        }
        
        @keyframes ticker {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .split-text-left, .split-text-right {
            position: relative;
            z-index: 1;
        }
        
        .feature-section {
            position: relative;
            overflow: hidden;
        }
        
        .input-underline {
            border-bottom: 2px solid #000;
            background: transparent;
            padding-bottom: 8px;
            outline: none;
            width: 100%;
            max-width: 400px;
        }
        
        @media (max-width: 768px) {
            .phone-mockup {
                width: 200px;
                height: 400px;
                margin-bottom: 40px;
            }
            
            .split-text-left, .split-text-right {
                text-align: center !important;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body class="bg-white text-black">
    <!-- Header -->
    <header class="fixed w-full z-50 bg-black bg-opacity-90 transition-all duration-300">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fas fa-star text-purple-500 text-2xl mr-2"></i>
                <span class="text-white font-bold text-xl">ACCESS</span>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#" class="text-white hover:text-purple-300 transition">About</a>
                <a href="#" class="text-white hover:text-purple-300 transition">Contact</a>
            </nav>
            <button class="md:hidden text-white">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </div>
    </header>

    <!-- Hero Section 1 -->
    <section class="min-h-screen bg-black flex items-center justify-center pt-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="heading-font text-white text-7xl md:text-9xl lg:text-[180px] uppercase">
                GIGS<br>PARTIES<br>EVENTS
            </h1>
        </div>
    </section>

    <!-- Hero Section 2 -->
    <section class="min-h-screen hero-bg flex items-center justify-center relative">
        <div class="container mx-auto px-6 text-center relative z-10">
            <h1 class="heading-font text-white text-7xl md:text-9xl lg:text-[180px] uppercase">
                GET ON<br>THE INSIDE
            </h1>
        </div>
    </section>

    <!-- Text Section -->
    <section class="py-20 bg-gray-100">
        <div class="container mx-auto px-6 text-center">
            <h2 class="heading-font text-black text-7xl md:text-9xl lg:text-[120px] uppercase mb-8">
                IN OUR<br>WORLD<br>EVERYONE<br>GOES OUT<br>AND NO<br>ONE<br>MISSES<br>OUT
            </h2>
            <h3 class="text-2xl md:text-3xl font-bold mb-6">Get on the inside</h3>
            <p class="text-lg md:text-xl max-w-2xl mx-auto">
                Coming soon to the App Store.<br>
                Instantly get access to the most hyped events around you
            </p>
        </div>
    </section>

    <!-- Ticker Tape 1 -->
    <section class="py-8 bg-black ticker">
        <div class="ticker-content">
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
        </div>
    </section>

    <!-- Feature Section 1: Discover -->
    <section class="py-20 md:py-32 bg-yellow-400 feature-section">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-center">
            <div class="split-text-left text-left md:w-1/3 mb-12 md:mb-0 md:pr-8">
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">DIS</h2>
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">THE</h2>
            </div>
            
            <div class="phone-mockup mx-8">
                <div class="phone-screen" style="background-image: url('https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80')"></div>
            </div>
            
            <div class="split-text-right text-right md:w-1/3 mt-12 md:mt-0 md:pl-8">
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">ER</h2>
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">IRL</h2>
            </div>
        </div>
    </section>

    <!-- Feature Section 2: Become Fan -->
    <section class="py-20 md:py-32 bg-blue-500 feature-section">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-center">
            <div class="split-text-left text-left md:w-1/3 mb-12 md:mb-0 md:pr-8">
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">BECO</h2>
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">ULTIM</h2>
            </div>
            
            <div class="phone-mockup mx-8">
                <div class="phone-screen" style="background-image: url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div>
            </div>
            
            <div class="split-text-right text-right md:w-1/3 mt-12 md:mt-0 md:pl-8">
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">THE</h2>
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">FAN</h2>
            </div>
        </div>
    </section>

    <!-- Feature Section 3: Experience -->
    <section class="py-20 md:py-32 bg-orange-500 feature-section">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-center">
            <div class="split-text-left text-left md:w-1/3 mb-12 md:mb-0 md:pr-8">
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">EXP</h2>
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">AL</h2>
            </div>
            
            <div class="phone-mockup mx-8">
                <div class="phone-screen" style="background-image: url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div>
            </div>
            
            <div class="split-text-right text-right md:w-1/3 mt-12 md:mt-0 md:pl-8">
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">NCE</h2>
                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">IT</h2>
            </div>
        </div>
    </section>

    <!-- Ticker Tape 2 -->
    <section class="py-8 bg-black ticker">
        <div class="ticker-content">
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
        </div>
    </section>

    <!-- Waitlist Section -->
    <section class="py-20 bg-gray-100">
        <div class="container mx-auto px-6 text-center">
            <h2 class="heading-font text-black text-7xl md:text-9xl uppercase mb-8">
                JOIN THE<br>WAITLIST
            </h2>
            
            <form id="waitlist-form" class="max-w-md mx-auto mb-8">
                <div class="flex items-center">
                    <input type="email" placeholder="Enter email address" required 
                           class="input-underline text-center text-lg focus:border-purple-500 focus:border-b-2">
                    <button type="submit" class="ml-4 bg-black text-white p-3 rounded-full hover:bg-purple-500 transition">
                        <i class="fas fa-arrow-right text-xl"></i>
                    </button>
                </div>
            </form>
            
            <p class="text-lg md:text-xl max-w-2xl mx-auto">
                Launching soon in all major cities.<br>
                Get on the inside.
            </p>
        </div>
    </section>

    <!-- Footer -->
    <section class="py-32 bg-black">
        <div class="container mx-auto px-6 text-center">
            <h2 class="heading-font text-white text-7xl md:text-9xl lg:text-[180px] uppercase">
                ACCESS
            </h2>
        </div>
    </section>

    <script>
        // Form submission handling
        document.getElementById('waitlist-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const email = this.querySelector('input').value;
            
            // Simple email validation
            if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                alert('Thanks for joining the waitlist! We\'ll be in touch soon.');
                this.querySelector('input').value = '';
            } else {
                alert('Please enter a valid email address.');
            }
        });
        
        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('bg-opacity-100', 'shadow-lg');
            } else {
                header.classList.remove('bg-opacity-100', 'shadow-lg');
            }
        });
        
        // Mobile menu toggle (would need more implementation)
        document.querySelector('button.md\\:hidden').addEventListener('click', function() {
            // In a full implementation, this would toggle a mobile menu
            alert('Mobile menu would open here');
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=steake/accessv2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>