[UI/UX] - Implement onboarding role selection page

[Ayush-Patel-56]

Is your feature request related to a problem?

When new users sign up or log in, they need a clear, intuitive flow to select their primary path (Contributor vs. Maintainer). We currently lack a dedicated, step-by-step onboarding role selection page.

Describe the Solution

Create the first step of the onboarding flow (src/app/onboarding/page.tsx) according to the provided design:

1. Header:
   • MergeShip logo on the left.
   • "Already have an account? Sign in" (in green) on the right.
   • A thin divider below the header with "STEP 1 OF 3" aligned to the right.
2. Central Intro:
   • Muted border badge: "WELCOME TO MERGESHIP"
   • Headline: "How are you joining?"
   • Subheadline: "Pick your path to streamline your open-source journey."
3. Role Cards Grid:
   • Contributor Card (left/first):
     • Preview section containing a terminal/code icon with a FIRST PR tag and a neon green +50 XP badge.
     • Sub-label: "FOR CONTRIBUTORS" in neon green.
     • Title: "I want to contribute"
     • Description: "Get a structured path into open source. Find mentored issues, track your impact, and build your profile."
     • Checklist: "Match with mentored issues", "Step-by-step PR guidance", and "Build a verified portfolio" with green checkmarks.
     • Primary button: Solid neon green "Continue as Contributor ->"
   • Maintainer Card (right/second):
     • Preview section containing a layout grid icon with an AI FLAGGED tag and a -74% NOISE badge.
     • Sub-label: "FOR MAINTAINERS" in muted gray.
     • Title: "I maintain a project"
     • Description: "Connect your org and get a smart PR queue. Reduce noise, onboard contributors faster, and ship clean code."
     • Checklist: "Automated PR triaging", "AI-assisted code reviews", and "Contributor analytics" with green checkmarks.
     • Primary button: Outlined "Continue as Maintainer ->"
4. Footer Link:
   • Centered helper text at the bottom: "Not sure? Start as a contributor."

Design/UI Thoughts

• Theme: Dark mode, matching the main landing page with #0D0E12 background and #00FF87 green accents.
• Card Styling: Thin border containers (border-zinc-800) with a subtle gradient/glassmorphism background.
• Responsiveness: Stack cards vertically on mobile, and side-by-side on desktop screens.

Additional Context

Please reference the attached role selection mockup for layout and badge placements.

[PranavAgarkar07]

/claim

I would like to work on this issue under GSSoC 2026.

[riddhimagupta2]

@Ayush-Patel-56 can you please assign this to me ?

[Ayush-Patel-56]

@riddhimagupta2, assigned. Ping me if any help needed. Happy Coding!