Thème NextJS Creative Agency : guide complet d’installation

Thème NextJS agence créative avec portfolio 3D et UI animée

Apprenez à installer, personnaliser, traduire et déployer le thème Creative Agency NextJS grâce à cette documentation pour débutants et développeurs.

Ce guide explique tout le nécessaire pour lancer le thème : installation, configuration, édition du contenu, formulaire de contact, déploiement et personnalisation multilingue.

1. Vue d’ensemble

Creative Agency Design est un thème NextJS premium one-page pour agences créatives, studios et consultants digitaux. Il inclut des sections de particules interactives, des cartes portfolio 3D, une FAQ, des statistiques et un formulaire de contact.

Stack technique : NextJS (App Router), React, TypeScript, Tailwind CSS v4, Framer Motion, icônes Lucide.

Fichier principal de personnalisation : src/config/site.config.ts - modifiez ce fichier pour mettre à jour la majorité du contenu du site sans toucher au code des composants.

2. Prérequis

Node.js 18.18+ (Node 20+ recommandé)
npm (ou yarn / pnpm)
Pour le déploiement : compte Vercel (recommandé) ou tout hébergement statique

3. Installation

Téléchargez et décompressez le package du thème.
Ouvrez un terminal dans le dossier du projet.
Installez les dépendances :

npm install

Démarrez le serveur de développement :

npm run dev

Ouvrez http://localhost:3000 dans votre navigateur.

Scripts disponibles :

npm run dev - développement local
npm run build - build de production
npm run start - exécuter le build de production en local
npm run lint - contrôle qualité du code

4. Structure du projet

creative-agency-design-dev/
├── public/                     # Fichiers statiques (images, favicon, robots.txt)
│   └── logo.svg
├── src/
│   ├── app/
│   │   ├── api/contact/        # Route API du formulaire de contact
│   │   ├── globals.css         # Styles globaux et tokens de couleur
│   │   ├── layout.tsx          # Métadonnées SEO et structure de page
│   │   └── page.tsx            # Sections de la page d’accueil
│   ├── components/stella/      # Composants UI (nav, hero, portfolio, etc.)
│   └── config/
│       └── site.config.ts      # FICHIER PRINCIPAL DE CONFIGURATION (éditez d’abord)
├── next.config.ts
├── package.json
└── README.md

5. Modifier les textes et le contenu

Ouvrez src/config/site.config.ts. Ce fichier contrôle le branding, le SEO, la navigation, le texte hero, les services, les statistiques, la FAQ, le portfolio et les paramètres de contact.

5.1 Marque et SEO

name - nom court de marque (navigation/footer)
legalName - nom légal de l’entreprise (copyright/metadata)
tagline - slogan de marque
description - description principale pour le SEO
shortDescription - description pour les cartes sociales
url - URL canonique du site (sans slash final)
keywords - liste de mots-clés SEO

5.2 Contact et réseaux sociaux

email - e-mail de contact
location - texte de localisation/bureau
social - liens Twitter, LinkedIn, Dribbble, GitHub

5.3 Navigation et footer

navLinks - libellés du menu et liens d’ancrage
services - liste des services dans le footer

5.4 Section Hero

Modifiez l’objet hero :

label, title, subtitle, description
hint - texte d’aide pour l’interaction
primaryButton, secondaryButton

5.5 Sections interactives (01-05)

Modifiez sections.services, sections.about, sections.growth et sections.beauty.

Chaque section prend en charge : label, title, subtitle, description, hint.

5.6 Grille de services

Modifiez les éléments de servicesInline :

icon - l’un de : Code2, Palette, Layers, Zap
title, desc

5.7 Statistiques

Modifiez le tableau stats :

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

5.8 FAQ

Modifiez faq.label, faq.title et faq.items (paires question/réponse).

5.9 Portfolio

Modifiez l’objet portfolio et le tableau projects :

title, category, description
gradient - classes de dégradé Tailwind
image - chemin d’image optionnel (exemple : /projects/my-project.jpg)
url - lien externe optionnel du projet

5.10 Section contact

Modifiez les libellés, placeholders, options de liste déroulante et textes de bouton/succès dans contact.form.

6. Changer les couleurs et le style de marque

6.1 Couleur d’accent principale

Ouvrez src/app/globals.css et mettez à jour :

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

