integrations

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-14 max-w-xl">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        Integrations
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Works with your stack.
      </h2>
      <p class="mt-4 text-base leading-7 text-gray-500">
        BlockUI blocks drop into any Astro project alongside the tools you
        already use.
      </p>
    </div>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-gray-950"
        >
          V
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Vercel</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Hosting</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Deploy with zero config. Push to git, go live in seconds.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-emerald-600"
        >
          S
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Supabase</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Database</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Open source Firebase alternative with Postgres and auth.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-orange-500"
        >
          C
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Cloudflare</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Infrastructure</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Edge network, CDN, and serverless functions worldwide.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-violet-600"
        >
          S
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Stripe</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Payments</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Accept payments and manage subscriptions with one API.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-sky-600"
        >
          R
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Resend</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Email</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Developer-first email API built for modern applications.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-teal-700"
        >
          P
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Prisma</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >ORM</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Type-safe ORM for Node.js and TypeScript projects.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-rose-600"
        >
          S
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Sentry</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Monitoring</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Error monitoring and performance tracing in production.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-blue-600"
        >
          A
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Algolia</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Search</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Fast, relevant search for any data source.
          </p>
        </div>
      </div>
      <div
        class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:border-gray-200 hover:shadow-sm"
      >
        <div
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold text-white bg-emerald-500"
        >
          U
        </div>
        <div class="min-w-0">
          <div class="mb-0.5 flex items-center gap-2">
            <p class="text-sm font-semibold text-gray-950">Upstash</p>
            <span
              class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-400"
              >Cache</span
            >
          </div>
          <p class="text-xs leading-5 text-gray-500">
            Serverless Redis and Kafka with per-request pricing.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-gray-50 px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-14 flex items-end justify-between">
      <div class="max-w-lg">
        <p
          class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
        >
          Integrations
        </p>
        <h2
          class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
        >
          Works with your stack.
        </h2>
      </div>
      <p class="hidden max-w-xs text-sm leading-6 text-gray-400 sm:block">
        Drop BlockUI blocks into any project alongside the tools you already
        rely on.
      </p>
    </div>
    <!-- Bento grid -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
      <div
        class="rounded-3xl border border-gray-200 bg-white p-7 shadow-xs sm:col-span-2"
      >
        <div class="mb-5 flex items-start justify-between">
          <div
            class="flex h-11 w-11 items-center justify-center rounded-xl text-sm font-bold text-white bg-gray-950"
          >
            V
          </div>
          <span
            class="rounded-full bg-gray-100 px-2.5 py-1 text-[10px] font-medium text-gray-400"
          >
            Hosting
          </span>
        </div>
        <p class="mb-1.5 text-base font-bold text-gray-950">Vercel</p>
        <p class="text-sm leading-6 text-gray-500">
          Push to git, deploy to the edge. Zero-config CI/CD that just works
          with Astro.
        </p>
      </div>
      <div class="rounded-3xl border border-gray-200 bg-white p-7 shadow-xs">
        <div class="mb-5 flex items-start justify-between">
          <div
            class="flex h-11 w-11 items-center justify-center rounded-xl text-sm font-bold text-white bg-emerald-600"
          >
            S
          </div>
          <span
            class="rounded-full bg-gray-100 px-2.5 py-1 text-[10px] font-medium text-gray-400"
          >
            Database
          </span>
        </div>
        <p class="mb-1.5 text-base font-bold text-gray-950">Supabase</p>
        <p class="text-sm leading-6 text-gray-500">
          Postgres, auth, storage, and real-time — all in one open-source
          platform.
        </p>
      </div>
      <div class="rounded-3xl border border-gray-200 bg-white p-7 shadow-xs">
        <div class="mb-5 flex items-start justify-between">
          <div
            class="flex h-11 w-11 items-center justify-center rounded-xl text-sm font-bold text-white bg-violet-600"
          >
            S
          </div>
          <span
            class="rounded-full bg-gray-100 px-2.5 py-1 text-[10px] font-medium text-gray-400"
          >
            Payments
          </span>
        </div>
        <p class="mb-1.5 text-base font-bold text-gray-950">Stripe</p>
        <p class="text-sm leading-6 text-gray-500">
          The world&#39;s most complete payments platform. One API for
          everything money.
        </p>
      </div>
      <div
        class="rounded-3xl border border-gray-200 bg-white p-7 shadow-xs sm:col-span-2"
      >
        <div class="mb-5 flex items-start justify-between">
          <div
            class="flex h-11 w-11 items-center justify-center rounded-xl text-sm font-bold text-white bg-orange-500"
          >
            C
          </div>
          <span
            class="rounded-full bg-gray-100 px-2.5 py-1 text-[10px] font-medium text-gray-400"
          >
            Infrastructure
          </span>
        </div>
        <p class="mb-1.5 text-base font-bold text-gray-950">Cloudflare</p>
        <p class="text-sm leading-6 text-gray-500">
          Global edge network, CDN, serverless workers, and DDoS protection.
        </p>
      </div>
    </div>
    <!-- More integrations -->
    <div class="mt-6 flex flex-wrap items-center gap-3">
      <span class="text-xs font-medium text-gray-400">Also works with</span>
      <span
        class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500 shadow-xs"
      >
        Resend </span
      ><span
        class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500 shadow-xs"
      >
        Prisma </span
      ><span
        class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500 shadow-xs"
      >
        Sentry </span
      ><span
        class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500 shadow-xs"
      >
        Algolia </span
      ><span
        class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500 shadow-xs"
      >
        Upstash </span
      ><span
        class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500 shadow-xs"
      >
        Railway
      </span>
    </div>
  </div>
</section>

<section class="border-t border-gray-100 bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <div class="mb-12">
      <p
        class="mb-2 text-xs font-semibold uppercase tracking-widest text-gray-400"
      >
        Integrations
      </p>
      <h2 class="text-3xl font-bold tracking-tight text-gray-950">
        Works with your stack.
      </h2>
    </div>
    <div class="divide-y divide-gray-100">
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Vercel</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Zero-config deployments from git.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Hosting
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Supabase</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Postgres, auth, and storage.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Database
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Stripe</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Accept payments with one API.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Payments
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Cloudflare</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Global edge network and CDN.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Infrastructure
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Resend</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Developer-first transactional email.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Email
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Prisma</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Type-safe database access for Node.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          ORM
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Sentry</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Error tracking and performance.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Monitoring
        </span>
      </div>
      <div class="flex items-center justify-between gap-6 py-4">
        <div class="flex items-center gap-4">
          <p class="text-sm font-semibold text-gray-950">Algolia</p>
          <p class="hidden text-sm text-gray-400 sm:block">
            Fast, relevant search at any scale.
          </p>
        </div>
        <span
          class="shrink-0 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500"
        >
          Search
        </span>
      </div>
    </div>
  </div>
</section>