Responsive Three-Step How-It-Works Section

<section
  class="z-10 sm:p-8 animate-scaleIn animation-delay-300 bg-white w-full max-w-7xl border-neutral-200/70 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 relative shadow-2xl">
  <!-- Header -->
  <div class="flex gap-6 sm:px-0 animate-fadeInUp pr-1 pl-1 items-center">
    <h2 class="text-[44px] sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] text-zinc-950 font-geist tracking-tighter"
      style="">How it works.</h2>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px bg-neutral-200 h-10"></span>
    <p class="sm:text-base text-sm text-zinc-400 mt-1 font-geist tracking-tight" style="">Three simple steps to automate
      your content</p>
  </div>
  <div class="h-px animate-fadeIn animation-delay-100 bg-neutral-200 mt-4"></div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 z-10 sm:mt-8 mt-6 relative items-stretch">
    <!-- STEP 1 -->
    <div
      class="lg:col-span-4 sm:p-8 hover-lift bg-white border-neutral-200 border rounded-[28px] pt-6 pr-6 pb-6 pl-6 relative h-full flex flex-col">
      <span class="absolute -top-4 left-6 inline-flex items-center px-4 py-1.5 rounded-full border border-neutral-200 bg-white text-xs sm:text-sm text-neutral-800 font-geist tracking-tight" style="">STEP 1</span>
      <!-- Visual -->
      <div class="relative h-48 sm:h-56 rounded-2xl bg-neutral-100 border border-neutral-200 overflow-hidden">
        <div class="absolute inset-0 p-4 sm:p-6">
          <!-- Content brief interface mockup -->
          <div class="bg-white/90 border border-neutral-200 rounded-xl p-4 w-full shadow-2xl">
            <div class="flex items-center gap-2 mb-3">
              <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="w-4 h-4 text-emerald-600">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                <polyline points="14,2 14,8 20,8" class=""></polyline>
                <line x1="16" y1="13" x2="8" y2="13" class=""></line>
                <line x1="16" y1="17" x2="8" y2="17" class=""></line>
                <polyline points="10,9 9,9 8,9" class=""></polyline>
              </svg>
              <div class="h-2 w-24 bg-neutral-900 rounded"></div>
            </div>
            <div class="h-2 w-full bg-neutral-100 rounded mb-2"></div>
            <div class="h-2 w-4/5 bg-neutral-100 rounded mb-2"></div>
            <div class="h-2 w-3/4 bg-neutral-100 rounded mb-3"></div>
            <div class="flex gap-2">
              <div class="h-6 w-16 bg-emerald-100 rounded-lg flex items-center justify-center">
                <div class="h-1 w-8 bg-emerald-600 rounded"></div>
              </div>
              <div class="h-6 w-20 bg-neutral-100 rounded-lg"></div>
            </div>
          </div>
          <!-- AI processing indicator -->

        </div>
      </div>
      <!-- Copy -->
      <h3 class="mt-6 text-3xl sm:text-4xl text-neutral-900 font-geist tracking-tighter" style="">Create your brief</h3>
      <p class="mt-2 text-sm sm:text-base text-neutral-600 max-w-[52ch] font-geist tracking-tight" style="">Simply
        describe your content goals, target audience, and key messages. Our AI understands context and brand voice.</p>
    </div>

    <!-- STEP 2 -->
    <div
      class="lg:col-span-4 sm:p-8 hover-lift bg-white border-neutral-200 border rounded-[28px] pt-6 pr-6 pb-6 pl-6 relative h-full flex flex-col">
      <span class="absolute -top-4 left-6 inline-flex items-center px-4 py-1.5 rounded-full border border-neutral-200 bg-white text-xs sm:text-sm text-neutral-800 font-geist tracking-tight" style="">STEP 2</span>
      <!-- Visual -->
      <div
        class="relative h-48 sm:h-56 rounded-2xl border border-neutral-200 overflow-hidden bg-gradient-to-br from-neutral-50 to-neutral-100 p-4">
        <div class="grid grid-cols-2 gap-3 h-full">
          <!-- Content variations -->
          <div class="bg-white border border-neutral-200 rounded-lg p-3 shadow-sm">
            <div class="flex items-center gap-2 mb-2">
              <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="text-blue-600">
                <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 class="h-1.5 w-12 bg-blue-600 rounded"></div>
            </div>
            <div class="space-y-1">
              <div class="h-1 w-full bg-neutral-200 rounded"></div>
              <div class="h-1 w-4/5 bg-neutral-200 rounded"></div>
              <div class="h-1 w-3/4 bg-neutral-200 rounded"></div>
            </div>
          </div>
          <div class="bg-white border border-neutral-200 rounded-lg p-3 shadow-sm">
            <div class="flex items-center gap-2 mb-2">
              <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="text-emerald-600">
                <rect width="20" height="14" x="2" y="3" rx="2" ry="2" class=""></rect>
                <line x1="8" y1="21" x2="16" y2="21" class=""></line>
                <line x1="12" y1="17" x2="12" y2="21" class=""></line>
              </svg>
              <div class="h-1.5 w-10 bg-emerald-600 rounded"></div>
            </div>
            <div class="space-y-1">
              <div class="h-1 w-full bg-neutral-200 rounded"></div>
              <div class="h-1 w-5/6 bg-neutral-200 rounded"></div>
              <div class="h-1 w-2/3 bg-neutral-200 rounded"></div>
            </div>
          </div>
          <div class="bg-white border border-neutral-200 rounded-lg p-3 shadow-sm">
            <div class="flex items-center gap-2 mb-2">
              <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="text-purple-600">
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" class=""></path>
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" class=""></path>
              </svg>
              <div class="h-1.5 w-14 bg-purple-600 rounded"></div>
            </div>
            <div class="space-y-1">
              <div class="h-1 w-full bg-neutral-200 rounded"></div>
              <div class="h-1 w-4/5 bg-neutral-200 rounded"></div>
              <div class="h-1 w-3/5 bg-neutral-200 rounded"></div>
            </div>
          </div>
          <div class="bg-white border border-neutral-200 rounded-lg p-3 shadow-sm">
            <div class="flex items-center gap-2 mb-2">
              <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="text-orange-600">
                <path d="M4 4l11.733 16h4.267l-11.733-16z" class=""></path>
                <path d="M4 20l6.768-6.768m2.46-2.46l6.772-6.772" class=""></path>
              </svg>
              <div class="h-1.5 w-8 bg-orange-600 rounded"></div>
            </div>
            <div class="space-y-1">
              <div class="h-1 w-full bg-neutral-200 rounded"></div>
              <div class="h-1 w-3/4 bg-neutral-200 rounded"></div>
              <div class="h-1 w-4/5 bg-neutral-200 rounded"></div>
            </div>
          </div>
        </div>
        <!-- Processing indicator -->

      </div>
      <!-- Copy -->
      <h3 class="mt-6 text-3xl sm:text-4xl text-neutral-900 font-geist tracking-tighter" style="">AI generates content
      </h3>
      <p class="mt-2 text-sm sm:text-base text-neutral-600 max-w-[52ch] font-geist tracking-tight" style="">Our AI
        creates multiple content variations optimized for different channels and formats in seconds.</p>
    </div>

    <!-- STEP 3 -->
    <div
      class="lg:col-span-4 relative rounded-[28px] border border-neutral-200 bg-white p-6 sm:p-8 hover-lift h-full flex flex-col">
      <span class="absolute -top-4 left-6 inline-flex items-center px-4 py-1.5 rounded-full border border-neutral-200 bg-white text-xs sm:text-sm text-neutral-800 font-geist tracking-tight" style="">STEP 3</span>
      <!-- Visual -->
      <div class="relative h-48 sm:h-56 rounded-2xl bg-neutral-100 border border-neutral-200 overflow-hidden p-4">
        <div class="w-full h-full rounded-xl overflow-hidden bg-white border border-neutral-200 p-3">
          <!-- Dashboard mockup -->
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-2">
              <div class="w-6 h-6 bg-emerald-100 rounded-lg flex items-center justify-center">
                <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="text-emerald-600">
                  <path d="M3 3v5h5" class=""></path>
                  <path d="M21 12A9 9 0 0 0 6 2.3L3 8" class=""></path>
                  <path d="M21 21v-5h-5" class=""></path>
                  <path d="M3 12a9 9 0 0 0 15 6.7L21 16" class=""></path>
                </svg>
              </div>
              <div class="h-2 w-16 bg-neutral-900 rounded"></div>
            </div>
            <div class="w-4 h-4 bg-green-400 rounded-full"></div>
          </div>
          <!-- Channel distribution -->
          <div class="grid grid-cols-3 gap-2 mb-3">
            <div class="bg-blue-50 border border-blue-200 rounded p-2 text-center">
              <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="mx-auto text-blue-600 mb-1">
                <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 class="h-1 w-8 bg-blue-600 rounded mx-auto"></div>
            </div>
            <div class="bg-emerald-50 border border-emerald-200 rounded p-2 text-center">
              <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="mx-auto text-emerald-600 mb-1">
                <rect width="20" height="16" x="2" y="4" rx="2" class=""></rect>
                <path d="M6 8l6 4 6-4" class=""></path>
              </svg>
              <div class="h-1 w-6 bg-emerald-600 rounded mx-auto"></div>
            </div>
            <div class="bg-purple-50 border border-purple-200 rounded p-2 text-center">
              <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="mx-auto text-purple-600 mb-1">
                <rect width="20" height="14" x="2" y="3" rx="2" ry="2" class=""></rect>
                <line x1="8" y1="21" x2="16" y2="21" class=""></line>
                <line x1="12" y1="17" x2="12" y2="21" class=""></line>
              </svg>
              <div class="h-1 w-10 bg-purple-600 rounded mx-auto"></div>
            </div>
          </div>
          <div class="grid grid-cols-3 gap-2 mb-3">
            <div class="bg-blue-50 border border-blue-200 rounded p-2 text-center">
              <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="mx-auto text-blue-600 mb-1">
                <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 class="h-1 w-8 bg-blue-600 rounded mx-auto"></div>
            </div>
            <div class="text-center bg-emerald-50 border-emerald-200 border rounded pt-2 pr-2 pb-2 pl-2">
              <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="mx-auto text-emerald-600 mb-1">
                <rect width="20" height="16" x="2" y="4" rx="2" class=""></rect>
                <path d="M6 8l6 4 6-4" class=""></path>
              </svg>
              <div class="h-1 w-6 bg-emerald-600 rounded mx-auto"></div>
            </div>
            <div class="bg-purple-50 border border-purple-200 rounded p-2 text-center">
              <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="mx-auto text-purple-600 mb-1">
                <rect width="20" height="14" x="2" y="3" rx="2" ry="2" class=""></rect>
                <line x1="8" y1="21" x2="16" y2="21" class=""></line>
                <line x1="12" y1="17" x2="12" y2="21" class=""></line>
              </svg>
              <div class="h-1 w-10 bg-purple-600 rounded mx-auto"></div>
            </div>
          </div>
          <!-- Analytics chart -->

        </div>
      </div>
      <!-- Copy -->
      <h3 class="mt-6 text-3xl sm:text-4xl text-neutral-900 font-geist tracking-tighter" style="">Distribute &amp;
        optimize</h3>
      <p class="mt-2 text-sm sm:text-base text-neutral-600 max-w-[52ch] font-geist tracking-tight" style="">Content is
        automatically distributed across your channels with performance tracking and optimization.</p>
    </div>
  </div>
</section>