Columns

import { Column, Columns, Heading, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="container py-12">
      <Columns columns={3} gap="lg">
        <Column>
          <Heading.h4>Tokens first</Heading.h4>
          <Paragraph>Every color, size and gap comes from the design tokens.</Paragraph>
        </Column>
        <Column>
          <Heading.h4>Composable</Heading.h4>
          <Paragraph>Nest columns in sections and cards; the spacing follows.</Paragraph>
        </Column>
        <Column>
          <Heading.h4>Responsive</Heading.h4>
          <Paragraph>Three columns on desktop, one on a phone, with no extra markup.</Paragraph>
        </Column>
      </Columns>
    </div>
  )
}

import { Card, Column, Columns, Heading, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="container flex flex-col gap-10 py-12">
      <Columns columns={2} gap="md">
        <Column>
          <Card variant="default">
            <Heading.h4>Starter</Heading.h4>
            <Paragraph>For a single site.</Paragraph>
          </Card>
        </Column>
        <Column>
          <Card variant="highlighted">
            <Heading.h4>Studio</Heading.h4>
            <Paragraph>For teams that run many sites.</Paragraph>
          </Card>
        </Column>
      </Columns>
      <Columns columns={4} gap="md">
        {['Plan', 'Design', 'Build', 'Launch'].map((step, index) => (
          <Column key={step}>
            <Paragraph type="label">Step {index + 1}</Paragraph>
            <Heading.h4>{step}</Heading.h4>
          </Column>
        ))}
      </Columns>
    </div>
  )
}

import { Column, Columns, Heading, Paragraph, Row } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="container py-12">
      <Columns columns={3} gap={{ x: 'lg', y: 'md' }}>
        <Row colSpan={3}>
          <Heading.h3>Quarterly report</Heading.h3>
        </Row>
        <Column colSpan={2}>
          <Paragraph type="lead">
            A wide column for the main text, spanning two of the three columns.
          </Paragraph>
        </Column>
        <Column>
          <Paragraph type="small">A narrow column for a side note or a figure caption.</Paragraph>
        </Column>
      </Columns>
    </div>
  )
}

import { Card, Column, Columns, Paragraph } from '@systhemaui/next'

const items = ['One', 'Two', 'Three', 'Four', 'Five', 'Six']

export default function Demo() {
  return (
    <div className="container py-12">
      <Columns columns={3} gap={{ x: 'xl', y: 'xs' }}>
        {items.map((item) => (
          <Column key={item}>
            <Card variant="default">
              <Paragraph>{item}</Paragraph>
            </Card>
          </Column>
        ))}
      </Columns>
    </div>
  )
}

import { Card, Column, Columns, Heading, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="container py-12">
      <Columns columns={4} gap="md" alignX="center" alignY="center">
        <Column>
          <Card variant="default">
            <Heading.h4>Short</Heading.h4>
          </Card>
        </Column>
        <Column>
          <Card variant="highlighted">
            <Heading.h4>Taller card</Heading.h4>
            <Paragraph>
              Two cards in a four-column grid, centred horizontally and vertically.
            </Paragraph>
          </Card>
        </Column>
      </Columns>
    </div>
  )
}

import { Column, Columns, Heading, Paragraph } from '@systhemaui/next'

const stats = [
  { value: '120', label: 'Sites launched' },
  { value: '4.9', label: 'Average rating' },
  { value: '24 h', label: 'Support response' },
]

export default function Demo() {
  return (
    <div className="container py-12">
      <Columns columns={3} gap="xl" divideX alignX="center">
        {stats.map((stat) => (
          <Column key={stat.label} className="text-center">
            <Heading.h2>{stat.value}</Heading.h2>
            <Paragraph type="label">{stat.label}</Paragraph>
          </Column>
        ))}
      </Columns>
    </div>
  )
}