Hero Section with CTA and Dashboard Mock (Tailwind)

<div
  class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 sm:p-8 bg-gradient-to-b from-neutral-900 to-neutral-950 border-white/10 border rounded-[24px] pt-6 pr-6 pb-6 pl-6 items-center max-w-6xl">
  <!-- Left: Copy -->
  <div class="max-w-[620px]">
    <p class="text-sm text-emerald-400 mb-3 font-geist tracking-tight">Get Started</p>
    <h2 class="text-[44px] sm:text-6xl md:text-7xl leading-[1.05] tracking-tight font-geist font-semibold">
      Ready to Transform Your Content?
    </h2>
    <p class="sm:text-base text-sm text-neutral-300 mt-3 font-geist tracking-tight">
      Join thousands of teams already using FlowAI to automate their content workflow and scale their reach.
    </p>

    <div class="relative mt-6">
      <a href="#signup"
        class="inline-flex items-center justify-center px-6 py-3 rounded-full text-sm font-geist tracking-tight text-white border border-white/10 shadow-2xl"
        style="background: linear-gradient(180deg, #10b981, #059669); box-shadow: 0 12px 30px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.2);">
        START FREE TRIAL
      </a>
      <div aria-hidden="true"
        class="pointer-events-none absolute -z-10 -bottom-2 left-0 right-0 h-10 mx-auto rounded-full"
        style="filter: blur(18px); background: radial-gradient(60% 60% at 50% 50%, rgba(16,185,129,0.35), rgba(16,185,129,0) 70%);">
      </div>
    </div>
  </div>

  <!-- Right: Mock dashboard visual -->
  <div class="relative">
    <div class="relative rounded-3xl border border-white/10 bg-neutral-900/60 overflow-hidden backdrop-blur-sm">
      <!-- Header bar -->
      <div class="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-neutral-900/60">
        <div class="flex items-center gap-2">
          <span class="h-2 w-2 rounded-full bg-neutral-700"></span>
          <span class="h-2 w-2 rounded-full bg-neutral-700"></span>
          <span class="h-2 w-2 rounded-full bg-neutral-700"></span>
        </div>
        <div class="h-2 w-24 rounded bg-neutral-800"></div>
      </div>
      <!-- Grid cards -->
      <div class="p-4 grid grid-cols-2 gap-3">
        <div class="rounded-xl border border-white/10 bg-neutral-900/60 p-3">
          <div class="flex items-center justify-between mb-2">
            <div class="h-2 w-10 rounded bg-neutral-700"></div>
            <div class="h-2 w-6 rounded bg-emerald-500/60"></div>
          </div>
          <div class="h-6 w-20 rounded bg-neutral-800 mb-1"></div>
          <div class="h-1.5 w-3/4 rounded bg-emerald-500/40"></div>
        </div>
        <div class="rounded-xl border border-white/10 bg-neutral-900/60 p-3">
          <div class="flex items-center justify-between mb-2">
            <div class="h-2 w-10 rounded bg-neutral-700"></div>
            <div class="h-2 w-6 rounded bg-emerald-500/60"></div>
          </div>
          <div class="h-6 w-14 rounded bg-neutral-800 mb-1"></div>
          <div class="h-1.5 w-1/2 rounded bg-emerald-400/60"></div>
        </div>
        <div class="rounded-xl border border-white/10 bg-neutral-900/60 p-3 col-span-2">
          <div class="h-2 w-20 rounded bg-neutral-700 mb-3"></div>
          <div class="grid grid-cols-6 gap-1 items-end">
            <div class="h-6 bg-emerald-400/60 rounded"></div>
            <div class="h-10 bg-emerald-400/60 rounded"></div>
            <div class="h-14 bg-emerald-400/60 rounded"></div>
            <div class="h-20 bg-emerald-400/60 rounded"></div>
            <div class="h-12 bg-emerald-400/60 rounded"></div>
            <div class="h-16 bg-emerald-400/60 rounded"></div>
          </div>
        </div>
      </div>
      <!-- Corner glow -->
      <div aria-hidden="true"
        class="pointer-events-none absolute -right-10 -bottom-10 w-40 h-40 rounded-full bg-emerald-500/10 blur-2xl">
      </div>
    </div>
  </div>
</div>