Skip to content
Prosper Design System

Landing Overview

App path: apps/landing/ Router: React Router v7 (browser router) Animations: motion/react

Page Map

RouteComponentFile
/LandingPagelanding-page.tsx
/opportunitiesOpportunityBoardjob-board.tsx
/opportunities/:idJobDetailV2job-detail-v2.tsx
/opportunities/:id/applyApplicationFormApplicationForm.tsx
/contactContactPagecontact-page.tsx

Layout Components

HeroNav

File: hero-nav.tsx

The main navigation bar present on all landing pages. Contains:

  • Logo (links to /)
  • “Solutions” link (anchor to /#what-we-do)
  • “Explore Jobs” link (to /opportunities)
  • “Contact” button (desktop only)
  • Hamburger menu (mobile only, opens MobileNavModal)

Active link styling: nav-link active class applied when route matches.

Closes mobile menu automatically on route change via useEffect.

MobileNavModal

File: mobile-nav-modal.tsx

A fullscreen mobile navigation overlay. Portals to <body> to avoid clipping. Includes all navigation links and a close button.

File: page-header.tsx

Combines ShaderGradientBackground + HeroNav + decorative vertical border lines. Used on the job board and contact pages as a compact header.

File: footer.tsx

Site-wide footer with four columns:

  1. Brand — Logo, tagline, LinkedIn link
  2. Services — Contract Staffing, Direct Hire, Contract-to-Hire, Workforce Planning
  3. Company — About, Contact, Careers
  4. Legal — Privacy Policy, Terms of Service

Uses StaggerContainer / StaggerItem for scroll-triggered animation.

LandingPage (Home)

File: landing-page.tsx

The home page is a long-scroll marketing page with these sections:

  1. Hero — Full-bleed ShaderGradientBackground with animated heading, subtitle, and CTA buttons
  2. Logo Wall — Imported from Frame15 (Figma-generated component)
  3. Stats Section — Three animated counters (“20+ Years”, “2 Industries”, “3 Engagement Models”)
  4. What We Do — Three feature cards with icons
  5. CTA Banner — Call to action to explore jobs

Animation components used: ScrollReveal, StaggerContainer, StaggerItem, AnimatedCounter, HoverLift, LineReveal.

Shared UI Used

ComponentSource
ShaderGradientBackground./shader-gradient-background (local)
ScrollReveal, StaggerContainer, etc../motion (local)
Lucide iconsArrowRight, ChevronRight