VibeCoderzVibeCoderz
Telegram
All Prompts
Global header preview
header-adekvat-juridik

Global header

Глобальный хедер для сайта Adekvat Juridik. UI-компонент навигации и брендинга.

by William MarksenLive Preview

Prompt

<div class="lg:px-12 flex h-24 max-w-[1400px] mr-auto ml-auto pr-6 pl-6 items-center justify-between"
  data-component-id="shared-header" data-sync-component="true">
  <!-- Logo -->
  <div class="flex-shrink-0 w-[200px]">
    <a href="/"
      class="font-serif text-2xl tracking-tight leading-[0.85] text-white inline-flex flex-col items-start group">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/688b4ed2-0a20-4d21-8680-e661bedf8646_320w.png" alt="Adekvat Juridik" class="block w-auto h-12 object-contain scale-150" style="">

    </a>
  </div>

  <!-- Desktop Menu -->
  <nav class="hidden lg:flex items-center justify-center space-x-10 flex-1">
    <a href="/home"
      class="text-[11px] hover:text-white transition-colors uppercase font-medium text-gray-300 tracking-widest">Hem</a>
    <a href="/om-oss"
      class="text-[11px] hover:text-white transition-colors uppercase font-medium text-gray-300 tracking-widest">Om
      Oss</a>
    <a href="/rattsomraden"
      class="text-[11px] hover:text-white transition-colors uppercase font-medium text-gray-300 tracking-widest">Rättsområden</a>

    <a href="/#kontakt"
      class="text-[11px] hover:text-white transition-colors uppercase font-medium text-gray-300 tracking-widest">Kontakt</a>
  </nav>

  <!-- Actions -->
  <div class="hidden lg:flex items-center justify-end w-[200px]">
    <a href="#boka"
      class="inline-flex items-center justify-center text-[11px] hover:bg-gray-200 transition-colors uppercase font-semibold text-black tracking-widest bg-white rounded-sm pt-3 pr-6 pb-3 pl-6">
      Boka konsultation
    </a>
  </div>

  <!-- Mobile Menu Icon -->
  <div class="lg:hidden text-white cursor-pointer ml-auto">
    <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" data-lucide="menu"
      class="lucide lucide-menu w-6 h-6 stroke-[1.5]">
      <path d="M4 5h16"></path>
      <path d="M4 12h16"></path>
      <path d="M4 19h16"></path>
    </svg>
  </div>
</div>
All Prompts