Greencore is a Next.js 16 template for sustainability consultancies, green service businesses, climate nonprofits, renewable energy firms and eco-product shops — anyone who has to show the work, publish the thinking behind it, and take an order at the end. Built on the App Router with React 19 and TypeScript in strict mode, it ships 22 page templates covering 47 fully static routes, with articles and case studies driven by MDX files and the shop, categories and plans by JSON. No CMS or backend required.

Whether you run a renewable energy consultancy, a landscaping and green-space business, an environmental nonprofit, a sustainability advisory or a shop selling eco-products, Greencore gives you every page the case needs — and a working basket for the products you sell. Content lives in files: add a project and it appears in the portfolio grid and at its own URL without touching a component.

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 product page
• 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 — Inter Tight and Poppins as 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, carousel, tab sets and lightbox are one TypeScript file

Included Pages and Templates

Core pages

• Home with three background films, a scroll-linked project rail, a mission statement that reveals illustrated cards, two slot-machine counters and an FAQ
• About us with the story, the team and the partner marquees
• Services with an animated services list and the process
• Contact with an enquiry form and office details

Projects

• Portfolio grid with 5 case study pages: client, location, year, a banner, a paged image gallery and a two-part write-up

Blog

• Blog index and 9 full-length articles with published date, reading time, author and category

Storefront

• Shop grid with 5 product pages, each with a quantity field and an add-to-cart form
• 5 category pages
• Cart drawer, checkout, PayPal checkout and order confirmation

Pricing

• Pricing table with monthly and yearly tabs
• 6 plan pages, one per plan per billing period, each with its feature list and price

Utility pages

• Early access, style guide, licenses, changelog, 401 password-protected page and a 404 page

22 page templates. 47 static routes.

Easy Content Editing

Everything you change lives in src/content/. Edit a file, rebuild, done.

• src/content/blog/*.mdx — the 9 articles: date, reading time, author, category, card and banner images
• src/content/projects/*.mdx — the 5 case studies: client, location, year, banner and image gallery, with a two-part body
• src/content/products.json — the 5 products: name, description, price, photographs and what the basket stores
• src/content/plans.json — the 6 plans: price, billing period, feature list and the card palette the design gives each one
• src/content/categories.json — the 5 category pages

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 portfolio grid and at its own route — with no component to touch.

Body copy is Markdown: two heading levels, paragraphs and lists. 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 fonts with font-display: swap and zero third-party requests
• Background films are preload="none" with poster frames, so nothing downloads until a visitor reaches them
• Lazy-loaded imagery with responsive srcset on every photograph
• Semantic markup with one H1 per page, real buttons, a skip link and landmarks
• Keyboard-reachable dropdown, tab sets, accordion, carousel and lightbox
• 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
• 22 page templates covering 47 static routes
• 9 articles and 5 case studies as editable MDX
• 5 products, 5 categories and 6 plans as JSON, with a working cart, checkout and confirmation flow
• The original stylesheet, self-hosted webfonts and three 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