NEWTech

Overview

NEWTech is a modern marketing site template for technology companies, IT service providers, SaaS startups, and digital agencies, built with Next.js. It ships with four interchangeable home layouts, a full set of inner pages (about, services, pricing, portfolio, team, FAQ, shop, blog, contact), reusable section components, and SEO-friendly metadata (Open Graph, Twitter cards, theme color, favicons, and web manifest).

The default route (/) redirects to the primary home experience at /home-1/, which combines hero messaging, partner logos, services, testimonials, who-we-are, projects, work process, team, and blog insights. Alternate demos live at /home-2/, /home-3/, and /home-4/, each with its own header, hero, section variants, and footer. An internal Styleguide (/styleguide/) documents the design system.

Site-wide copy is driven by i18next (translations/en.json), with shared headers, footers, mega-menu navigation, and an animated mobile navigation pattern across all routes.

Features

• App Router pages — Home 1–4 (/home-1/ … /home-4/), and inner pages: About, Services, Pricing Plan, Portfolio, Our Team, FAQ, Shop, Blog, Contact Us, plus an internal Styleguide (/styleguide/)
• Dynamic routes — Detail pages for services (/services/[slug]/), portfolio (/portfolio/[slug]/), blog (/blog/[slug]/), and shop products (/shop/[slug]/)
• Four home layouts — Compose different hero, services, portfolio, pricing, and CTA blocks per route without duplicating chrome
• Modular sections — Composable blocks under app/components/blocks/ (hero, logos, services, testimonials, who-we-are, projects, work, meet-the-experts, insights, what-we-do, features, portfolio, pricing, FAQ, shop, blog, map, and more)
• Responsive chrome — Four header and four footer variants; mega-menu and animated mobile navigation for smaller viewports
• Internationalization — i18next + react-i18next with JSON translations and a TranslationProvider in the root layout
• Rich UI primitives — Carousel (Embla), date picking (react-day-picker + date-fns), icons (Lucide), Base UI–aligned building blocks, shadcn-style UI components, and Sonner toasts
• Markdown content — react-markdown + remark-gfm for rich text rendering
• Design system — Tailwind CSS 4 utilities plus SCSS modules for colors, typography, buttons, layout, mixins, animations, and custom cursor styles (styles/)
• SEO & metadata — Centralized config in lib/site.config.ts (title, description, keywords, OG/Twitter, theme color, favicons, manifest)
• Global utilities — Fixed scroll-to-top, documentation shortcut, and purchase link via GlobalFunctionComponent
• 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 Home (4 variants), About, All Pages (mega-menu), Blog, and Contact. The full sitemap is defined in app/components/navbar/Navbar.data.tsx.

Demo

Live site (canonical in app metadata): newtech.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/NEWTECH.git
cd NEWTECH

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://newtech.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)

NEWTECH/
├── app/
│   ├── (pages)/          # Routes: home-1–4, about, services, pricing-plan,
│   │                     #   portfolio, our-team, faq, shop, blog, contact-us, documentation
│   ├── components/
│   │   ├── blocks/       # Page sections (hero, services, portfolio, blog, etc.)
│   │   ├── elements/     # Smaller reusable UI pieces (cards, inputs, sliders, etc.)
│   │   └── navbar/       # Shared navigation data and menu components
│   ├── styleguide/       # Design reference page
│   ├── layout.tsx        # Root layout, fonts, metadata, i18n provider
│   ├── page.tsx          # Redirects "/" → "/home-1/"
│   ├── not-found.tsx     # Custom 404 page
│   └── globals.css
├── components/           # Shared UI (button, carousel, accordion, tabs, etc.)
├── lib/
│   ├── site.config.ts    # Site name, SEO, favicons, OG/Twitter
│   ├── utils.ts          # cn() and shared helpers
│   └── i18n/             # Translation provider, config, and hooks
├── styles/               # SCSS entry and design tokens (colors, typography, animations)
├── translations/         # Locale JSON (e.g. en.json)
├── public/images/        # Static assets, favicons, previews
└── package.json

Home layouts at a glance

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/(pages)/home-1/page.tsx through home-4/page.tsx.
• Navigation — Adjust navItems and mobileItems in app/components/navbar/Navbar.data.tsx and footer links in the footer block components.
• Shop products — Edit product data in app/components/blocks/shop/shop1/Shop1.data.ts; slugs drive /shop/[slug]/ static generation.

Support & contact

Questions about this template, licensing, or deployment:

• Email: tools@newproweb.com
• Purchase: Gumroad — NEWTech

License

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