Mega Menu Komponente - Neumorphic Vibrant E-Commerce
Eine komplexe, reaktionsschnelle Mega-Menü-Komponente, die mit einem neumorphen, lebendigen E-Commerce-Stil gestaltet ist. Bietet mehrere Spalten, Bildbeispiele und Kategorieauflistungen mit vollständiger Unterstützung des Dunkelmodus.
HTML-Code
<nav class="relative bg-gradient-to-br from-purple-100 to-indigo-200 text-purple-900 shadow-xl dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 lg:px-8 px-4 py-3 font-sans">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold tracking-tight text-purple-800 dark:text-purple-300">VibrantShop</a>
<!-- Desktop/Tablet Menu - Hidden on Mobile -->
<div class="hidden lg:flex items-center space-x-6">
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Home</a>
<div class="group relative">
<button class="flex items-center px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700 focus:outline-none">
Categories
<svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute left-1/2 -translate-x-1/2 mt-5 w-screen max-w-5xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top z-50 rounded-3xl p-6 shadow-neumorphic-xl bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900 border border-purple-200 dark:border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Column 1 -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Apparel</p>
<ul class="space-y-2">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Men's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Women's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kids & Baby</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Shoes & Footwear</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Accessories</a></li>
</ul>
</div>
<!-- Column 2 -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Electronics</p>
<ul class="space-y-2">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smartphones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Laptops & PCs</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Cameras & Drones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Audio & Headphones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Wearable Tech</a></li>
</ul>
</div>
<!-- Column 3 -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Home & Living</p>
<ul class="space-y-2">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kitchen Appliances</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Furniture</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Decor & Art</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Bedding & Bath</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smart Home Devices</a></li>
</ul>
</div>
<!-- Column 4 Images/Promo -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Featured Deals</p>
<div class="space-y-4">
<a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
<div class="p-3">
<p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
<p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off selected items!</p>
</div>
</a>
<a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/20/300/180" alt="New Arrivals" class="w-full h-auto object-cover">
<div class="p-3">
<p class="font-medium text-purple-800 dark:text-gray-100">New Tech Arrivals</p>
<p class="text-sm text-purple-600 dark:text-gray-300">Explore the latest gadgets!</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Deals</a>
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">About Us</a>
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Contact</a>
</div>
<!-- User Actions & Cart for Desktop/Tablet -->
<div class="hidden lg:flex items-center space-x-4">
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
</button>
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
</button>
<!-- Dark Mode Toggle -->
<button id="theme-toggle" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
<svg class="w-6 h-6 dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
</button>
</div>
<!-- Mobile Menu Button - Hidden on Desktop/Tablet -->
<div class="lg:hidden flex items-center space-x-4">
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
</button>
<button id="mobile-menu-button" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<!-- Mobile Menu Content (Hidden by default) -->
<div id="mobile-menu" class="lg:hidden hidden fixed inset-0 bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-800 dark:to-gray-900 z-50 overflow-y-auto transform transition-transform duration-300 ease-in-out -translate-x-full">
<div class="flex justify-between items-center px-4 py-3 border-b border-purple-200 dark:border-gray-700 sticky top-0 bg-inherit">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300">Menu</h2>
<button id="close-mobile-menu" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="p-6 space-y-6">
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Home</a>
<div class="rounded-xl shadow-neumorphic-sm bg-purple-50 dark:bg-gray-700 p-4">
<input type="checkbox" id="category-toggle-mobile" class="peer hidden" />
<label for="category-toggle-mobile" class="flex justify-between items-center text-lg font-medium text-purple-800 dark:text-gray-100 cursor-pointer py-2">
Categories
<svg class="w-5 h-5 transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</label>
<div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-screen">
<div class="pt-4 space-y-4">
<div>
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Apparel</p>
<ul class="space-y-1 text-sm pl-4">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Men's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Women's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kids & Baby</a></li>
</ul>
</div>
<div>
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Electronics</p>
<ul class="space-y-1 text-sm pl-4">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Smartphones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Laptops & PCs</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Cameras & Drones</a></li>
</ul>
</div>
<div>
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Home & Living</p>
<ul class="space-y-1 text-sm pl-4">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kitchen Appliances</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Furniture</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Decor & Art</a></li>
</ul>
</div>
<div class="mt-4">
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Featured Deals</p>
<a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md bg-purple-100 dark:bg-gray-800">
<img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
<div class="p-3">
<p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
<p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off!</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Deals</a>
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">About Us</a>
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Contact</a>
<!-- Mobile specific user actions -->
<div class="pt-4 border-t border-purple-200 dark:border-gray-700 mt-6 flex justify-around">
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
</button>
<!-- Dark Mode Toggle for Mobile -->
<button id="theme-toggle-mobile" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
<svg class="w-6 h-6 dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Custom Styles for Neumorphic Shadows (add to your CSS or use a style tag for demonstration) -->
<style>
/* Base Neumorphic Shadow */
.shadow-neumorphic-sm {
box-shadow: 4px 4px 8px rgba(162, 126, 250, 0.4), -4px -4px 8px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-sm {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6), -4px -4px 8px rgba(100, 100, 100, 0.3);
}
.shadow-neumorphic-md {
box-shadow: 8px 8px 16px rgba(162, 126, 250, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-md {
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6), -8px -8px 16px rgba(100, 100, 100, 0.3);
}
.shadow-neumorphic-lg {
box-shadow: 12px 12px 24px rgba(162, 126, 250, 0.4), -12px -12px 24px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-lg {
box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.6), -12px -12px 24px rgba(100, 100, 100, 0.3);
}
.shadow-neumorphic-xl {
box-shadow: 20px 20px 40px rgba(162, 126, 250, 0.4), -20px -20px 40px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-xl {
box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6), -20px -20px 40px rgba(100, 100, 100, 0.3);
}
/* Inner Neumorphic Shadow */
.shadow-inner-neumorphic-sm {
box-shadow: inset 2px 2px 5px rgba(162, 126, 250, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .shadow-inner-neumorphic-sm {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
}
/* For the mobile menu to work without JS, we'd traditionally use JS.
However, for a pure HTML/CSS demo of toggleable content,
a hidden checkbox and label + peer selector could be used for the outer menu.
For a true off-canvas menu, this implies JS. We'll simulate with an always-present 'fixed' element.
The provided solution uses 'hidden' on mobile-menu and relies on external JS
(common for such complex interactions) for a realistic simulation.
For a pure CSS *toggle*, a checkbox with label is used inside the mobile categories.
*/
</style>
<script>
// Dark mode toggle functionality
const setupDarkModeToggle = (toggleId) => {
const themeToggle = document.getElementById(toggleId);
if (themeToggle) {
// Check local storage for theme preference or default to system preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
themeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
});
}
};
setupDarkModeToggle('theme-toggle'); // Desktop toggle
setupDarkModeToggle('theme-toggle-mobile'); // Mobile toggle
// Mobile menu toggle functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const closeMobileMenuButton = document.getElementById('close-mobile-menu');
if (mobileMenuButton && mobileMenu && closeMobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
setTimeout(() => {
mobileMenu.classList.remove('-translate-x-full');
mobileMenu.classList.add('translate-x-0');
}, 10);
});
closeMobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('translate-x-0');
mobileMenu.classList.add('-translate-x-full');
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300); // Match transition duration
});
// Close menu if clicked outside (optional, more complex)
// document.addEventListener('click', (event) => {
// if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && mobileMenu.classList.contains('translate-x-0')) {
// mobileMenu.classList.remove('translate-x-0');
// mobileMenu.classList.add('-translate-x-full');
// setTimeout(() => { mobileMenu.classList.add('hidden'); }, 300);
// }
// });
}
</script>Verwandte Komponenten
Mega-Menü-Komponente
Responsives Tailwind CSS Mega-Menü mit 3D-Design, analogem Farbschema und Unterstützung für den Dunkelmodus
Cyberpunk Mega Menü
Ein komplexes Mega-Menü zum Thema Cyberpunk für Food-/Restaurant-Websites mit Neon-Akzenten, dunklen Hintergründen, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.
Mega-Menü-Komponente
Eine reaktionsschnelle Mega Menu-Komponente, die für den Konsum von Blogs/Inhalten entwickelt wurde, mit Mikrointeraktionen und einem Fokus auf Erdtönen, mit Unterstützung für den Dunkelmodus mit Tailwind CSS.