Complete installation and user guide for Clenvica cleaning website themes in HTML and NextJS - setup, customization, forms, images, SEO, and deployment.

HTML & Next.js User Guide

This guide covers both Clenvica versions:

HTML version - static HTML5 theme, no Node.js required
Next.js version - full React/Next.js theme with multi-language, advanced forms, and extra features

Use the sections below for the version you purchased. If you own both, keep this document as your single reference.

1. What’s included

Both versions include

Home page and full inner page set (services, pricing, projects, blog, gallery, team, testimonials, FAQ, areas, careers, contact, quote, legal pages)
Mobile-friendly responsive layout
Dark mode
Cookie consent banner
Floating call and WhatsApp buttons
FAQ accordion, gallery lightbox, and before/after slider
Demo images, logo placeholder, favicon, sitemap, and robots file

Next.js only

Multi-language support (English, German, Swedish, French, Spanish)
Booking wizard and cost calculator
Announcement bar (toggle on/off)
Server-side forms via /api/forms (Resend, SMTP, or webhook)
Centralized text in locale files
Feature toggles for pages, menus, and UI elements

HTML only

Simple static setup - upload and publish
SEO-friendly baked HTML copy (edit text directly in page files)
Demo forms only (redirect to thank-you page)

2. Requirements

Requirement	HTML	Next.js
Node.js / npm	Not required	Required (Node 18+ recommended)
Text editor	Yes	Yes
Hosting	Any static host (cPanel, Netlify, Vercel, etc.)	Node-compatible host or static export host if configured
Build step	No	Yes (`npm run build`)

3. Installation

3.1 HTML version - installation

Unzip the html package on your computer.
Upload all files and folders to your hosting root (usually public_html).
Open your domain in a browser. The home page is index.html.

Supported hosts: cPanel/shared hosting, Netlify, Vercel, Cloudflare Pages, GitHub Pages, and any static file server.

Local preview: open index.html in your browser. If scripts or paths look broken, use Live Server (VS Code/Cursor extension) or any local static server.

3.2 Next.js version - installation

Unzip the nextjs package.
Open a terminal in the project folder.
Install dependencies:
```
npm install
```
Copy environment file:
```
cp .env.example .env.local
```
Start development server:
```
npm run dev
```
Visit http://localhost:3000 (default language route is usually /en).

Production build:

npm run build
npm run start

Recommended deployment: Vercel, or any platform that supports Next.js App Router.

4. First-time setup checklist

Complete these steps for your live site:

Replace demo brand name, phone, email, and address
Replace demo domain URLs in sitemap, robots, canonical/meta tags
Replace logo and favicon
Replace demo photos in the images folder
Update service areas and business copy
Test contact/quote/newsletter forms
Test mobile menu, dark mode, and key pages

5. Customization guide

5.1 Business details

What to change	HTML	Next.js
Brand, phone, email, address, hours	`assets/js/config.js`	`src/config/site.ts`
Feature toggles (dark mode, cookies, floating buttons, etc.)	`assets/js/config.js` → `features`	`src/config/site.ts` → `features`
Designer credit link (Theme Designed by Maria Stella Tech)	Footer HTML link (remove line to hide)	`features.designerCredit` in `site.ts`

Important (HTML): after changing phone/email in config.js, also search HTML files for old tel:, mailto:, and visible phone/email text and update those links.

5.2 Website text and content

Task	HTML	Next.js
Page headings, paragraphs, menus, FAQ, blog content	Edit each page `.html` file directly	Edit locale files in `src/locales/` (start with `en.ts`)
SEO title and meta description	Edit `<title>` and `<meta name="description">` in each HTML page	Handled via locale + SEO config (`src/config/seo.ts` and page metadata)
Enable/disable pages and menu items	Manual (edit navigation links in HTML)	`src/config/pages.ts`

5.3 Images and media

Asset	HTML	Next.js
Hero, about, projects, blog, gallery images	`images/` (keep filenames)	`public/images/` (keep filenames)
Image path mapping	Edit `src` in HTML `<img>` tags if needed	`src/config/media.ts`
Logo / favicon	`logo.svg`, `favicon.ico`	`public/logo.svg`, `public/favicon.ico`

See images/README.md (HTML) or public/images/README.md (Next.js) for recommended image sizes.

5.4 Colors and branding

HTML: edit CSS variables in assets/css/main.css (search --color-primary).
Next.js: edit theme variables in src/app/globals.css.

5.5 Next.js-only features

Multi-language

Languages included: English, German, Swedish, French
Edit copy in src/locales/en.ts, de.ts, sv.ts, fr.ts
Language settings in src/config/site.ts

Announcement bar

Toggle: features.announcementBar in src/config/site.ts
Text: announcement section in locale files
Link target: announcementHref in site.ts

Booking wizard & cost calculator

Available on Next.js quote/pricing flows
Not included in HTML version

6. Forms and email

6.1 HTML version (demo forms)

By default, contact, quote, and newsletter forms do not send email. They prevent default submit and redirect to the thank-you page.

To receive real submissions, connect a third-party service:

Formspree
Getform
Web3Forms
EmailJS
Your own endpoint

Update form handling in assets/js/main.js (initForms()) or set form action attributes.

6.2 Next.js version (production forms)

Forms submit to /api/forms with server-side validation and delivery.

Configure .env.local:

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

Provider examples:

Resend: EMAIL_PROVIDER=resend + RESEND_API_KEY
SMTP: EMAIL_PROVIDER=smtp + SMTP host/user/pass settings
Webhook: EMAIL_PROVIDER=webhook + EMAIL_WEBHOOK_URL

Newsletter integrations and optional security settings are documented in .env.example, CUSTOMIZATION.md, and DOCUMENTATION.md.

7. SEO setup

7.1 Domain and indexing files

Replace clenvica.example.com with your real domain
Update sitemap.xml and robots.txt
Update canonical and Open Graph URLs in page metadata

7.2 On-page SEO

HTML: edit each page’s title, meta description, and visible H1/H2 content directly in HTML files
Next.js: edit locale SEO strings and src/config/seo.ts

7.3 Recommended launch checks

Submit sitemap in Google Search Console
Verify all pages return 200 status
Check mobile layout and page speed
Confirm contact details and CTA links are correct

8. Folder structure

HTML package

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 package

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

9. Troubleshooting

HTML

Styles/scripts not loading locally: use Live Server instead of opening files directly.
Changes not visible online: re-upload edited files and hard refresh (Ctrl+F5).
Broken images: verify file path and filename case (Linux servers are case-sensitive).
Forms not emailing: expected in demo mode; connect a form service.

Next.js

npm install fails: use Node 18+ and retry with a clean install.
Forms not sending: check .env.local provider settings and restart dev server.
Wrong language route: verify supportedLanguages and locale files.
Build errors: run npm run lint and fix TypeScript/env issues.

10. Version differences (quick reference)

Feature	HTML	Next.js
Installation	Upload static files	`npm install` + build/deploy
Edit text	HTML files	Locale files
Multi-language	No	Yes (en, de, sv, fr)
Booking wizard / cost calculator	No	Yes
Announcement bar	No	Yes
Forms	Demo thank-you redirect	Server-side `/api/forms`

11. Support

For theme support, contact the seller through the store where you purchased Clenvica (mariastellatech.com).

When requesting help, include:

Your purchase details
Theme version (HTML or Next.js)
Hosting platform (cPanel, Vercel, etc.)
Steps to reproduce the issue
Screenshots or error messages

Tip: keep a backup of the original unzipped package before making major edits.

Clenvica Theme Documentation: HTML & Next.js User Guide