All Prompts
All Prompts
menunavigationdropdownresponsiveinteractivestickytailwind
Fixed Navbar with Multi-Level Dropdown Menus
Фиксированная навигационная панель с многоуровневыми выпадающими меню. Адаптивный дизайн, интерактивные элементы, подходит для SaaS и маркетинговых сайтов.
Prompt
<nav
class="fixed border-white/[0.06] supports-[backdrop-filter]:bg-[#0B0C0E]/60 z-50 bg-[#0B0C0E]/80 w-full border-b top-0 backdrop-blur-xl">
<div class="flex h-14 max-w-7xl mr-auto ml-auto pr-6 pl-6 items-center justify-between">
<div class="flex items-center gap-2">
<div class="relative flex items-center justify-center w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5 text-orange-400/90">
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
class=""></path>
</svg>
</div>
<span class="text-sm font-medium tracking-tight text-white/90">
Fluxer
</span>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center gap-6">
<!-- Products Dropdown -->
<div class="relative group">
<button class="flex gap-1.5 text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="products-dropdown">
Products
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 transition-transform duration-200"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="products-dropdown"
class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[340px] transition-all duration-200 ease-out z-50"
data-dropdown-content="">
<div
class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
<div class="grid gap-0.5">
<a href="/fluxerai"
class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path
d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Fluxer AI</span>
<span class="text-[12px] text-white/50 leading-snug">Design at the speed of thought</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
<path d="M3 9h18" class=""></path>
<path d="M9 21V9" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Visual Editor</span>
<span class="text-[12px] text-white/50 leading-snug">Total design freedom</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Team Work</span>
<span class="text-[12px] text-white/50 leading-snug">Comment, review, and approve</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" class=""></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">CMS</span>
<span class="text-[12px] text-white/50 leading-snug">Flexible content modeling</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" class=""></path>
<path d="M12 12v9" class=""></path>
<path d="m16 16-4-4-4 4" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Global Hosting</span>
<span class="text-[12px] text-white/50 leading-snug">Edge network deployment</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="11" cy="11" r="8" class=""></circle>
<path d="m21 21-4.3-4.3" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">SEO & Social</span>
<span class="text-[12px] text-white/50 leading-snug">Fine-tune your visibility</span>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Templates Dropdown -->
<div class="relative group">
<button class="flex text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="templates-dropdown">
Resources
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 opacity-50 w-[12px] h-[12px]">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</button>
<div id="templates-dropdown"
class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[320px] transition-all duration-200 ease-out z-50"
data-dropdown-content="">
<div
class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
<div class="grid gap-0.5">
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
class=""></path>
<path
d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
class=""></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Startup</span>
<span class="text-[12px] text-white/50 leading-snug">Launch your business</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<rect width="20" height="14" x="2" y="7" rx="2" ry="2" class=""></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Agency</span>
<span class="text-[12px] text-white/50 leading-snug">For creative teams</span>
</div>
</a>
<a href="/marketplace"
class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="12" cy="7" r="4" class=""></circle>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Marketplace</span>
<span class="text-[12px] text-white/50 leading-snug">Templates and Components</span>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Resources Dropdown -->
<div class="relative group">
<button class="flex gap-1.5 text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="resources-dropdown">
Solutions
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 transition-transform duration-200"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="resources-dropdown"
class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[320px] transition-all duration-200 ease-out z-50"
data-dropdown-content="">
<div
class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
<div class="grid gap-0.5">
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Blog</span>
<span class="text-[12px] text-white/50 leading-snug">Latest updates & stories</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<circle cx="12" cy="12" r="4" class=""></circle>
<line x1="4.93" x2="9.17" y1="4.93" y2="9.17" class=""></line>
<line x1="14.83" x2="19.07" y1="14.83" y2="19.07" class=""></line>
<line x1="14.83" x2="19.07" y1="9.17" y2="4.93" class=""></line>
<line x1="14.83" x2="9.17" y1="14.83" y2="19.07" class=""></line>
<line x1="4.93" x2="9.17" y1="19.07" y2="14.83" class=""></line>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Help Center</span>
<span class="text-[12px] text-white/50 leading-snug">Everything you need to know</span>
</div>
</a>
<a href="/tutorials"
class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<polygon points="10 8 16 12 10 16 10 8" class=""></polygon>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Tutorials</span>
<span class="text-[12px] text-white/50 leading-snug">Learn how to build</span>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Community Dropdown -->
<div class="relative group">
<button class="flex text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="community-dropdown">
Community
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 transition-transform duration-200"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="community-dropdown"
class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[320px] transition-all duration-200 ease-out z-50"
data-dropdown-content="">
<div
class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
<div class="grid gap-0.5">
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Discord</span>
<span class="text-[12px] text-white/50 leading-snug">Chat with the community</span>
</div>
</a>
<a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
class=""></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Twitter</span>
<span class="text-[12px] text-white/50 leading-snug">Follow for updates</span>
</div>
</a>
<a href="/events"
class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
<div
class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" class=""></rect>
<line x1="16" x2="16" y1="2" y2="6" class=""></line>
<line x1="8" x2="8" y1="2" y2="6" class=""></line>
<line x1="3" x2="21" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-[13px] font-medium text-white group-hover:text-white">Events</span>
<span class="text-[12px] text-white/50 leading-snug">Meetups and workshops</span>
</div>
</a>
</div>
</div>
</div>
</div>
<a href="/pricing" class="text-[13px] hover:text-white transition-colors text-white/60">
Pricing
</a>
</div>
<!-- Right Actions -->
<div class="flex gap-4 gap-x-4 gap-y-4 items-center">
<a href="/login" class="hidden sm:block text-[13px] hover:text-white transition-colors text-white/60">
Log in
</a>
<!-- Mobile Menu Button -->
<button class="md:hidden text-white/60 hover:text-white transition-colors focus:outline-none" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><line x1="4" x2="20" y1="12" y2="12" class=""></line><line x1="4" x2="20" y1="6" y2="6" class=""></line><line x1="4" x2="20" y1="18" y2="18" class=""></line></svg>
</button>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden border-t border-white/[0.06] bg-[#0B0C0E] max-h-[80vh] overflow-y-auto">
<div class="px-6 py-4 space-y-4">
<!-- Products Mobile -->
<div class="space-y-3">
<button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-products').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
Products
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="mobile-products" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
<a href="/fluxerai" class="block text-sm text-white/60 hover:text-white transition-colors">Fluxer AI</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Visual Editor</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Team Work</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">CMS</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Global Hosting</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">SEO & Social</a>
</div>
</div>
<!-- Resources Mobile -->
<div class="space-y-3">
<button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-resources').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
Resources
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="mobile-resources" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Startup</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Agency</a>
<a href="/marketplace" class="block text-sm text-white/60 hover:text-white transition-colors">Marketplace</a>
</div>
</div>
<!-- Solutions Mobile -->
<div class="space-y-3">
<button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-solutions').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
Solutions
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="mobile-solutions" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Blog</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Help Center</a>
<a href="/tutorials" class="block text-sm text-white/60 hover:text-white transition-colors">Tutorials</a>
</div>
</div>
<!-- Community Mobile -->
<div class="space-y-3">
<button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-community').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
Community
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
<div id="mobile-community" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Discord</a>
<a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Twitter</a>
<a href="/events" class="block text-sm text-white/60 hover:text-white transition-colors">Events</a>
</div>
</div>
<a href="/#pricing"
class="block text-sm font-medium text-white/80 py-2 hover:text-white transition-colors">Pricing</a>
<div class="pt-4 border-t border-white/10">
<a href="#"
class="block w-full py-2.5 text-center text-sm font-medium text-white bg-white/10 rounded-lg hover:bg-white/20 transition-colors">Log
in</a>
</div>
</div>
</div>
<script>
document.addEventListener('click', function(e) {
const trigger = e.target.closest('[data-dropdown-trigger]');
const activeDropdown = document.querySelector('[data-dropdown-content]:not(.invisible)');
if (trigger) {
const targetId = trigger.dataset.dropdownTrigger;
const targetContent = document.getElementById(targetId);
if (activeDropdown && activeDropdown !== targetContent) {
activeDropdown.classList.add('invisible', 'opacity-0', 'translate-y-2');
activeDropdown.classList.remove('visible', 'opacity-100', 'translate-y-0');
const activeTriggerIcon = document.querySelector(`[data-dropdown-trigger="${activeDropdown.id.replace('-content','').replace('-dropdown','-dropdown')}"] svg`);
if(activeTriggerIcon) activeTriggerIcon.style.transform = 'rotate(0deg)';
}
const isClosed = targetContent.classList.contains('invisible');
if (isClosed) {
targetContent.classList.remove('invisible', 'opacity-0', 'translate-y-2');
targetContent.classList.add('visible', 'opacity-100', 'translate-y-0');
trigger.querySelector('svg').style.transform = 'rotate(180deg)';
} else {
targetContent.classList.add('invisible', 'opacity-0', 'translate-y-2');
targetContent.classList.remove('visible', 'opacity-100', 'translate-y-0');
trigger.querySelector('svg').style.transform = 'rotate(0deg)';
}
} else if (activeDropdown && !e.target.closest('[data-dropdown-content]')) {
activeDropdown.classList.add('invisible', 'opacity-0', 'translate-y-2');
activeDropdown.classList.remove('visible', 'opacity-100', 'translate-y-0');
const activeTrigger = document.querySelector(`button[data-dropdown-trigger="${activeDropdown.id}"]`);
if(activeTrigger) activeTrigger.querySelector('svg').style.transform = 'rotate(0deg)';
}
});
</script>
</nav>