demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Avatar Demo - SyncMyCareer</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
        }
        .gradient-text {
            background: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }
        .video-container iframe,
        .video-container object,
        .video-container embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i data-feather="video" class="text-indigo-600 h-6 w-6"></i>
                        <span class="ml-2 text-xl font-bold gradient-text">LipSyncCareerBoost Pro</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                    <a href="index.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                    <a href="index.html#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Features</a>
                    <a href="index.html#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">How It Works</a>
                    <a href="index.html#pricing" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
                </div>
                <div class="flex items-center">
                    <a href="index.html#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Demo Section -->
    <section class="pt-32 pb-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl">
                    <span class="block gradient-text">AI Avatar Demo</span>
                </h1>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                    Experience our realistic lip sync technology in action
                </p>
            </div>

            <div class="video-container bg-gray-200 rounded-xl shadow-xl overflow-hidden">
                <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
            </div>

            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i data-feather="user" class="text-indigo-600 h-6 w-6"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">Custom Avatars</h3>
                    </div>
                    <p class="text-gray-500">Choose from 50+ professional avatars or upload your photo.</p>
                </div>

                <div class="bg-white p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i data-feather="mic" class="text-indigo-600 h-6 w-6"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">Perfect Sync</h3>
                    </div>
                    <p class="text-gray-500">Our AI matches lip movements precisely to your voice.</p>
                </div>

                <div class="bg-white p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i data-feather="download" class="text-indigo-600 h-6 w-6"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">Instant Results</h3>
                    </div>
                    <p class="text-gray-500">Get HD video in minutes, ready for any platform.</p>
                </div>
            </div>

            <div class="mt-16 text-center">
                <a href="index.html#pricing" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                    Start Your Free Trial
                    <i data-feather="arrow-right" class="ml-2 h-5 w-5"></i>
                </a>
            </div>
        </div>
    </section>

    <script>
        feather.replace();
    </script>
</body>
</html>