Section Header

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { SectionHeader } from '@fairgarden-private/design/components/SectionHeader'
import { Tag } from '@fairgarden-private/design/components/Tag'
import { Sticker } from '../sticker'
import styles from './kinds.module.css'

/** The six openers on one paper band. */
export function SectionHeaderKinds() {
  return (
    <Ground kind="band" preset="paper" className={styles.band}>
      <div className={styles.container}>
        <SectionHeader
          eyebrow="Field guide"
          heading="Birds of the tallgrass prairie"
          lede="Forty species nest in the grass itself; here is how to find them."
        />
        <SectionHeader kind="trailed" kicker="Keep exploring" heading="More from the trail" />
        <SectionHeader
          kind="scene"
          heading="Every acre counts"
          lede="Join the neighbors who keep this land open for good."
        >
          <Button variant="solid" size="lg">
            Donate Now
          </Button>
        </SectionHeader>
        <SectionHeader kind="anchored" art={<Sticker />} heading="Our kitchen garden">
          <Button>See the Menu</Button>
        </SectionHeader>
        <SectionHeader
          kind="technical"
          number="03"
          eyebrow="Specifications"
          heading="Dimensions and weight"
          level="module"
        />
        <SectionHeader kind="topic" topic={<Tag>Conservation</Tag>} heading="Protecting working land" />
      </div>
    </Ground>
  )
}

import { Ground } from '@fairgarden-private/design/components/Ground'
import { SectionDivider } from '@fairgarden-private/design/components/SectionDivider'
import { SectionHeader } from '@fairgarden-private/design/components/SectionHeader'
import styles from './grounds.module.css'

/** The editorial header on tide, the trail kicker on paper, and a header in the night footer. */
export function SectionHeaderGrounds() {
  return (
    <div className={styles.page}>
      <Ground kind="band" preset="tide" className={styles.band} aria-labelledby="grounds-tide">
        <div className={styles.container}>
          <SectionHeader
            eyebrow="Stories"
            heading="Rivers coming back"
            headingId="grounds-tide"
            lede="Three watersheds, ten years of work, and what the water says now."
            seeAll={{ href: '#grounds', label: 'See all stories' }}
          />
        </div>
      </Ground>
      <Ground kind="band" preset="paper" className={styles.band}>
        <SectionDivider kind="page-seam" />
        <div className={styles.container}>
          <SectionHeader
            kind="trailed"
            kicker="Next"
            heading="Visit a preserve near you"
            seeAll={{ href: '#grounds', label: 'See all preserves' }}
          />
        </div>
      </Ground>
      <Ground kind="band" preset="night" render={<footer />} className={styles.band}>
        <div className={styles.container}>
          <SectionHeader
            eyebrow="Stay in touch"
            heading="The field notes letter"
            lede="On the night band every text takes the light ink; the trail and underlines stay green."
            seeAll={{ href: '#grounds' }}
          />
        </div>
      </Ground>
    </div>
  )
}