features

<section class="bg-white px-6 py-24 sm:py-32 lg:px-8" data-astro-cid-ktizrj7t>
  <div class="mx-auto max-w-6xl" data-astro-cid-ktizrj7t>
    <!-- Section header -->
    <div class="mb-14 max-w-xl" data-astro-cid-ktizrj7t>
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
        data-astro-cid-ktizrj7t
      >
        Why BlockUI
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
        data-astro-cid-ktizrj7t
      >
        Everything you need,<br data-astro-cid-ktizrj7t />nothing you don't.
      </h2>
    </div>
    <!-- Bento grid -->
    <div
      class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:grid-rows-2"
      data-astro-cid-ktizrj7t
    >
      <!-- Card 1 — wide, dark (col-span-2) -->
      <div
        class="relative overflow-hidden rounded-3xl bg-gray-950 p-8 sm:col-span-2"
        data-astro-cid-ktizrj7t
      >
        <!-- Decorative gradient orb -->
        <div
          class="absolute -top-16 -right-16 h-64 w-64 rounded-full bg-violet-600 opacity-20 blur-3xl"
          data-astro-cid-ktizrj7t
        ></div>
        <div
          class="absolute -bottom-8 left-8 h-40 w-40 rounded-full bg-fuchsia-500 opacity-15 blur-2xl"
          data-astro-cid-ktizrj7t
        ></div>
        <div class="relative" data-astro-cid-ktizrj7t>
          <div
            class="mb-4 inline-flex rounded-xl bg-white/10 p-2.5"
            data-astro-cid-ktizrj7t
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-5 w-5 text-violet-300"
              aria-hidden="true"
              data-astro-cid-ktizrj7t
            >
              <path
                fill-rule="evenodd"
                d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.818a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .845-.143Z"
                clip-rule="evenodd"
                data-astro-cid-ktizrj7t
              ></path>
            </svg>
          </div>
          <h3 class="mb-2 text-xl font-bold text-white" data-astro-cid-ktizrj7t>
            Ship in minutes, not days
          </h3>
          <p
            class="max-w-sm text-sm leading-6 text-gray-400"
            data-astro-cid-ktizrj7t
          >
            Every block is a single file — copy it, drop it in your project, and
            move on. No wiring, no configuration, no surprise dependencies.
          </p>
          <!-- Pill tags -->
          <div class="mt-6 flex flex-wrap gap-2" data-astro-cid-ktizrj7t>
            <span
              class="rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-gray-300"
              data-astro-cid-ktizrj7t
            >
              Astro </span
            ><span
              class="rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-gray-300"
              data-astro-cid-ktizrj7t
            >
              Preact </span
            ><span
              class="rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-gray-300"
              data-astro-cid-ktizrj7t
            >
              Tailwind CSS </span
            ><span
              class="rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-gray-300"
              data-astro-cid-ktizrj7t
            >
              TypeScript
            </span>
          </div>
        </div>
      </div>
      <!-- Card 2 — tall, violet tint (row-span-2) -->
      <div
        class="relative overflow-hidden rounded-3xl bg-violet-50 p-8 sm:row-span-2"
        data-astro-cid-ktizrj7t
      >
        <div
          class="mb-6 inline-flex rounded-xl bg-violet-100 p-2.5"
          data-astro-cid-ktizrj7t
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5 text-violet-600"
            aria-hidden="true"
            data-astro-cid-ktizrj7t
          >
            <path
              fill-rule="evenodd"
              d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.143 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z"
              clip-rule="evenodd"
              data-astro-cid-ktizrj7t
            ></path>
          </svg>
        </div>
        <h3
          class="mb-2 text-lg font-bold text-gray-950"
          data-astro-cid-ktizrj7t
        >
          Built to customize
        </h3>
        <p class="text-sm leading-6 text-gray-500" data-astro-cid-ktizrj7t>
          Blocks use plain Tailwind utility classes. Change a color, adjust
          spacing, or restructure the markup — it's just your code now.
        </p>
        <!-- Visual: stacked color swatches -->
        <div class="mt-8 space-y-2" data-astro-cid-ktizrj7t>
          <div class="flex items-center gap-3" data-astro-cid-ktizrj7t>
            <div
              class="h-7 rounded-lg bg-violet-500"
              style="width: var(--w)"
              data-astro-cid-ktizrj7t
            >
              <span class="sr-only" data-astro-cid-ktizrj7t>Violet</span>
            </div>
            <span class="text-xs text-gray-400" data-astro-cid-ktizrj7t
              >Violet</span
            >
          </div>
          <div class="flex items-center gap-3" data-astro-cid-ktizrj7t>
            <div
              class="h-7 rounded-lg bg-sky-500"
              style="width: var(--w)"
              data-astro-cid-ktizrj7t
            >
              <span class="sr-only" data-astro-cid-ktizrj7t>Sky</span>
            </div>
            <span class="text-xs text-gray-400" data-astro-cid-ktizrj7t
              >Sky</span
            >
          </div>
          <div class="flex items-center gap-3" data-astro-cid-ktizrj7t>
            <div
              class="h-7 rounded-lg bg-emerald-500"
              style="width: var(--w)"
              data-astro-cid-ktizrj7t
            >
              <span class="sr-only" data-astro-cid-ktizrj7t>Emerald</span>
            </div>
            <span class="text-xs text-gray-400" data-astro-cid-ktizrj7t
              >Emerald</span
            >
          </div>
          <div class="flex items-center gap-3" data-astro-cid-ktizrj7t>
            <div
              class="h-7 rounded-lg bg-rose-500"
              style="width: var(--w)"
              data-astro-cid-ktizrj7t
            >
              <span class="sr-only" data-astro-cid-ktizrj7t>Rose</span>
            </div>
            <span class="text-xs text-gray-400" data-astro-cid-ktizrj7t
              >Rose</span
            >
          </div>
          <div class="flex items-center gap-3" data-astro-cid-ktizrj7t>
            <div
              class="h-7 rounded-lg bg-amber-400"
              style="width: var(--w)"
              data-astro-cid-ktizrj7t
            >
              <span class="sr-only" data-astro-cid-ktizrj7t>Amber</span>
            </div>
            <span class="text-xs text-gray-400" data-astro-cid-ktizrj7t
              >Amber</span
            >
          </div>
        </div>
        <!-- Fake width vars for the swatches above -->
      </div>
      <!-- Bottom row: two small cards -->
      <div
        class="rounded-3xl border border-gray-100 bg-white p-7 shadow-sm"
        data-astro-cid-ktizrj7t
      >
        <div
          class="mb-4 inline-flex rounded-xl bg-emerald-50 p-2.5"
          data-astro-cid-ktizrj7t
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5 text-emerald-600"
            aria-hidden="true"
            data-astro-cid-ktizrj7t
          >
            <path
              fill-rule="evenodd"
              d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
              clip-rule="evenodd"
              data-astro-cid-ktizrj7t
            ></path>
          </svg>
        </div>
        <h3
          class="mb-1.5 text-base font-bold text-gray-950"
          data-astro-cid-ktizrj7t
        >
          Accessible by default
        </h3>
        <p class="text-sm leading-6 text-gray-500" data-astro-cid-ktizrj7t>
          Semantic HTML, keyboard navigation, and ARIA roles baked in from the
          start.
        </p>
      </div>
      <div
        class="rounded-3xl border border-gray-100 bg-white p-7 shadow-sm"
        data-astro-cid-ktizrj7t
      >
        <div
          class="mb-4 inline-flex rounded-xl bg-sky-50 p-2.5"
          data-astro-cid-ktizrj7t
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5 text-sky-600"
            aria-hidden="true"
            data-astro-cid-ktizrj7t
          >
            <path
              fill-rule="evenodd"
              d="M1.5 5.625c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v12.75c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 18.375V5.625ZM21 9.375A.375.375 0 0 0 20.625 9h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5A.375.375 0 0 0 21 10.875v-1.5Zm0 3.75a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5a.375.375 0 0 0 .375-.375v-1.5Zm0 3.75a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5a.375.375 0 0 0 .375-.375v-1.5ZM10.875 18.75a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5ZM3.375 15h7.5a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375Zm0-3.75h7.5a.375.375 0 0 0 .375-.375v-1.5A.375.375 0 0 0 10.875 9h-7.5A.375.375 0 0 0 3 9.375v1.5c0 .207.168.375.375.375Z"
              clip-rule="evenodd"
              data-astro-cid-ktizrj7t
            ></path>
          </svg>
        </div>
        <h3
          class="mb-1.5 text-base font-bold text-gray-950"
          data-astro-cid-ktizrj7t
        >
          Fully responsive
        </h3>
        <p class="text-sm leading-6 text-gray-500" data-astro-cid-ktizrj7t>
          Every block adapts gracefully from mobile to wide-screen with Tailwind
          breakpoints.
        </p>
      </div>
    </div>
  </div>
