HooBank

HooBank is a fully responsive landing page template for a fictional next-generation bank, built on the Next.js App Router and Tailwind CSS v4, and released under the MIT License by Om Patel. It started as a Vite + JavaScript tutorial project and has been rebuilt end to end with Next.js 16, React 19, TypeScript, and Bun, making it a modern reference for fintech marketing sites.

What is HooBank?

HooBank is a static marketing site template that presents banking rewards, security, billing, and card features through animated sections. It takes a typed, data-driven set of sections and outputs a prerendered, responsive landing page with scroll-triggered animations. The page runs on Next.js with the App Router, uses Tailwind CSS v4 for styling, and has a live demo at https://hoobank-alpha-nine.vercel.app/.

Key Features

• Next.js App Router and React 19 — Pages are statically prerendered, and section components are React Server Components, isolating animation to thin client boundaries.
• CSS-first Tailwind v4 theme — Uses @theme tokens, custom gradient utilities, and a typed data layer instead of a traditional Tailwind config file.
• GSAP reveal animations — Scroll- and mount-triggered effects use useGSAP with ScrollTrigger, all driven by a single reusable useReveal hook.
• Responsive breakpoint scale — Custom breakpoints from xs at 480px to xl at 1700px, plus a responsive navbar with an animated mobile sidebar.
• Complete landing sections — Hero, business/features, billing, card deal, testimonials, client logos, CTA, and footer are all included.
• oxlint linting — Replaces ESLint with oxlint, covering correctness, TypeScript, React Hooks, JSX a11y, and Next.js rules.
• Bun toolchain — Requires Bun 1.3 or newer for install, development, production builds, and linting.

Who is it for?

• Frontend developers — Learn how to combine the Next.js App Router, React Server Components, and a single animation layer in one project.
• Freelancers and agencies — Ship a polished fintech marketing page quickly by editing the section components and typed content data.
• Design engineers — Study a Tailwind v4 @theme setup and a custom breakpoint system for responsive landing layouts.

Use cases

• Fintech startups: Deploy a marketing page for a payments or banking product using the provided sections and GSAP scroll effects.
• Developers learning GSAP: Use the useReveal hook and useGSAP integration as a starting point for scroll-triggered animations in React.
• Portfolio projects: Re-theme the Tailwind tokens and swap the typed data layer to demonstrate a modern banking UI.

How do you run it?

Clone the repository, install dependencies with Bun, and start the dev server:

git clone https://github.com/omunite215/Project_Hoobank.git
cd Project_Hoobank
bun install
bun dev

The site runs at http://localhost:3000. Use bun run build for an optimized production build and bun start to serve it.

FAQ

Is HooBank free?

Yes, it is distributed under the MIT License, so you can use, modify, and distribute it for personal or commercial projects.

What is the tech stack?

Next.js 16, React 19, TypeScript, Tailwind CSS v4, GSAP with useGSAP, Bun as the package manager, and oxlint for linting.

What sections are included?

The template includes a responsive navbar with mobile sidebar, hero, business/features, billing, card deal, testimonials, client logos, CTA, and footer sections.

Do I need Node.js installed?

No. The repository specifies Bun 1.3 or newer as the only prerequisite; Bun handles package installation, the dev server, builds, and linting.