help.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help - AvatarSync Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">How to Use AvatarSync Studio</h1>
            <div class="flex justify-center mt-4">
                <div class="w-16 h-1 bg-indigo-500 rounded-full"></div>
            </div>
        </header>

        <div class="bg-white rounded-xl shadow-xl p-8 mb-8">
            <div class="space-y-8">
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
                        <i data-feather="upload" class="text-indigo-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">1. Upload Your Media</h3>
                        <p class="text-gray-600">Start by uploading an image file for your avatar and an audio file that you want to sync with. Supported formats: JPG, PNG for images; MP3, WAV for audio.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
                        <i data-feather="sliders" class="text-indigo-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">2. Customize Your Animation</h3>
                        <p class="text-gray-600">Choose from different animation styles, adjust colors, and tweak motion intensity. Preview how your avatar will move in real-time.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
                        <i data-feather="zap" class="text-indigo-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">3. Generate Your Avatar</h3>
                        <p class="text-gray-600">Click the generate button to create your animated avatar. Processing time depends on the length of your audio.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
                        <i data-feather="download" class="text-indigo-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">4. Download & Share</h3>
                        <p class="text-gray-600">Once processed, download your animated avatar as a video or GIF, or share it directly to social media platforms.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-xl p-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-4">Tips for Best Results</h2>
            <ul class="space-y-3 text-gray-600">
                <li class="flex items-start">
                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
                    <span>Use high-quality images (minimum 500x500 pixels) for clearer animations</span>
                </li>
                <li class="flex items-start">
                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
                    <span>For best lip-sync results, use clear vocal audio without background music</span>
                </li>
                <li class="flex items-start">
                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
                    <span>Experiment with different motion intensities to find your preferred style</span>
                </li>
                <li class="flex items-start">
                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
                    <span>Save your project if you want to make changes later</span>
                </li>
            </ul>
        </div>

        <div class="text-center mt-8">
            <a href="index.html" class="inline-flex items-center text-indigo-500 hover:text-indigo-700 font-medium">
                <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back to AvatarSync Studio
            </a>
        </div>
    </div>

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