# Mentor Tabs

> A data-driven mentor profile card: flanking Students and Hourly Rate stat badges frame an overlapping avatar, a verified name sits above a centered social row, and a keyboard-navigable About / Skills / Reviews tab strip swaps panels behind a sliding accent indicator.

- Category: Profile
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: card, tabs
- Page: https://builder.atheros.ai/components/mentor-tabs
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_mentor_tabs/preview-0cbb9a5aba4e.webp

## Features

- Flanking stat badges (Students with a school glyph, Hourly Rate with a coin glyph) whose numbers count up when the card scrolls into view
- Figtree avatar that overlaps upward between the two stat badges, with an initials fallback on image error
- Verified name row (blue verified rosette) above a muted role line
- Centered six-icon social row (GitHub, LinkedIn, X, Instagram, YouTube, Website) with lilac hover
- Keyboard-navigable About / Skills / Reviews tab strip with roving tabindex, `aria-selected`, and a `:has()`-driven sliding lavender indicator
- Panel content rendered from `js/data.js` — intro copy, help/skill link lists, and student review cards with avatars
- Skeleton silhouette with a shimmer sweep shown during the async data fetch
- Full-width Book Mentoring call to action with a springy press
- Dark-mode ready via `body.dark` tokens — no built-in toggle; the host shell (or a manual `dark` class on body) drives theming

## Accessibility

- **ARIA labels** — All social links and the CTA carry `aria-label` or visible text
- **Tabs** — `role="tablist"` / `role="tab"` / `role="tabpanel"` with `aria-selected`, `aria-controls`, roving tabindex
- **Keyboard nav** — Arrow keys, Home, End move between tabs; Enter/Space activate
- **Avatar fallback** — Broken photos swap to an initials tile
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `ArrowLeft / ArrowRight` — Move to the previous / next tab
- `Home / End` — Jump to the first / last tab
- `Enter / Space` — Activate the focused tab

## Common questions

**Which frameworks is Mentor Tabs available in?**

Mentor Tabs ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Mentor Tabs profile component free?**

Mentor Tabs is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Mentor Tabs support dark mode?**

Yes. Mentor Tabs ships light and dark themes, both drawn from the Sunset Coast design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Mentor Tabs live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/mentor-tabs

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt