# Pixel ground 01

> A two-tone heading, a how-to row, link columns, social buttons and a compliance note beside a framed picture card with a button, over a strip of pixel grass in brand shades.

URL: https://apogee.avaui.dev/docs/footers-sections/pixel-ground-01
Last updated: 2026-10-20

A two-tone heading, a how-to row, link columns, social buttons and a compliance note beside a framed picture card with a button, over a strip of pixel grass in brand shades.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/footers/pixel-ground-01

```astro
---
/**
 * Pixel ground 01: A two-tone heading, a how-to row, link columns, social buttons and a compliance note beside a framed picture card with a button, over a strip of pixel grass in brand shades.
 *
 * @block footers
 * @order 49
 */
import { Lock } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Badge from '@/components/apogee/Badge/Badge.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { accentRuns, type Action } from '@/components/apogee/sections/_shared/spine.ts'
import { socialIcons, type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

/** @composable */
interface Props extends FooterContent {
  /** The how-to links under the heading. @category content */
  howTo?: Action[] | null
  /** The line on the picture card. @category content */
  cardHeading?: string | null
  /** The button on the picture card. @category content */
  cardAction?: Action | null
  /** The line on the brand strip at the bottom. @category content */
  credit?: string | null
}

const {
  heading = 'Run a whole company *with AI agents*',
  columns = [
    { heading: 'Company', links: [{ label: 'Homepage', href: '#' }, { label: 'Resources', href: '#' }, { label: 'Pricing', href: '#' }, { label: 'Careers', href: '#' }] },
    { heading: 'Legal', links: [{ label: 'Privacy policy', href: '#' }, { label: 'Terms of service', href: '#' }, { label: 'Docs', href: '#' }] },
  ],
  copyright = '© 2026 Northwave Labs',
  social = [
    { label: 'Updates', href: '#', icon: 'at-sign' },
    { label: 'Community', href: '#', icon: 'users' },
  ],
  howTo = [{ label: 'How to start', href: '#' }, { label: 'How to build', href: '#' }, { label: 'How to sell', href: '#' }, { label: 'How to scale', href: '#' }],
  cardHeading = 'One place to run a company with agents',
  cardAction = { label: 'Run a company', href: '#' },
  credit = 'Made with care by Northwave Labs',
} = Astro.props

// Pixel grass: columns of squares from a fixed seed, in three strengths of the brand colour.
let seed = 4
const rand = () => ((seed = (seed * 16807) % 2147483647) / 2147483647)
const pixels = Array.from({ length: 160 }, (_, x) => {
  const h = 2 + Math.floor(rand() * 4)
  return Array.from({ length: h }, (_, y) => ({ x, y: 8 - y, o: y === h - 1 ? 0.35 : y > 1 ? 0.6 : 0.9 })).concat(rand() < 0.25 ? [{ x, y: 8 - h - 1 - Math.floor(rand() * 2), o: 0.3 }] : [])
}).flat()
---

<Section as="footer" spacing="none" container={false} class="overflow-hidden">
  <div class="mx-auto grid max-w-6xl gap-12 px-gutter pt-(--spacing-section-lg) lg:grid-cols-[1fr_auto]">
    <div class="flex flex-col gap-10">
      {heading && <Heading as="h2" size="h1" class="font-normal">{accentRuns(heading).map((r) => (r.accent ? <span class="block text-neutral-faded">{r.text}</span> : r.text))}</Heading>}
      {howTo && <nav aria-label="How to" class="flex flex-wrap items-center gap-x-4 gap-y-2"><span class="text-neutral-faded">How to</span>{howTo.map((h) => <Link href={h.href} color="neutral" underline="hover">{h.label}</Link>)}</nav>}
      <div class="flex gap-16">{columns.map((c) => <ul class="flex list-none flex-col gap-2 p-0">{c.links.map((l) => <li><Link href={l.href} color="neutral" underline="hover">{l.label}</Link></li>)}</ul>)}</div>
      {social && <ul class="flex list-none gap-2 p-0">
        {social.map((s) => { const Icon = socialIcons[s.icon]; return <li><Button href={s.href} iconOnly variant="outline" color="neutral" aria-label={s.label}><Icon aria-hidden="true" /></Button></li> })}
      </ul>}
      <div class="flex flex-col gap-2 text-sm text-neutral-faded">
        <p class="flex items-center gap-2">Automate with <Badge size="small" variant="outline" color="neutral"><Lock slot="start" />SOC 2</Badge> compliant security</p>
        {copyright && <p>{copyright}</p>}
      </div>
    </div>

    <div class="w-full max-w-sm justify-self-center rounded-3xl border border-neutral-faded bg-page p-3 shadow-sm">
      <div class="relative flex aspect-3/4 flex-col justify-end gap-4 overflow-hidden rounded-2xl p-6">
        <img src="https://picsum.photos/id/1080/120/160" alt="" class="absolute inset-0 -z-0 size-full object-cover [image-rendering:pixelated]" />
        {cardHeading && <p data-theme="dark" class="relative text-xl font-medium text-neutral [text-shadow:0_1px_4px_var(--background-page)]">{cardHeading}</p>}
        {cardAction && <span class="relative"><Button href={cardAction.href} color="neutral" variant="outline">{cardAction.label}</Button></span>}
      </div>
    </div>
  </div>

  <div class="mt-16">
    <svg viewBox="0 0 160 9" class="block w-full text-primary" preserveAspectRatio="none" aria-hidden="true">
      {pixels.map((p) => <rect x={p.x} y={p.y} width="1.02" height="1.02" fill="currentColor" fill-opacity={p.o} />)}
    </svg>
    {credit && <p class="bg-primary py-2 text-center text-xs text-on-primary">{credit}</p>}
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add footers/pixel-ground-01
```

Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/footers-sections#copy-is-props).