The official landing page for Payfake — a self-hostable, Paystack-compatible payment simulator for African developers.
This is the marketing landing page for Payfake, built with:
- Next.js 15 (App Router)
- Tailwind CSS (Black/white theme)
- Framer Motion (Heavy animations)
- TypeScript
- Animated Hero — Floating cards, magnetic buttons, parallax scrolling
- Features Grid — 9 feature cards with hover animations
- Code Demo — Syntax-highlighted code examples in multiple languages
- Magnetic CTA — Interactive buttons with spring physics
- Responsive — Mobile-first design with hamburger menu
- Loader — Spinning zoom animation on page load
- Scroll Progress — Thin progress bar at top
- SEO Ready — OG images, sitemap, robots.txt
- Node.js 18+
- bun or npm
git clone https://github.com/payfake/payfake-landing.git
cd payfake-landing
npm install
npm run devVisit http://localhost:3000
payfake-landing/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ ├── globals.css
│ ├── opengraph-image.tsx
│ ├── sitemap.ts
│ └── robots.ts
├── components/
│ ├── hero/
│ ├── features/
│ ├── code-demo/
│ ├── cta/
│ ├── footer/
│ ├── header/
│ ├── loader/
│ ├── scroll-progress/
│ └── ui/
├── hooks/
│ └── use-smooth-scroll.ts
└── public/
└── logo.JPG
Deployed on Vercel at payfake.co
vercel --prodMIT © Payfake