Footer
Site-wide footer. Left column: a 'Start a project' CTA with two buttons and an availability callout. Right column: sitemap grid and optional recent blog posts with hover preview. Bottom bar: copyright and social icons.
Live Preview (with recent posts)
Without recent posts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
recentPosts | BlogPost[] | [] | Optional list of the most-recent blog posts. When non-empty, renders the "Recent Posts" column with a hover preview. When empty, the column is omitted. |
Composition
Left: CTA
"Start a project" heading, two-button row (primary → /contact, secondary → /services), availability line with inline link.
Right: sitemap + recent posts
Two-column sitemap. If `recentPosts` is supplied, a third block lists them with thumbnails; hovering a row reveals a large preview to the left (lg+).
Ground and backdrop
Light, site-wide: the footer carries `surface-paper surface-white`, so every token inside re-points to the ink ladder. `.footer-flow` lays the CTA banner's aqua silk (MeshCardBackdrop tone="aqua", lazy) across the lower 60%, feathered into the ground by a mask, with a low scrim behind the copyright row.
Import
import { Footer } from '@/components/layout/Footer'