Lär dig installera, anpassa, översätta och driftsätta Creative Agency NextJS-temat med denna kompletta dokumentation för nybörjare och utvecklare.

Den här guiden förklarar allt du behöver för att lansera temat: installation, konfiguration, innehållsredigering, kontaktformulär, publicering och flerspråkig anpassning.

1. Översikt

Creative Agency Design är ett premium NextJS-tema på en sida för kreativa byråer, studios och digitala konsulter. Det innehåller interaktiva partikelsektioner, 3D-portfoliokort, FAQ, statistik och ett kontaktformulär.

Teknikstack: NextJS (App Router), React, TypeScript, Tailwind CSS v4, Framer Motion, Lucide-ikoner.

Huvudfil för anpassning: src/config/site.config.ts - redigera denna fil för att uppdatera större delen av webbplatsinnehållet utan att röra komponentkoden.

2. Krav

Node.js 18.18+ (Node 20+ rekommenderas)
npm (eller yarn / pnpm)
För publicering: Vercel-konto (rekommenderas) eller valfri statisk host

3. Installation

Ladda ner och packa upp temapaketet.
Öppna en terminal i projektmappen.
Installera beroenden:

npm install

Starta utvecklingsservern:

npm run dev

Öppna http://localhost:3000 i din webbläsare.

Tillgängliga skript:

npm run dev - lokal utveckling
npm run build - produktionsbuild
npm run start - kör produktionsbuild lokalt
npm run lint - kodkvalitetskontroll

4. Projektstruktur

creative-agency-design-dev/
├── public/                     # Statiska filer (bilder, favicon, robots.txt)
│   └── logo.svg
├── src/
│   ├── app/
│   │   ├── api/contact/        # API-route för kontaktformulär
│   │   ├── globals.css         # Globala stilar och färgvariabler
│   │   ├── layout.tsx          # SEO-metadata och sidlayout
│   │   └── page.tsx            # Hemsidans sektioner
│   ├── components/stella/      # UI-komponenter (nav, hero, portfolio osv.)
│   └── config/
│       └── site.config.ts      # HUVUDFIL FÖR KONFIGURATION (redigera först)
├── next.config.ts
├── package.json
└── README.md

5. Hur du ändrar text och innehåll

Öppna src/config/site.config.ts. Denna fil styr varumärke, SEO, navigation, hero-text, tjänster, statistik, FAQ, portfolio och kontaktinställningar.

5.1 Varumärke och SEO

name - kort varumärkesnamn (navigation/footer)
legalName - juridiskt företagsnamn (copyright/metadata)
tagline - varumärkesslogan
description - huvudbeskrivning för SEO
shortDescription - beskrivning för sociala kort
url - kanonisk webbplats-URL (utan avslutande snedstreck)
keywords - SEO-nyckelordslista

5.2 Kontakt och sociala länkar

email - kontaktmejl
location - text för plats/kontor
social - Twitter, LinkedIn, Dribbble, GitHub-länkar

5.3 Navigation och footer

navLinks - etiketter och ankarlänkar i toppmenyn
services - tjänstelista i footer

5.4 Hero-sektion

Redigera objektet hero:

label, title, subtitle, description
hint - text för interaktionshint
primaryButton, secondaryButton

5.5 Interaktiva sektioner (01-05)

Redigera sections.services, sections.about, sections.growth och sections.beauty.

Varje sektion stöder: label, title, subtitle, description, hint.

5.6 Tjänstegrid

Redigera poster i servicesInline:

icon - en av: Code2, Palette, Layers, Zap
title, desc

5.7 Statistik

Redigera stats-listan:

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

5.8 FAQ

Redigera faq.label, faq.title och faq.items (fråga/svar-par).

5.9 Portfolio

Redigera objektet portfolio och listan projects:

title, category, description
gradient - Tailwind-gradientklasser
image - valfri bildsökväg (exempel: /projects/my-project.jpg)
url - valfri extern projektlänk

5.10 Kontaktsektion

Redigera etiketter, placeholders, dropdown-alternativ samt knapp- och bekräftelsetext i contact.form.

6. Hur du ändrar färger och varumärkesstil

6.1 Primär accentfärg

