Helelai
What’s next
All work

02 One-page site · academy + promo reel

Star Athletic

A kids' soccer academy site with no backend to pay for — WhatsApp is the contact form — plus a vertical promo reel cut from the client's own raw footage.

Next.jsLocalVideoSEO
View live site All the work
Role
Design, build and deploy — plus video production from raw footage
Star Athletic home page: a video hero of kids mid-match behind the academy wordmark, WhatsApp enrollment buttons, and stat tiles for students trained, locations, years and coaches.

AThe problem

A kids' soccer academy in Cali, Colombia needed its own web presence — programs, two locations, methodology — to bring in enrollments. The requirements were strict in a useful way: informational, mobile-first, no backend and no server bills, contact straight through WhatsApp, and content a non-technical staff member can update.

BWhat we built

A one-page Next.js 14 site, mobile-first, with every piece of content — texts, locations, programs, testimonials, FAQ — centralized in a single config file so the client edits without touching components. Contact needs no server: every form and button opens WhatsApp with a pre-filled message. On top of the site, a vertical promo reel produced with FFmpeg from the client’s raw drone and camera footage.

CSignature pieces

The parts worth looking at.

  1. 01

    WhatsApp is the backend

    Every contact point — forms, buttons, the floating bubble — opens WhatsApp with a pre-filled message. Enrollment leads land where the academy already answers, and there is no server, no form service and no monthly bill behind any of it.

  2. 02

    One file runs the whole site

    Texts, both locations, programs by age, testimonials and the FAQ live in a single site-config file. Staff edit content without ever seeing a component — the same admin-safe conviction the rest of this portfolio is built on.

  3. 03

    A promo reel cut from raw footage, with FFmpeg

    A ~22-second vertical reel (720×1280) produced from the client’s drone and camera material: 16:9 reframed to 9:16 with a blurred-fill background, slow motion from 120 fps clips, 4K drone rotation metadata handled, audio normalized to −16 LUFS, a closing card with logo and Instagram, and web-ready H.264 with faststart. Shots were picked frame by frame from FFmpeg contact sheets.

  4. 04

    Video without the weight

    The hero video ships with preload="none" and a poster so it never blocks the page, and the site’s background video was cut from ~27.9 MB to ~9.4 MB without visible loss. Scroll animations are a hand-written IntersectionObserver — no animation library.

DDelivered

  • One-page responsive site: hero with background video, about, programs by age, two locations with embedded Google Maps and schedules, gallery, testimonials, FAQ and contact
  • Backend-free WhatsApp contact system with pre-filled messages and a floating button
  • Gallery with six real photos and three vertical (9:16) video players
  • A ~22 s vertical promo reel (~9.2 MB) plus its poster image, produced from raw client footage
  • Single-file content architecture (site-config) editable by non-technical staff
  • Brand theming via CSS variables (blue + orange), favicon, and local SEO: metadata, Open Graph, JSON-LD SportsActivityLocation
  • Production deploy on Vercel, versioned on GitHub, CI config ready

EOutcome

In production and public, with the academy’s real content, photos and video, and WhatsApp as the direct enrollment channel — at zero backend cost. The client can update the site themselves and now owns audiovisual material ready for social media.

FStack

  • Next.js 14 (App Router)
  • React 18
  • TypeScript
  • Tailwind CSS
  • lucide-react
  • IntersectionObserver
  • JSON-LD / Open Graph
  • FFmpeg
  • WhatsApp deep links
  • Git / GitHub
  • Vercel
Back to the work What happens next