Feature

import {
  Button,
  Feature,
  FeatureContent,
  FeatureMedia,
  Heading,
  Image,
  Paragraph,
} from '@systhemaui/next'

export default function Demo() {
  return (
    <Feature layoutBackground="alternative">
      <FeatureMedia>
        <Image
          src="/demo-assets/workspace.webp"
          alt="A desk with a laptop and design sketches"
          width={1800}
          height={1200}
        />
      </FeatureMedia>
      <FeatureContent>
        <Paragraph type="label">Studio</Paragraph>
        <Heading.h2>Built around how you work</Heading.h2>
        <Paragraph>
          The media fills its half of the band at any height, and the content column aligns with the
          page container on the other side.
        </Paragraph>
        <Paragraph>
          <Button.a href="#" variant="primary">
            Meet the team
          </Button.a>
        </Paragraph>
      </FeatureContent>
    </Feature>
  )
}

import { Feature, FeatureContent, FeatureMedia, Heading, Image, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Feature reversed>
      <FeatureMedia>
        <Image
          src="/demo-assets/forest-portrait.webp"
          alt="Sunlight through a pine forest"
          width={1200}
          height={1600}
        />
      </FeatureMedia>
      <FeatureContent>
        <Heading.h2>Media on the right</Heading.h2>
        <Paragraph>
          Alternate reversed and regular features down a page to give a long story some rhythm.
        </Paragraph>
      </FeatureContent>
    </Feature>
  )
}

import { Feature, FeatureContent, FeatureMedia, Heading, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Feature theme="dark" layoutBackground="main">
      <FeatureMedia.img src="/demo-assets/city.webp" alt="A city skyline at night" />
      <FeatureContent>
        <Heading.h2>After dark</Heading.h2>
        <Paragraph>
          theme="dark" sets data-theme on the band. Here the media is rendered as the img element
          itself with FeatureMedia.img.
        </Paragraph>
      </FeatureContent>
    </Feature>
  )
}

import {
  Article,
  Feature,
  FeatureContent,
  FeatureMedia,
  Heading,
  Image,
  Paragraph,
} from '@systhemaui/next'

export default function Demo() {
  return (
    <Article>
      <Feature>
        <FeatureMedia>
          <Image src="/demo-assets/dunes-portrait.webp" alt="Sand dunes" width={1200} height={1600} />
        </FeatureMedia>
        <FeatureContent>
          <Heading.h3>Research</Heading.h3>
          <Paragraph>We start with the people who will use the site.</Paragraph>
        </FeatureContent>
      </Feature>
      <Feature reversed layoutBackground="alternative">
        <FeatureMedia>
          <Image
            src="/demo-assets/abstract-square.webp"
            alt="Abstract colored shapes"
            width={1200}
            height={1200}
          />
        </FeatureMedia>
        <FeatureContent>
          <Heading.h3>Design</Heading.h3>
          <Paragraph>Then we turn what we learned into a design system.</Paragraph>
        </FeatureContent>
      </Feature>
    </Article>
  )
}