Visa all dokumentation

Creative Agency NextJS-tema: komplett installationsguide

Kreativ byrå NextJS-tema med 3D, rörelse och UI-portfolio

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

  1. Ladda ner och packa upp temapaketet.
  2. Öppna en terminal i projektmappen.
  3. Installera beroenden:
npm install
  1. Starta utvecklingsservern:
npm run dev
  1. Ö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

  1. Skapa mapp: public/projects/
  2. Ladda upp bilder (JPG/PNG/WebP rekommenderas)
  3. 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)

  1. Skapa ett gratis konto på web3forms.com
  2. Kopiera din access key
  3. Ange:
provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Alternativ C: Formspree

  1. Skapa ett formulär på formspree.io
  2. Ange:
provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

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

  1. Sätt provider: "api"
  2. Konfigurera mejlutskick i src/app/api/contact/route.ts
  3. 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)

  1. Pusha projektet till GitHub/GitLab/Bitbucket
  2. Importera repository i Vercel
  3. Framework preset: NextJS
  4. Build-kommando: npm run build
  5. Publicera

9.2 Statisk export (cPanel / delad hosting)

  1. Öppna next.config.ts
  2. Lägg till:
output: "export"
  1. Kör:
npm run build
  1. Ladda upp innehållet i mappen out/ till din host
  2. 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

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

Metod 2: duplicera config per språk

  1. Skapa filer som site.config.sv.ts, site.config.es.ts
  2. Importera önskad config i layout.tsx och page.tsx
  3. 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)