<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CarChain - Web3 Správa vozidel</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
        <style>
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .animated-gradient {
            background: linear-gradient(-45deg, #29abe2, #2463eb, #1d89b8, #3b82f6);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .hover-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hover-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

        .text-gradient {
            background: linear-gradient(to right, #29abe2, #2463eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .glow {
            box-shadow: 0 0 30px rgba(41, 171, 226, 0.3);
        }

        .hero-pattern {
            background-image: radial-gradient(rgba(41, 171, 226, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .noise {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.05;
        }

        /* Mobile menu styles */
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }

        .mobile-menu.active {
            transform: translateX(0);
        }

        .hamburger-line {
            transition: all 0.3s ease-in-out;
        }

        .hamburger.active .hamburger-line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .hamburger.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active .hamburger-line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        @media (max-width: 640px) {
            .glass-card {
                backdrop-filter: blur(10px);
            }
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 overflow-x-hidden">
    <!-- Header -->
    <header class="fixed w-full z-50 px-4">
        <nav class="max-w-7xl mx-auto glass-card rounded-2xl mt-4 p-4 md:p-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-xl animated-gradient mr-3">
                        <img src="logo.png" alt="Logo" class="w-full h-full rounded-xl">
                    </div>
                    <span class="text-xl md:text-2xl font-bold ">Car</span><span class="text-xl md:text-2xl ">vidia</span>
                </div>
                <div class="hidden md:flex items-center gap-2">
                    <button class="px-2 py-2 text-slate-600 hover:text-slate-900 transition-colors">
                        Domů
                    </button>
                    <button class="px-2 py-2 text-slate-600 hover:text-slate-900 transition-colors">
                        O aplikaci
                    </button>
                    <button class="px-2 py-2 text-slate-600 hover:text-slate-900 transition-colors">
                        Ceník
                    </button>
                    <button class="px-2 py-2 text-slate-600 hover:text-slate-900 transition-colors">
                        Kontakt
                    </button>
                    <button class="px-2 py-2 text-slate-600 hover:text-slate-900 transition-colors">
                        Přihlášení
                    </button>
                    <button class="bg-[#29abe2] text-white px-6 py-3 rounded-xl hover:shadow-lg ">
                        Registrace
                    </button>
                </div>
                <!-- Mobile Menu Button -->
                <button class="hamburger md:hidden flex flex-col justify-center items-center w-8 h-8 gap-1.5">
                    <span class="hamburger-line w-6 h-0.5 bg-slate-900 rounded-full"></span>
                    <span class="hamburger-line w-6 h-0.5 bg-slate-900 rounded-full"></span>
                    <span class="hamburger-line w-6 h-0.5 bg-slate-900 rounded-full"></span>
                </button>
            </div>
        </nav>
        <!-- Mobile Menu Panel -->
        <div class="mobile-menu fixed top-0 right-0 h-full w-64 glass-card md:hidden">
            <div class="p-6 flex flex-col gap-6">
                <button class="px-4 py-2 text-slate-600 hover:text-slate-900 transition-colors text-left">
                    Dokumentace
                </button>
                <button class="bg-[#29abe2] text-white px-4 py-2 rounded-xl hover:shadow-lg transition-all">
                    Connect Wallet
                </button>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
   <section class="min-h-screen pt-32 md:pt-40 lg:pt-48 hero-pattern relative">
        <div class="noise absolute inset-0"></div>
        <div class="max-w-7xl mx-auto px-4 relative">
            <div class="grid md:grid-cols-2 gap-12 md:gap-20 items-center">
                <div class="space-y-8 md:space-y-12" data-aos="fade-up">
                    <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight">
                        Moderní správa <span class="text-[#29abe2]">vozidel</span> budoucnosti
                    </h1>
                    <p class="text-lg md:text-xl text-slate-600 leading-relaxed">
                        Decentralizovaná platforma pro bezpečnou správu a sdílení historie vozidel pomocí NFT a smart kontraktů.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="bg-[#29abe2] text-white px-8 py-4 rounded-xl hover:shadow-lg transition-all text-lg">
                            Začít zdarma
                        </button>
                        <button class="px-8 py-4 rounded-xl border-2 border-[#29abe2] text-[#29abe2] hover:bg-[#29abe2] hover:text-white transition-all text-lg">
                            Demo
                        </button>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                        <div class="glass-card p-6 rounded-2xl hover-card">
                            <div class="text-3xl font-bold text-[#29abe2]">10k+</div>
                            <div class="text-sm text-slate-600">Uživatelů</div>
                        </div>
                        <div class="glass-card p-6 rounded-2xl hover-card">
                            <div class="text-3xl font-bold text-[#29abe2]">50k+</div>
                            <div class="text-sm text-slate-600">NFT</div>
                        </div>
                        <div class="glass-card p-6 rounded-2xl hover-card sm:col-span-1 col-span-2">
                            <div class="text-3xl font-bold text-[#29abe2]">99%</div>
                            <div class="text-sm text-slate-600">Spokojenost</div>
                        </div>
                    </div>
                </div>
                <div class="relative" data-aos="fade-left">
                    <div class="absolute -inset-4 animated-gradient opacity-20 blur-3xl rounded-3xl"></div>
                    <div class="relative aspect-square">
                        <img src="https://placehold.co/800x800" alt="App Interface" class="rounded-3xl shadow-2xl object-cover w-full h-full hover-card">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        AOS.init({
            duration: 1000,
            once: true,
            offset: 100
        });
    </script>
</body>
</html>