---
import { Icon } from "astro-icon/components";
import ContentSection from "~/components/content-section.astro";
---

<ContentSection title="Just ship less" id="intro">
  <Icon slot="eyebrow" name="logomark" class="size-32" />
  <Fragment slot="lead">
    Astro is a new kind of site builder for the
    <span class="text-primary">modern</span> web.
    <span class="text-primary">Lightning-fast</span>
    performance meets <span class="text-primary">powerful</span> developer experience.
  </Fragment>
  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
    <a
      href="https://docs.astro.build/"
      class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
    >
      <Icon name="mdi:telescope" class="size-8" />
      <span>Read the docs</span>
    </a>
    <a
      href="https://astro.new/"
      class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
    >
      <Icon name="mdi:rocket" class="size-8" />
      <span>Try it out</span>
    </a>
  </div>
</ContentSection>
