Clenvica Temadokumentation: Användarguide HTML & Next.js

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

3. Installation

3.1 HTML-versionen - installation

1. Packa upp html-paketet på din dator.
2. Ladda upp alla filer och mappar till roten av ditt webbhotell (vanligtvis public_html).
3. Ö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

1. Packa upp nextjs-paketet.
2. Öppna en terminal i projektmappen.

3. Installera beroenden:

   npm install

4. Kopiera miljöfilen:

   cp .env.example .env.local

5. Starta utvecklingsservern:

   npm run dev

6. 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:

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

5. Anpassningsguide

5.1 Företagsuppgifter

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

5.3 Bilder och media

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)

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.