Komplett installations- och användarguide för Clenvica städtema i HTML och NextJS - installation, anpassning, formulär, bilder, SEO och driftsättning.

Användarguide för HTML & Next.js

Denna guide täcker båda Clenvica-versionerna:

HTML-versionen - statiskt HTML5-tema, inget Node.js krävs
Next.js-versionen - fullständigt React/Next.js-tema med flerspråksstöd, avancerade formulär och extra funktioner

Använd avsnitten nedan för den version du köpt. Om du äger båda, behåll detta dokument som din enda referens.

1. Vad som ingår

Båda versionerna inkluderar

Startsida och komplett uppsättning innersidor (tjänster, priser, projekt, blogg, galleri, team, kundomdömen, FAQ, områden, karriär, kontakt, offert, juridiska sidor)
Mobilanpassad responsiv layout
Mörkt läge
Cookie-samtyckesbanner
Flytande samtals- och WhatsApp-knappar
FAQ-dragspel, gallerilightbox och före/efter-reglage
Demobilder, logotypplatshållare, favicon, sitemap och robots-fil

Endast Next.js

Flerspråksstöd (engelska, tyska, svenska, franska)
Bokningsguide och kostnadskalkylator
Meddelandefält (kan slås på/av)
Server-sidans formulär via /api/forms (Resend, SMTP eller webhook)
Centraliserad text i lokaliseringsfiler
Funktionsväxlar för sidor, menyer och gränssnittselement

Endast HTML

Enkel statisk installation - ladda upp och publicera
SEO-vänlig inbakad HTML-text (redigera text direkt i sidfiler)
Endast demoformulär (omdirigerar till tacksida)

2. Krav

Krav	HTML	Next.js
Node.js / npm	Krävs inte	Krävs (Node 18+ rekommenderas)
Textredigerare	Ja	Ja
Webbhotell	Vilket statiskt webbhotell som helst (cPanel, Netlify, Vercel, etc.)	Node-kompatibelt webbhotell (Vercel rekommenderas) eller statiskt exportvärdskap om det konfigurerats
Byggsteg	Nej	Ja (`npm run build`)

3. Installation

3.1 HTML-versionen - installation

Packa upp html-paketet på din dator.
Ladda upp alla filer och mappar till roten av ditt webbhotell (vanligtvis public_html).
Öppna din domän i en webbläsare. Startsidan är index.html.

Kompatibla webbhotell: cPanel/delat webbhotell, Netlify, Vercel, Cloudflare Pages, GitHub Pages och alla statiska filservrar.

Lokal förhandsvisning: öppna index.html i din webbläsare. Om skript eller sökvägar ser trasiga ut, använd Live Server (VS Code/Cursor-tillägg) eller valfri lokal statisk server.

3.2 Next.js-versionen - installation

Packa upp nextjs-paketet.
Öppna en terminal i projektmappen.
Installera beroenden:
```
npm install
```
Kopiera miljöfilen:
```
cp .env.example .env.local
```
Starta utvecklingsservern:
```
npm run dev
```
Besök http://localhost:3000 (standardspråkrutten är vanligtvis /en).

Produktionsbygge:

npm run build
npm run start

Rekommenderad driftsättning: Vercel, eller vilken plattform som helst som stöder Next.js App Router.

4. Checklista för första installationen

Genomför dessa steg för din live-webbplats:

Ersätt demo-varumärkesnamn, telefon, e-post och adress
Ersätt demo-domän-URL:er i sitemap, robots, kanoniska/meta-taggar
Ersätt logotyp och favicon
Ersätt demo-foton i bildmappen
Uppdatera serviceområden och företagstext
Testa kontakt-/offert-/nyhetsbrevsformulär
Testa mobilmeny, mörkt läge och nyckelsidor

5. Anpassningsguide

5.1 Företagsuppgifter

Vad som ska ändras	HTML	Next.js
Varumärke, telefon, e-post, adress, öppettider	`assets/js/config.js`	`src/config/site.ts`
Funktionsväxlar (mörkt läge, cookies, flytande knappar, etc.)	`assets/js/config.js` → `features`	`src/config/site.ts` → `features`
Länk för designerkreditering (Tema designat av Maria Stella Tech)	Sidfotens HTML-länk (ta bort raden för att dölja)	`features.designerCredit` i `site.ts`

Viktigt (HTML): efter att ha ändrat telefon/e-post i config.js, sök även igenom HTML-filerna efter gamla tel:-, mailto:-länkar och synlig telefon-/e-posttext och uppdatera dessa länkar.

5.2 Webbplatstext och innehåll

Uppgift	HTML	Next.js
Sidrubriker, stycken, menyer, FAQ, blogginnehåll	Redigera varje sid-`.html`-fil direkt	Redigera lokaliseringsfiler i `src/locales/` (börja med `en.ts`)
SEO-titel och metabeskrivning	Redigera `<title>` och `<meta name="description">` på varje HTML-sida	Hanteras via lokaliseringsfiler + SEO-konfiguration (`src/config/seo.ts` och sidmetadata)
Aktivera/inaktivera sidor och menyalternativ	Manuellt (redigera navigeringslänkar i HTML)	`src/config/pages.ts`

5.3 Bilder och media

Tillgång	HTML	Next.js
Hero-, om oss-, projekt-, blogg- och galleribilder	`images/` (behåll filnamnen)	`public/images/` (behåll filnamnen)
Kartläggning av bildsökväg	Redigera `src` i HTML `<img>`-taggar vid behov	`src/config/media.ts`
Logotyp / favicon	`logo.svg`, `favicon.ico`	`public/logo.svg`, `public/favicon.ico`

