レトロビンテージヘッダーコンポーネント

<header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 p-6">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40?random=1" alt="Logo" class="rounded-full">
            <h1 class="text-white text-3xl font-bold font-mono tracking-widest">Retro Header</h1>
        </div>
        <nav>
            <ul class="flex space-x-6 text-white">
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Gallery</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="mt-4 text-center">
        <img src="https://picsum.photos/800/200?random=1" alt="Header Image" class="rounded-lg shadow-lg mx-auto">
    </div>
</header>

<style>
    /* Dark Theme Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a2e;
        }
    }
</style>