Product Academy Tabs Hero — Role Self-Select Variant

What it does

• Role tab row — four to six tabs labeled by role sit across the hero so every visitor sees their identity immediately
• Tab-swap recommended path — clicking a tab swaps the recommended lesson, course, or path inline without a page reload
• Featured first-lesson card — beneath each tab, a single prominent card highlights the recommended first lesson for that role
• Secondary path links — supporting links underneath show two or three more lessons in the recommended path
• Real academy framing — the layout reads as a structured learning experience rather than a generic resource page

Best use cases

• SaaS customer academies — role-based academy hero for admins, end users, developers, and partners
• Memberships with role-based onboarding — hero routing founders, pro members, and beginners differently
• Course platforms with multiple personas — academy hero for students, parents, and instructors
• Agencies with client-portal academies — role-based learning hub for client teams
• Consultants with multi-stakeholder programs — hub for executives, managers, and individual contributors

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for the page background, tab inactive and active states, lesson-card backgrounds, accent color, and supporting text
• Fonts — two roles: a confident display font for the hero headline and tab labels, and a clean body font for lesson titles and short descriptions
• Copy — hero headline, role labels per tab, recommended lesson titles per role, short descriptions, and CTA labels
• Images — thumbnail per recommended lesson and optional role icon per tab
• Behavior — tune the number of tabs (three to seven), the default-active tab, and whether tabs persist across sessions for logged-in users