MS-101 · Header/NavBar + Footer for all screens

[adityapat24]

Figma: Components → Header 5388:302, Footer 5388:305, Other 5539:741; in context on LG About 5597:15707, MD Team 5690:3059, SM Mobile Menu 5694:48024, footer at the bottom of LG FAQ 5597:20877

Context: Header.tsx and Footer.tsx already exist in apps/main/src/app/lib/Components/ (uncommitted), along with the Special Gothic Condensed One font. This ticket finishes and hardens them, and removes the old standalone routes the new single-page design replaces.

Steps

1. Header, LG (≥1280): logo (HackBeanpot wordmark, left), 8 tabs (About us, Our values, Speakers, Testimonials, Projects, Sponsors, Our team, FAQs), Sponsor Us (translucent brown) and Apply (gold gradient) buttons. Match Figma spacing and the 20px Special Gothic Condensed One.
2. Change the tab hrefs to in-page anchors. The current code links /projects, /sponsors, /team to the old standalone pages, but the new design has them as landing sections. Use #about, #values, #speakers, #testimonials, #projects, #sponsors, #team, #faq (these match the SceneIds in §3.3).
3. Active tab state: a white underline under the active tab (see any LG section frame). Make the header controlled: activeSection?: SceneId and visible?: boolean props. The scroll wiring happens in MS-401, so for now add a local demo toggle.
4. Hidden during the hero: the hero frames show no navbar. With visible=false the header fades out (opacity + small translateY, 300ms) and stops taking pointer events.
5. Header, MD (640–1279): logo + Sponsor Us + Apply + hamburger (see MD Team frame).
6. Mobile menu, SM (<640): build from 5694:48024. It's a full-screen overlay with the tab list and buttons, locks body scroll while open, closes on link click and Esc, and traps focus.
7. Extract Button into lib/Components/museum/Button.tsx with variants gold (Apply, Submit, View Sponsorship Packet) and ghost (Sponsor Us, Back to top), sizes md/sm. Other tickets will import it from S2 on.
8. Footer (all sizes): Back to top button (calls window.scrollTo({top:0}) for now; MS-401 swaps in the Lenis version), IG / LinkedIn / TikTok icon buttons (assets in public/footer), "HackBeanpot is a 501(c)(3) non-profit organization.", Join our mailing list heading + copy + email input + Submit wired to the existing backend route api/joinMailingList (loading, success, error, invalid-email states). It's from Feb 2025, so first confirm with the directors that the list/API key it uses is still the current one, and fix the env vars if not.
9. The footer should render transparent over its parent background, because the FAQ scene (MS-302/MS-403) owns the skeleton/fog art behind it.
10. The Apply button should open the application portal URL from one config constant (ask the directors for the 2027 URL; keep the alert only as a fallback).
11. Accessibility: <header>/<nav>/<footer> landmarks, visible focus rings, aria-current="true" on the active tab, aria-expanded on the hamburger.
12. Remove the old routes. Delete apps/main/src/app/projects/, sponsors/, team/, sponsor-us/ and placeholder/ along with their Sections/ and components/ folders. Then:
    • Add permanent redirects in apps/main/next.config.js redirects(): /projects → /#projects, /sponsors → /#sponsors, /team → /#team, /sponsor-us → /#sponsors. External links and search results keep working.
    • Point the Sponsor Us button to /#sponsors (or to the sponsorship packet if Cole/Lucy prefer).
    • Delete the old lib/Components/NavBar.tsx, the old VolunteeringInfoCard/SponsorTicket* components and their exports in lib/Components/index.ts, the lib/Assets/SVG/* folders those routes used (OurTeamAssets, OurTeamValuesAssets, SponsorUsAssets, SponsorUsPageAssets, SponsorAssets, …), and the old public/ folders they used (headshots/, sponsor-logos/, sponsor-stats/, sponsor-testimonials/, projects/, team.png, footer-logos/, …). None of it is reused: the 2027 headshots, logos and project media come from the directors (MS-108/MS-505).
    • If an old landing section ((landing)/Sections/*) still imports something you'd delete, leave that file for MS-401 rather than editing the old landing page.
    • Don't touch packages/ui or packages/util; apps/live and apps/app-portal use them.

Acceptance criteria

• Header matches Figma at 1512, 1000 and 402 widths (screenshots in the PR)
• activeSection and visible props work in the demo
• Button is exported from lib/Components/museum and used by Header and Footer
• Mailing list submit shows success and error states against the real API
• Keyboard-only navigation works, including the mobile menu focus trap
• /projects, /sponsors, /team, /sponsor-us redirect to the right landing anchors; /placeholder returns 404
• Old NavBar.tsx and the route-only components/assets are deleted; yarn build, yarn lint and yarn type-check pass with no dead imports