Futuristic Ticket Layout with Sidebar and Barcode

<div
  class="bg-[#e8f2f2] w-full max-w-[800px] border-2 border-zinc-900 shadow-2xl flex flex-row overflow-hidden text-zinc-900 relative">

  <!-- Background subtle grid for the whole container to mimic texture -->
  <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
    style="background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, #000 1px, #000 2px), repeating-linear-gradient(90deg, transparent, transparent 1px, #000 1px, #000 2px); background-size: 20px 20px;">
  </div>

  <!-- Left Sidebar Column -->
  <div
    class="md:w-16 flex flex-col z-10 bg-[#e8f2f2] w-12 border-zinc-900 border-r-2 pt-6 pb-6 items-center justify-between">
    <!-- Top markers -->
    <div class="flex flex-col gap-4 items-center">
      <div class="w-4 h-[2px] bg-zinc-900"></div>
      <div class="flex flex-col gap-1">
        <div class="w-1.5 h-1.5 rounded-full bg-zinc-900"></div>
        <div class="w-1.5 h-1.5 rounded-full bg-[#E8FF00] border border-zinc-900"></div>
      </div>
    </div>

    <!-- Number Box -->
    <div class="border-2 border-zinc-900 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center bg-white">
      <span class="font-semibold text-lg">92</span>
    </div>

    <!-- Bottom markers -->
    <div class="flex flex-col gap-4 items-center mb-24">
      <div class="flex flex-col gap-1">
        <div class="w-1.5 h-1.5 rounded-full bg-[#E8FF00] border border-zinc-900"></div>
        <div class="w-1.5 h-1.5 rounded-full bg-zinc-900"></div>
      </div>
      <div class="w-4 h-[2px] bg-zinc-900"></div>
    </div>
  </div>

  <!-- Main Content Column -->
  <div class="flex-1 flex flex-col z-10">

    <!-- Section 1: Seat Info -->
    <div
      class="p-6 md:p-10 border-b-2 border-zinc-900 bg-dot-pattern bg-[length:12px_12px] bg-white/40 backdrop-blur-sm relative">
      <div class="absolute inset-0 bg-gradient-to-b from-[#e8f2f2]/90 to-transparent"></div>

      <div class="relative z-10">
        <!-- Zone Number -->
        <div class="mb-8">
          <p class="text-sm font-medium tracking-wide uppercase text-zinc-600 mb-1">Zone:</p>
          <h1 class="text-7xl md:text-[6rem] font-semibold tracking-tight leading-none text-zinc-900">84X</h1>
        </div>

        <!-- Divider Line -->
        <div class="w-full h-[2px] bg-zinc-900 relative mb-4">
          <div
            class="absolute -bottom-[18px] left-0 flex gap-12 text-[10px] uppercase tracking-widest font-mono font-medium">
            <span>Row: 22</span>
            <span>Main Concourse</span>
            <span>S-4</span>
          </div>
        </div>

        <!-- Sector & Badge Flex -->
        <div class="flex justify-between items-start mt-8">
          <div>
            <p class="text-xl md:text-2xl font-medium tracking-tight text-zinc-700">Sector:</p>
            <h2 class="text-3xl md:text-4xl font-semibold tracking-tight leading-tight">Orion Prime</h2>
            <p class="text-xs font-mono uppercase tracking-widest mt-3 text-zinc-500">Pre-Launch Entry Only</p>
          </div>

          <!-- Badge -->
          <div class="border-2 border-zinc-900 bg-zinc-900 text-white p-3 w-32 h-24 flex flex-col justify-between">
            <div class="flex justify-between items-center">
              <span class="text-[10px] font-mono tracking-widest uppercase">ID-09</span>
              <div class="w-2 h-2 rounded-full bg-[#E8FF00]"></div>
            </div>
            <div class="flex justify-center items-center h-full">
              <!-- Abstract Icon SVG -->
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                stroke-linecap="square" stroke-linejoin="miter" class="">
                <path d="M12 2L2 12l10 10 10-10L12 2z" class=""></path>
                <path d="M12 8v8" class=""></path>
                <path d="M8 12h8" class=""></path>
              </svg>
            </div>
            <div class="flex justify-between text-[8px] font-mono text-zinc-400">
              <span>VER</span>
              <span>3.1</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Section 2: Main Title (Zenith-V) -->
    <div class="p-6 md:p-10 border-b-2 border-zinc-900 bg-[#f4f8f8] relative">
      <!-- Top tiny labels -->
      <div class="flex justify-between text-xs font-mono uppercase tracking-widest mb-6 text-zinc-600">
        <span>Engineering Deck</span>
        <span>VIP Lounge Access</span>
      </div>

      <!-- Main Title -->
      <h1 class="text-6xl md:text-[5.5rem] font-semibold tracking-tight uppercase leading-none mb-4 text-zinc-900">
        Zenith-Vx</h1>

      <!-- Thick Divider -->
      <div class="w-full h-1 bg-zinc-900 mb-4"></div>

      <!-- Sub Info -->
      <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
        <h3 class="text-2xl md:text-3xl font-medium tracking-tight">Stellar Cup</h3>

        <div class="flex items-end gap-8">
          <div class="text-right">
            <p class="text-xs uppercase tracking-widest font-medium mb-1">Access Code:</p>
            <p class="text-sm font-medium">Command Tier<br>Level 4</p>
            <p class="text-[10px] uppercase font-mono tracking-widest mt-2 text-zinc-500">Clearance Req</p>
          </div>
          <!-- Large Number -->
          <div class="text-4xl md:text-5xl font-mono font-semibold tracking-tight">1.809</div>
        </div>
      </div>
    </div>

    <!-- Section 3: Logos / Brand Marks -->
    <div class="p-6 md:p-10 border-b-2 border-zinc-900 bg-[#e8f2f2] relative">
      <!-- Left side floating badge -->
      <div
        class="absolute left-6 md:left-10 top-6 w-16 h-20 border-2 border-zinc-900 bg-zinc-100 flex flex-col items-center justify-center p-2">
        <span class="text-[8px] font-mono tracking-widest uppercase mb-1">SYS-R</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
          stroke-linecap="square" class="">
          <path
            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
            class=""></path>
          <circle cx="12" cy="12" r="3" class=""></circle>
        </svg>
        <div class="w-full h-[2px] bg-zinc-900 mt-2 mb-1"></div>
        <span class="text-sm font-semibold">92</span>
      </div>

      <!-- Brand Grid -->
      <div class="ml-24 grid grid-cols-2 md:grid-cols-3 gap-y-8 gap-x-4 items-center">
        <!-- Brand 1 -->
        <div class="flex items-center gap-2">
          <span class="font-bold text-2xl tracking-tighter italic pr-2 border-r-4 border-zinc-900">NEXA</span>
        </div>
        <!-- Brand 2 -->
        <div class="flex items-center justify-center">
          <span class="font-medium text-xl tracking-widest uppercase">Vortex</span>
        </div>
        <!-- Brand 3 (Abstract mark) -->
        <div class="hidden md:flex items-center justify-center gap-1">
          <div class="w-3 h-3 bg-zinc-900 rounded-sm transform rotate-45"></div>
          <div class="w-3 h-3 bg-zinc-900 rounded-sm transform rotate-45"></div>
        </div>
        <!-- Brand 4 -->
        <div class="flex items-center">
          <span class="font-mono text-xl font-semibold tracking-wider">KINETIC</span>
        </div>
        <!-- Brand 5 -->
        <div class="flex items-center justify-center">
          <span class="font-sans text-xl font-semibold tracking-tighter line-through decoration-2">AURA</span>
        </div>
        <!-- Brand 6 (Dots) -->
        <div class="hidden md:flex bg-white border-2 border-zinc-900 px-4 py-2 items-center justify-center gap-2 w-24">
          <div class="w-1.5 h-1.5 bg-zinc-900 rounded-full"></div>
          <div class="w-1.5 h-1.5 bg-zinc-900 rounded-full"></div>
          <div class="w-1.5 h-1.5 bg-zinc-900 rounded-full"></div>
        </div>
      </div>
    </div>

    <!-- Section 4: Yellow Barcode Bar -->
    <div
      class="bg-[#E8FF00] p-6 md:p-8 flex flex-col md:flex-row justify-between items-start md:items-end gap-6 relative">
      <!-- Decorative background elements -->
      <div class="absolute top-4 left-4 flex gap-1">
        <div class="w-1 h-1 bg-zinc-900"></div>
        <div class="w-1 h-1 bg-zinc-900"></div>
      </div>

      <div class="flex gap-12 mt-4 md:mt-0">
        <div class="flex flex-col text-xs font-mono uppercase tracking-widest">
          <span class="font-semibold mb-1">Zone Access</span>
          <span class="text-[10px]">Gate 04</span>
        </div>
        <div class="flex flex-col text-xs font-mono uppercase tracking-widest">
          <span class="font-semibold mb-1">Auth Node</span>
          <span class="text-[10px]">Active</span>
        </div>
      </div>

      <!-- Simulated Barcode -->
      <div
        class="flex items-end h-16 md:h-20 gap-[2px] md:gap-[3px] bg-white/20 p-2 md:p-4 rounded-sm border border-zinc-900/10">
        <div class="w-1 md:w-1.5 h-full bg-zinc-900"></div>
        <div class="w-2 md:w-3 h-full bg-zinc-900"></div>
        <div class="w-0.5 md:w-1 h-4/5 bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-full bg-zinc-900"></div>
        <div class="w-3 md:w-4 h-full bg-zinc-900"></div>
        <div class="w-0.5 md:w-1 h-full bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-3/5 bg-zinc-900"></div>
        <div class="w-2 md:w-3 h-full bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-full bg-zinc-900"></div>
        <div class="w-0.5 md:w-1 h-4/5 bg-zinc-900"></div>
        <div class="w-4 md:w-5 h-full bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-full bg-zinc-900"></div>
        <div class="w-2 md:w-2.5 h-full bg-zinc-900"></div>
        <div class="w-0.5 md:w-1 h-full bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-4/5 bg-zinc-900"></div>
        <div class="w-3 md:w-4 h-full bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-full bg-zinc-900"></div>
        <div class="w-2 md:w-3 h-full bg-zinc-900"></div>
        <div class="w-0.5 md:w-1 h-3/5 bg-zinc-900"></div>
        <div class="w-1 md:w-1.5 h-full bg-zinc-900"></div>
      </div>
    </div>

  </div>
</div>