Footer 16 block design & features
The section forces a dark theme regardless of the page setting. The left column holds a logo image and a row of secondary-variant icon buttons for social platforms. The right column presents three navigation sections (Tools, Docs, Legal) with uppercase semibold headings and muted link text. On small screens, these sections convert to shadcn/ui accordion items that expand and collapse. A full-width faded brand SVG image sits at the bottom, translated slightly downward to create a partial-bleed effect.
The forced dark background creates a strong visual break from the page above. Social buttons use the secondary variant at icon size, keeping them compact. Navigation headings are set in small uppercase with semibold weight, and links use muted foreground text with a foreground-color hover transition. The watermark image applies a 10% opacity, making it barely visible as a texture.
The accordion-to-columns responsive pattern and the barely-visible watermark give this footer a polished, app-like quality. The dark treatment paired with compact social buttons feels closer to a product footer than a marketing one.
On mobile the navigation sections collapse into an accordion with no-underline triggers, keeping the vertical space compact. The watermark image scales with viewport width and translates proportionally at each breakpoint.