Finch Startup Website

• 

• 

Inspiration

We chose Finch for the AggieX Startup Challenge because the problem is easy to feel: students are told to apply more, but high volume often means low signal and burnout. The brief framed a clear story—intentional applications over mass applying—and a product that turns long ATS sessions into something closer to under a minute per application. That mix of real pain, playful brand, and concrete workflow (LinkedIn → extension → tailored materials → autofill) was a strong fit for a design-first site.

What it does

The site is a static React marketing experience: Home, About, and Product pages with Finch’s mission, team, FAQ, waitlist and contact sections, light/dark mode, and scroll-driven motion (including a paper plane section tied to scroll). There is a demo-only /admin editor so owners can tweak headline copy, image URLs, and a few section blurbs in the browser; changes persist in localStorage (per device, not a real CMS). The build is Vercel-ready, with routing so deep links like /admin work after deploy.

How we built it

Stack: React 19, Vite, React Router, vanilla CSS with design tokens (colors, spacing, radius) in index.css / App.css.

Motion: GSAP with ScrollTrigger and MotionPathPlugin for section reveals and the plane path along an SVG Bézier curve (smoother than a few discrete waypoints).

Content: A small contentStore module merges defaults with localStorage overrides; AdminPage uses fixed demo credentials and session-only “login” for the demo.

Deploy: vercel.json rewrites all routes to index.html so the SPA handles client routes on refresh.

Challenges we ran into

Scroll animation: Early motion paths felt jerky; fixing it meant a continuous SVG path and a longer scroll range so scrubbing didn’t feel like teleporting.

Layout: A single max-width on the page shell made everything except the full-bleed plane feel narrow; we moved to full-width bands with a constrained inner column.

Pricing UI: A “Most popular” badge overlapped the “One-time bundles” heading; spacing and grid padding fixed the overlap.

Production routing: Vercel returned 404 on /admin until SPA rewrites were added—classic static-host behavior for client-side routes.

“CMS” expectations: Browser storage is great for a demo, but it’s not shared across users or devices—worth stating clearly for judges

Accomplishments that we're proud of

A cohesive Finch look (navy → red → orange, Nunito, rounded UI) that matches the playful, approachable brief.

Motion that supports the story (scroll reveals + a memorable plane moment) with prefers-reduced-motion considered.

A credible demo of owner-editable copy without a backend.

README and deploy path so someone else can run and ship it quickly.

What we learned

GSAP + scroll needs tuning (path quality, scrub, pin length) as much as code.

Design tokens upfront saved time when adjusting light/dark and sections.

Static hosting + SPAs always need an explicit fallback to index.html for deep links.

Product copy and layout are tightly coupled—small CSS issues (badges, grids) show up in real screenshots, not only in code review.

What's next for Finch Startup Website

Wire forms to a real endpoint (Formspree, serverless function, or Finch’s backend).

Replace demo auth with real auth + CMS (or a headless CMS) if owners need shared content.

Analytics and lightweight SEO passes (meta, OG images, sitemap).

Tests (e.g. Playwright) on critical paths and deploy previews.

Built With

• cache
• gsap
• localstorage
• react
• router
• scrolltrigger
• vercel
• vite