GreenAxis is a Next.js 16 template for solar developers, clean energy firms, environmental consultancies and sustainability teams — anyone who has to show the projects, explain the services, publish the research, hire well and sell a subscription plan without wiring up a shop. Built on the App Router with React 19 and TypeScript in strict mode, it ships 24 page templates covering 53 fully static routes, with projects, articles, job listings and services driven entirely by MDX files. No CMS or backend required.

Whether you run a solar EPC, an ESG reporting practice, a green infrastructure consultancy or a climate non-profit, GreenAxis gives you every page a clean energy business needs — and a working basket for the plans you price up front. Content lives in JSON and MDX files: add a project and it appears in the project grid and at its own URL without touching a component, so you can launch in hours.

Tech Stack

• Next.js 16 — App Router, every route prerendered to static HTML at build time
• React 19 — server components by default, small client islands for the basket and the motion
• TypeScript — strict mode, npm run typecheck clean
• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
• Self-hosted webfonts — variable Urbanist as a single woff2, no third-party font requests at runtime
• MDX content layer — gray-matter frontmatter with a prose parser that renders into the design's own markup
• Working basket — localStorage-backed React state shared by every surface that prints it
• Zero animation libraries — the scroll reveals, scroll-linked sections, carousels, tab strips and accordions are one TypeScript file

Included Pages and Templates

Core pages

• Home with a hero parallax, a service strip, an innovator carousel, fanning value cards, a scroll-linked benefits sequence, rolling counters, testimonials and an FAQ
• About with a cross-fading slider, two background films with a play and pause control, and a process timeline
• Contact with an enquiry form, office details and an FAQ

Projects and services

• Project grid laid out as four rows of a wide tile and a narrow one
• 8 project pages with client, location, year, an overview, an approach note, a photo set and a technology summary
• Service list with a four row responsibility accordion
• 5 service pages with an overview, a why it matters section and a how we work section

Newsroom

• News index with two featured articles above a six card grid
• 8 full-length articles with published date, byline, category, a newsletter block and a read more strip

Careers

• Careers page with a culture section, a benefits grid and the open roles
• 8 job listings with category, location, salary range and employment type

Storefront

• Pricing table with monthly and yearly billing, plus a feature comparison grid
• 3 plan pages with a feature list and a buy box, and 3 plan category pages
• Cart drawer, checkout, PayPal checkout and order confirmation

Utility pages

• Style guide, licenses, changelog, terms and conditions, privacy policy, 401 password protected page and a 404 page

24 page templates. 53 static routes.

Easy Content Editing

Everything a clean energy business changes lives in src/content/. Edit a file, rebuild, done.

• src/content/projects/*.mdx — the 8 projects: client, location, year, the photo set, an approach paragraph and a two-part body
• src/content/news/*.mdx — the 8 articles: published date, byline, category, card and hero images, excerpt and the three related articles
• src/content/careers/*.mdx — the 8 roles: category, location, salary range, employment type and the chips the listing prints
• src/content/services/*.mdx — the 5 services: the numeral the list prints, a summary and a hero image
• src/content/plans.json — the 3 plans: features, both prices, billing options and the copy the buy box prints

Each file states its own order, so the sequence the design was built around lives with the content instead of in a separate index. Add a project and it appears in the project grid and at its own route — with no component to touch.

Body copy is Markdown: headings at two type scales, paragraphs, lists, bold and the one full-width figure an article carries. A prose parser places each block inside the design's own markup, so the words stay editable and the layout stays exact.

Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the :root block at the top of public/assets/css/styles.css. Change a value there and it propagates across every page.

Performance and SEO

• Every route prerendered as static HTML, ready for a CDN
• Per-page title, description and Open Graph and Twitter card metadata
• Absolute share-image URLs so link previews resolve
• Self-hosted variable font with font-display: swap and zero third-party requests
• Lazy-loaded imagery with responsive srcset on every photograph
• Semantic markup with one H1 per page, real buttons, a skip link and landmarks
• Roving tabindex on the tab strips and the billing pills, keyboard-reachable mega-menu and drawer
• Full prefers-reduced-motion support, and readable with JavaScript off

Deployment

Deploys to Vercel, Netlify, Cloudflare Pages or any static host. npm run build prerenders every route; there is no server, no database and no API to configure. The basket is browser-side, so it works on a static host as shipped.

What You Get

• The complete Next.js 16 project source
• 24 page templates covering 53 static routes
• 8 projects, 8 articles, 8 job listings and 5 services as editable MDX
• 3 plans as JSON, with a working cart, checkout and confirmation flow
• The original stylesheet, self-hosted webfont and two background films
• Full HTML documentation
• Changelog and third-party license file

Requirements

• Node.js 20 or newer
• npm 10 or newer, or pnpm, yarn or bun