</section>

<section class="bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <!-- Section header -->
    <div
      class="mb-16 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"
    >
      <h2 class="text-4xl font-light tracking-tight text-gray-950 sm:text-5xl">
        Why teams<br />
        <em class="font-semibold not-italic">choose BlockUI.</em>
      </h2>
      <p class="max-w-xs text-sm leading-6 text-gray-400 sm:text-right">
        Designed to get out of your way — clean blocks that fit any project.
      </p>
    </div>
    <!-- Divider -->
    <div class="mb-0 h-px bg-gray-100"></div>
    <!-- Feature rows -->
    <dl>
      <div
        class="group grid grid-cols-[3rem_1fr] items-start gap-8 border-b border-gray-100 py-8 sm:grid-cols-[3rem_1fr_2fr]"
      >
        <span
          class="pt-0.5 text-xs font-semibold tabular-nums text-gray-300 transition group-hover:text-gray-400"
        >
          01
        </span>
        <dt class="text-sm font-semibold text-gray-950">Zero dependencies</dt>
        <dd class="col-start-2 text-sm leading-6 text-gray-500 sm:col-start-3">
          Each block is a self-contained file. No third-party libraries, no
          runtime overhead — just HTML, CSS, and the framework you already use.
        </dd>
      </div>
      <div
        class="group grid grid-cols-[3rem_1fr] items-start gap-8 border-b border-gray-100 py-8 sm:grid-cols-[3rem_1fr_2fr]"
      >
        <span
          class="pt-0.5 text-xs font-semibold tabular-nums text-gray-300 transition group-hover:text-gray-400"
        >
          02
        </span>
        <dt class="text-sm font-semibold text-gray-950">Copy, paste, done</dt>
        <dd class="col-start-2 text-sm leading-6 text-gray-500 sm:col-start-3">
          Skip the npm install. Grab the source from the code tab, drop it into
          your project, and customise it however you like.
        </dd>
      </div>
      <div
        class="group grid grid-cols-[3rem_1fr] items-start gap-8 border-b border-gray-100 py-8 sm:grid-cols-[3rem_1fr_2fr]"
      >
        <span
          class="pt-0.5 text-xs font-semibold tabular-nums text-gray-300 transition group-hover:text-gray-400"
        >
          03
        </span>
        <dt class="text-sm font-semibold text-gray-950">
          Accessible by default
        </dt>
        <dd class="col-start-2 text-sm leading-6 text-gray-500 sm:col-start-3">
          Semantic HTML elements, proper heading hierarchy, keyboard-navigable
          interactions, and meaningful ARIA attributes throughout.
        </dd>
      </div>
      <div
        class="group grid grid-cols-[3rem_1fr] items-start gap-8 border-b border-gray-100 py-8 sm:grid-cols-[3rem_1fr_2fr]"
      >
        <span
          class="pt-0.5 text-xs font-semibold tabular-nums text-gray-300 transition group-hover:text-gray-400"
        >
          04
        </span>
        <dt class="text-sm font-semibold text-gray-950">
          Responsive at every breakpoint
        </dt>
        <dd class="col-start-2 text-sm leading-6 text-gray-500 sm:col-start-3">
          Built mobile-first with Tailwind breakpoints. Every block looks right
          on a 320 px phone and a 4K monitor alike.
        </dd>
      </div>
    </dl>
  </div>
</section>