N Group (NGROUP)

Overview

N Group is a modern marketing site template for digital agencies, startups, and IT companies, built with Next.js. It ships with three interchangeable home layouts, reusable section components, and SEO-friendly metadata (Open Graph, Twitter cards, canonical URLs, favicons, and web manifest).

The default home experience (/) combines hero messaging, about, why-choose-us, services, portfolio work, testimonials, and a call-to-action. Alternate demos live at /home-b/ and /home-c/, each with its own hero and section variants. An internal Styleguide (/styleguide/) documents colors, typography, labels, and buttons.

Site-wide copy is driven by i18next (translations/en.json), with a shared header, footer, and mobile navigation pattern across all routes.

Features

• App Router pages — Home A (/), Home B (/home-b/), Home C (/home-c/), and an internal Styleguide (/styleguide/)
• Three home layouts — Compose different hero, services, work, and CTA blocks per route without duplicating chrome
• Modular sections — Composable blocks under app/components/ (hero, about, why-choose-us, services, our-services, work, testimonials, logos, CTA, and more)
• Responsive chrome — Shared header and footer; animated mobile navigation for smaller viewports
• Internationalization — i18next + react-i18next with JSON translations and TranslationProvider in the root layout
• Rich UI primitives — Carousel (Embla), date picking (react-day-picker), icons (Lucide), Base UI–aligned building blocks, and shared AppButton
• Design system — Tailwind CSS 4 utilities plus SCSS modules for colors, typography, buttons, containers, and animations (styles/)
• SEO & metadata — Centralized config in lib/site.config.ts (title, description, keywords, OG/Twitter images, theme color, favicons)
• TypeScript — Typed components and data modules throughout the app directory
• Production-ready config — output: "standalone" and trailing slashes enabled in next.config.ts

Note: Header navigation includes links for About, Services, Blog, and Contact. Those routes are prepared in Header.utils.ts and can be added as you extend the template.

Demo

Live site (canonical in app metadata): ngroup.newproweb.pro

Tech stack

Quick installation guide

Requires Node.js 18+ and npm (or a compatible package manager).

1. Clone the repository

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

2. Install dependencies

npm install

3. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

4. Environment (optional)

For production metadata and canonical URLs, set:

NEXT_PUBLIC_SITE_URL=https://ngroup.newproweb.pro

Defaults are defined in lib/site.config.ts.

5. Production build

npm run build
npm run start

6. Lint

npm run lint

Project structure (high level)

NGROUP/
├── app/
│   ├── (pages)/          # Alternate home layouts: home-b, home-c
│   ├── components/       # Page sections (hero, services, work, etc.)
│   ├── styleguide/       # Design reference page
│   ├── layout.tsx        # Root layout, fonts, metadata, i18n provider
│   ├── page.tsx          # Home A composition
│   └── globals.css
├── components/           # Shared UI (AppButton, carousel, page label)
├── lib/
│   ├── site.config.ts    # Site name, SEO, favicons, OG/Twitter
│   └── i18n/             # Translation provider and hooks
├── styles/               # SCSS entry and design tokens
├── translations/         # Locale JSON (e.g. en.json)
├── public/images/        # Static assets, favicons, previews
└── package.json

Customization tips

• Branding & SEO — Edit lib/site.config.ts and replace assets under public/.
• Copy — Update strings in translations/en.json (keys map to t("...") usage in components).
• Home layouts — Swap or reorder section imports in app/page.tsx, app/(pages)/home-b/page.tsx, or app/(pages)/home-c/page.tsx.
• Navigation — Adjust navItems in app/components/header/Header.utils.ts and footer links in app/components/footer/Footer.utils.ts.

Support & contact

Questions about this template, licensing, or deployment:

• Email: tools@newproweb.com

License

This repository is marked private in package.json. Use and distribution follow your team’s or vendor’s agreement.