Installation

Prerequisites

Before you begin, ensure you have these tools installed:

• Node.js (version 18.0 or higher) - Download here
• npm (comes with Node.js) or yarn package manager
• A code editor like VS Code, WebStorm, or Sublime Text
• Git (optional, but recommended for version control)

Quick Setup

1. Download Your Template

After purchase, download the template ZIP file from your account dashboard.

2. Extract Your Template

After downloading your template:

1. Locate the downloaded ZIP file
2. Extract it to your desired project directory
3. Rename the folder to your project name (optional)

# Example extraction
unzip your-template-name.zip
cd your-template-name

3. Install Dependencies

Open your terminal in the template directory and install all required packages:

# Using npm (recommended)
npm install

# Or using yarn
yarn install

# Or using pnpm
pnpm install

4. Start Development

Launch the development server:

# Using npm
npm run dev

# Using yarn
yarn dev

# Using pnpm
pnpm dev

Your template will be available at http://localhost:3000

Understanding the Structure

All our templates follow a consistent Next.js structure:

your-template/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Homepage
│   ├── about/             # About page
│   ├── contact/           # Contact page
│   └── [other-pages]/     # Additional pages
├── components/            # Reusable components
│   ├── ui/               # UI components
│   ├── Header.tsx
│   ├── Footer.tsx
│   └── [other-components]/
├── lib/                   # Utilities and helpers
│   ├── utils.ts
│   └── [other-utilities]/
├── public/               # Static files
│   ├── images/
│   ├── icons/
│   └── [other-assets]/
├── styles/               # Additional stylesheets
├── package.json          # Project dependencies
├── tailwind.config.js    # Tailwind configuration
├── tsconfig.json         # TypeScript settings
└── next.config.js        # Next.js configuration

Key Directories Explained

• app/ - Contains all your pages and layouts using Next.js App Router
• src/components/ - Modular, reusable UI components organized by feature
• public/assets/ - Static files like images, fonts, and stylesheets
• src/helper/ - Utility functions and helper scripts
• src/hooks/ - Custom React hooks for shared logic

First Steps After Installation

1. Update Site Information

Open app/layout.jsx and update the metadata:

export const metadata = {
  title: "Your Website Name",
  description: "Your website description",
  keywords: ["your", "keywords"],
  // Update other metadata
};

2. Configure Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SITE_NAME="Your Website"
NEXT_PUBLIC_SITE_URL="https://yourwebsite.com"
# Add other environment variables

3. Customize Brand Colors

Most templates use CSS variables or Tailwind config for colors. Check app/globals.scss or tailwind.config.js:

/* In globals.scss */
:root {
  --primary-color: #your-color;
  --secondary-color: #your-color;
}

// tailwind.config.js:
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#your-light-color",
          500: "#your-main-color",
          900: "#your-dark-color",
        },
        secondary: {
          // Your secondary colors
        },
      },
    },
  },
};

4. Replace Logo and Images

• Navigate to public/assets/images/logo/
• Replace logo files with your own
• Update favicon in public/
• Replace placeholder images throughout the template

5. Add Your Content

• Replace placeholder images with your own
• Update text content throughout the template
• Modify contact information and social links

Essential Commands

Every template includes these npm scripts:

# Development
npm run dev          # Start development server (localhost:3000)

# Production
npm run build        # Create optimized production build
npm run start        # Run production server locally

# Code Quality
npm run lint         # Check for code issues
npm run style        # Auto-fix code style issues

# Utilities
npm run clear-sitemap  # Clear sitemap cache

Development Workflow

1. Start with Content: Update text, images, and basic information
2. Customize Design: Modify colors, fonts, and layout
3. Add Features: Implement additional functionality as needed
4. Test Thoroughly: Check responsiveness and functionality
5. Deploy: Follow our Deployment Guide

Next Steps

If you need assistance:

• 🎨 Advance Customization
• 📦 Deploy Your Template
• 📖 Check our Troubleshooting Guide
• 📧 Email us with specific questions

---

You're all set! Your template is ready for customization. Start building your amazing website! 🚀