Learn how to install, customize, translate, and deploy the Creative Agency NextJS theme with this complete documentation for beginners and developers.

This guide explains everything you need to launch the theme: installation, configuration, content editing, contact form setup, deployment, and multilingual customization.

1. Overview

Creative Agency Design is a premium one-page NextJS theme for creative agencies, studios, and digital consultants. It includes interactive particle sections, 3D portfolio cards, FAQ, stats, and a contact form.

Tech stack: NextJS (App Router), React, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons.

Main customization file: src/config/site.config.ts - edit this file to update most site content without touching component code.

2. Requirements

Node.js 18.18+ (Node 20+ recommended)
npm (or yarn / pnpm)
For deployment: Vercel account (recommended) or any static host

3. Installation

Download and unzip the theme package.
Open a terminal in the project folder.
Install dependencies:

npm install

Start the development server:

npm run dev

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

Available scripts:

npm run dev - local development
npm run build - production build
npm run start - run production build locally
npm run lint - code quality check

4. Project Structure

creative-agency-design-dev/
├── public/                     # Static assets (images, favicon, robots.txt)
│   └── logo.svg
├── src/
│   ├── app/
│   │   ├── api/contact/        # Contact form API route
│   │   ├── globals.css         # Global styles and color tokens
│   │   ├── layout.tsx          # SEO metadata and page shell
│   │   └── page.tsx            # Homepage sections
│   ├── components/stella/      # UI components (nav, hero, portfolio, etc.)
│   └── config/
│       └── site.config.ts      # MAIN CONFIG FILE (edit this first)
├── next.config.ts
├── package.json
└── README.md

5. How to Modify Text and Content

Open src/config/site.config.ts. This file controls branding, SEO, navigation, hero text, services, stats, FAQ, portfolio, and contact settings.

5.1 Brand and SEO

name - short brand name (navigation/footer)
legalName - legal company name (copyright/metadata)
tagline - brand tagline
description - main SEO description
shortDescription - social card description
url - canonical website URL (no trailing slash)
keywords - SEO keyword array

5.2 Contact and Social

email - contact email
location - office location text
social - Twitter, LinkedIn, Dribbble, GitHub links

5.3 Navigation and Footer

navLinks - top menu labels and anchor links
services - footer service list

5.4 Hero Section

Edit the hero object:

label, title, subtitle, description
hint - interaction hint text
primaryButton, secondaryButton

5.5 Interactive Sections (01–05)

Edit sections.services, sections.about, sections.growth, and sections.beauty.

Each section supports: label, title, subtitle, description, hint.

5.6 Services Grid

Edit servicesInline array items:

icon - one of: Code2, Palette, Layers, Zap
title, desc

5.7 Stats

Edit stats array:

{ value: "150+", label: "Projects Delivered" }

5.8 FAQ

Edit faq.label, faq.title, and faq.items (question/answer pairs).

5.9 Portfolio

Edit portfolio object and projects array:

title, category, description
gradient - Tailwind gradient classes
image - optional image path (example: /projects/my-project.jpg)
url - optional external project link

5.10 Contact Section

Edit contact labels, placeholders, dropdown options, and button/success text in contact.form.

6. How to Change Colors and Brand Style

6.1 Primary accent color

Open src/app/globals.css and update:

:root {
  --accent: #F59E0B;
  --accent-dark: #D97706;
}

6.2 Text and surface colors

In the same file, you can also adjust:

--muted-text
--subtle-text
--dim-text
--surface

6.3 Section-specific accent colors

Some sections use custom accent colors in src/app/page.tsx (for example services, about, growth, beauty). You can change those hex values if needed.

7. How to Add Portfolio Images

Create folder: public/projects/
Upload images (JPG/PNG/WebP recommended)
In site.config.ts, set image path per project:

image: "/projects/architecture.jpg"

If an image is missing, the card still displays using gradient placeholders.

8. Contact Form Setup

In src/config/site.config.ts, configure contact.submit.provider:

Option A: Demo mode (preview only)

provider: "demo"

Simulates success without sending real emails.

Option B: Web3Forms (easy, no backend)

Create a free account at web3forms.com
Copy your access key
Set:

provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Option C: Formspree

Create a form at formspree.io
Set:

provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

Option D: Built-in API route (Resend/Nodemailer)

Set provider: "api"
Configure email sending in src/app/api/contact/route.ts
Use Resend or Nodemailer as documented in that file

Note: API route works on Node hosting (Vercel). It does not work with static export hosting.

9. Deployment

9.1 Deploy to Vercel (recommended)

Push project to GitHub/GitLab/Bitbucket
Import repository in Vercel
Framework preset: NextJS
Build command: npm run build
Deploy

9.2 Static export (cPanel / shared hosting)

Open next.config.ts
Add:

output: "export"

Run:

npm run build

Upload contents of out/ folder to your host
Use web3forms or formspree for contact form (not api)

10. How to Use the Theme in Another Language

This theme is single-language by default and does not include i18n routing. To localize it:

Method 1 (recommended for most users): direct translation in config

Open src/config/site.config.ts
Translate all text values (hero, sections, services, stats, FAQ, portfolio, contact)
Update SEO fields: description, shortDescription, keywords
Update metadata in src/app/layout.tsx if needed
Set html lang in layout.tsx (example: lang="sv", lang="es", lang="fr", lang="de")

Method 2: duplicate config per language

Create files like site.config.sv.ts, site.config.es.ts
Import the desired config in layout.tsx and page.tsx
Build separate deployments per language if needed

Method 3: full multilingual setup (advanced)

This requires additional development beyond the default theme package. Contact us for any custom modifications and developments.

Translation checklist:

Navigation labels
Hero and section headings
Service cards and stats labels
FAQ questions/answers
Portfolio titles/descriptions
Contact form labels/placeholders/buttons
Footer text and legal lines
SEO title/description/keywords

11. Troubleshooting

Contact form not sending: verify provider setting and API keys/endpoints.
Portfolio image not showing: confirm file exists in public/projects/ and path starts with /projects/.
Static hosting form fails: do not use provider: "api"; use Web3Forms or Formspree.
Build errors: run npm install again, then npm run build.

12. License and Support

This theme is provided under a Single Site License unless otherwise stated in your purchase terms.

Need help? Contact contact@mariastellatech.com

Quick Start Checklist

Install dependencies (npm install)
Run locally (npm run dev)
Edit src/config/site.config.ts
Update colors in src/app/globals.css
Add images to public/projects/
Configure contact form provider
Build and deploy (npm run build)

Creative Agency NextJS Theme Full Setup and Usage Guide