Build a fully functional, multi-page React application using Tailwind CSS, Lucide React for icons, and Framer Motion for smooth animations.
The Concept:
The app is called "Attainmint". It is a "reverse job board" for elite sales talent. High-performing sales reps share their verified sales numbers anonymously, and companies apply to hire them. Identity is only revealed after a mutual NDA is signed.
Global Design & Theme:
- Typography: Use 'Inter' or a similar clean, modern sans-serif font.
- Color Palette: Professional and high-trust. Use Zinc/Slate for darks (text, backgrounds, buttons) and Emerald/Teal for accents (success, money, verification badges).
- Vibe: Premium, exclusive, fast, and modern. Use subtle borders, soft shadows, and glassmorphism effects on the navigation bar.
- Navigation: A sticky top navbar with the logo (Target icon + "Attainmint") on the left. On the right, links to "For Companies" and "For Reps".
Please build the following 3 main views (use React Router or state-based conditional rendering to navigate between them):
1. Landing Page
-
Hero Section: A bold, centered headline: "Great sales reps aren't looking. But they are listening." Subtext explaining that top performers ignore recruiter spam, but will listen to the right offer based on their verified numbers. Include two primary CTA buttons: "Hire Elite Talent" (dark button) and "I'm a Top Performer" (outline button).
-
How It Works (3 Columns):
- Verify Anonymously: Reps submit W2s/commission statements. AI scrubs PII.
- Companies Apply: Hiring managers browse verified stats and send interest requests with comp ranges.
- You Choose: Reps review offers and trigger a mutual NDA before revealing identity.
-
Social Proof/Stats Banner: A dark section highlighting impressive dummy stats (e.g., "142% Avg Quota Attainment", "120k Avg Deal Size").
2. Company Dashboard (Talent Database)
- Header: Title "Talent Database" with a search bar (search verticals/skills) and a "Filter" button.
- Talent Grid: A grid of cards displaying anonymous sales reps.
- Card Data (Use rich dummy data):
- Title (e.g., "Enterprise Account Executive")
- "Verified" badge with a checkmark icon.
- Vertical (e.g., SaaS, Cybersecurity, Fintech)
- Location (e.g., San Francisco, Remote)
- Total ARR Closed (e.g., "$4.2M")
- Avg Attainment (e.g., "145%")
- Avg Deal Size (e.g., "$150k")
- Attainment History (A mini visual showing the last 3 years of quota attainment percentages).
- Tags (e.g., "Fortune 500", "0 to 1").
- Action: A "Send Interest" button at the bottom of each card.
- Interaction: Clicking "Send Interest" opens a Modal. The modal should have form fields for: Role Title, Base Salary, OTE, and a text area for "Message / Role Brief". Include "Cancel" and "Send Request" buttons.
3. Rep Dashboard (Incoming Opportunities)