A light paper footer that opens with a deep green call to action card, with serif headline and orbiting rating seal, overlapping into a sitemap with serif column titles, an address block and a legal row.
npx shadcn@latest add https://hyperblur.dev/r/footer-cta-sitemap.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-cta-sitemap.tsx.
import { FooterCtaSitemap } from "@/components/hyperblur/footer-cta-sitemap"
<FooterCtaSitemap title="Plan your next season" highlight="in an afternoon." />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Free for your first 30 days" | Small line above the headline. |
| title | string | "Plan your next season" | Headline of the card. |
| highlight | string | "in an afternoon." | Italic continuation of the headline. |
| subtitle | string | "Map every bed, schedule every sowing..." | Supporting paragraph. |
| primary | { label: string; href: string } | null | { label: "Start planning", href: "#" } | Cream primary button. Pass null to hide it. |
| secondary | { label: string; href: string } | null | { label: "Talk to a grower", href: "#" } | Outlined secondary button. Pass null to hide it. |
| rating | { score: string; label: string } | null | { score: "4.9", label: "from 2,300 farms" } | Seal in the middle of the orbit. Pass null to show only the rings. |
| brand | string | "Fieldnote" | Serif wordmark in the sitemap. |
| address | string[] | Street, city and email lines | Lines of the address block. |
| columns | { title: string; links: { label: string; href: string }[] }[] | Product, Growers, Learn, Company | Sitemap columns. |
| legal | { label: string; href: string }[] | Privacy, Terms, Accessibility | Links in the bottom row. |
| copyright | string | "© 2026 Fieldnote Cooperative" | Copyright line. |
| accent | string | "#2f6b4f" | Base color of the card, the stars, the brand dot and link hovers. Deep tones read best. |