Se images/README.md (HTML) eller public/images/README.md (Next.js) för rekommenderade bildstorlekar.

5.4 Färger och varumärke

HTML: redigera CSS-variabler i assets/css/main.css (sök efter --color-primary).
Next.js: redigera temavariabler i src/app/globals.css.

5.5 Endast Next.js-funktioner

Flerspråksstöd

Inkluderade språk: engelska, tyska, svenska, franska
Redigera text i src/locales/en.ts, de.ts, sv.ts, fr.ts
Språkinställningar i src/config/site.ts

Meddelandefält

Växel: features.announcementBar i src/config/site.ts
Text: avsnittet announcement i lokaliseringsfilerna
Länkmål: announcementHref i site.ts

Bokningsguide & kostnadskalkylator

Tillgänglig i Next.js offert-/prisflöden
Ingår inte i HTML-versionen

6. Formulär och e-post

6.1 HTML-versionen (demoformulär)

Som standard skickar kontakt-, offert- och nyhetsbrevsformulär inte e-post. De förhindrar standardinlämningen och omdirigerar till tacksidan.

För att ta emot riktiga inlämningar, koppla in en tredjepartstjänst:

Formspree
Getform
Web3Forms
EmailJS
Din egen endpoint

Uppdatera formulärhanteringen i assets/js/main.js (initForms()) eller ställ in formulärets action-attribut.

6.2 Next.js-versionen (produktionsformulär)

Formulär skickas till /api/forms med validering och leverans på serversidan.

Konfigurera .env.local:

EMAIL_PROVIDER=none|resend|smtp|webhook
EMAIL_TO=your@email.com
EMAIL_FROM="Your Brand <your@email.com>"

Leverantörsexempel:

Resend: EMAIL_PROVIDER=resend + RESEND_API_KEY
SMTP: EMAIL_PROVIDER=smtp + inställningar för SMTP-värd/användare/lösenord
Webhook: EMAIL_PROVIDER=webhook + EMAIL_WEBHOOK_URL

Nyhetsbrevsintegrationer och valfria säkerhetsinställningar dokumenteras i .env.example, CUSTOMIZATION.md och DOCUMENTATION.md.

7. SEO-installation

7.1 Domän- och indexeringsfiler

Ersätt clenvica.example.com med din riktiga domän
Uppdatera sitemap.xml och robots.txt
Uppdatera kanoniska och Open Graph-URL:er i sidmetadata

7.2 On-page SEO

HTML: redigera varje sidas titel, metabeskrivning och synligt H1/H2-innehåll direkt i HTML-filerna
Next.js: redigera lokaliseringens SEO-strängar och src/config/seo.ts

7.3 Rekommenderade lanseringskontroller

Skicka in sitemap i Google Search Console
Verifiera att alla sidor returnerar statuskod 200
Kontrollera mobillayout och sidhastighet
Bekräfta att kontaktuppgifter och CTA-länkar är korrekta

8. Mappstruktur

HTML-paket

html/
  index.html
  about/ services/ pricing/ projects/ blog/ ...
  images/
  logo.svg
  favicon.ico
  robots.txt
  sitemap.xml
  assets/
    css/main.css
    js/config.js
    js/main.js

Next.js-paket

nextjs/
  src/
    app/
    components/
    config/
    locales/
    sections/
  public/
    images/
    logo.svg
    favicon.ico
  .env.example
  package.json
  CUSTOMIZATION.md
  DOCUMENTATION.md

9. Felsökning

HTML

Stilar/skript laddas inte lokalt: använd Live Server istället för att öppna filerna direkt.
Ändringar syns inte online: ladda upp de redigerade filerna igen och gör en hård uppdatering (Ctrl+F5).
Trasiga bilder: kontrollera filsökväg och filnamnets skiftläge (Linux-servrar är skiftlägeskänsliga).
Formulär skickar inte e-post: förväntat i demoläge; koppla in en formulärtjänst.

Next.js

npm install misslyckas: använd Node 18+ och försök igen med en ren installation.
Formulär skickas inte: kontrollera leverantörsinställningarna i .env.local och starta om utvecklingsservern.
Fel språkrutt: kontrollera supportedLanguages och lokaliseringsfilerna.
Byggfel: kör npm run lint och åtgärda TypeScript-/miljöproblem.

10. Versionsskillnader (snabbreferens)

Funktion	HTML	Next.js
Installation	Ladda upp statiska filer	`npm install` + bygg/driftsätt
Redigera text	HTML-filer	Lokaliseringsfiler
Flerspråksstöd	Nej	Ja (en, de, sv, fr)
Bokningsguide / kostnadskalkylator	Nej	Ja
Meddelandefält	Nej	Ja
Formulär	Demo-omdirigering till tacksida	Server-sidans `/api/forms`

11. Support

För temasupport, kontakta säljaren via butiken där du köpte Clenvica (mariastellatech.com).

När du begär hjälp, inkludera:

Dina inköpsuppgifter
Temaversion (HTML eller Next.js)
Webbhotellplattform (cPanel, Vercel, etc.)
Steg för att återskapa problemet
Skärmbilder eller felmeddelanden

Tips: behåll en säkerhetskopia av det ursprungliga uppackade paketet innan du gör större redigeringar.

Clenvica Temadokumentation: Användarguide HTML & Next.js