Introductory guide

You need Node 22.12 or newer. Run npm install once, then npm run dev for a local server on port 4321 that reloads as you edit. npm run check type-checks the templates and content collections, and it should stay quiet before you deploy.

Open src/config/site.ts first. It holds the site name and title template, the description, the absolute URL used for canonical links and the sitemap, the social sharing image, the footer credit line, and the phone number, email and address shown in the footer and on the contact page. Set the URL to your real domain before the first deploy, or the sitemap and canonical tags will point at the preview.

src/config/navigation.ts defines the header menu, the mega menu columns, the footer link groups and the social row, plus the ROUTES map every template links through. Renaming a route is a one-line change there rather than a search across templates. Remove a link from these lists and it disappears everywhere it appeared.

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 directories under src/pages, along with their entries in navigation.ts.

Everything the site lists lives in src/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 an order field that decides where it appears, and the schemas in src/content.config.ts fail the build if a field or an image is missing. Add a file to add a row.

Every design token the theme uses is declared in src/styles/theme.css. Change a value there 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 declared in the fonts array in astro.config.mjs, which downloads them at build time and serves them from your own domain.
• Swap a name there for the family you want, or change the provider to a local one and point it at your own WOFF2 files.
• Then repoint --font-family--title, --font-family--body and --font-family--number in src/styles/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.

The scroll reveals, the split-text headings and the smooth scrolling are GSAP and Lenis, driven from src/scripts 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 src/scripts/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 src/scripts/index.ts.
• Remove gsap and lenis from package.json and run the install again.
• Everything already honors prefers-reduced-motion, so you do not have to strip it for accessibility — only for weight.

The photography in src/assets/images is placeholder stock that is not licensed to you — replace it before launch. Files are referenced by name from the content collections, so dropping a replacement in with the same name keeps every layout intact. Astro encodes and sizes them at build time; supply the largest version you have.

npm run build writes a static site to dist, and npm run preview serves it exactly as it will be served in production. Any static host works — Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own bucket. Set the build command to npm run build and the publish directory to dist, and make sure the site URL in src/config/site.ts matches the domain you deploy to.