Your first page

import { Column, Row, Heading, Text, Button } from "@once-ui-system/core";

export default function HomePage() {
  return (
    <Column as="main" fillWidth horizontal="center">
      <Column maxWidth="l" paddingY="80" gap="104" fillWidth>
        {/* Section 1 — Hero */}
        <Column gap="24" horizontal="center">
          <Heading variant="display-strong-l" align="center">
            Welcome
          </Heading>
          <Text variant="body-default-m" onBackground="neutral-weak" align="center">
            Your first Once UI page.
          </Text>
          <Row gap="16" s={{ direction: "column" }}>
            <Button href="/start">Get started</Button>
            <Button variant="secondary" href="/docs">Docs</Button>
          </Row>
        </Column>

        {/* Section 2 — Features */}
        <Column gap="24">
          <Heading variant="display-strong-s">Features</Heading>
          <Row gap="24" s={{ direction: "column" }}>
            <Column
              background="surface"
              border="neutral-alpha-weak"
              radius="l"
              padding="24"
              gap="16"
              fill
            >
              <Heading variant="heading-strong-m">Semantic layout</Heading>
              <Text variant="body-default-s" onBackground="neutral-weak">
                Row, Column, Grid — props instead of CSS.
              </Text>
            </Column>
            <Column
              background="surface"
              border="neutral-alpha-weak"
              radius="l"
              padding="24"
              gap="16"
              fill
            >
              <Heading variant="heading-strong-m">Design tokens</Heading>
              <Text variant="body-default-s" onBackground="neutral-weak">
                Spacing, color, and type from a single scale.
              </Text>
            </Column>
          </Row>
        </Column>
      </Column>
    </Column>
  );
}