Shadcn UI Footer Block
Footer50 is a footer section with a centered call-to-action at the top, navigation links in the middle, and a large decorative brand wordmark at the bottom. The CTA section includes a heading, description, and button. Navigation is split into main links, social links with arrow icons, and legal links. The brand wordmark is rendered as an SVG with a vertical gradient that fades from primary color to transparent.
The visual treatment is minimal and centered. Navigation links use font-medium weight with opacity hover effects. Social links include an ArrowUpRight icon to indicate external links. Legal links are smaller and use muted foreground color. The large brand SVG creates a dramatic visual anchor at the bottom of the page.
This footer exemplifies the mainline design system with its clean typography and restrained styling. The large gradient wordmark is a distinctive branding element that works well with the minimal aesthetic. The centered layout creates a strong vertical rhythm.
The layout remains centered on all screen sizes. The brand wordmark scales to full width and provides visual interest without additional imagery. The gradient uses currentColor so it adapts to theme changes.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
button @shadcn | Registry |