Hero

import { Button, Heading, HeroSimple, Image, Paragraph, Stack } from '@systhemaui/next'

export default function Demo() {
  return (
    <HeroSimple
      alignContent="center"
      media={
        <Image
          src="/demo-assets/mountains.webp"
          alt="A mountain range at dusk"
          width={1920}
          height={1080}
          aspectRatio="21/9"
          priority
        />
      }
    >
      <Heading.h1>Websites that stay on brand</Heading.h1>
      <Paragraph type="lead">
        Design tokens, components and a CMS that share one source of truth.
      </Paragraph>
      <Stack gap="sm" justifyContent="center" wrap>
        <Button.a href="#" variant="primary">
          Start a project
        </Button.a>
        <Button.a href="#" variant="secondary">
          See our work
        </Button.a>
      </Stack>
    </HeroSimple>
  )
}

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

export default function Demo() {
  return (
    <HeroSimple>
      <Paragraph type="label">Journal</Paragraph>
      <Heading.h1>Notes on building for the long term</Heading.h1>
      <Paragraph type="lead">Essays on design systems, content and maintenance.</Paragraph>
    </HeroSimple>
  )
}

import { Button, Heading, HeroSimple, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <HeroSimple theme="dark" alignContent="center">
      <Heading.h1>Launch week</Heading.h1>
      <Paragraph type="lead">Five days, five releases, one changelog.</Paragraph>
      <Paragraph>
        <Button.a href="#" variant="primary">
          Read the announcement
        </Button.a>
      </Paragraph>
    </HeroSimple>
  )
}

import { Button, Heading, HeroBackground, Image, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <HeroBackground
      alignContent="center"
      background={
        <Image
          src="/demo-assets/coast.webp"
          alt=""
          width={1800}
          height={1200}
          priority
        />
      }
    >
      <Heading.h1>Where the land ends</Heading.h1>
      <Paragraph type="lead">A photo series from the northern coast.</Paragraph>
      <Paragraph>
        <Button.a href="#" variant="primary">
          View the gallery
        </Button.a>
      </Paragraph>
    </HeroBackground>
  )
}

import { Heading, HeroBackground, Image } from '@systhemaui/next'

export default function Demo() {
  return (
    <HeroBackground
      disableOverlay
      alignContent="left"
      background={
        <Image src="/demo-assets/city.webp" alt="" width={1920} height={1080} priority />
      }
    >
      <Heading.h1>City lights</Heading.h1>
    </HeroBackground>
  )
}

import { Button, Heading, HeroFeature, Image, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <HeroFeature
      media={
        <Image
          src="/demo-assets/workspace.webp"
          alt="A desk with a laptop and design sketches"
          width={1800}
          height={1200}
          priority
        />
      }
    >
      <Paragraph type="label">Studio</Paragraph>
      <Heading.h1>A small team for big websites</Heading.h1>
      <Paragraph type="lead">Strategy, design and development under one roof.</Paragraph>
      <Paragraph>
        <Button.a href="#" variant="primary">
          Work with us
        </Button.a>
      </Paragraph>
    </HeroFeature>
  )
}

import { Heading, HeroFeature, Image, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <HeroFeature
      reversed
      theme="dark"
      media={
        <Image
          src="/demo-assets/forest-portrait.webp"
          alt="Sunlight through a pine forest"
          width={1200}
          height={1600}
          priority
        />
      }
    >
      <Heading.h1>Slow travel</Heading.h1>
      <Paragraph type="lead">Routes that take a week and are worth every day.</Paragraph>
    </HeroFeature>
  )
}