Prism Studio Technical Hero Layout

<main class="md:p-16 lg:p-24 max-w-7xl mr-auto ml-auto pt-8 pr-8 pb-8 pl-8">
  <!-- Top Metadata -->
  <div class="mb-24">
    <p class="text-xs uppercase tracking-widest text-zinc-500 font-normal">
      Version 2.0 / Technical Style / Core Architecture
    </p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

    <!-- Left Section -->
    <div class="lg:col-span-4 flex flex-col gap-32">
      <!-- Main Heading -->
      <div class="space-y-4">
        <h1 class="text-5xl font-medium tracking-tight leading-[1.1] text-zinc-950">
          Architecting the <br> Foundations of <br> User Systems
        </h1>
      </div>

      <!-- Signature Section -->
      <div class="space-y-6">
        <div class="">
          <p class="text-xs font-medium uppercase tracking-wider text-zinc-400 mb-4">Connect with our team</p>
          <div class="flex items-center gap-2">
            <span class="text-4xl font-light italic tracking-tighter text-zinc-800 opacity-80">Prism Studio</span>
          </div>
        </div>

        <!-- Color Swatches -->
        <div class="flex items-end gap-0.5 h-32 w-64">
          <div class="bg-zinc-950 flex-1 h-full rounded-l-3xl p-4 flex flex-col justify-end">
            <span class="[writing-mode:vertical-lr] rotate-180 text-[10px] text-zinc-500 uppercase tracking-widest">Midnight</span>
          </div>
          <div class="bg-zinc-700 flex-1 h-full p-4 flex flex-col justify-end">
            <span class="[writing-mode:vertical-lr] rotate-180 text-[10px] text-zinc-400 uppercase tracking-widest">Steel</span>
          </div>
          <div class="bg-zinc-500 flex-1 h-full p-4 flex flex-col justify-end">
            <span class="[writing-mode:vertical-lr] rotate-180 text-[10px] text-zinc-300 uppercase tracking-widest">Asphalt</span>
          </div>
          <div class="bg-zinc-300 flex-1 h-full rounded-r-3xl p-4 flex flex-col justify-end">
            <span class="[writing-mode:vertical-lr] rotate-180 text-[10px] text-zinc-600 uppercase tracking-widest">Cloud</span>
          </div>
        </div>

        <p class="text-sm font-normal text-zinc-800 tracking-wide">www.prism.studio</p>
      </div>
    </div>

    <!-- Right Grid Section -->
    <div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Black Card -->
      <div
        class="bg-zinc-900 rounded-[2.5rem] p-10 aspect-square flex flex-col justify-between relative overflow-hidden group shadow-2xl">
        <div class="relative z-10">
          <h2 class="text-zinc-100 text-lg font-normal tracking-tight">Prism Interface Lab</h2>
          <p class="text-zinc-500 text-sm">Visual Strategy</p>
        </div>

        <!-- Decorative Element (Simulating the product knob) -->
        <div
          class="absolute bottom-[-10%] left-[-10%] w-64 h-64 bg-zinc-800 rounded-full border-[12px] border-zinc-700/30 flex items-center justify-center">
          <div
            class="w-32 h-32 rounded-full bg-zinc-900 shadow-inner border border-zinc-800/50 flex items-center justify-center">
            <div class="w-1 h-8 bg-zinc-600 rounded-full transform -translate-y-8"></div>
          </div>
        </div>

        <div class="relative z-10 self-end">
          <div class="flex flex-col items-end">
            <span class="text-zinc-100 font-medium text-3xl tracking-tighter">PRISM</span>
            <span class="text-zinc-100 font-medium text-3xl tracking-tighter -mt-3 scale-y-[-1] opacity-50">PRISM</span>
          </div>
        </div>
      </div>

      <!-- Type Card (Grey) -->
      <div class="bg-zinc-400 rounded-[2.5rem] p-10 aspect-square flex flex-col justify-between shadow-xl">
        <div>
          <h2 class="text-zinc-100 text-lg font-normal tracking-tight">Geist Variable</h2>
        </div>

        <div class="flex flex-col">
          <span class="text-[8rem] font-normal tracking-tighter text-zinc-100 leading-none">Vv902</span>
        </div>

        <div class="flex justify-end gap-8">
          <div class="text-right">
            <p class="text-[10px] uppercase tracking-widest text-zinc-100 mb-2 font-medium">Type Scale</p>
            <p class="text-[10px] text-zinc-100/80 leading-relaxed font-normal">
              RrSsTtUuVvWwXxYyZz12<br>
                                34567890AaBbCcDdEeFf<br>
                                GgHhIiJjKkLlMmNnOoPp<br>
                                !?&amp;*()_+=-{}[]<br>
                                %^&amp;*()_+
            </p>
          </div>
        </div>
      </div>

      <!-- White Card -->
      <div class="bg-white rounded-[2.5rem] p-10 aspect-[2/1] md:col-span-1 flex flex-col justify-between shadow-lg">
        <div class="flex justify-end">
          <p class="text-[10px] uppercase tracking-widest text-zinc-400 font-medium">Chromatic</p>
        </div>
        <div class="flex items-center gap-4">
          <div class="[writing-mode:vertical-lr] rotate-180 text-[10px] text-zinc-400 uppercase tracking-widest">Mist
          </div>
          <div class="ml-auto">
            <span class="text-3xl font-medium tracking-tighter text-zinc-900">PRISM</span>
          </div>
        </div>
      </div>

      <!-- Symbol Card (Bottom Right) -->
      <div class="md:col-span-1 flex flex-col justify-between items-end py-4">
        <div class="w-full flex justify-center py-8">
          <!-- Abstract Symbol -->
          <div class="relative w-48 h-48">
            <svg viewBox="0 0 100 100" class="w-full h-full text-zinc-900">
              <path d="M25 25 L50 50 L75 25 M25 75 L50 50 L75 75" fill="none" stroke="currentColor" stroke-width="8"
                stroke-linecap="round" stroke-linejoin="round" class=""></path>
              <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="0.5" stroke-dasharray="1 2"
                opacity="0.3" class=""></circle>
            </svg>
          </div>
        </div>
        <div class="w-full flex items-center gap-4">
          <div class="h-px bg-zinc-300 flex-grow"></div>
          <span class="text-[10px] uppercase tracking-widest text-zinc-400 font-medium whitespace-nowrap">Primitive</span>
        </div>
      </div>

    </div>
  </div>
</main>