Giant Wordmark Footer Block for React

Its font size scales with the viewport between 4rem and 16rem (clamp(4rem,26vw,16rem)), so on a phone it fills most of the width and on a desktop it stops at a bold but not overwhelming size. A box 0.66 em tall clips it, and a mask fades the cut. Change the name and check that it still fits at 320 pixels: a longer name needs a smaller vw value.

No. It is hidden from assistive technology, because the mission statement above it already names the brand, and it stays a left-to-right element even in a right-to-left page, sitting at the start.

Edit the arrays at the top of the file: NAV and LEGAL. Every link is a plain anchor with href="#": point each at its page, or swap the anchor for your router's link.

The mission statement wraps, the row of links wraps to two lines, the legal band stacks, and the wordmark shrinks with the screen. Nothing scrolls sideways at 320 pixels.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.