Egnis is a Next.js 16 template for video production studios, editing houses, content agencies and creators — anyone who is judged on their reel before a client reads a word. Built on the App Router with React 19 and TypeScript in strict mode, it ships 20 page templates covering 41 fully static routes, with the case studies, articles and plan pages driven by MDX files and every repeated list on a page by JSON. A working basket and a three-page checkout run in the browser. No CMS or backend required.

Whether you run a post-production house, a social-video team, an events film crew, a one-person edit suite or a full creative agency, Egnis gives you every page the sale needs — five project case studies with their own client sheets, a twelve-article journal with category tabs, a services page, three pricing plans with monthly and yearly billing, and a checkout that takes the booking. Content lives in files: add a case study and it appears on the projects page, under its category tab, in the home page's strip of three 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 throughout, with small client islands for the basket and the interaction layer
• 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 and Fira Mono 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
• Zero animation libraries — no jQuery, no GSAP, no Lenis: the character-level split text, scroll reveals, scroll-linked rails, carousel, marquee and smooth scrolling are one TypeScript file

Included Pages and Templates

Core pages

• Home with a hero title whose letters roll into place, a background film behind the copy, a services accordion that unfolds a photograph, a pinned testimonial rail driven by scroll position, an awards table that fills behind the row you hover, an FAQ accordion and a pricing grid
• About the studio with a founder panel, a team grid, an awards table, statistics and a cross-fading review carousel
• Services with four wide service rows, a looping client-logo marquee and a background film
• Contact with an enquiry form, the studio details and an FAQ accordion

Work

• Projects index with category tabs and 5 case study pages: client, project type, duration, status, tags, two plates and a two-part write-up

Journal

• Journal index with six keyboard-navigable category tabs and 12 full-length articles with author, published date, reading time, a pull quote and a plate

Storefront

• Pricing grid with 3 plans, each with a Monthly / Yearly switch that moves the price
• 3 plan buy pages with an option picker, a live price and Add to Cart
• A category page listing the same plans in the design's plainer layout
• Slide-out basket, checkout, PayPal checkout and order confirmation

Utility pages

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

20 page templates. 41 static routes.

Easy Content Editing

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

• src/content/blog/*.mdx — the 12 articles: category, author, published date, reading time, card and hero images, the pull quote and the body
• src/content/works/*.mdx — the 5 case studies: category, client sheet, tags, card and hero images and a two-part write-up
• src/content/products/*.mdx — the 3 buy pages: the plan's own write-up and the fields the basket stores
• src/content/services.json — the 4 services, as the home page draws them and as the services page draws them
• src/content/plans.json — the 3 pricing cards: both prices, the feature list and both of the layouts the design gives them
• src/content/categories.json — the category page
• src/content/featured-posts.json — the 4 articles the home page and the services page feature
• src/content/layout.json — the tab bars and the plates the design shares across a whole family

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 an article and it appears on the journal page, under its category tab and at its own route — with no component to touch.

Body copy is Markdown: headings, 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. Frontmatter's split says how many blocks fall above the plate and pull quote the design sets in the middle, which keeps an article one document you can read top to bottom.

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.

The Basket

A real working basket, in localStorage, with no payment provider to configure. Each plan is sold Monthly or Yearly and the two are separate lines, because they are not the same money. The header count, the drawer, both checkout summaries and the confirmation page read one store, so they always agree. Point placeOrder() at your own endpoint to go live.

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
• Background films are preload="none" and play only once scrolled to
• Semantic markup with one H1 per page, real buttons, a skip link and landmarks
• Keyboard-reachable tabs, accordions, carousel, basket and forms
• 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.

What You Get

• The complete Next.js 16 project source
• 20 page templates covering 41 static routes
• 12 articles, 5 case studies and 3 buy pages as editable MDX
• Five JSON files covering every repeated list in the design
• A working basket and a three-page checkout
• The original stylesheet, four background films 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