feat(frontend): implement full UI — landing page, auth flows, dashboard, apply, and tailored application results

[Ngahu]

Summary

This PR delivers the complete frontend implementation for TalentStreamAI, built on Next.js 15, Tailwind CSS, shadcn/ui primitives, Clerk (auth), and TanStack Query (data fetching).

---

What's included

Auth & routing

• Clerk sign-in / sign-up pages using the correct catch-all folder structure ([[...sign-in]], [[...sign-up]])
• Middleware using createRouteMatcher + auth.protect() to guard all authenticated routes (/dashboard, /apply, /applications, /resume, /onboarding)
• Signed-in users are automatically redirected away from auth pages

Shared app shell

• (app) route group wrapping all authenticated pages with a shared AppShell navbar
• Sticky top nav with active-link highlighting and a responsive mobile bottom nav
• Clerk <UserButton /> for sign-out

Landing page (full redesign)

• Sticky header with blur backdrop, auth-aware nav buttons
• Hero with bold headline, score preview widget (45% → 78%), and dual CTAs
• Stats bar (users, resumes generated, applications tracked)
• "How It Works" section (3 steps) with an inline HTML/CSS app mockup
• Problem vs Solution two-column layout ("Why You're Not Getting Interviews" / "Fix That in Seconds")
• Testimonials (3 quote cards)
• Final CTA section
• Footer with nav links

Onboarding

• /onboarding page for first-time users to upload their base resume (PDF/DOCX/TXT)
• Redirects to /apply on completion; "Skip for now" sends to dashboard

Dashboard

• Stat cards: total applications, interviews, average match score, resumes generated
• Recent applications list with match badge and status badge
• Loading skeletons throughout

Apply page (tailored application)

• Resume selector (pick base resume)
• Job input via tabs: paste description or enter a URL
• Generates: tailored resume, cover letter, draft outreach email, match score, gap analysis
• Results in a two-column layout:
  • Left — Tailored Resume, Cover Letter, Draft Email — each with Copy + Download + "Open in mail" (email)
  • Right — Job Match Analysis panel (sticky): original/tailored/improvement scores with progress bars, what we improved, strengths, remaining deficits, matched keywords, missing keywords, suggestions

Applications & Resumes

• Applications list with match + status badges
• Application detail with working tabs: Job Description / Tailored Resume / Cover Letter / Gap Analysis
• Resumes list (base + tailored variants)
• Resume detail with download button

Data & API layer

• lib/types.ts — shared TypeScript types (Application, Resume, TailorResponse, MatchAnalysis, DraftEmail, etc.)
• lib/api.ts — apiFetch<T>() helper attaching Clerk JWT to every request, typed ApiError
• lib/mock-data.ts — full mock API with realistic data, gated by NEXT_PUBLIC_USE_MOCKS
• lib/hooks/use-api.ts — TanStack Query hooks for all data reads and mutations; automatically switches from mocks to real API when NEXT_PUBLIC_USE_MOCKS=false
• components/providers.tsx — QueryClientProvider wrapper

UI primitives (shadcn/ui)

Added: Button, Card, Input, Textarea, Label, Badge, Tabs, Skeleton, Separator
Added domain components: MatchBadge (score → green/amber/red), StatusBadge (application status)

---

How to run locally

cp .env.example .env   # add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + CLERK_SECRET_KEY
cd frontend && npm install
npm run dev

[ugomichael33]

I think the real API paths here don’t match the backend currently merged on main, so these requests might 404 as soon as mocks are disabled. Please could you align this layer to the existing backend contract before merging.

[ugomichael33]

also here, the screen expects resume fields that the current backend detail endpoint does not return. pls can we map this page to the actual response shape?

[ugomichael33]

@Ngahu @iamwales looks like this PR adds Clerk middleware-based route protection, but the frontend production build is configured as a static export. please let's confirm that these choices are compatible in the intended deployment setup.

[ugomichael33]

since @iamwales changes addresses some of the concerns here, lgtm