Zentry — Fintech SaaS Landing
Zentry is a personal exploration project where I implemented a premium fintech SaaS landing page. The goal was to push my frontend skills further — specifically around scroll-driven animations, component architecture, and motion design at the Framer Motion level, but using pure CSS, GSAP, and Astro's island architecture.
Every animated element is viewport-triggered — nothing plays on load. The result is a fluid, cinematic feel that rewards users who actually read the page. Check the demo and scroll slowly — the details are worth it.
| Type | Personal Project / Exploration |
|---|---|
| Year | 2025 |
| Stack | Astro 6, React 19, GSAP 3, Lenis, TailwindCSS 4 |
| Design Concept | Fintech Marketing Interface |
What I Built
The site covers a full marketing funnel — hero, features, platform & intelligence sections, integrations, pricing, FAQ, testimonials, blog, and auth pages. Each section has its own animation layer using GSAP ScrollTrigger, coordinated so nothing overlaps or fights for attention.
The hero section uses a GSAP timeline with blur + translate entrance — a technique to make text feel like it's resolving into focus rather than just fading in. The animated card components in the hero, platform, and intelligence sections are pure CSS + JS, no library-specific animation primitives.
Technical Highlights
-
Observer-first animation system —
every element starts invisible; all animations fire via IntersectionObserver or ScrollTrigger, never on
page load. Prevents the GSAP flash problem by pre-hiding elements via CSS in
<head>before JS runs. -
Astro island architecture —
interactive components (FAQ accordion, pricing toggle, integrations filter, blog) rendered as React
islands with
client:load. Static sections stay zero-JS for maximum performance. - Lenis smooth scroll — integrated globally for silky momentum scrolling. ScrollTrigger is configured to work alongside Lenis without conflicts using the RAF integration pattern.
-
Content collections — FAQ entries
managed as Markdown content collections with Zod schema validation and dynamic category routing (
/faq/[category]). - Animated card components — the hero profile card, platform cards, intelligence cards, and spending summary are custom Astro components with CSS keyframe animations and JS-driven floating effects.
-
TailwindCSS v4 — first project using
Tailwind v4's new Vite plugin approach, CSS-first config, and the new
@utilitydirective.
Pages Built
- Homepage — hero, features, platform, intelligence, features grid, testimonials
- Features — expanded feature breakdown with animated section reveals
- Pricing — plan comparison table with accordion for mobile
- Integrations — filterable integration cards with detail pages
- FAQ — category-based routing with accordion UI
- Blog — listing and individual post pages via content collections
- About, Contact, Solutions, Changelog
- Sign In, Sign Up, Forgot Password, Reset Password
What I Learned
Building this project sharpened my mental model of when to reach for CSS transitions versus GSAP timelines. The rule became clear: CSS handles simple in/out, GSAP takes over when sequencing, staggering, or spring physics enter the picture. The hardest part was making ScrollTrigger and Lenis play well together — getting the RAF loop synchronized took more research than expected.
Astro 6's content collections with strict Zod schemas also proved far more ergonomic than I anticipated for managing structured content. The zero-JS default meant I had to think carefully about what actually needed interactivity — good constraint.