<section class="py-32">
  <div class="container">
    <div class="grid items-center gap-8 lg:grid-cols-2">
      <div class="flex flex-col items-center text-center lg:items-start lg:text-left">
        <span class="flex size-12 items-center justify-center rounded-full bg-zinc-100"><svg
            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-messages-square size-6">
            <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path>
            <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
          </svg></span>
        <h1 class="my-6 text-pretty text-3xl font-bold lg:text-4xl">Welcome to Our Website</h1>
        <p class="mb-8 max-w-xl text-zinc-600 lg:text-lg">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
          omnis! Porro facilis quo animi consequatur. Explicabo.
        </p>
        <div class="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
          <button
            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-11 rounded-md px-8 w-full sm:w-auto">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-play mr-2 size-4">
              <polygon points="6 3 20 12 6 21 6 3"></polygon>
            </svg>Watch Demo</button><button
            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-11 rounded-md px-8 w-full sm:w-auto">
            Get Started
          </button>
        </div>
      </div>
      <img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder hero"
        class="max-h-96 w-full rounded-md object-cover" />
    </div>
  </div>
</section>

<section class="py-32">
  <div class="container">
    <div class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
      <img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder hero"
        class="max-h-96 w-full rounded-md object-cover" />
      <div class="flex flex-col items-center text-center lg:items-start lg:text-left">
        <span class="flex size-12 items-center justify-center rounded-full bg-zinc-100"><svg
            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-zap size-6">
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
            </path>
          </svg></span>
        <h1 class="my-6 text-pretty text-3xl font-bold lg:text-4xl">Welcome to Our Website</h1>
        <p class="mb-8 max-w-xl text-zinc-600 lg:max-w-none lg:text-lg">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
          omnis! Porro facilis quo animi consequatur. Explicabo.
        </p>
        <div class="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
          <button
            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-11 rounded-md px-8 w-full sm:w-auto">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-play mr-2 size-4">
              <polygon points="6 3 20 12 6 21 6 3"></polygon>
            </svg>Watch Demo</button><button
            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-11 rounded-md px-8 w-full sm:w-auto">
            Get Started
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-32">
  <div class="container">
    <div class="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
      <h1 class="mb-6 text-pretty text-4xl font-semibold lg:text-5xl">
        This is where your feature goes
      </h1>
      <div class="mt-10 grid grid-cols-1 place-items-center gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-code size-4">
              <polyline points="16 18 22 12 16 6"></polyline>
              <polyline points="8 6 2 12 8 18"></polyline>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="text-lg font-semibold mb-1">Card Title</h2>
            <p class="text-zinc-600 leading-snug">
              Lorem ipsum dolor sit amet consectetur.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
            <img class="h-40 w-full rounded-tl-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder" />
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-play size-4">
              <polygon points="6 3 20 12 6 21 6 3"></polygon>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="text-lg font-semibold mb-1">Card Title</h2>
            <p class="text-zinc-600 leading-snug">
              Lorem ipsum dolor sit amet consectetur.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
            <img class="h-40 w-full rounded-tl-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-2.jpg" alt="placeholder" />
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-git-branch size-4">
              <line x1="6" x2="6" y1="3" y2="15"></line>
              <circle cx="18" cy="6" r="3"></circle>
              <circle cx="6" cy="18" r="3"></circle>
              <path d="M18 9a9 9 0 0 1-9 9"></path>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="text-lg font-semibold mb-1">Card Title</h2>
            <p class="text-zinc-600 leading-snug">
              Lorem ipsum dolor sit amet consectetur.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
            <img class="h-40 w-full rounded-tl-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-3.jpg" alt="placeholder" />
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-list size-4">
              <line x1="8" x2="21" y1="6" y2="6"></line>
              <line x1="8" x2="21" y1="12" y2="12"></line>
              <line x1="8" x2="21" y1="18" y2="18"></line>
              <line x1="3" x2="3.01" y1="6" y2="6"></line>
              <line x1="3" x2="3.01" y1="12" y2="12"></line>
              <line x1="3" x2="3.01" y1="18" y2="18"></line>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="text-lg font-semibold mb-1">Card Title</h2>
            <p class="text-zinc-600 leading-snug">
              Lorem ipsum dolor sit amet consectetur.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
            <img class="h-40 w-full rounded-tl-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-4.jpg" alt="placeholder" />
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-wand-sparkles size-4">
              <path
                d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72">
              </path>
              <path d="m14 7 3 3"></path>
              <path d="M5 6v4"></path>
              <path d="M19 14v4"></path>
              <path d="M10 2v2"></path>
              <path d="M7 8H3"></path>
              <path d="M21 16h-4"></path>
              <path d="M11 3H9"></path>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="text-lg font-semibold mb-1">Card Title</h2>
            <p class="text-zinc-600 leading-snug">
              Lorem ipsum dolor sit amet consectetur.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
            <img class="h-40 w-full rounded-tl-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-5.jpg" alt="placeholder" />
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-sparkles size-4">
              <path
                d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z">
              </path>
              <path d="M20 3v4"></path>
              <path d="M22 5h-4"></path>
              <path d="M4 17v2"></path>
              <path d="M5 18H3"></path>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="text-lg font-semibold mb-1">Card Title</h2>
            <p class="text-zinc-600 leading-snug">
              Lorem ipsum dolor sit amet consectetur.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
            <img class="h-40 w-full rounded-tl-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-6.jpg" alt="placeholder" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-32">
  <div class="container">
    <div class="mx-auto xl:px-36">
      <h1 class="mx-auto mb-16 max-w-screen-sm text-pretty text-center text-4xl font-semibold lg:text-5xl">
        Get your team on the same page, literally
      </h1>
      <div class="mt-10 flex flex-col gap-6">
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="flex flex-col space-y-1.5 p-6 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-code size-5">
              <polyline points="16 18 22 12 16 6"></polyline>
              <polyline points="8 6 2 12 8 18"></polyline>
            </svg>
          </div>
          <div class="p-6 pt-0 text-left">
            <h2 class="mb-1 text-lg font-semibold">Collaborate or co-edit together</h2>
            <p class="leading-snug text-zinc-600">
              Allow others to comment or suggest edits. Just type the @ key to get their attention.
            </p>
          </div>
          <div class="flex items-center p-6 pt-0 justify-end pb-0">
            <img class="h-[500px] w-full rounded-t-md object-cover object-center"
              src="/images/placeholders/minima/placeholder-wide-1.jpg" alt="placeholder" />
          </div>
        </div>
        <div class="flex flex-col gap-6 md:flex-row">
          <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full">
            <div class="flex flex-col space-y-1.5 p-6 pb-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-git-branch size-5">
                <line x1="6" x2="6" y1="3" y2="15"></line>
                <circle cx="18" cy="6" r="3"></circle>
                <circle cx="6" cy="18" r="3"></circle>
                <path d="M18 9a9 9 0 0 1-9 9"></path>
              </svg>
            </div>
            <div class="p-6 pt-0 text-left">
              <h2 class="mb-1 text-lg font-semibold">Card Title</h2>
              <p class="leading-snug text-zinc-600">
                Lorem ipsum dolor sit amet consectetur.
              </p>
            </div>
            <div class="flex items-center p-6 pt-0 justify-end pb-0 pr-0">
              <img class="h-full max-h-96 w-full rounded-tl-md object-cover object-center"
                src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder" />
            </div>
          </div>
          <div
            class="rounded-lg border bg-card text-card-foreground shadow-sm flex w-full flex-col justify-between gap-10 md:gap-20">
            <div class="flex flex-col space-y-1.5 p-6 items-start pb-1">
              <img class="h-8" src="/images/placeholders/logos/figma.svg" alt="" />
            </div>
            <div class="p-6 pt-0 text-left">
              <q class="text-2xl md:text-3xl">Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sint, porro
                consequatur
                illo itaque rem dolor.</q>
            </div>
            <div class="flex p-6 pt-0 flex-col items-start text-xs">
              <p class="font-semibold">John Doe</p>
              <p class="text-zinc-600">CET, Company Example</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-32">
  <div class="container">
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <div class="rounded-lg border bg-card text-card-foreground shadow-sm p-6 lg:col-span-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-app-window-mac mb-1 w-7">
          <rect width="20" height="16" x="2" y="4" rx="2"></rect>
          <path d="M6 8h.01"></path>
          <path d="M10 8h.01"></path>
          <path d="M14 8h.01"></path>
        </svg>
        <div class="text-left">
          <h2 class="mb-1 mt-4 text-lg font-semibold">Get your team on the same page.</h2>
          <p class="text-zinc-600">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut odit pariatur, ullam
            delectus modi excepturi ea dignissimos mollitia minima unde animi qui omnis.
          </p>
        </div>
        <div class="mt-7">
          <img class="aspect-square max-h-[500px] w-full rounded-t-md object-cover object-center"
            src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder" />
        </div>
      </div>
      <div class="rounded-lg border bg-card text-card-foreground shadow-sm flex flex-col justify-between p-6">
        <div class="text-left">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-zap mb-1 w-7">
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
            </path>
          </svg>
          <h2 class="mb-1 mt-4 text-lg font-semibold">Fast and easy to use.</h2>
          <p class="text-zinc-600">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque corrupti sed.
          </p>
        </div>
        <img class="mt-7 aspect-square rounded-t-md object-cover lg:aspect-auto lg:h-full"
          src="/images/placeholders/minima/placeholder-2.jpg" alt="placeholder" />
      </div>
    </div>
    <div class="mt-6 flex flex-col items-center gap-3">
      <q class="max-w-2xl text-center text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
        pariatur.</q>
      <div class="flex flex-col items-center gap-2 leading-5 sm:flex-row">
        <img src="/images/placeholders/minima/avatar-bw-1.jpg"
          class="relative flex shrink-0 overflow-hidden size-9 rounded-full ring-zinc-800 ring-1 ring-input" />
        <div class="text-center text-xs sm:text-left">
          <p class="font-bold">John Doe</p>
          <p class="text-zinc-600">CEO, Company Name</p>
        </div>
      </div>
    </div>
  </div>
</section>