The Astro UI library to build content sites

---
import { Button, Column, Heading, Image, Row, Section, Text } from 'fulldev-ui'
---

<Section structure="split" align="center">
  <Column>
    <Heading> A section with equal columns </Heading>
    <Text>
      On mobile it's a single column, of course. All without having to think
      about responsiveness. It just works. Have a look at the code, it's down
      below.
    </Text>
    <Row>
      <Button contrast href="/overview/installation"> Installation </Button>
      <Button contrast variant="soft" href="/structure/split">
        Component
      </Button>
    </Row>
  </Column>
  <Image src="/placeholder.jpeg" />
</Section>

---
import { Button, Heading, Section, Text } from 'fulldev-ui'
---

<Section align="center" frame="panel" size="xl" variant="surface">
  <Heading> A panel to grab attention </Heading>
  <Text> You can also make it stand out even more, with brighter colors </Text>
  <Button href="/segment/section" contrast> Let's get started </Button>
</Section>

---
import {
  Button,
  Card,
  Carousel,
  Heading,
  Image,
  Row,
  Section,
  Spread,
  Text,
} from 'fulldev-ui'

const cards = Array.from({ length: 18 })
---

<Section size="sm">
  <Spread align="center">
    <Heading> Buy some components </Heading>
    <Button href="/structure/carousel" contrast> View component </Button>
  </Spread>
  <Carousel position="inset">
    {
      cards.map((card) => (
        <Card frame="none" href="/structure/carousel">
          <Image src="/product-placeholder.jpeg" />
          <Row>
            <Heading level={3}>Component</Heading>
            <Text> - $20</Text>
          </Row>
        </Card>
      ))
    }
  </Carousel>
</Section>