Health guidance page with smaller YouTube video section

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health Guidance</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white min-h-screen p-8">
    <div class="max-w-4xl mx-auto space-y-8">
        
        <h1 class="text-4xl font-bold text-center text-pink-500">
            Personalized Health Guidance for Chronic Conditions, No Extra Appointments Needed
        </h1>

        
        <p class="text-center text-gray-700 text-lg">
            Understand Your Medical Reports, Get Tailored Advice, and Practical Recommendations.
            <a href="#" class="underline">Learn More</a>
        </p>

        
        <div class="max-w-2xl mx-auto w-full"> 
            <div class="aspect-video bg-gray-100 rounded-lg overflow-hidden shadow-lg">
                <div class="relative w-full h-full">
                    <iframe 
                        class="absolute top-0 left-0 w-full h-full"
                        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
                        title="Health Guidance Video"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>

        
        <div class="relative">
            <div class="flex items-center gap-4 p-4 bg-white rounded-lg border">
                <div class="flex-1">
                    <input type="text" 
                           placeholder="What is the best diet for type 2 diabetes..." 
                           class="w-full p-2 text-gray-700 bg-transparent border-none focus:outline-none"
                    />
                </div>
                <button class="text-pink-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </button>
            </div>
        </div>

        
        <p class="text-center text-sm text-gray-500">
            AI can make mistakes. Check important information.
        </p>

        
        <div>
            <h2 class="text-xl font-semibold text-center mb-6">Examples</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="p-4 bg-white rounded-lg border hover:shadow-md transition">
                    <div class="flex items-center gap-2 text-pink-500 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <span>Report</span>
                    </div>
                    <h3 class="font-medium">Liver Function Test Report</h3>
                </div>
                <div class="p-4 bg-white rounded-lg border hover:shadow-md transition">
                    <div class="flex items-center gap-2 text-pink-500 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <span>Report</span>
                    </div>
                    <h3 class="font-medium">Fasting Lipid Profile Report</h3>
                </div>
                <div class="p-4 bg-white rounded-lg border hover:shadow-md transition">
                    <div class="flex items-center gap-2 text-pink-500 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <span>Report</span>
                    </div>
                    <h3 class="font-medium">Complete Blood Count Report</h3>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

SPARKS

health_guidance_with_smaller_video