landing-page

Imported from Project-X-Vietnam/landing-page (AGENTS.md). Install upstream with npx skills add Project-X-Vietnam/landing-page. Copyright stays with the author.

AGENTS.md — landing-page

What this is

The public face of Project X Vietnam (PJX) — a Vietnamese non-profit building a tech talent pipeline for students. Everything here is seen by people outside the organization: prospective fellows, mentors, corporate partners, press.

Its job is to communicate and convert: explain what PJX is, showcase programs, mentors, partners and team, and move applicants through the Summer Fellowship Program (SFP) funnel.

Deployed on Vercel at projectxvietnam.org. No database — every write goes out to an external webhook.

The internal team platform is a separate repo, Project-X-Vietnam/internal. If a feature is only for PJX members, it does not belong here.

Commands

pnpm dev      # dev server on :3000 (.claude/launch.json runs it on :3001)
pnpm build    # production build
pnpm start    # serve production build
pnpm lint     # ESLint

npm works too; the repo has both package-lock.json and pnpm-lock.yaml.

pnpm build does not catch type or lint errors. next.config.ts sets typescript.ignoreBuildErrors and eslint.ignoreDuringBuilds to true, so a broken build ships green. There is no typecheck script. Before you call work done, run type checking yourself:

npx tsc --noEmit

Stack

@google/generative-ai is in package.json but imported nowhere — dead dependency, don't build on it without asking.

Route map

Two routes are unreachable in production. next.config.ts redirects /sfp → /sfp2026 and /recruitment2026 → an external Google Form. So app/sfp/page.tsx (1127 lines) and app/recruitment2026/page.tsx (783 lines) are dead code that still compiles. Don't spend effort on them, and don't cite them as patterns — but check next.config.ts before assuming, since redirects get toggled around campaign deadlines.

API routes

Applications land in Google Sheets via Apps Script, not in a database. The Lark routes are the older path, still wired to lib/form-submission.ts and app/utils/lark.ts but only reached from the redirected /recruitment2026. Prefer the Apps Script pattern for new forms.

Directory structure

app/                      Routes (see map above)
├── layout.tsx            Metadata, Inter Tight font, GA, Sonner Toaster
├── globals.css           CSS vars, @font-face, keyframe animations
├── api/                  Route handlers — all proxy to external webhooks
└── utils/lark.ts         Lark helpers (legacy path)

components/
├── ui/                   49 shadcn primitives  ← use these
├── cv-builder/           CV Builder feature
│   ├── Screen1..4*.tsx   Step screens
│   ├── imports/          Figma-exported code, do not hand-edit
│   └── ui/               ⚠ 48-file duplicate primitive set, see below
├── SiteNav.tsx           Nav for /about /mentors /team /partners
├── Navbar.tsx            Nav for /sfp /sfp2026
├── SiteFooter.tsx        Shared footer
└── Reveal, PageTransition, AnimatedCounter, CursorGlow, Eyebrow …

lib/
├── utils.ts              cn() — clsx + tailwind-merge
├── analytics/            ga4-server, sfp2026, case-trainer event helpers
├── cv-builder/           Role data, CV templates, prompts, PostHog funnels
├── form-submission.ts    Legacy Lark submission
└── lark/auth.ts          Lark tenant token

scripts/cv-builder/       One-off generators (Node + Python), not part of build
docs/                     Feature and technical notes

Two things that will trip you up

1. components/cv-builder/ui/ is a second copy of components/ui/ — 48 files against 49, same names, different contents. The CV Builder was imported from a separate Figma-based project. Fix a bug in one and the other keeps it. When editing, confirm which set the file you're touching actually imports.
2. Form.tsx, Hero.tsx, and Header.tsx have zero importers. Earlier versions of this file listed them as key components; they are leftovers. Use SiteNav/Navbar and the per-route form implementations instead.

Component conventions

Reach for components in this order:

1. components/ui/ primitives — Button, Card, Input, Dialog, Select, …
2. Shared components in components/ — SiteNav, SiteFooter, Reveal
3. Native HTML — only when nothing above fits

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import SiteNav from "@/components/SiteNav";

• Tailwind utilities only; no inline styles.
• Conditional classes go through cn().
• Brand colors via CSS variables: hsl(var(--pxv-blue)), or the pxv-* Tailwind scale.
• Framer Motion for scroll/viewport animation; Tailwind keyframes (animate-fade-in-up, animate-float, animate-gradient-x) for simple effects.
• Page files are long by convention — 500–1700 lines with inline section components. Match that, or extract deliberately; don't half-refactor a page you're only touching for one fix.

Design system

Canonical reference: PJX_UI_STYLE_GUIDE.md (1063 lines). SFP-specific overrides: SFP2026_UI_STYLE_GUIDE.md. The internal repo carries the same style guide as DESIGN_SYSTEM.md — keep them in sync when brand tokens change.

Brand colors

Semantic tokens (background, card, muted, border, ring, chart-1..5) are defined as HSL CSS variables in app/globals.css and mapped in tailwind.config.ts.

Typography

• Body: SF Pro Display, self-hosted via @font-face from public/fonts/
• Headings: Plus Jakarta Sans, self-hosted from public/fonts/PlusJakartaSans/
• Fallback: Inter Tight, loaded through next/font/google as --font-inter-tight with the vietnamese subset — this is what actually renders for most non-Apple users, so check your work on non-Apple hardware
• Weights 300–800

Analytics

Three systems, deliberately scoped:

• GA4 (@next/third-parties/google) — site-wide, mounted in app/layout.tsx. Server-side events via lib/analytics/ga4-server.ts and GA4_API_SECRET.
• PostHog — CV Builder only. Funnel logic in lib/cv-builder/utils/posthogFunnel.ts; see docs/posthog-funnel-tracking.md.
• Vercel Analytics — installed via @vercel/analytics.

next.config.ts maps VITE_POSTHOG_* → NEXT_PUBLIC_POSTHOG_* for backward compatibility with an older Vite project.

Environment variables

.env.local is gitignored and holds real values. If you add a variable, add it to .env.example in the same change.

Reference examples

Guardrails

• Everything here is public. Program dates, deadlines, cohort sizes, mentor names, partner logos and company names are real external commitments. Never invent, estimate, or "round" them — copy from source or ask. A wrong deadline on this site is a real-world problem.
• Deadlines change often. Countdown targets and timeline dates are edited under time pressure near campaign dates (see the feat/extend-* branches). Treat them as data, not as code to refactor.
• Don't remove or rename analytics event names — funnels depend on the exact strings.
• Don't hand-edit components/cv-builder/imports/ — it is Figma-generated.
• Don't touch next.config.ts redirects without confirming; they gate live campaign traffic.

Other agent files in this repo

CLAUDE.md is an alias of this file. .agent/, .claude/skills/, .agents/skills/ and .cursor/rules/ contain a generic third-party starter kit with overlapping duplicate copies — not PJX policy. Where they conflict with this file, this file wins.