6.2 Couleurs de texte et de surface

Dans le même fichier, vous pouvez aussi ajuster :

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

6.3 Couleurs d’accent par section

Certaines sections utilisent des couleurs d’accent personnalisées dans src/app/page.tsx (par exemple services, about, growth, beauty). Vous pouvez modifier ces valeurs hex si nécessaire.

7. Ajouter des images portfolio

Créez le dossier : public/projects/
Téléversez des images (JPG/PNG/WebP recommandé)
Dans site.config.ts, définissez le chemin d’image par projet :

image: "/projects/architecture.jpg"

Si une image est manquante, la carte s’affiche toujours avec des placeholders en dégradé.

8. Configuration du formulaire de contact

Dans src/config/site.config.ts, configurez contact.submit.provider :

Option A : Mode démo (aperçu uniquement)

provider: "demo"

Simule un envoi réussi sans envoyer de vrais e-mails.

Option B : Web3Forms (simple, sans backend)

Créez un compte gratuit sur web3forms.com
Copiez votre access key
Configurez :

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

Option C : Formspree

Créez un formulaire sur formspree.io
Configurez :

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

Option D : Route API intégrée (Resend/Nodemailer)

Définissez provider: "api"
Configurez l’envoi d’e-mails dans src/app/api/contact/route.ts
Utilisez Resend ou Nodemailer comme documenté dans ce fichier

Note : La route API fonctionne sur un hébergement Node (Vercel). Elle ne fonctionne pas avec l’export statique.

9. Déploiement

9.1 Déployer sur Vercel (recommandé)

Poussez le projet vers GitHub/GitLab/Bitbucket
Importez le dépôt dans Vercel
Framework preset : NextJS
Commande de build : npm run build
Déployez

9.2 Export statique (cPanel / hébergement mutualisé)

Ouvrez next.config.ts
Ajoutez :

output: "export"

Exécutez :

npm run build

Téléversez le contenu du dossier out/ sur votre hébergeur
Utilisez web3forms ou formspree pour le formulaire (pas api)

10. Utiliser le thème dans une autre langue

Ce thème est monolingue par défaut et n’inclut pas de routage i18n. Pour le localiser :

Méthode 1 (recommandée pour la plupart) : traduction directe dans la config

Ouvrez src/config/site.config.ts
Traduisez toutes les valeurs de texte (hero, sections, services, statistiques, FAQ, portfolio, contact)
Mettez à jour les champs SEO : description, shortDescription, keywords
Mettez à jour les métadonnées dans src/app/layout.tsx si nécessaire
Définissez html lang dans layout.tsx (exemple : lang="sv", lang="es", lang="fr", lang="de")

Méthode 2 : dupliquer la config par langue

Créez des fichiers comme site.config.sv.ts, site.config.es.ts
Importez la config souhaitée dans layout.tsx et page.tsx
Construisez des déploiements séparés par langue si nécessaire

Méthode 3 : configuration multilingue complète (avancé)

Cela nécessite un développement supplémentaire au-delà du package standard du thème. Contactez-nous pour toute modification et développement personnalisé.

Checklist de traduction :

Libellés de navigation
Titres du hero et des sections
Cartes de services et libellés de statistiques
Questions/réponses FAQ
Titres/descriptions du portfolio
Libellés/placeholders/boutons du formulaire de contact
Texte du footer et lignes légales
Titre/description/mots-clés SEO

11. Dépannage

Le formulaire n’envoie pas : vérifiez le provider et les clés/endpoints API.
L’image portfolio n’apparaît pas : confirmez que le fichier existe dans public/projects/ et que le chemin commence par /projects/.
Le formulaire échoue en hébergement statique : n’utilisez pas provider: "api" ; utilisez Web3Forms ou Formspree.
Erreurs de build : exécutez npm install puis npm run build.

12. Licence et support

Ce thème est fourni sous Single Site License sauf indication contraire dans vos conditions d’achat.

Besoin d’aide ? Contactez contact@mariastellatech.com

Checklist rapide

Installer les dépendances (npm install)
Exécuter en local (npm run dev)
Modifier src/config/site.config.ts
Mettre à jour les couleurs dans src/app/globals.css
Ajouter des images dans public/projects/
Configurer le provider du formulaire de contact
Compiler et déployer (npm run build)