Landing page for TalentCamp by Camplight. A single-page marketing site targeting CTOs, VPs of Engineering, and HR leaders at scale-ups and enterprises in the EU/Israel market.
| Layer | Tool |
|---|---|
| Bundler | Vite 5 |
| UI | React 19 |
| Styling | Tailwind CSS 3 |
| Animations | GSAP 3 + ScrollTrigger |
| Icons | Lucide React |
| Utilities | clsx, tailwind-merge |
npm install
npm run dev # localhost:5173
npm run build # dist/
npm run preview # preview built distSections render in this order inside src/App.jsx:
| Component | Section ID | Purpose |
|---|---|---|
Navbar |
— | Fixed pill nav, morphs on scroll via GSAP. Links: Why Us, Vetting, Pricing, Community |
Hero |
— | Full-viewport hero, staggered GSAP fade-up, Unsplash bg |
Features |
#features |
3 value-prop cards with looping React animations |
Philosophy |
#philosophy |
Large serif statement, parallax bg, ScrollTrigger |
BentoGrid |
#support |
5-card bento: 15k+ network stat, Employer of Record, Streamlined Payroll & Compliance, Software/Hardware on Demand, Dedicated Partner Success |
Protocol |
#protocol |
Pinned scroll — 3 stacking cards for the vetting steps |
Economics |
#economics |
Pricing tiers: Direct Hire (9%), B2B Augmentation (flat), Direct Hire+Guarantee (20%) |
Community |
#community |
3 community partner cards: BDA, Techlight, Patio — trust-first talent network |
Footer |
— | Brand, single row of nav links (mirrors navbar), status indicator |
background #1E1230 Midnight Ink — main page bg
background-light #EDE7F6 Soft Lilac — used at low opacity for card surfaces
primary #4B1D8F Royal Purple
primary-gradient #6A2DBE Electric Violet
accent #FF6A4D Coral Glass — CTAs, highlights, active states
font-sans Plus Jakarta Sans, Outfit — headings, UI labels
font-body Inter, Plus Jakarta Sans — body copy, descriptions
font-mono IBM Plex Mono — labels, tags, code-style text
font-serif Playfair Display — large italic drama text (Philosophy section)
Three animated value-prop cards. All animations are pure React useState + setTimeout loops (no GSAP). Static data arrays (VETTING_STEPS, COST_LINES, GUARANTEE_EVENTS) live outside the component for clean useEffect closures.
- VettingPipeline — 4-step vetting process lights up sequentially, loops
- CostBreakdown — 3 cost line bars fill progressively (80% talent / 8% employer / 12% HR+payroll+compliance), loops
- GuaranteeFlow — 4-node timeline animates the replacement guarantee cycle, loops
GSAP pinned scroll section. 3 cards stack on top of each other as the user scrolls. Each card has an ambient SVG animation (rotating geometry, scanning laser, EKG pulse).
5-card bento grid. GSAP stagger fade-up on scroll. Cards: 15k+ network stat (with avatar cluster), Employer of Record (contract card graphic), Streamlined Payroll & Compliance (purple gradient, floating number chips), Software/Hardware & Office on Demand (SVG devices mockup), Dedicated Partner Success (full-width, network SVG graphic).
GSAP pinned scroll section. 3 cards stack on top of each other as the user scrolls. Each card has an ambient SVG animation (rotating geometry, scanning laser, EKG pulse).
Static pricing cards. Middle card (B2B Augmentation) is highlighted. No animations.
3 partner community cards. GSAP stagger fade-up on scroll. Each card shows a logo image + description. Partners: Bulgarian Digital Alliance, Techlight, Patio. Logo assets in src/assets/images/.