<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CCopy - Clipboard Reimagined</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
                    },
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            500: '#4a90e2',
                            600: '#3a7bd5',
                            900: '#1e3a8a'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            transition: background-color 0.3s;
        }
        body.light {
            background: linear-gradient(135deg, #f4f6f9 0%, #e9ecf0 100%);
        }
        body.dark {
            background: linear-gradient(135deg, #1a1f2e 0%, #111827 100%);
        }
        .cursor-dot {
            width: 20px;
            height: 20px;
            background-color: rgba(74, 144, 226, 0.2);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s, background-color 0.3s;
            z-index: 9999;
        }
        .cursor-dot.active {
            width: 50px;
            height: 50px;
            background-color: rgba(74, 144, 226, 0.1);
        }
        .floating-element {
            animation: float 4s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .particle {
            position: absolute;
            background-color: rgba(74, 144, 226, 0.1);
            border-radius: 50%;
            pointer-events: none;
        }
        .feature-card {
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
        .theme-toggle {
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: background-color 0.3s;
        }
        .theme-toggle:hover {
            background-color: rgba(74, 144, 226, 0.1);
        }
        .contact-input {
            transition: all 0.3s ease;
        }
        .contact-input:focus {
            transform: translateY(-2px);
        }
    </style>
</head>
<body class="relative min-h-screen light">
    <div id="cursor-dot" class="cursor-dot"></div>

    <div class="container mx-auto px-4 relative z-10">
        <header class="flex items-center justify-between py-8">
            <a href="#" class="text-2xl font-bold text-primary-500 transform hover:scale-105 transition">CCopy</a>
            <nav class="flex items-center space-x-6">
                <a href="#features" class="text-primary-500 hover:text-primary-600 transition opacity-0" id="nav-features">Features</a>
                <a href="#contact" class="text-primary-500 hover:text-primary-600 transition opacity-0" id="nav-contact">Contact</a>
                <div class="theme-toggle opacity-0" id="theme-toggle" onclick="toggleTheme()">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sun-icon text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 moon-icon text-primary-500 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                    </svg>
               
        </header>

        <main>
            <section class="min-h-[calc(100vh-100px)] flex items-center relative">
                <div id="hero-particles"></div>
                <div class="w-full grid md:grid-cols-2 gap-16 items-center relative">
                    <div class="space-y-6 relative z-10">
                        <h1 id="hero-title" class="text-5xl font-bold text-gray-800 dark:text-white leading-tight opacity-0">
                            Clipboard<br/>Reimagined
                        </h1>
                        <p id="hero-subtitle" class="text-xl text-gray-600 dark:text-gray-300 max-w-xl opacity-0">
                            Seamlessly sync, intelligently manage, and securely store your clipboard across all devices with unprecedented ease.
                        </p>
                    </div>
                    <div class="relative z-10">
                        <div id="clipboard-mockup" class="opacity-0">
                            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md p-6 rounded-2xl shadow-2xl transform hover:scale-[1.02] transition-transform">
                                <div class="flex items-center mb-4">
                                    <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                                    <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                </div>
                                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                                    <p class="text-gray-700 dark:text-gray-300"><\> Never lose what you copied <\></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="features" class="py-20">
                <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-12 opacity-0" id="features-title">
                    Powerful Features
                </h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="feature-card bg-white/80 dark:bg-gray-800/80 backdrop-blur-md p-6 rounded-2xl shadow-lg opacity-0">
                        <div class="h-12 w-12 bg-primary-500/10 rounded-lg flex items-center justify-center mb-4">
                            <svg class="h-6 w-6 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Universal Sync</h3>
                        <p class="text-gray-600 dark:text-gray-300">Instantly sync your clipboard across all your devices with real-time updates.</p>
                    </div>

                    <div class="feature-card bg-white/80 dark:bg-gray-800/80 backdrop-blur-md p-6 rounded-2xl shadow-lg opacity-0">
                        <div class="h-12 w-12 bg-primary-500/10 rounded-lg flex items-center justify-center mb-4">
                            <svg class="h-6 w-6 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">End-to-End Encryption</h3>
                        <p class="text-gray-600 dark:text-gray-300">Your clipboard data is secured with military-grade encryption at rest and in transit.</p>
                    </div>

                    <div class="feature-card bg-white/80 dark:bg-gray-800/80 backdrop-blur-md p-6 rounded-2xl shadow-lg opacity-0">
                        <div class="h-12 w-12 bg-primary-500/10 rounded-lg flex items-center justify-center mb-4">
                            <svg class="h-6 w-6 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Smart History</h3>
                        <p class="text-gray-600 dark:text-gray-300">Access your clipboard history with intelligent search and categorization.</p>
                    </div>
                </div>
            </section>

            <section id="contact" class="py-20">
                <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-12 opacity-0" id="contact-title">
                    Contact Us
                </h2>
                <div class="max-w-2xl mx-auto">
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md p-8 rounded-2xl shadow-lg opacity-0" id="contact-form">
                        <form id="bug-report-form" onsubmit="handleSubmit(event)" class="space-y-6">
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
                                <input type="email" id="email" required class="contact-input w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none">
                            </div>
                            
                            <div>
                                <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Subject</label>
                                <select id="subject" required class="contact-input w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none">
                                    <option value="bug">Report a Bug</option>
                                    <option value="feature">Feature Request</option>
                                    <option value="support">Support</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>

                            <div>
                                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message</label>
                                <textarea id="message" required rows="4" class="contact-input w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none"></textarea>
                            </div>

                            <button type="submit" class="w-full bg-primary-500 text-white px-6 py-3 rounded-lg hover:bg-primary-600 transition transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
                                Send Message
                            </button></antArtifact></form>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script>
        // GSAP Animations
        gsap.registerPlugin(ScrollTrigger);

        // Cursor dot effect
        document.addEventListener('mousemove', (e) => {
            const dot = document.getElementById('cursor-dot');
            dot.style.left = `${e.clientX}px`;
            dot.style.top = `${e.clientY}px`;
        });

        document.addEventListener('mousedown', () => {
            document.getElementById('cursor-dot').classList.add('active');
        });

        document.addEventListener('mouseup', () => {
            document.getElementById('cursor-dot').classList.remove('active');
        });

        // Particle background
        function createParticles() {
            const container = document.getElementById('hero-particles');
            const particleCount = 20;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                particle.style.width = `${Math.random() * 30 + 10}px`;
                particle.style.height = particle.style.width;
                
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                particle.style.animationDuration = `${Math.random() * 5 + 3}s`;
                particle.style.animationDelay = `${Math.random() * 2}s`;
                particle.style.animationIterationCount = 'infinite';
                particle.style.animationName = 'float';
                
                container.appendChild(particle);
            }
        }

        createParticles();

        // Theme toggling
        function toggleTheme() {
            const body = document.body;
            const sunIcon = document.querySelector('.sun-icon');
            const moonIcon = document.querySelector('.moon-icon');

            if (body.classList.contains('light')) {
                body.classList.remove('light');
                body.classList.add('dark');
                sunIcon.classList.add('hidden');
                moonIcon.classList.remove('hidden');
            } else {
                body.classList.remove('dark');
                body.classList.add('light');
                moonIcon.classList.add('hidden');
                sunIcon.classList.remove('hidden');
            }
        }

        // Page load animations
        gsap.fromTo('#hero-title', 
            { y: 50, opacity: 0 }, 
            { y: 0, opacity: 1, duration: 1, ease: 'power3.out' }
        );

        gsap.fromTo('#hero-subtitle', 
            { y: 50, opacity: 0 }, 
            { y: 0, opacity: 1, duration: 1, delay: 0.3, ease: 'power3.out' }
        );

        gsap.fromTo('#clipboard-mockup', 
            { scale: 0.8, opacity: 0 }, 
            { scale: 1, opacity: 1, duration: 1, delay: 0.5, ease: 'back.out(1.7)' }
        );

        gsap.fromTo('#nav-features, #nav-contact, #theme-toggle, #nav-cta', 
            { y: -20, opacity: 0 }, 
            { y: 0, opacity: 1, duration: 0.8, stagger: 0.2, ease: 'power3.out' }
        );

        // Feature cards animation
        gsap.fromTo('#features-title',
            { y: 30, opacity: 0 },
            {
                y: 0,
                opacity: 1,
                duration: 1,
                scrollTrigger: {
                    trigger: '#features-title',
                    start: 'top 80%',
                    end: 'top 50%',
                    toggleActions: 'play none none reverse'
                }
            }
        );

        // Animate feature cards with stagger
        gsap.fromTo('.feature-card',
            { y: 50, opacity: 0 },
            {
                y: 0,
                opacity: 1,
                duration: 1,
                stagger: 0.2,
                scrollTrigger: {
                    trigger: '.feature-card',
                    start: 'top 80%',
                    end: 'top 50%',
                    toggleActions: 'play none none reverse'
                }
            }
        );

        // Contact section animations
        gsap.fromTo('#contact-title',
            { y: 30, opacity: 0 },
            {
                y: 0,
                opacity: 1,
                duration: 1,
                scrollTrigger: {
                    trigger: '#contact-title',
                    start: 'top 80%',
                    end: 'top 50%',
                    toggleActions: 'play none none reverse'
                }
            }
        );

        gsap.fromTo('#contact-form',
            { y: 50, opacity: 0 },
            {
                y: 0,
                opacity: 1,
                duration: 1,
                scrollTrigger: {
                    trigger: '#contact-form',
                    start: 'top 80%',
                    end: 'top 50%',
                    toggleActions: 'play none none reverse'
                }
            }
        );

        // Hover animations for feature cards
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                gsap.to(card, {
                    y: -5,
                    duration: 0.3,
                    ease: 'power2.out'
                });
                gsap.to(card.querySelector('svg'), {
                    scale: 1.1,
                    duration: 0.3,
                    ease: 'power2.out'
                });
            });

            card.addEventListener('mouseleave', () => {
                gsap.to(card, {
                    y: 0,
                    duration: 0.3,
                    ease: 'power2.out'
                });
                gsap.to(card.querySelector('svg'), {
                    scale: 1,
                    duration: 0.3,
                    ease: 'power2.out'
                });
            });
        });

        // Parallax effect for particles
        document.addEventListener('mousemove', (e) => {
            const particles = document.querySelectorAll('.particle');
            const mouseX = e.clientX / window.innerWidth - 0.5;
            const mouseY = e.clientY / window.innerHeight - 0.5;

            particles.forEach(particle => {
                const speed = parseFloat(particle.style.width) / 40;
                gsap.to(particle, {
                    x: mouseX * 50 * speed,
                    y: mouseY * 50 * speed,
                    duration: 1,
                    ease: 'power2.out'
                });
            });
        });

        // Contact form submission handler
        function handleSubmit(event) {
            event.preventDefault();
            
            // Get form data
            const email = document.getElementById('email').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            // Here you would typically send this data to your backend
            console.log('Form submission:', { email, subject, message });
            
            // Show success message
            alert('Thank you for your message. We will get back to you soon!');
            
            // Clear form
            event.target.reset();
        }
    </script>
</body>
</html>