Öppna src/app/globals.css och uppdatera:

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

6.2 Text- och ytfärger

I samma fil kan du även justera:

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

6.3 Sektionsspecifika accentfärger

Vissa sektioner använder egna accentfärger i src/app/page.tsx (t.ex. services, about, growth, beauty). Du kan ändra dessa hex-värden vid behov.

7. Hur du lägger till portfoliobilder

Skapa mapp: public/projects/
Ladda upp bilder (JPG/PNG/WebP rekommenderas)
I site.config.ts, ange bildsökväg per projekt:

image: "/projects/architecture.jpg"

Om en bild saknas visas kortet fortfarande med gradient-placeholder.

8. Kontaktformulär

I src/config/site.config.ts, konfigurera contact.submit.provider:

Alternativ A: Demoläge (endast förhandsvisning)

provider: "demo"

Simulerar lyckat skickande utan att skicka riktiga mejl.

Alternativ B: Web3Forms (enkelt, utan backend)

Skapa ett gratis konto på web3forms.com
Kopiera din access key
Ange:

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

Alternativ C: Formspree

Skapa ett formulär på formspree.io
Ange:

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

Alternativ D: Inbyggd API-route (Resend/Nodemailer)

Sätt provider: "api"
Konfigurera mejlutskick i src/app/api/contact/route.ts
Använd Resend eller Nodemailer enligt instruktionerna i filen

Obs: API-route fungerar på Node-hosting (Vercel). Den fungerar inte med statisk export.

9. Publicering

9.1 Publicera på Vercel (rekommenderat)

Pusha projektet till GitHub/GitLab/Bitbucket
Importera repository i Vercel
Framework preset: NextJS
Build-kommando: npm run build
Publicera

9.2 Statisk export (cPanel / delad hosting)

Öppna next.config.ts
Lägg till:

output: "export"

Kör:

npm run build

Ladda upp innehållet i mappen out/ till din host
Använd web3forms eller formspree för kontaktformulär (inte api)

10. Hur du använder temat på ett annat språk

Temat är enspråkigt som standard och har ingen inbyggd i18n-routing. För lokalisering:

Metod 1 (rekommenderas för de flesta): direkt översättning i config

Öppna src/config/site.config.ts
Översätt alla textvärden (hero, sektioner, tjänster, statistik, FAQ, portfolio, kontakt)
Uppdatera SEO-fält: description, shortDescription, keywords
Uppdatera metadata i src/app/layout.tsx vid behov
Sätt html lang i layout.tsx (exempel: lang="sv", lang="es", lang="fr", lang="de")

Metod 2: duplicera config per språk

Skapa filer som site.config.sv.ts, site.config.es.ts
Importera önskad config i layout.tsx och page.tsx
Bygg separata versioner per språk vid behov

Metod 3: full flerspråkig setup (avancerat)

Detta kräver extra utveckling utöver standardtemat. Kontakta oss för anpassade modifieringar och utveckling.

Översättningschecklista:

Navigationsetiketter
Hero- och sektionsrubriker
Tjänstekort och statistiketiketter
FAQ-frågor/svar
Portfolio-titlar/beskrivningar
Kontaktformulärets etiketter/placeholders/knappar
Footer-text och juridiska rader
SEO-titel/beskrivning/nyckelord

11. Felsökning

Kontaktformulär skickar inte: verifiera provider-inställning och API-nycklar/endpoints.
Portfoliobild visas inte: kontrollera att filen finns i public/projects/ och att sökvägen börjar med /projects/.
Formulär fungerar inte på statisk host: använd inte provider: "api"; använd Web3Forms eller Formspree.
Buildfel: kör npm install igen och sedan npm run build.

12. Licens och support

Detta tema levereras med Single Site License om inget annat anges i dina köpvillkor.

Behöver du hjälp? Kontakta contact@mariastellatech.com

Snabb checklista

Installera beroenden (npm install)
Kör lokalt (npm run dev)
Redigera src/config/site.config.ts
Uppdatera färger i src/app/globals.css
Lägg till bilder i public/projects/
Konfigurera kontaktformulärsprovider
Bygg och publicera (npm run build)

Creative Agency NextJS-tema: komplett installationsguide