<section class="rounded-xl bg-slate-50 px-6 py-12 text-center dark:bg-slate-900">
  <span class="inline-flex rounded-full bg-sky-500/15 px-3 py-1 text-xs font-medium text-sky-700 dark:text-sky-300">Версия 4.3 уже доступна</span>
  <h1 class="mx-auto mt-4 max-w-2xl text-3xl font-semibold tracking-tight text-balance text-slate-900 md:text-5xl dark:text-slate-50">
    Интерфейсы, которые собираются за вечер
  </h1>
  <p class="mx-auto mt-4 max-w-prose text-base leading-relaxed text-slate-600 dark:text-slate-400">
    Утилиты вместо CSS-файлов, готовые компоненты вместо велосипедов и тёмная тема из коробки.
  </p>
  <div class="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
    <button class="rounded-md bg-slate-900 px-5 py-2.5 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900">Начать бесплатно</button>
    <button class="rounded-md border border-slate-300 px-5 py-2.5 text-sm font-medium text-slate-700 dark:border-slate-600 dark:text-slate-200">Смотреть демо</button>
  </div>
</section>

<section class="rounded-xl bg-white px-6 py-10 dark:bg-slate-900">
  <div class="flex flex-col gap-8 md:flex-row md:items-center">
    <div class="flex-1">
      <h1 class="text-3xl font-semibold tracking-tight text-slate-900 md:text-4xl dark:text-slate-50">
        Всё, что нужно команде
      </h1>
      <p class="mt-3 text-base leading-relaxed text-slate-600 dark:text-slate-400">
        Отчёты, задачи и загрузка команды в одном окне. Без таблиц в мессенджере.
      </p>
      <div class="mt-5 flex flex-wrap gap-3">
        <button class="rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">Попробовать</button>
        <button class="rounded-md px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">Как это работает</button>
      </div>
    </div>
    <div class="h-48 flex-1 rounded-xl bg-linear-to-br from-sky-400 via-indigo-500 to-purple-500"></div>
  </div>
</section>

<section class="rounded-xl bg-linear-to-br from-slate-900 to-slate-700 px-6 py-10 text-center">
  <h1 class="mx-auto max-w-xl text-2xl font-semibold tracking-tight text-balance text-white md:text-4xl">
    Один короткий разбор в неделю
  </h1>
  <p class="mx-auto mt-3 max-w-prose text-sm text-white/80">Без спама. Отписаться можно одним кликом.</p>
  <form class="mx-auto mt-6 flex max-w-md flex-col gap-2 sm:flex-row">
    <label class="sr-only" for="hero-mail">Электронная почта</label>
    <input id="hero-mail" type="email" placeholder="name@example.com"
           class="min-w-0 flex-1 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-sm text-white
                  placeholder:text-white/60 focus:border-white/50 focus:outline-none">
    <button class="rounded-md bg-white px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-100">Подписаться</button>
  </form>
</section>