feat(career-guides): Redesign as searchable hashflag index

[jeromehardaway]

Summary

• Replaces the flat list of 4,201 military job codes at /career-guides with an editorial database matching the design level of /programs/core-curriculum.
• New container at src/containers/career-guides/ composed of: status bar (with LIVE pulse), editorial hero + 5-column stat strip, 4-pathway category showcase, search with ⌘K + autocomplete, branch chips + rank + family + sort filters, paginated grid view (60 per page), and Cohort 2027 CTA band.
• New data adapter src/lib/career-guides.ts merges training-pipeline.json + career-pathways-map.json at build time into the GuideEntry shape (code, title, branch, rank, family, civilian translation, salary band, certs, demand).
• Implements the design_handoff_career_guides prototype adapted to our brand system: VWC navy/red/gold tokens (not the prototype's gold), GothamPro + Gilroy fonts (not Geist), 0 border radius (not 2px), reused Layout01 Header/Footer (drops the prototype's own nav/footer), and the signature 16×2px red eyebrow bar on every section title.

Design decisions

• Shipped the single configuration the handoff itself recommends for production: view: grid, hero: editorial, distinct branch colors. Dropped the tweaks panel, table view, and list view.
• Pagination ("Load 60 more →") instead of virtualization — simpler, matches the existing use-load-more pattern.
• Heuristic family/rank detection via regex in src/lib/career-guides.ts — a curated mapping JSON would be more accurate as a follow-up.

Known follow-ups

• getStaticProps payload is ~1.16 MB (Next warns at 128 kB) because all 4,201 guides ship to enable instant client-side filter/search. Options if needed: drop unused fields per row, paginate at build time, or move filtering server-side.
• Family/rank regex detection will mis-bucket some rows — replace with a curated map when one exists.
• [mos].tsx detail page is unchanged; cards link to it as-is.

Test plan

• Visit /career-guides, verify all sections render (status bar, hero, categories, database, CTA)
• Search input: type "cyber", "11B", "intel" — confirm filter + autocomplete behavior
• Press ⌘K (or Ctrl-K) anywhere on the page → search focuses; Esc → blurs
• Autocomplete: type a partial code, use ↑↓ to navigate, Enter to pick
• Click a category card → family filter applies + smooth-scrolls to database
• Click each branch chip → list filters, count updates, gold active state
• Rank segmented control, Family dropdown, Sort dropdown — combine with AND logic
• "Load more" reveals next 60; resets to 60 when any filter changes
• Empty state ("No matches.") appears for impossible filter combinations
• Hover a card → gold border + bg lift + gold arrow
• Card click → routes to /career-guides/<code>

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vets-who-code-app	Ready	Preview, Comment	May 17, 2026 11:33pm