<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BritanyAI - Next Generation AI Assistant</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #6366f1;
            --primary-glow: rgba(99, 102, 241, 0.5);
            --secondary: #8b5cf6;
            --accent: #ec4899;
            --dark: #0a0a0f;
            --darker: #050508;
            --card: rgba(255, 255, 255, 0.03);
            --border: rgba(255, 255, 255, 0.1);
            --text: #f8fafc;
            --text-muted: #94a3b8;
            --success: #10b981;
            --warning: #f59e0b;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--darker);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Animated Background */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.4;
            animation: float 20s infinite ease-in-out;
        }

        .orb-1 {
            width: 600px;
            height: 600px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            top: -200px;
            right: -200px;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 500px;
            height: 500px;
            background: linear-gradient(135deg, var(--accent), var(--primary));
            bottom: -150px;
            left: -150px;
            animation-delay: -5s;
        }

        .orb-3 {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, var(--secondary), var(--accent));
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(50px, -50px) scale(1.1); }
            50% { transform: translate(0, 50px) scale(0.95); }
            75% { transform: translate(-50px, -25px) scale(1.05); }
        }

        /* Particle Network */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 1.5rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(10, 10, 15, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            transition: all 0.3s ease;
        }

        nav.scrolled {
            padding: 1rem 5%;
            background: rgba(10, 10, 15, 0.95);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            -webkit-text-fill-color: white;
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            list-style: none;
        }

        .nav-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transition: width 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--text);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-cta {
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .nav-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s ease;
        }

        .nav-cta:hover::before {
            left: 100%;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px var(--primary-glow);
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8rem 5% 5rem;
            position: relative;
        }

        .hero-content {
            max-width: 1200px;
            text-align: center;
            z-index: 1;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 50px;
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            animation: fadeInUp 0.8s ease;
        }

        .badge-dot {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .hero h1 {
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            animation: fadeInUp 0.8s ease 0.1s both;
        }

        .hero h1 .gradient-text {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto 3rem;
            animation: fadeInUp 0.8s ease 0.2s both;
        }

        .hero-cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 0.8s ease 0.3s both;
        }

        .btn {
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            box-shadow: 0 4px 20px var(--primary-glow);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px var(--primary-glow);
        }

        .btn-secondary {
            background: var(--card);
            color: var(--text);
            border: 1px solid var(--border);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Demo Window */
        .demo-window {
            max-width: 900px;
            margin: 4rem auto 0;
            background: rgba(15, 15, 25, 0.8);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            backdrop-filter: blur(20px);
            animation: fadeInUp 0.8s ease 0.4s both;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .demo-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1.25rem;
            background: rgba(255, 255, 255, 0.02);
            border-bottom: 1px solid var(--border);
        }

        .demo-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .demo-dot.red { background: #ef4444; }
        .demo-dot.yellow { background: #f59e0b; }
        .demo-dot.green { background: #10b981; }

        .demo-title {
            margin-left: 0.75rem;
            font-size: 0.875rem;
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
        }

        .demo-content {
            padding: 1.5rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
        }

        .demo-line {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
            opacity: 0;
            animation: typeLine 0.5s ease forwards;
        }

        .demo-line:nth-child(1) { animation-delay: 0.5s; }
        .demo-line:nth-child(2) { animation-delay: 1s; }
        .demo-line:nth-child(3) { animation-delay: 1.5s; }
        .demo-line:nth-child(4) { animation-delay: 2s; }
        .demo-line:nth-child(5) { animation-delay: 2.5s; }

        @keyframes typeLine {
            to { opacity: 1; }
        }

        .demo-prompt {
            color: var(--primary);
        }

        .demo-command {
            color: var(--text);
        }

        .demo-comment {
            color: var(--text-muted);
        }

        .demo-response {
            color: var(--success);
        }

        /* Features Section */
        .features {
            padding: 6rem 5%;
            position: relative;
        }

        .section-header {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 4rem;
        }

        .section-header h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .section-header p {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: rgba(99, 102, 241, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .feature-card h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .feature-card p {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Stats Section */
        .stats {
            padding: 4rem 5%;
            background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.05), transparent);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .stat-item {
            padding: 2rem;
        }

        .stat-value {
            font-size: 3rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-muted);
            font-size: 1rem;
        }

        /* CTA Section */
        .cta-section {
            padding: 6rem 5%;
            text-align: center;
        }

        .cta-box {
            max-width: 800px;
            margin: 0 auto;
            padding: 4rem;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
            border: 1px solid var(--border);
            border-radius: 24px;
            position: relative;
            overflow: hidden;
        }

        .cta-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .cta-content {
            position: relative;
            z-index: 1;
        }

        .cta-box h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .cta-box p {
            color: var(--text-muted);
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        /* Footer */
        footer {
            padding: 3rem 5%;
            border-top: 1px solid var(--border);
            text-align: center;
            color: var(--text-muted);
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1.5rem;
            list-style: none;
        }

        .footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: var(--text);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .cta-box {
                padding: 2rem;
            }

            .cta-box h2 {
                font-size: 1.75rem;
            }
        }

        /* Scroll Animations */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Background Animation -->
    <div class="bg-animation">
        <div class="gradient-orb orb-1"></div>
        <div class="gradient-orb orb-2"></div>
        <div class="gradient-orb orb-3"></div>
    </div>

    <!-- Navigation -->
    <nav id="navbar">
        <div class="logo">
            <div class="logo-icon">B</div>
            BritanyAI
        </div>
        <ul class="nav-links">
            <li><a href="#features">Features</a></li>
            <li><a href="#capabilities">Capabilities</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#docs">Docs</a></li>
        </ul>
        <button class="nav-cta" onclick="window.location.href='/login'">Get Started</button>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <div class="badge">
                <span class="badge-dot"></span>
                Powered by Advanced AI Models
            </div>
            <h1>
                Meet <span class="gradient-text">BritanyAI</span><br>
                Your Intelligent Assistant
            </h1>
            <p class="hero-subtitle">
                Experience the future of AI-powered conversations. BritanyAI combines cutting-edge language models 
                with secure sandboxed code execution to help you build, create, and solve problems faster.
            </p>
            <div class="hero-cta">
                <a href="/login" class="btn btn-primary">
                    Start Chatting
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
                <a href="#features" class="btn btn-secondary">Learn More</a>
            </div>

            <!-- Demo Window -->
            <div class="demo-window">
                <div class="demo-header">
                    <div class="demo-dot red"></div>
                    <div class="demo-dot yellow"></div>
                    <div class="demo-dot green"></div>
                    <span class="demo-title">britanyai-terminal — zsh</span>
                </div>
                <div class="demo-content">
                    <div class="demo-line">
                        <span class="demo-prompt">➜</span>
                        <span class="demo-command">britanyai</span>
                    </div>
                    <div class="demo-line">
                        <span class="demo-comment"># Initialize AI assistant...</span>
                    </div>
                    <div class="demo-line">
                        <span class="demo-response">✓ Connected to GPT-4o, Claude 3.5, and 25+ models</span>
                    </div>
                    <div class="demo-line">
                        <span class="demo-response">✓ Secure sandbox environment ready</span>
                    </div>
                    <div class="demo-line">
                        <span class="demo-prompt">britanyai ➜</span>
                        <span class="demo-command">What would you like to create today?</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="section-header scroll-reveal">
            <h2>Powerful Features</h2>
            <p>Everything you need to supercharge your workflow with AI assistance</p>
        </div>
        <div class="features-grid">
            <div class="feature-card scroll-reveal">
                <div class="feature-icon">🧠</div>
                <h3>Multi-Model Intelligence</h3>
                <p>Access GPT-4o, Claude 3.5, Llama 3.1, Mistral, and 25+ cutting-edge AI models all in one place.</p>
            </div>
            <div class="feature-card scroll-reveal">
                <div class="feature-icon">🔒</div>
                <h3>Secure Sandbox</h3>
                <p>Execute code in isolated Docker containers with real-time output streaming and file management.</p>
            </div>
            <div class="feature-card scroll-reveal">
                <div class="feature-icon">⚡</div>
                <h3>Lightning Fast</h3>
                <p>Optimized for speed with edge deployment, streaming responses, and minimal latency.</p>
            </div>
            <div class="feature-card scroll-reveal">
                <div class="feature-icon">🔧</div>
                <h3>Code Execution</h3>
                <p>Run Python, JavaScript, shell commands, and more with persistent file systems.</p>
            </div>
            <div class="feature-card scroll-reveal">
                <div class="feature-icon">💬</div>
                <h3>Real-time Chat</h3>
                <p>Seamless conversations with context awareness and message history persistence.</p>
            </div>
            <div class="feature-card scroll-reveal">
                <div class="feature-icon">🔐</div>
                <h3>Enterprise Security</h3>
                <p>WorkOS authentication, MFA support, and team collaboration features.</p>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats">
        <div class="stats-grid">
            <div class="stat-item scroll-reveal">
                <div class="stat-value">25+</div>
                <div class="stat-label">AI Models</div>
            </div>
            <div class="stat-item scroll-reveal">
                <div class="stat-value">99.9%</div>
                <div class="stat-label">Uptime</div>
            </div>
            <div class="stat-item scroll-reveal">
                <div class="stat-value">&lt;100ms</div>
                <div class="stat-label">Response Time</div>
            </div>
            <div class="stat-item scroll-reveal">
                <div class="stat-value">∞</div>
                <div class="stat-label">Possibilities</div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="cta-box scroll-reveal">
            <div class="cta-content">
                <h2>Ready to Experience the Future?</h2>
                <p>Join thousands of developers, creators, and innovators using BritanyAI to build amazing things.</p>
                <a href="/login" class="btn btn-primary" style="padding: 1rem 2.5rem; font-size: 1.1rem;">
                    Get Started Free
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <ul class="footer-links">
            <li><a href="/privacy-policy">Privacy</a></li>
            <li><a href="/terms-of-service">Terms</a></li>
            <li><a href="https://github.com">GitHub</a></li>
            <li><a href="https://twitter.com">Twitter</a></li>
        </ul>
        <p>&copy; 2026 BritanyAI. All rights reserved.</p>
    </footer>

    <script>
        // Navbar scroll effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Scroll reveal animation
        const scrollReveal = () => {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                if (elementTop < windowHeight - 100) {
                    element.classList.add('revealed');
                }
            });
        };

        window.addEventListener('scroll', scrollReveal);
        window.addEventListener('load', scrollReveal);

        // Smooth scroll for nav 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'
                    });
                }
            });
        });

        // Particle effect
        const createParticle = () => {
            const particle = document.createElement('div');
            particle.style.cssText = `
                position: fixed;
                width: 4px;
                height: 4px;
                background: rgba(99, 102, 241, 0.6);
                border-radius: 50%;
                pointer-events: none;
                z-index: -1;
                left: ${Math.random() * 100}vw;
                top: ${Math.random() * 100}vh;
                animation: float ${10 + Math.random() * 20}s infinite ease-in-out;
            `;
            document.body.appendChild(particle);
            
            setTimeout(() => particle.remove(), 20000);
        };

        // Create particles periodically
        setInterval(createParticle, 500);

        // Parallax effect for gradient orbs
        document.addEventListener('mousemove', (e) => {
            const orbs = document.querySelectorAll('.gradient-orb');
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;
            
            orbs.forEach((orb, index) => {
                const speed = (index + 1) * 20;
                const xOffset = (0.5 - x) * speed;
                const yOffset = (0.5 - y) * speed;
                orb.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
            });
        });
    </script>
</body>
</html>

