Home
Instructions

Introductory guide

A short walkthrough of where everything lives, so you can make this theme your own without hunting for it.
Getting started

You need Hugo 0.158 or newer; the standard edition is enough. Run hugo server in exampleSite for a local server on port 1313 that reloads as you edit, and hugo --gc to build the site into exampleSite/public. Node.js is only needed to rebuild the stylesheet after you change tailwind/: npm install once, then npm run build:css.

Site name and URL

Open hugo.toml first. It holds the site title and the title template, the description, the base URL used for canonical links and the sitemap, the social sharing image, the footer credit line, and the phone number, email and offices shown on the four contact pages. Set baseURL to your real domain before the first deploy, or the sitemap and canonical tags will point at the preview.

Navigation and footer

The menus in hugo.toml define the header row, the three mega menu panels and their cards, the five footer link columns, the footer contact columns and the policy links. Each entry is a name, a URL and, for a mega menu link, an icon and a line under it. Remove an entry from these menus and it disappears everywhere it appeared.

Choosing a home page

The theme ships four complete versions of the site — all solutions in one at the root, and energy, ESG and environmental variants under their own prefixes. They are different designs rather than translations. Keep the one that fits your business and delete the other three folders under content, along with their entries in the menus.

Content

Everything the site lists lives in content as Markdown: posts, projects, solutions, team members, open roles, testimonials, pricing plans, FAQs, awards and more. Each file is front matter plus a body, each row carries a weight that decides where it appears, and an image named in front matter that does not exist fails the build. Add a file to add a row.

Fonts, colors and spacing

Every design token the theme uses is declared in tailwind/theme.css. Change a value there, run npm run build:css, and it propagates through the whole site — the templates ask for a token rather than naming a color.

1. Swapping the fonts

  • The three families are self-hosted: the files are in static/fonts and their rules in layouts/_partials/head/fonts.html, so the site makes no request to Google.
  • Drop your own WOFF2 files into static/fonts and point the rules in fonts.html at them.
  • Then repoint --font-family--title, --font-family--body and --font-family--number in tailwind/theme.css at the new families.
  • Keep a real fallback on each one, so the page is readable before the fonts arrive.

2. Changing the colors

  • The palette is the --color-* block in the same file: ink, muted, primary, off-white, olive, stroke and white.
  • --color-primary is the lime accent on buttons, highlights and active states; --color-ink is the near-black everything else sits on.
  • Check both the light bands and the dark footer after a change, and check the contrast of body text against its background.

Spacing and radii are variables in the same file. Prefer editing them over adding one-off utilities, so the rhythm stays consistent across pages.

Tailwind theme variables : https://tailwindcss.com/docs/theme
Motion, and how to change or remove it

The scroll reveals, the split-text headings and the smooth scrolling are GSAP and Lenis, driven from assets/js rather than from anything in the markup. Nothing is hidden until a script runs, so removing the motion leaves a working site rather than a blank one.

1. Tuning the animations

  • Open assets/js/motion.ts, which is where every timeline is built.
  • Durations, easings and stagger amounts are named constants at the top of the file.
  • Elements opt in through data attributes in the templates, so removing an attribute drops that one reveal.

2. Removing it entirely

  • Delete the initMotion() and initSmoothScroll() calls from assets/js/index.ts.
  • Then delete their imports from index.ts and the vendor/gsap and vendor/lenis folders, which nothing else in assets/js uses.
  • Everything already honors prefers-reduced-motion, so you do not have to strip it for accessibility — only for weight.
Images

The photography in assets/images is placeholder stock that is not licensed to you — replace it before launch. Files are named from front matter and the templates, so dropping a replacement into your site’s own assets/images with the same name keeps every layout intact. Hugo encodes and sizes them at build time; supply the largest version you have.

Build and deploy

hugo --gc writes a static site to exampleSite/public, and hugo server shows it as it will be served. Any static host works — Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own bucket. Set the build command to hugo --gc and the publish directory to public, and make sure baseURL in hugo.toml matches the domain you deploy to.

Host and deploy a Hugo site : https://gohugo.io/host-and-deploy/