View All Documentation

Creative Agency NextJS Theme Full Setup and Usage Guide

Creative Agency NextJS Theme with 3D, Motion UI Portfolio

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

  1. Download and unzip the theme package.
  2. Open a terminal in the project folder.
  3. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. 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

  1. Create folder: public/projects/
  2. Upload images (JPG/PNG/WebP recommended)
  3. 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)

  1. Create a free account at web3forms.com
  2. Copy your access key
  3. Set:
provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Option C: Formspree

  1. Create a form at formspree.io
  2. Set:
provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

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

  1. Set provider: "api"
  2. Configure email sending in src/app/api/contact/route.ts
  3. 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)

  1. Push project to GitHub/GitLab/Bitbucket
  2. Import repository in Vercel
  3. Framework preset: NextJS
  4. Build command: npm run build
  5. Deploy

9.2 Static export (cPanel / shared hosting)

  1. Open next.config.ts
  2. Add:
output: "export"
  1. Run:
npm run build
  1. Upload contents of out/ folder to your host
  2. 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

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

Method 2: duplicate config per language

  1. Create files like site.config.sv.ts, site.config.es.ts
  2. Import the desired config in layout.tsx and page.tsx
  3. 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)