The footer links every package for search engines but hides them from phones

The Footer component renders two elements. The first is a nav that only appears on desktop — hidden on base, block on the lg breakpoint. Inside is a five-column grid where each column represents a service. The column header is a link to the service page. Below it is an unordered list of every product in that service, each linking to its checkout page. Sound Engineering has four links. Music Production has five. Software Engineering has four. Accessibility has four. Musician has four. Twenty-one internal links in total, all generated dynamically from the same products array that powers the service pages and checkout flows. If I add a new package to the products array, the footer picks it up on the next build with zero additional configuration. The grid is hidden on mobile because twenty-one links stacked vertically would push the actual footer content off-screen. On desktop, the five-column layout fits cleanly above the copyright section. The purpose is SEO internal linking. Every checkout page is set to noindex nofollow — search engines cannot find them through crawling. But the footer links exist on every public page of the site, giving search engines a path from the indexed service pages to the individual product pages. The links also tell search engines about the site structure — five services, four to five packages each, a clear hierarchy. The second element is the visible footer with the company logos, copyright line, registered office address, company number, legal links, and a WCAG 2.1 AA compliance badge. The legal links have a minimum height of forty-four pixels using an inline-flex alignment wrapper. The logos have hover opacity transitions from seventy percent to full. The entire Footer is one hundred and four lines. One component, two sections, twenty-one dynamic links, and the product catalog drives both the service pages and the sitemap alternative in the footer.