Hero Section with Animated Staggered Image Cards

<section class="sm:py-24 pt-16 pb-16 max-w-5xl">
  <div class="text-center mb-12 fade-in-up animate">
    <!-- Top meta row -->
    <div class="mb-6">
      <div
        class="flex items-center justify-between text-[13px] sm:text-sm font-medium uppercase tracking-tight text-black">
        <span class="">FOCUS</span>
        <span class="">(05)</span>
      </div>
      <div class="mt-2 h-px w-full bg-black"></div>
    </div>

    <!-- Header layout -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 text-left items-center">
      <!-- Left: Giant word -->
      <div class="lg:col-span-7 fade-in-left animate">
        <h3
          class="text-[32px] sm:text-[48px] lg:text-[64px] xl:text-[80px] leading-[0.9] font-semibold tracking-tight uppercase">
          Clean UI. Built Fast.</h3>
      </div>

      <!-- Right: Description + CTA -->
      <div class="lg:col-span-5 fade-in-right animate">
        <p class="sm:text-lg text-black/60 max-w-3xl mt-0 mr-auto ml-0 mb-6">Designer who codes. Dashboards, landing
          pages, and design systems delivered in React and Tailwind.</p>
        <div class="flex justify-start">
          <a href="#"
            class="inline-flex items-center gap-3 ring-1 ring-black/10 hover:shadow-2xl transition bg-black/5 rounded-full pt-2 pr-2 pb-2 pl-2 shadow">
            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <path d="m22 2-7 20-4-9-9-4Z" class=""></path>
              <path d="M22 2 11 13" class=""></path>
            </svg>
          </span>
            <span class="px-3 text-sm font-medium">Get Started</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="mt-12 sm:mt-16 perspective-distant">
    <div
      class="flex gap-5 sm:gap-8 overflow-visible sm:px-0 transform-style-preserve-3d select-none pr-2 pb-6 pl-2 items-end justify-center">
      <!-- Card 1 -->
      <article class="relative rounded-3xl fade-in-up stagger-delay-1 animate"
        style="transform: rotate(-4deg) translateY(16px); box-shadow: 0 20px 50px rgba(0,0,0,0.18);">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/73cec214-1f3d-4c96-a480-b22ce84b98e8_800w.jpg" alt="Studio product on dark silk" class="sm:w-[300px] lg:w-[340px] sm:h-[480px] lg:h-[520px] w-[240px] h-[420px] object-cover ring-0 rounded-3xl" style="">
      </article>

      <!-- Card 2 -->
      <article class="relative rounded-3xl fade-in-up stagger-delay-2 animate"
        style="transform: rotate(-2.5deg) translateY(10px); box-shadow: 0 18px 44px rgba(0,0,0,0.16);">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9ab83c55-bb01-43d7-b04c-23f9c4a252e4_800w.jpg" alt="Close-up of a luxury car front" class="sm:w-[300px] lg:w-[340px] sm:h-[480px] lg:h-[520px] w-[240px] h-[420px] object-cover ring-black/10 ring-1 rounded-[28px]" style="">
      </article>

      <!-- Card 3 (center) -->
      <article class="relative rounded-3xl fade-in-up stagger-delay-3 animate"
        style="transform: rotate(0deg) translateY(0px) scale(1.01); box-shadow: 0 22px 56px rgba(0,0,0,0.2);">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6048d1c9-122b-4335-877b-965b2b899516_800w.jpg" alt="Portrait partially submerged in water" class="sm:w-[300px] lg:w-[340px] sm:h-[480px] lg:h-[520px] w-[240px] h-[420px] object-cover ring-black/10 ring-1 rounded-[28px]" style="">
      </article>

      <!-- Card 4 -->
      <article class="relative rounded-3xl fade-in-up stagger-delay-4 animate"
        style="transform: rotate(2.5deg) translateY(10px); box-shadow: 0 18px 44px rgba(0,0,0,0.16);">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9eccc5e3-286c-44fb-ba83-90f953c8c783_800w.jpg" alt="Wine bottle in soft studio drape" class="sm:w-[300px] lg:w-[340px] sm:h-[480px] lg:h-[520px] w-[240px] h-[420px] object-cover ring-black/10 ring-1 rounded-[28px]">
      </article>

      <!-- Card 5 -->
      <article class="relative rounded-3xl fade-in-up stagger-delay-5 animate"
        style="transform: rotate(5deg) translateY(16px); box-shadow: 0 20px 50px rgba(0,0,0,0.18);">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a936bc9-9869-496e-89c2-32bb97b4aea4_800w.jpg" alt="Studio portrait in warm light" class="sm:w-[300px] lg:w-[340px] sm:h-[480px] lg:h-[520px] ring-black/10 ring-1 w-[240px] h-[420px] object-cover rounded-[28px]" style="">
      </article>
    </div>
  </div>
</section>