The footer is a sitemap you can click
On desktop screens, the footer has two layers. The first is a five-column navigation grid that lists every product across every service. Software Engineering on the left, then Accessibility, Sound Engineering, Music Production, and Musician. Under each heading, every package is a link straight to its checkout page. A client scanning the footer can jump from the homepage to a specific package without navigating through the service page first. Search engines can too. Every checkout URL is discoverable from the footer of every page on the site. The grid is hidden on mobile because twenty-two product links stacked vertically would push the actual footer off the screen. On small screens, you get the second layer only — company information, legal links, and a WCAG 2.1 AA compliance badge. The legal links to Terms and Privacy have 44-pixel minimum touch targets through inline-flex with min-height. The company details include the registered office, company number, and a copyright range that auto-updates using new Date().getFullYear() so it never goes stale. Three brand logos sit in a row — Blind Drummer, the initials mark, and the full logo — each with hover opacity transitions. On desktop, logos sit to the right and info sits to the left. On mobile, the order reverses using Tailwind order utilities so logos appear first. The entire footer is a nav landmark for the package grid and a footer landmark for the company info. Two semantic regions, one component, twenty-two deep links to checkout pages.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.