# Footer

Bottom chrome for a Rahhal mini-app. A floating glassy capsule that mirrors `<AppHeader>`: links + social inside a pill, brand line below. Helpers `<FooterLinks>`, `<FooterLink>`, and `<FooterSocial>` keep spacing and ARIA consistent.

[View examples](https://marsam.rahhal.app/components/footer) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui (AppFooter, FooterLinks, FooterLink, FooterSocial)`

**Category:** `nav`

## Anatomy

| part | role |
| --- | --- |
| AppFooter | outer footer — floating glassy pill |
| FooterLinks | wrapping row of FooterLink children; centered on phones and start-aligned from 640px |
| FooterLink | muted anchor with hover-darkens-to-foreground |
| FooterSocial | round icon link (e.g. Instagram, LinkedIn) with required `label` ARIA |

## Notes

- Links and social icons stack below 640px inside a rounded panel. From 640px, they share a pill-shaped row; links wrap when space is limited.
- Brand line defaults to `© <year> Rahhal` — keep it intact across mini-apps for recognizability.
- All link helpers accept the standard `<a>` props (`href`, `target`, `rel`, …). Wrap a router `<Link>` if you need client-side navigation: keep the `FooterLink` className.