Ballers — Marketing Website

Pre-launch marketing website for Ballers, a racket sports matchmaking app.

Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Hosting: Vercel
• Email: Loops (API integration)
• Analytics: Plausible (cookieless, GDPR-compliant)

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SITE_URL=https://ballers.app
LOOPS_API_KEY=your_loops_api_key
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=ballers.app

Project Structure

app/
  layout.tsx          — Root layout (fonts, metadata, JSON-LD)
  page.tsx            — Landing page (Phase 1)
  privacy/page.tsx    — Privacy policy
  terms/page.tsx      — Terms of service
  sitemap.ts          — Auto-generated sitemap
  api/signup/route.ts — Email signup API proxy

components/
  Header.tsx          — Sticky header with CTA
  Footer.tsx          — Site footer
  EmailSignupForm.tsx — Reusable signup form with success/error states
  DeviceMockup.tsx    — iPhone mockup with placeholder screens
  SportsStrip.tsx     — Supported sports section
  AppPreview.tsx      — 3-device preview section with carousel
  StatsCounter.tsx    — Animated signup counter
  AnimatedSection.tsx — Scroll-triggered fade-in wrapper
  ExitIntentModal.tsx — Desktop exit-intent email capture

lib/
  utils.ts            — UTM parsing, class helpers
  analytics.ts        — Plausible event tracking

Deployment

Push to GitHub and connect to Vercel. The site deploys automatically on push to main.