project

documentation

NANA — Agency Website Template

Overview

NANA is a premium, production-ready website template built for creative agencies, studios, and freelancers who want to make a strong first impression online. It ships with a polished dark theme, fluid GSAP animations, and parallax scroll effects — all designed to showcase your work with confidence.

Whether you're building a portfolio, launching an agency site, or selling a digital product, NANA gives you a head start without sacrificing flexibility. Everything is cleanly structured, fully typed, and easy to customize — no fighting the code, just building.

Features

• 20+ Pages — Home, About, Services, Portfolio, Blog, Contact, and more
• 40+ Sections — Ready-to-use content blocks covering every common agency layout
• 20+ Styles & Symbols — A consistent design system with reusable UI elements
• Responsive Design — Pixel-perfect layouts across all screen sizes and devices
• GSAP Animations & Parallax Scroll — Smooth, high-performance motion effects throughout
• Category Filtering with Pagination — Interactive portfolio/blog filtering out of the box
• Mobile Navbar with Drawer — Fully accessible slide-out navigation for small screens
• Video Player — Integrated video playback component, ready to use
• i18n Support — Multi-language ready via i18next and react-i18next
• Next.js App Router — Built on the latest Next.js architecture
• Tailwind CSS + SCSS — Utility classes paired with a structured SCSS theming system
• TypeScript — Fully typed throughout for a safer developer experience

Demo

Live demo: nana.newproweb.pro

Tech Stack

Getting Started

Make sure you have Node.js 18+ and npm installed before you begin.

1. Clone the repository

git clone https://github.com/newproweb/NANA.git
cd NANA

2. Install dependencies

npm install

3. Start the development server

npm run dev

Open http://localhost:3000 in your browser to see the result.

4. Build for production

npm run build
npm run start

Project Structure

NANA/
├── app/                          # Next.js App Router — pages, layouts, routes
├── lib/
│   ├── components/
│   │   ├── blocks/               # Full-page sections (hero/, cta/, services/, footer/, etc.)
│   │   ├── elements/             # Reusable UI pieces (cards/, blog/, works/, etc.)
│   │   └── global/               # App-wide components (navbar/)
│   └── i18n/                     # i18n config, server helper, and React provider
├── public/
│   ├── images/                   # Static images, organized by section (hero/, about/, services/, etc.)
│   └── videos/                   # Video assets used in the hero video player
├── styles/                       # SCSS theming system
│   ├── styles.scss               # Main entry point — imports all modules
│   ├── colors/colors.scss        # Color variables ($white, $black, $blue, $green, gradients)
│   ├── typography/typography.scss # Heading & paragraph scale
│   ├── layout/layout.scss        # Container classes
│   ├── buttons/                  # Button styles & mixins
│   └── mixins/responsive.scss    # Breakpoint map & responsive mixin
├── translations/
│   └── en.json                   # Default English translation file
└── tailwind.config.js            # Tailwind configuration

blocks/ — Large, standalone page sections you drop into a page. Each block is self-contained and maps to one visual area of the layout (e.g. hero/hero1/, cta/cta2/).

elements/ — Small, composable UI components (cards, blog teasers, work tiles) shared across blocks and pages.

global/ — App-wide components such as the responsive navbar with mobile drawer.

Customization

Change text content

All visible text is managed through i18n translation files. Open translations/en.json and update any value — the changes reflect immediately in development. To add a new language, duplicate en.json, rename it (e.g. fr.json), translate the values, and register the new locale in lib/i18n/config.ts.

Swap images

Replace any file inside /public/images/ with your own asset. Images are organized into subfolders by section (hero/, about/, services/, etc.), so it's easy to find the right one. Keep the same filename to avoid touching the component, or update the src path inside the relevant block component.

Support

Have a question or run into an issue? Reach out through any of the channels below:

• Email: contact@newproweb.com

Response times are typically within 24–48 hours on business days.

License

This template is licensed for use under the terms included with your purchase. Built with care for agencies who care about quality.