logocloud

<section class="border-t border-gray-100 bg-white px-6 py-16 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <p
      class="mb-10 text-center text-xs font-semibold uppercase tracking-widest text-gray-400"
    >
      Trusted by teams at
    </p>
    <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
      <div
        class="flex items-center justify-center"
        style="width: 80px"
        aria-label="Vercel"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Vercel</span
        >
      </div>
      <div
        class="flex items-center justify-center"
        style="width: 88px"
        aria-label="Netlify"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Netlify</span
        >
      </div>
      <div
        class="flex items-center justify-center"
        style="width: 104px"
        aria-label="Supabase"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Supabase</span
        >
      </div>
      <div
        class="flex items-center justify-center"
        style="width: 116px"
        aria-label="Cloudflare"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Cloudflare</span
        >
      </div>
      <div
        class="flex items-center justify-center"
        style="width: 112px"
        aria-label="PlanetScale"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >PlanetScale</span
        >
      </div>
      <div
        class="flex items-center justify-center"
        style="width: 76px"
        aria-label="Prisma"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Prisma</span
        >
      </div>
    </div>
  </div>
</section>

<section class="border-t border-gray-100 bg-gray-50 px-6 py-16 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <p
      class="mb-10 text-center text-xs font-semibold uppercase tracking-widest text-gray-400"
    >
      Trusted by teams at
    </p>
    <div
      class="grid grid-cols-2 divide-x divide-y divide-gray-200 overflow-hidden rounded-2xl border border-gray-200 sm:grid-cols-4"
    >
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Vercel</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Netlify</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Supabase</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Cloudflare</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >PlanetScale</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Prisma</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Railway</span
        >
      </div>
      <div
        class="flex items-center justify-center bg-white px-8 py-10 transition hover:bg-gray-50"
      >
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span class="text-sm font-semibold tracking-tight text-gray-300"
          >Turso</span
        >
      </div>
    </div>
  </div>
</section>

<section class="bg-gray-950 px-6 py-16 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <p
      class="mb-10 text-center text-xs font-semibold uppercase tracking-widest text-gray-500"
    >
      Trusted by teams at
    </p>
    <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
      <div aria-label="Vercel">
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span
          class="text-sm font-semibold tracking-tight text-gray-600 transition hover:text-gray-400"
          >Vercel</span
        >
      </div>
      <div aria-label="Netlify">
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span
          class="text-sm font-semibold tracking-tight text-gray-600 transition hover:text-gray-400"
          >Netlify</span
        >
      </div>
      <div aria-label="Supabase">
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span
          class="text-sm font-semibold tracking-tight text-gray-600 transition hover:text-gray-400"
          >Supabase</span
        >
      </div>
      <div aria-label="Cloudflare">
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span
          class="text-sm font-semibold tracking-tight text-gray-600 transition hover:text-gray-400"
          >Cloudflare</span
        >
      </div>
      <div aria-label="PlanetScale">
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span
          class="text-sm font-semibold tracking-tight text-gray-600 transition hover:text-gray-400"
          >PlanetScale</span
        >
      </div>
      <div aria-label="Prisma">
        <!-- Placeholder wordmark — replace with real <img> or <svg> -->
        <span
          class="text-sm font-semibold tracking-tight text-gray-600 transition hover:text-gray-400"
          >Prisma</span
        >
      </div>
    </div>
  </div>
</section>