<section class="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
  <div class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
    <div class="space-y-5">
      <span class="inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-slate-600">Edition 03</span>
      <div class="space-y-3">
        <h1 class="max-w-xl text-4xl font-semibold tracking-tight text-slate-950">Turn quiet product pages into bold, readable launches.</h1>
        <p class="max-w-lg text-sm leading-6 text-slate-600">A softer landing section for studios, creators, and calm SaaS brands that want contrast without neon overload.</p>
      </div>
      <div class="flex flex-wrap gap-3">
        <a class="inline-flex items-center rounded-full bg-slate-950 px-5 py-2.5 text-sm font-semibold text-white" href="#">Browse examples</a>
        <a class="inline-flex items-center rounded-full border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-700" href="#">Design notes</a>
      </div>
    </div>
    <div class="grid gap-3">
      <div class="rounded-[28px] bg-amber-100 p-5 text-slate-900">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-600">Reading time</p>
        <p class="mt-3 text-2xl font-semibold">4 minutes</p>
      </div>
      <div class="rounded-[28px] border border-slate-200 bg-slate-50 p-5">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium text-slate-900">Conversion system</span>
          <span class="rounded-full bg-white px-2 py-1 text-xs text-slate-500">Live</span>
        </div>
        <div class="mt-4 h-24 rounded-[20px] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-700"></div>
      </div>
    </div>
  </div>
</section>