---
import Card from '@@/components/ui/Card.astro';
import myImage from '@/assets/placeholder.png';
---

<section class="py-24 sm:py-32" data-scheme="shift">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mb-10 text-center">
      <div
        class="rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm"
        data-scheme="shift"

      >
        <span class="bg-accent h-2 w-2 rounded-full"></span>
        Deploy faster
      </div>
      <h2 class="h2 mb-4">
        Everything you need to <span class="sp-emphasis">deploy</span> your app
      </h2>
      <p
        class="text-fg-sub mx-auto max-w-3xl text-lg md:text-xl"

      >
        Modern workflow, integrations, security, and performance—ready to ship
      </p>
    </div>

    <div
      class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-8 lg:grid-rows-2"
    >
      <!-- Tile 1: lg:col-span-5 -->
      <div class="flex lg:col-span-5">
        <Card className="shadow-8 w-full lg:rounded-tl-2xl">
          <div class="w-full">
            <img
              src={myImage.src}
              width={myImage.width}
              height={myImage.height}
              alt=""
              class="h-[280px] w-full object-cover object-left sm:h-[320px]"
            />
          </div>
          <div class="p-5 md:p-7">
            <h3 class="typography-ui-12-regular color-text-secondary">
              Releases
            </h3>
            <p class="text-fg-sub mt-2 max-w-[42rem]">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
              gravida justo et nulla efficitur, maximus egestas sem
              pellentesque.
            </p>
          </div>
        </Card>
      </div>

      <!-- Tile 2: lg:col-span-3 -->
      <div class="flex lg:col-span-3">
        <Card className="shadow-8 w-full lg:rounded-tr-2xl">
          <div class="w-full">
            <img
              src={myImage.src}
              width={myImage.width}
              height={myImage.height}
              alt=""
              class="h-[280px] w-full object-cover sm:h-[320px]"
            />
          </div>
          <div class="p-5 md:p-7">
            <h3 class="typography-ui-12-regular color-text-secondary">
              Integrations
            </h3>
            <p class="text-fg-sub mt-2 max-w-[42rem]">
              Curabitur auctor, ex quis auctor venenatis, eros arcu rhoncus
              massa.
            </p>
          </div>
        </Card>
      </div>

      <!-- Tile 3: lg:col-span-3 -->
      <div class="flex lg:col-span-3">
        <Card className="shadow-8 w-full lg:rounded-bl-2xl">
          <div class="w-full">
            <img
              src={myImage.src}
              width={myImage.width}
              height={myImage.height}
              alt=""
              class="h-[280px] w-full object-cover sm:h-[320px]"
            />
          </div>
          <div class="p-5 md:p-7">
            <h3 class="typography-ui-12-regular color-text-secondary">
              Security
            </h3>
            <p class="text-fg-sub mt-2 max-w-[42rem]">
              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
              posuere cubilia.
            </p>
          </div>
        </Card>
      </div>

      <!-- Tile 4: lg:col-span-5 -->
      <div class="flex lg:col-span-5">
        <Card className="shadow-8 w-full lg:rounded-br-2xl">
          <div class="w-full">
            <img
              src={myImage.src}
              width={myImage.width}
              height={myImage.height}
              alt=""
              class="h-[280px] w-full object-cover sm:h-[320px]"
            />
          </div>
          <div class="p-5 md:p-7">
            <h3 class="typography-ui-12-regular color-text-secondary">
              Performance
            </h3>
            <p class="text-fg-sub mt-2 max-w-[42rem]">
              Sed congue eros non finibus molestie. Vestibulum euismod augue vel
              commodo vulputate. Maecenas at augue sed elit dictum vulputate.
            </p>
          </div>
        </Card>
      </div>
    </div>
  </div>
</section>