<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WedBooker - Smart Wedding Guest Management Platform</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- GSAP for Premium Animations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        /* Infinite Background Animation */
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .animated-bg {
            background: linear-gradient(-45deg, #0a0a0a, #1a0b2e, #2a0b3a, #1a0b2e);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        /* Floating Particles */
        @keyframes floatParticle {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 0.8; }
            90% { opacity: 0.8; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }
        
        .particle {
            position: fixed;
            background: radial-gradient(circle, rgba(139,92,246,0.8), rgba(236,72,153,0.4));
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
        
        /* Glow Effects */
        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.3), 0 0 40px rgba(139,92,246,0.2); }
            50% { box-shadow: 0 0 40px rgba(139,92,246,0.6), 0 0 80px rgba(236,72,153,0.4); }
        }
        
        .glow-card {
            animation: glowPulse 3s ease-in-out infinite;
        }
        
        /* Shimmer Text */
        @keyframes shimmerText {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .shimmer-text {
            background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #8B5CF6);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: shimmerText 3s linear infinite;
        }
        
        /* Magnetic Button Effect */
        .magnetic-btn {
            transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        
        /* Smooth Reveal */
        @keyframes smoothReveal {
            0% { opacity: 0; transform: translateY(100px) scale(0.9); filter: blur(10px); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        
        /* Infinite Rotation */
        @keyframes infiniteRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .rotate-infinite {
            animation: infiniteRotate 20s linear infinite;
        }
        
        /* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }
        
        @keyframes floatSlow {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .animate-float-slow {
            animation: floatSlow 6s ease-in-out infinite;
        }
        
        /* Pulse Animation */
        @keyframes pulse {
            0%, 100% { opacity: 0.8; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
        }
        
        .animate-pulse-custom {
            animation: pulse 3s ease-in-out infinite;
        }
        
        /* 3D Flip Card */
        .flip-card {
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .flip-card:hover {
            transform: rotateY(10deg) rotateX(5deg) translateY(-20px);
        }
        
        /* Glass Card */
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 2rem;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.8s ease;
        }
        
        .glass-card:hover::before {
            left: 100%;
        }
        
        /* Scroll Progress Bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B);
            z-index: 10000;
            transition: width 0.1s ease;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #1a1a1a;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #8B5CF6, #EC4899);
            border-radius: 4px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .glass-card {
                margin: 1rem 0;
            }
            
            h1 {
                font-size: 2.5rem !important;
            }
            
            h2 {
                font-size: 2rem !important;
            }
        }
    </style>
</head>
<body class="animated-bg">
    
    <!-- Scroll Progress Bar -->
    <div class="scroll-progress" id="scrollProgress"></div>
    
    <!-- Navigation -->
    <nav class="fixed top-0 left-0 w-full z-50 py-4 px-6 transition-all duration-500" id="navbar">
        <div class="container mx-auto">
            <div class="flex justify-between items-center">
                <div class="flex items-center gap-3 group cursor-pointer">
                    <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl flex items-center justify-center rotate-infinite">
                        <i class="fa-solid fa-heart text-white text-xl"></i>
                    </div>
                    <span class="text-2xl font-bold text-white">
                        Wed<span class="shimmer-text">Booker</span>
                    </span>
                </div>
                
                <div class="hidden md:flex items-center gap-10">
                    <a href="#features" class="text-gray-300 hover:text-white transition-all duration-300 relative group">
                        Features
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-600 to-pink-600 transition-all duration-300 group-hover:w-full"></span>
                    </a>
                    <a href="#how-it-works" class="text-gray-300 hover:text-white transition-all duration-300 relative group">
                        How It Works
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-600 to-pink-600 transition-all duration-300 group-hover:w-full"></span>
                    </a>
                    <a href="#pricing" class="text-gray-300 hover:text-white transition-all duration-300 relative group">
                        Pricing
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-600 to-pink-600 transition-all duration-300 group-hover:w-full"></span>
                    </a>
                    <a href="#testimonials" class="text-gray-300 hover:text-white transition-all duration-300 relative group">
                        Testimonials
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-600 to-pink-600 transition-all duration-300 group-hover:w-full"></span>
                    </a>
                </div>
                
                <div class="flex items-center gap-4">
                    <a href="<?php echo e(route('login')); ?>" class="text-gray-300 hover:text-white transition">Login</a>
                    <a href="<?php echo e(route('register')); ?>" class="magnetic-btn relative overflow-hidden bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-full font-semibold hover:shadow-2xl hover:shadow-purple-500/50 transition-all duration-300 group">
                        <span class="relative z-10">Start Free Trial</span>
                        <div class="absolute inset-0 bg-gradient-to-r from-purple-700 to-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- Hero Section -->
    <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
        <!-- Animated Background Orbs -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600 rounded-full filter blur-3xl opacity-30 animate-pulse" id="orb1"></div>
            <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-pink-600 rounded-full filter blur-3xl opacity-30 animate-pulse" style="animation-delay: 2s;" id="orb2"></div>
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-orange-500 rounded-full filter blur-3xl opacity-20 animate-pulse" style="animation-duration: 4s;"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center max-w-5xl mx-auto">
                <div class="inline-block mb-8" id="heroBadge">
                    <div class="px-6 py-2 bg-white/10 backdrop-blur-xl rounded-full border border-white/20 hover:scale-105 transition-all duration-300">
                        <span class="text-white text-sm">✨ For Couples Only • No Guest Payments ✨</span>
                    </div>
                </div>
                
                <h1 class="text-6xl md:text-8xl font-bold text-white mb-6 leading-tight" id="heroTitle">
                    Smart Wedding
                    <span class="shimmer-text block">Guest Management</span>
                </h1>
                
                <p class="text-xl text-gray-300 mb-10 max-w-3xl mx-auto leading-relaxed" id="heroText">
                    Create your wedding page, manage guest bookings for accommodation, transport, and activities.
                    <span class="text-purple-400 font-bold block mt-3">Guests don't pay. Only couples subscribe.</span>
                </p>
                
                <div class="flex flex-wrap gap-5 justify-center mb-16" id="heroButtons">
                    <a href="<?php echo e(route('register')); ?>" class="group relative px-10 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-semibold text-white overflow-hidden transition-all duration-300 hover:scale-110 hover:shadow-2xl">
                        <span class="relative z-10">Create Your Wedding Page</span>
                        <div class="absolute inset-0 bg-gradient-to-r from-purple-700 to-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    </a>
                    <a href="#how-it-works" class="px-10 py-4 border-2 border-white/30 rounded-full font-semibold text-white hover:bg-white hover:text-gray-900 transition-all duration-300 hover:scale-110 hover:shadow-2xl">
                        <i class="fa-regular fa-circle-play mr-2"></i> Watch Demo
                    </a>
                </div>
                
                <!-- Animated Stats -->
                <div class="grid grid-cols-3 gap-8 max-w-2xl mx-auto pt-8 border-t border-white/10">
                    <div class="stat-item">
                        <div class="text-4xl font-bold shimmer-text" id="stat1">0</div>
                        <div class="text-gray-400 text-sm">Happy Couples</div>
                    </div>
                    <div class="stat-item">
                        <div class="text-4xl font-bold shimmer-text" id="stat2">0</div>
                        <div class="text-gray-400 text-sm">Guests Managed</div>
                    </div>
                    <div class="stat-item">
                        <div class="text-4xl font-bold shimmer-text" id="stat3">0</div>
                        <div class="text-gray-400 text-sm">5-Star Ratings</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Animated Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
                <div class="w-1 h-2 bg-white/50 rounded-full mt-2 animate-pulse"></div>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section id="features" class="py-32 relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <span class="text-purple-400 font-semibold tracking-wider">PREMIUM FEATURES</span>
                <h2 class="text-5xl md:text-6xl font-bold text-white mt-4 mb-6 shimmer-text">Everything You Need</h2>
                <p class="text-xl text-gray-300 max-w-2xl mx-auto">Experience the most advanced wedding guest management platform</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="glass-card p-8 flip-card" data-feature>
                    <div class="relative mb-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-calendar-check text-4xl text-purple-400"></i>
                        </div>
                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-purple-600 rounded-full animate-ping opacity-50"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Wedding Pages</h3>
                    <p class="text-gray-400">Create beautiful wedding pages with all details, schedule, and booking options.</p>
                </div>
                
                <div class="glass-card p-8 flip-card" data-feature>
                    <div class="relative mb-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-hotel text-4xl text-purple-400"></i>
                        </div>
                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-pink-600 rounded-full animate-ping opacity-50" style="animation-delay: 1s;"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Booking Management</h3>
                    <p class="text-gray-400">Guests can reserve accommodation, transport, and activities. No payments collected.</p>
                </div>
                
                <div class="glass-card p-8 flip-card" data-feature>
                    <div class="relative mb-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-users text-4xl text-purple-400"></i>
                        </div>
                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-orange-500 rounded-full animate-ping opacity-50" style="animation-delay: 2s;"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Guest Dashboard</h3>
                    <p class="text-gray-400">Track RSVPs, bookings, and guest preferences all in one place.</p>
                </div>
                
                <div class="glass-card p-8 flip-card" data-feature>
                    <div class="relative mb-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-envelope text-4xl text-purple-400"></i>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Smart Invitations</h3>
                    <p class="text-gray-400">Send email invites or shareable links. Upload guest list via CSV.</p>
                </div>
                
                <div class="glass-card p-8 flip-card" data-feature>
                    <div class="relative mb-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-chart-simple text-4xl text-purple-400"></i>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Export Data</h3>
                    <p class="text-gray-400">Export guest lists, bookings, and RSVPs to CSV or Excel.</p>
                </div>
                
                <div class="glass-card p-8 flip-card" data-feature>
                    <div class="relative mb-6">
                        <div class="w-20 h-20 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-bell text-4xl text-purple-400"></i>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Automated Reminders</h3>
                    <p class="text-gray-400">Automatic email reminders for RSVPs and bookings.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- How It Works Section -->
    <section id="how-it-works" class="py-32 relative bg-gradient-to-b from-transparent to-purple-900/10">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <span class="text-purple-400 font-semibold tracking-wider">SIMPLE PROCESS</span>
                <h2 class="text-5xl md:text-6xl font-bold text-white mt-4 mb-6 shimmer-text">How WedBooker Works</h2>
                <p class="text-xl text-gray-300">From signup to guest management in minutes</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-12">
                <div class="text-center group cursor-pointer" data-step>
                    <div class="relative inline-block mb-8">
                        <div class="w-28 h-28 bg-gradient-to-r from-purple-600 to-pink-600 rounded-3xl flex items-center justify-center text-4xl font-bold text-white mx-auto transform group-hover:scale-110 transition-all duration-500 group-hover:rotate-12 animate-float">
                            1
                        </div>
                        <div class="absolute -top-2 -right-2 w-10 h-10 bg-yellow-400 rounded-full animate-pulse"></div>
                        <div class="absolute inset-0 bg-purple-600 rounded-3xl filter blur-2xl opacity-50 group-hover:opacity-100 transition-all duration-500"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Subscribe</h3>
                    <p class="text-gray-400">Choose a plan that fits your wedding size. Only couples pay.</p>
                </div>
                
                <div class="text-center group cursor-pointer" data-step>
                    <div class="relative inline-block mb-8">
                        <div class="w-28 h-28 bg-gradient-to-r from-purple-600 to-pink-600 rounded-3xl flex items-center justify-center text-4xl font-bold text-white mx-auto transform group-hover:scale-110 transition-all duration-500 group-hover:rotate-12 animate-float" style="animation-delay: 0.2s">
                            2
                        </div>
                        <div class="absolute -top-2 -right-2 w-10 h-10 bg-pink-400 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Create Wedding Page</h3>
                    <p class="text-gray-400">Add your wedding details, schedule, and booking options.</p>
                </div>
                
                <div class="text-center group cursor-pointer" data-step>
                    <div class="relative inline-block mb-8">
                        <div class="w-28 h-28 bg-gradient-to-r from-purple-600 to-pink-600 rounded-3xl flex items-center justify-center text-4xl font-bold text-white mx-auto transform group-hover:scale-110 transition-all duration-500 group-hover:rotate-12 animate-float" style="animation-delay: 0.4s">
                            3
                        </div>
                        <div class="absolute -top-2 -right-2 w-10 h-10 bg-orange-400 rounded-full animate-pulse" style="animation-delay: 2s;"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-3">Invite & Track</h3>
                    <p class="text-gray-400">Send invites and watch RSVPs and bookings come in.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Pricing Section -->
    <section id="pricing" class="py-32 relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <span class="text-purple-400 font-semibold tracking-wider">PRICING</span>
                <h2 class="text-5xl md:text-6xl font-bold text-white mt-4 mb-6 shimmer-text">Simple, Transparent Pricing</h2>
                <p class="text-xl text-gray-300">Only couples pay. Guests book for free.</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Basic Plan -->
                <div class="glass-card p-8 hover:-translate-y-4 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/20 group" data-pricing>
                    <h3 class="text-2xl font-bold text-white mb-2">Basic</h3>
                    <div class="mb-6">
                        <span class="text-5xl font-bold shimmer-text">£29</span>
                        <span class="text-gray-400">/month</span>
                    </div>
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>1 Wedding Page</li>
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>100 Guests</li>
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>RSVP Tracking</li>
                    </ul>
                    <a href="<?php echo e(route('register')); ?>" class="block w-full py-3 text-center border-2 border-purple-600 rounded-full text-white hover:bg-purple-600 transition-all duration-300 hover:scale-105">Choose Basic</a>
                </div>
                
                <!-- Pro Plan -->
                <div class="bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl p-8 transform scale-105 relative overflow-hidden glow-card" data-pricing>
                    <div class="absolute inset-0 bg-white/10 opacity-0 hover:opacity-100 transition-all duration-500"></div>
                    <span class="absolute top-4 right-4 bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-bold animate-pulse">POPULAR</span>
                    <h3 class="text-2xl font-bold text-white mb-2">Pro</h3>
                    <div class="mb-6">
                        <span class="text-5xl font-bold text-white">£59</span>
                        <span class="text-white/80">/month</span>
                    </div>
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center gap-3 text-white"><i class="fas fa-check-circle text-green-300"></i>1 Wedding Page</li>
                        <li class="flex items-center gap-3 text-white"><i class="fas fa-check-circle text-green-300"></i>500 Guests</li>
                        <li class="flex items-center gap-3 text-white"><i class="fas fa-check-circle text-green-300"></i>Full Booking Management</li>
                        <li class="flex items-center gap-3 text-white"><i class="fas fa-check-circle text-green-300"></i>Email Invitations</li>
                    </ul>
                    <a href="<?php echo e(route('register')); ?>" class="block w-full py-3 text-center bg-white text-purple-600 rounded-full font-semibold hover:shadow-2xl transition-all duration-300 hover:scale-105">Choose Pro</a>
                </div>
                
                <!-- Premium Plan -->
                <div class="glass-card p-8 hover:-translate-y-4 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/20 group" data-pricing>
                    <h3 class="text-2xl font-bold text-white mb-2">Premium</h3>
                    <div class="mb-6">
                        <span class="text-5xl font-bold shimmer-text">£99</span>
                        <span class="text-gray-400">/month</span>
                    </div>
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>Unlimited Guests</li>
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>Custom Domain</li>
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>Advanced Analytics</li>
                        <li class="flex items-center gap-3 text-gray-300"><i class="fas fa-check-circle text-green-400"></i>Priority Support</li>
                    </ul>
                    <a href="<?php echo e(route('register')); ?>" class="block w-full py-3 text-center border-2 border-purple-600 rounded-full text-white hover:bg-purple-600 transition-all duration-300 hover:scale-105">Choose Premium</a>
                </div>
            </div>
            
            <p class="text-center text-gray-400 mt-8 text-lg">✨ All plans include 14-day free trial. No credit card required. Cancel anytime.</p>
        </div>
    </section>
    
    <!-- Testimonials Section -->
    <section id="testimonials" class="py-32 relative bg-gradient-to-t from-transparent to-purple-900/10">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <span class="text-purple-400 font-semibold tracking-wider">TESTIMONIALS</span>
                <h2 class="text-5xl md:text-6xl font-bold text-white mt-4 mb-6 shimmer-text">Trusted by Couples Worldwide</h2>
                <p class="text-xl text-gray-300">Join 500+ happy couples who used WedBooker</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="glass-card p-8 hover:-translate-y-2 transition-all duration-500 hover:shadow-2xl" data-testimonial>
                    <div class="flex gap-1 text-yellow-400 mb-4 text-xl">
                        <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-300 mb-6 text-lg">"WedBooker saved us so much stress! Tracking guest bookings for accommodation and transport was a breeze. Our guests loved how easy it was to RSVP."</p>
                    <div class="flex items-center gap-4">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full object-cover border-2 border-purple-500">
                        <div>
                            <h4 class="font-bold text-white">Sarah & Michael</h4>
                            <p class="text-sm text-gray-400">Married June 2024</p>
                        </div>
                    </div>
                </div>
                
                <div class="glass-card p-8 hover:-translate-y-2 transition-all duration-500 hover:shadow-2xl" data-testimonial>
                    <div class="flex gap-1 text-yellow-400 mb-4 text-xl">
                        <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-300 mb-6 text-lg">"The fact that guests don't have to pay through the platform was a huge relief. Everyone could just book and we handled the arrangements."</p>
                    <div class="flex items-center gap-4">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full object-cover border-2 border-purple-500">
                        <div>
                            <h4 class="font-bold text-white">James & Emma</h4>
                            <p class="text-sm text-gray-400">Married August 2024</p>
                        </div>
                    </div>
                </div>
                
                <div class="glass-card p-8 hover:-translate-y-2 transition-all duration-500 hover:shadow-2xl" data-testimonial>
                    <div class="flex gap-1 text-yellow-400 mb-4 text-xl">
                        <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-300 mb-6 text-lg">"The export feature was a lifesaver for our coordinator. We knew exactly who needed what. Highly recommend!"</p>
                    <div class="flex items-center gap-4">
                        <img src="https://randomuser.me/api/portraits/women/2.jpg" class="w-12 h-12 rounded-full object-cover border-2 border-purple-500">
                        <div>
                            <h4 class="font-bold text-white">Rachel & David</h4>
                            <p class="text-sm text-gray-400">Married September 2024</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- FAQ Section -->
    <section class="py-32 relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <span class="text-purple-400 font-semibold tracking-wider">FAQ</span>
                <h2 class="text-5xl md:text-6xl font-bold text-white mt-4 mb-6 shimmer-text">Frequently Asked Questions</h2>
                <p class="text-xl text-gray-300">Everything you need to know</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                <div class="glass-card p-6 hover:-translate-y-1 transition-all duration-300" data-faq>
                    <h3 class="text-lg font-bold text-white mb-2"><i class="fa-regular fa-circle-question text-purple-400 mr-2"></i>Do guests need to create accounts?</h3>
                    <p class="text-gray-400">No, guests can RSVP and book using just their name and email. No account creation required.</p>
                </div>
                
                <div class="glass-card p-6 hover:-translate-y-1 transition-all duration-300" data-faq>
                    <h3 class="text-lg font-bold text-white mb-2"><i class="fa-regular fa-circle-question text-purple-400 mr-2"></i>How do guests book without paying?</h3>
                    <p class="text-gray-400">The platform is for reservation management only. Guests indicate what they need, and you handle the actual payments separately.</p>
                </div>
                
                <div class="glass-card p-6 hover:-translate-y-1 transition-all duration-300" data-faq>
                    <h3 class="text-lg font-bold text-white mb-2"><i class="fa-regular fa-circle-question text-purple-400 mr-2"></i>Can I export the guest list?</h3>
                    <p class="text-gray-400">Yes, you can export all guest data including RSVPs and bookings to CSV or Excel.</p>
                </div>
                
                <div class="glass-card p-6 hover:-translate-y-1 transition-all duration-300" data-faq>
                    <h3 class="text-lg font-bold text-white mb-2"><i class="fa-regular fa-circle-question text-purple-400 mr-2"></i>What payment methods do you accept?</h3>
                    <p class="text-gray-400">We accept all major credit cards via Stripe and PayPal for couple subscriptions.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="py-32 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-purple-900 to-pink-900 transform skew-y-3 scale-150"></div>
        <div class="container mx-auto px-4 text-center relative z-10">
            <h2 class="text-5xl md:text-6xl font-bold text-white mb-6 shimmer-text">Start Your Journey Today</h2>
            <p class="text-xl text-white/90 mb-10">Join 500+ couples who've simplified their wedding guest management</p>
            <a href="<?php echo e(route('register')); ?>" class="inline-block px-12 py-5 bg-white text-purple-600 rounded-full text-xl font-bold hover:shadow-2xl transition-all duration-500 hover:scale-110 hover:shadow-white/30 group relative overflow-hidden">
                <span class="relative z-10">Create Your Wedding Page - It's Free</span>
                <div class="absolute inset-0 bg-gradient-to-r from-purple-100 to-pink-100 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
            </a>
            <p class="mt-6 text-white/80 text-lg">✨ 14-day free trial • No credit card required • Cancel anytime</p>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="bg-black/50 py-16 border-t border-white/10">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl rotate-infinite"></div>
                        <span class="text-xl font-bold text-white">WedBooker</span>
                    </div>
                    <p class="text-gray-400">The ultimate guest management platform for couples. No guest payments, just simple booking coordination.</p>
                </div>
                
                <div>
                    <h4 class="font-bold text-white mb-4">Product</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#features" class="hover:text-purple-400 transition-all duration-300 hover:translate-x-2 inline-block">Features</a></li>
                        <li><a href="#pricing" class="hover:text-purple-400 transition-all duration-300 hover:translate-x-2 inline-block">Pricing</a></li>
                        <li><a href="#how-it-works" class="hover:text-purple-400 transition-all duration-300 hover:translate-x-2 inline-block">How It Works</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold text-white mb-4">Company</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-purple-400 transition-all duration-300 hover:translate-x-2 inline-block">About</a></li>
                        <li><a href="#" class="hover:text-purple-400 transition-all duration-300 hover:translate-x-2 inline-block">Blog</a></li>
                        <li><a href="#" class="hover:text-purple-400 transition-all duration-300 hover:translate-x-2 inline-block">Contact</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold text-white mb-4">Follow Us</h4>
                    <div class="flex gap-3">
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all duration-300 hover:scale-110 hover:rotate-12"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all duration-300 hover:scale-110 hover:rotate-12"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all duration-300 hover:scale-110 hover:rotate-12"><i class="fa-brands fa-twitter"></i></a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-purple-600 transition-all duration-300 hover:scale-110 hover:rotate-12"><i class="fa-brands fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12 pt-8 border-t border-white/10">
                <p class="text-gray-400">© 2024 WedBooker. All rights reserved. <span class="shimmer-text">For couples only.</span></p>
            </div>
        </div>
    </footer>
    
    <script>
        // Scroll Progress Bar
        window.addEventListener('scroll', () => {
            const winScroll = document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            document.getElementById('scrollProgress').style.width = scrolled + '%';
        });
        
        // Animated Stats Counter
        const stats = [
            { element: document.getElementById('stat1'), target: 500 },
            { element: document.getElementById('stat2'), target: 10000 },
            { element: document.getElementById('stat3'), target: 4.9 }
        ];
        
        function animateStats() {
            stats.forEach(stat => {
                let current = 0;
                const increment = stat.target / 50;
                const interval = setInterval(() => {
                    current += increment;
                    if (current >= stat.target) {
                        stat.element.textContent = stat.target === 4.9 ? '4.9' : Math.floor(stat.target);
                        clearInterval(interval);
                    } else {
                        stat.element.textContent = Math.floor(current);
                    }
                }, 30);
            });
        }
        
        // Trigger stats animation when stats come into view
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    animateStats();
                    observer.unobserve(entry.target);
                }
            });
        });
        observer.observe(document.querySelector('.stat-item'));
        
        // GSAP Animations
        gsap.registerPlugin(ScrollTrigger);
        
        // Hero Section Animation
        const tl = gsap.timeline();
        tl.from("#heroBadge", { duration: 1, y: -100, opacity: 0, ease: "bounce.out" })
          .from("#heroTitle", { duration: 1.2, scale: 0.5, opacity: 0, rotationX: 90, ease: "back.out(1.7)" }, "-=0.5")
          .from("#heroText", { duration: 1, x: -200, opacity: 0, ease: "power3.out" }, "-=0.8")
          .from("#heroButtons", { duration: 1, y: 200, opacity: 0, ease: "elastic.out(1, 0.5)" }, "-=0.6");
        
        // Animate elements on scroll
        gsap.utils.toArray('[data-feature]').forEach((card, i) => {
            gsap.from(card, {
                scrollTrigger: {
                    trigger: card,
                    start: "top 80%",
                    end: "bottom 20%",
                    toggleActions: "play none none reverse"
                },
                duration: 0.8,
                y: 100,
                opacity: 0,
                rotationY: 30,
                delay: i * 0.2,
                ease: "power3.out"
            });
        });
        
        gsap.utils.toArray('[data-step]').forEach((step, i) => {
            gsap.from(step, {
                scrollTrigger: {
                    trigger: step,
                    start: "top 85%",
                    toggleActions: "play none none reverse"
                },
                duration: 0.8,
                scale: 0,
                opacity: 0,
                rotation: 360,
                delay: i * 0.3,
                ease: "back.out(1.2)"
            });
        });
        
        gsap.utils.toArray('[data-pricing]').forEach((card, i) => {
            gsap.from(card, {
                scrollTrigger: {
                    trigger: card,
                    start: "top 85%",
                    toggleActions: "play none none reverse"
                },
                duration: 1,
                y: 150,
                opacity: 0,
                scale: 0.8,
                delay: i * 0.2,
                ease: "elastic.out(1, 0.5)"
            });
        });
        
        gsap.utils.toArray('[data-testimonial]').forEach((testimonial, i) => {
            gsap.from(testimonial, {
                scrollTrigger: {
                    trigger: testimonial,
                    start: "top 85%",
                    toggleActions: "play none none reverse"
                },
                duration: 0.8,
                x: i % 2 === 0 ? -100 : 100,
                opacity: 0,
                rotation: i % 2 === 0 ? -10 : 10,
                ease: "power3.out"
            });
        });
        
        gsap.utils.toArray('[data-faq]').forEach((faq, i) => {
            gsap.from(faq, {
                scrollTrigger: {
                    trigger: faq,
                    start: "top 90%",
                    toggleActions: "play none none reverse"
                },
                duration: 0.6,
                y: 50,
                opacity: 0,
                delay: i * 0.1,
                ease: "power2.out"
            });
        });
        
        // Magnetic Button Effect
        document.querySelectorAll('.magnetic-btn').forEach(btn => {
            btn.addEventListener('mousemove', (e) => {
                const rect = btn.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width / 2;
                const y = e.clientY - rect.top - rect.height / 2;
                btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
            });
            btn.addEventListener('mouseleave', () => {
                btn.style.transform = 'translate(0, 0)';
            });
        });
        
        // Navbar Background Change
        window.addEventListener('scroll', () => {
            const navbar = document.getElementById('navbar');
            if(window.scrollY > 100) {
                navbar.style.background = 'rgba(0,0,0,0.8)';
                navbar.style.backdropFilter = 'blur(20px)';
                navbar.style.borderBottom = '1px solid rgba(255,255,255,0.1)';
            } else {
                navbar.style.background = 'transparent';
                navbar.style.backdropFilter = 'blur(0)';
                navbar.style.borderBottom = 'none';
            }
        });
        
        // Parallax Orbs
        document.addEventListener('mousemove', (e) => {
            const orb1 = document.getElementById('orb1');
            const orb2 = document.getElementById('orb2');
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;
            if(orb1 && orb2) {
                orb1.style.transform = `translate(${x * 50}px, ${y * 50}px)`;
                orb2.style.transform = `translate(${-x * 50}px, ${-y * 50}px)`;
            }
        });
        
        // Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if(target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    </script>
</body>
</html><?php /**PATH D:\skietagency\wedding\code\resources\views/landing.blade.php ENDPATH**/ ?>