Clenvica Theme Documentation: HTML & Next.js User Guide

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

3. Installation

3.1 HTML version - installation

1. Unzip the html package on your computer.
2. Upload all files and folders to your hosting root (usually public_html).
3. 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

1. Unzip the nextjs package.
2. Open a terminal in the project folder.

3. Install dependencies:

   npm install

4. Copy environment file:

   cp .env.example .env.local

5. Start development server:

   npm run dev

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

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

5. Customization guide

5.1 Business details

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

5.3 Images and media

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)

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.