Brandora - Next.js 16 Creative Marketing Agency Template with Storefront

Brandora is a Next.js 16 template for creative studios, branding agencies, marketing teams and design consultancies — anyone who has to show the work, explain the thinking, hire well and sell a productised package without wiring up a shop. Built on the App Router with React 19 and TypeScript in strict mode, it ships 21 page templates covering 49 fully static routes, with case studies, articles, job listings and services driven entirely by MDX files. No CMS or backend required.

Whether you run a two-person brand studio, a full-service marketing agency, a design consultancy or a freelance practice selling fixed-scope packages, Brandora gives you every page a pitch needs — and a working basket for the ones you price up front. Content lives in MDX files: add a case study and it appears in the home page's strip, in the works 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 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 — Inter Display 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, tab strips and accordions are one TypeScript file

Included Pages and Templates

Core pages

• Home with a sideways-scrolling service strip, a results ticker, case studies and an FAQ

• About with a scroll-linked team row and a partner board

• Contact with an enquiry form and studio details

Work and services

• Works grid with 4 case study pages: challenge, overview, conclusion, client facts and a photo set

• 5 service pages with an overview, an impact statement and a five-step process

Journal

• Journal index with a five-tab filter strip and a Latest row

• 9 full-length articles with byline, hero, lede and pull quote

Careers

• Careers page with a culture section, a gallery ticker and a why-us list

• 10 job listings with position, location, type and a full description

Storefront

• Pricing table with monthly and one-time billing

• 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, 401 password-protected page and a 404 page

21 page templates. 49 static routes.

Easy Content Editing

Everything an agency changes lives in src/content/. Edit a file, rebuild, done.

• src/content/works/*.mdx — the 4 case studies: client, timeline, live URL, industry, scope, year and the photo set, with a three-part body

• src/content/blog/*.mdx — the 9 articles: read time, date, card and hero images, byline and lede

• src/content/careers/*.mdx — the 10 roles: position, location, type and the terms the listing prints

• src/content/services/*.mdx — the 5 services: publish date, photographs and impact statement

• src/content/plans.json — the 3 plans: features, price, 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 case study and it appears in the home strip, in the works grid and at its own route — with no component to touch.

Body copy is Markdown: headings at four type scales, paragraphs, lists, quotes and bold. 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

• 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 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

• 21 page templates covering 49 static routes

• 4 case studies, 9 articles, 10 job listings and 5 services as editable MDX

• 3 plans as JSON, with a working cart, checkout and confirmation flow

• The original stylesheet and self-hosted webfonts

• Full HTML documentation

• Changelog and third-party license file

Requirements

• Node.js 20 or newer

• npm 10 or newer, or pnpm, yarn or bun