[adityapat24]

Adds the SM (<640px) Meet the Team section as a department switcher

🎫 Issue #580.

🎨 Figma Link:

SM Directors open 5681:1281, Tech open 5685:18775

▶ Changelist:

• mobile/MobileTeam.tsx (new): the two SM frames are two states of one accordion (this answers the ticket's step 1, "what do the two frames represent"). Departments are listed in Figma's order (Directors, Tech, Design, Marketing, Sponsorship, Operations). Directors starts open. One department is open at a time, and clicking the open one closes it.
• Members: the open department's members sit in a row with scroll-snap that swipes natively, so vertical page scroll is untouched. Arrows (CarouselArrow + useHorizontalGallery) appear only when the row overflows.
• Frames: each department keeps its LG/MD frame (departmentFrames in team.ts). Widths come from FRAME_WIDTH, scaled so every frame is 160 tall as in Figma; rect frames get an explicit aspect so they stay portrait.
• scenes/team/TeamScene.tsx: exports FRAME_WIDTH (no other change), so SM and LG/MD share one table.
• public/team/sm/chevron.svg, linkedin.svg (new): Figma's chevron and LinkedIn glyph. Nothing matching existed in public/.
• Floor: the existing flattened team/sm/floor.svg (baseboard + floor + bench). Below 402px it scales down. Above 402px, the baseboard and floor colors carry on to the edges so the bench isn't repeated.
• page.tsx: renders <MobileTeam /> in the SM tree, after MobileValues.

📝 Notes + 🚧 TODO:

• Arrows aren't in the SM frames, but the acceptance criteria require arrows. They appear only when a department overflows, so Directors (2 people) matches Figma exactly.
• LinkedIn icon: it renders only when a member has a linkedinUrl. None do yet (TODO in team.ts), so no icons show today.
• No id="team" on the section: same as MobileHero. The LG/MD SceneFrame owns that anchor and both trees are in the DOM. SM anchors are part of MS-502.
• No /dev/mobile?section=team: I left it out to avoid colliding with whichever SM ticket creates that page. The section shows on / below 640px.
• Medallion (Design dept): it keeps its LG proportions, so it's a little taller than 160 (~175). The SM frames only show the gold and copper variants.
• Possible merge conflict: page.tsx will conflict trivially with MS-405, which adds Speakers/Testimonials to the same list.

🧪 Testing:

• npx tsc --noEmit -p apps/main passes. The pre-commit hook passed: yarn build, yarn format and yarn lint, with no new warnings.
• Rendering: headless Chrome at 402 and 320px, compared against both frames. Directors-open and Tech-open line up with Figma to within ~1px: header rows at 141/188, frames 160 tall, labels at 363/410.
• Interactions, driven over the Chrome DevTools protocol:
  • The department buttons toggle with correct aria-expanded/aria-controls.
  • Tech (7 members) has a 1286px row in a 402px viewport. Previous starts disabled; Next pages 0 → 364 → … → 884 (the end), where Next disables.
  • There's no duplicate #team id.
• Not tested: a real touch device. The swipe is native horizontal overflow, not a JS handler.

🎥 Screenshots & Screencasts:

• 402px screenshots (Directors open, Tech open) next to the Figma frames still need adding by hand; I couldn't attach them from the CLI.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
application-portal	Ready	Preview	Nov 3, 2026 8:50pm UTC
core-live	Ready	Preview	Nov 3, 2026 8:50pm UTC
core-main	Ready	Preview	Nov 3, 2026 8:50pm UTC