Annual report

Land for good, for everyone

Ten years of protected acres, open trails and neighbors who kept them.

Read the ReportDownload PDF

The prairie, one acre at a time

A reference page's media hero: the photo figure under centred text.

• 

  Program

  Protect your land

• 

  Events

  Rally 2026

• 

  Resources

  The learning center

The white band below opens with its section space; the cards stack here below 1024 px.

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Hero } from '@fairgarden-private/design/components/Hero'
import { photo, square } from '../photo'
import styles from './editorial.module.css'

/**
 * A on paper, then A as the media hero on the night band with three entry
 * cards across its edge into the white band below.
 */
export function HeroEditorial() {
  return (
    <div className={styles.page}>
      <Hero
        wayfinding={<p className={styles.eyebrow}>Annual report</p>}
        title={
          <>
            Land for good, <em>for everyone</em>
          </>
        }
        lede="Ten years of protected acres, open trails and neighbors who kept them."
        actions={
          <>
            <Button variant="solid" size="lg">
              Read the Report
            </Button>
            <Button size="lg">Download PDF</Button>
          </>
        }
      />
      <Hero
        preset="night"
        next="white"
        title="The prairie, one acre at a time"
        lede="A reference page's media hero: the photo figure under centred text."
        photo={<img src={photo} alt="Tallgrass prairie at dawn under a low sun" />}
        caption="Nachusa Grasslands, Illinois. Photo: A. Rivera"
        entries={[
          {
            href: '#editorial',
            category: 'Program',
            title: 'Protect your land',
            image: <img src={square} alt="" />,
          },
          {
            href: '#editorial',
            category: 'Events',
            title: 'Rally 2026',
            image: <img src={square} alt="" />,
          },
          {
            href: '#editorial',
            category: 'Resources',
            title: 'The learning center',
            image: <img src={square} alt="" />,
          },
        ]}
      />
      <Ground kind="band" preset="white" className={styles.band}>
        <div className={styles.container}>
          <p className={styles.text}>
            The white band below opens with its section space; the cards stack here below 1024 px.
          </p>
        </div>
      </Ground>
    </div>
  )
}

Keeping farms in farming

Easements that let a family keep working the land, and keep it open for good.

Explore the land

Talk to Us

Enlarge the Photo

The trail lands in this band, in its accent.

import { Breadcrumb } from '@fairgarden-private/design/components/Breadcrumb'
import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Hero } from '@fairgarden-private/design/components/Hero'
import { photo } from '../photo'
import styles from './split.module.css'

/**
 * C on the night band: the text beside the photo from 1024 px, a media
 * Button on the photo, and the explore rail with its trail into paper.
 */
export function HeroSplit() {
  return (
    <div className={styles.page}>
      <Hero
        kind="split"
        preset="night"
        next="paper"
        wayfinding={<Breadcrumb items={[{ label: 'Programs', href: '#split' }]} current="Farmland" />}
        title="Keeping farms in farming"
        lede="Easements that let a family keep working the land, and keep it open for good."
        actions={
          <Button variant="solid" size="lg">
            Talk to Us
          </Button>
        }
        photo={<img src={photo} alt="A family walking a hayfield at the edge of a wood" />}
        caption="The Okafor farm, Wisconsin. Photo: J. Lee"
        photoAction={
          <Button iconOnly onMedia icon="zoom_in">
            Enlarge the Photo
          </Button>
        }
        rail={{ href: '#split', label: 'Explore the land' }}
      />
      <Ground kind="band" preset="paper" className={styles.band}>
        <div className={styles.container}>
          <p className={styles.text}>The trail lands in this band, in its accent.</p>
        </div>
      </Ground>
    </div>
  )
}

The birds came back to Boone Creek

Five years after the dams came out, the creek's thrushes are nesting again.

Boone Creek, Kentucky, in June. Photo: M. Chen

The article begins here, on the page ground.

import { Breadcrumb } from '@fairgarden-private/design/components/Breadcrumb'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Hero } from '@fairgarden-private/design/components/Hero'
import { photo } from '../photo'
import styles from './stacked.module.css'

/**
 * "C, stacked": the text band in the reading span, then the photo crossing
 * the night band's edge, the hill behind it and the caption on paper.
 */
export function HeroStacked() {
  return (
    <div className={styles.page}>
      <Hero
        kind="split"
        stacked
        preset="night"
        edge="hill"
        next="paper"
        wayfinding={
          <Breadcrumb items={[{ label: 'News', href: '#stacked' }]} current="Stories" />
        }
        title="The birds came back to Boone Creek"
        lede="Five years after the dams came out, the creek's thrushes are nesting again."
        photo={<img src={photo} alt="A wooded creek bend in early summer" />}
        caption="Boone Creek, Kentucky, in June. Photo: M. Chen"
      />
      <Ground kind="band" preset="paper" className={styles.band}>
        <div className={styles.container}>
          <p className={styles.text}>The article begins here, on the page ground.</p>
        </div>
      </Ground>
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Hero, HeroLockup } from '@fairgarden-private/design/components/Hero'
import styles from './illustrated.module.css'

/** B on paper: the Display Lockup and a sticker in the page's leaf campaign field. */
export function HeroIllustrated() {
  return (
    <div className={styles.page}>
      <Hero
        kind="illustrated"
        field="leaf"
        next="paper"
        title={<HeroLockup caps="Grown right" accent="here" />}
        lede="Burgers from farms within a hundred miles, cooked on the corner since 2009."
        actions={
          <Button variant="solid" size="lg">
            Order Now
          </Button>
        }
        drawing={
          <svg viewBox="0 0 312 312" role="img" aria-label="A sprouting seed">
            <circle cx="156" cy="170" r="104" fill="var(--role-halo)" />
            <path
              d="M156 250v-86m0 0c0-40 28-64 64-64-4 40-28 64-64 64Zm0 0c0-34-24-56-58-56 4 34 26 56 58 56Z"
              fill="none"
              stroke="var(--primary12)"
              strokeWidth="6"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M96 250h120"
              stroke="var(--primary12)"
              strokeWidth="6"
              strokeLinecap="round"
            />
          </svg>
        }
        rail={{ href: '#illustrated', label: 'Find a kitchen' }}
      />
      <Ground kind="band" preset="paper" className={styles.band}>
        <div className={styles.container}>
          <p className={styles.text}>The rail&rsquo;s trail crosses into this band.</p>
        </div>
      </Ground>
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import { Hero } from '@fairgarden-private/design/components/Hero'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './technical.module.css'

/** D on white: the double frame, the install column and the info cells; the dot grid stays outside the frame. */
export function HeroTechnical() {
  return (
    <Hero
      kind="technical"
      preset="white"
      className={patterns.patternDotgrid}
      title="Respinner"
      lede="v2.4.0 · MIT · 4 kB"
      actions={
        <>
          <Button variant="solid" size="lg">
            Get Started
          </Button>
          <Button size="lg">Read the Docs</Button>
        </>
      }
      aside={
        <div className={styles.install}>
          <p className={styles.label}>Install</p>
          <code className={styles.code}>npm i respinner</code>
        </div>
      }
      cells={[
        { label: 'Size', value: '4 kB' },
        { label: 'Dependencies', value: '0' },
        { label: 'Browsers', value: '98%' },
        { label: 'License', value: 'MIT' },
      ]}
    />
  )
}