https://github.com/devadarshh/n7-fintech-landing
Responsive N7 fintech landing page — Next.js 15, TypeScript, Tailwind CSS v4, and Framer Motion.
https://github.com/devadarshh/n7-fintech-landing
Last synced: 16 days ago
JSON representation
Responsive N7 fintech landing page — Next.js 15, TypeScript, Tailwind CSS v4, and Framer Motion.
- Host: GitHub
- URL: https://github.com/devadarshh/n7-fintech-landing
- Owner: devadarshh
- Created: 2026-05-28T04:47:21.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-28T05:10:36.000Z (about 1 month ago)
- Last Synced: 2026-05-28T06:30:21.442Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://n7-fintech-landing.vercel.app/
- Size: 3.77 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# N7 Fintech Landing Page
A responsive, pixel-focused marketing site for a modern banking platform. Built as a frontend implementation of the N7 fintech design—showcasing layout, motion, and component structure with Next.js and Tailwind CSS.
## Live demo
**[https://n7-fintech-landing.vercel.app/](https://n7-fintech-landing.vercel.app/)**
## Features
- **Responsive layout** — mobile-first sections from hero through footer
- **Design system** — tokens for color, typography, spacing, and glass effects in `globals.css`
- **Scroll animations** — section reveals and transitions with Framer Motion
- **Case studies carousel** — Embla Carousel for insights and stories
- **Composable UI** — reusable buttons, checklists, dashboard and laptop mockups
- **Content-driven sections** — copy and links centralized under `src/data/`
## Page sections
| Section | Description |
|--------|-------------|
| Hero | Headline, CTAs, trusted-by brands, hero visual |
| Solutions | Product overview cards |
| Loan Management | Feature highlight with dashboard mockup |
| Core Banking | Platform capabilities |
| Paperless CTA | Conversion block |
| Digital Banking | Product narrative |
| Insights & Case Studies | Content and carousel |
| Footer | Navigation and links |
## Tech stack
| Layer | Choice |
|-------|--------|
| Framework | [Next.js 15](https://nextjs.org/) (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Animation | Framer Motion |
| Carousel | Embla Carousel React |
| Utilities | `clsx`, `tailwind-merge` |
## Getting started
### Prerequisites
- Node.js 18+
- npm (or pnpm / yarn)
### Install and run
```bash
git clone https://github.com/YOUR_USERNAME/n7-fintech-landing.git
cd n7-fintech-landing
npm install
npm run dev
```
Open [http://localhost:3000](http://localhost:3000).
### Production build
```bash
npm run build
npm start
```
### Lint
```bash
npm run lint
```
## Project structure
```
src/
├── app/ # Root layout, page, global styles
├── components/
│ ├── layout/ # Container and layout primitives
│ ├── sections/ # Page sections (Hero, Solutions, Footer, …)
│ └── ui/ # Buttons, mockups, shared UI
├── data/ # Static content (links, assets, copy)
└── lib/ # Shared utilities
public/
└── images/ # Optimized images and Figma exports
```
## Deployment
1. Push this repository to GitHub.
2. Import the repo at [vercel.com/new](https://vercel.com/new).
3. Use the default **Next.js** preset (no environment variables required).
See [DEPLOY.md](./DEPLOY.md) for step-by-step Git and Vercel commands.
## Design notes
- Hero and section imagery live under `public/images/` and `public/n7/`.
- Dashboard and device frames are built with HTML/CSS for sharp scaling at any viewport.
- Swap assets with Figma exports for closer pixel parity with the source design.
## Author
**Adarsh Singh** ([@devadarshh](https://github.com/devadarshh))
- Email: [imadarshsingh2002@gmail.com](mailto:imadarshsingh2002@gmail.com)
## License
This project was created for a technical assignment. All design rights belong to the original brand; code is provided for portfolio and evaluation purposes.