Brands no longer buy reach; they buy the creators people already trust and the short videos those creators make. Relab opens with exactly that — a bold "Influencer Short Video Agency" headline, a creator portrait you can switch between three featured creators, and the platforms they post on. Built on the Next.js 16 App Router with React 19 and TypeScript in strict mode, it ships 16 page templates covering 27 fully static pages, with the services, case studies and articles driven by MDX files you edit directly. No CMS or backend required.

Whether you run an influencer marketing agency, a UGC or short-form video studio, a creator management company or a social-first marketing team, Relab gives you every page the pitch needs — three service pages with a four-step process and an FAQ, five case studies with client, industry, results and a quote, six full-length articles, and three pricing packages side by side. Content lives in files: add a case study and it appears on the case studies page and at its own URL without touching a component.

Tech Stack

• Next.js 16 — App Router, every page prerendered to static HTML at build time
• React 19 — server components throughout, with one small client island for 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 — Averia Sans Libre, Hanken Grotesk, Inter Tight and Geist as woff2, no third-party font requests at runtime
• MDX content layer — gray-matter frontmatter with a Markdown parser that renders into the design's own markup
• Zero animation libraries — no jQuery, no GSAP, no Lenis: the scroll reveals, the character-by-character hovers, the sliders, the scroll-driven creator cards and the smooth wheel scroll are one TypeScript file

Included Pages and Templates

Core pages

• Home with a creator switcher under the hero, four creator cards that glide in from the corners as you scroll, a services slider, three featured case studies, capability cards whose tag chips drop into place, a process slider, featured-brand tabs, a drifting photo strip, a background film with a real play/pause control, pricing, eight client stories and two articles
• About with the agency story, an autoplaying values slider, the team and the awards
• Services with the three offers and an FAQ accordion
• Pricing with three packages side by side
• Contact with a labelled enquiry form

Services

• 3 service pages, each with a four-step process, a running band of type and an FAQ

Case studies

• Case studies index with the featured brands, and 5 case study pages: the client, industry, year and service, the brief, two headline results and a client quote

Blog

• Blog index and 6 full-length articles covering campaign strategy, KOCs, hooks and short-form trends

Utility pages

• Style guide, instructions, licenses, changelog, a 401 password-protected page and a 404 page

16 page templates. 27 static pages.

Easy Content Editing

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

• src/content/services/*.mdx — the 3 services: the title, the platforms, the headline, the four steps, the running band and the card scene
• src/content/case-studies/*.mdx — the 5 case studies: the tags, the client, industry, year and service, the two results, the quote, and the card and banner pictures
• src/content/blog/*.mdx — the 6 articles: the category, the card and banner pictures, and the body
• src/content/layout.json — which articles, case studies and services the home page features, and which appear under every article and case study

Every card reads the item's own entry, so a retitled article is retitled on the blog index, on the home page and under every other article at once — with no component to touch.

Article bodies are Markdown: sub-headings, bold lead-ins, paragraphs and full-width pictures. A parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. Reach past that grammar and the build stops and names the file, rather than rendering something the design has no styling for.

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

Verified Against the Original

All 27 pages were compared against the original template tag for tag, attribute for attribute and text run for text run — in the body and in the head — and every page's rendered height was checked at four widths. The stylesheet is the original, used unchanged. The header, footer and closing call to action, and 812 copies of three repeated primitives, are components that render the original markup exactly.

Performance and SEO

• Every page 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 the photographs
• Semantic markup with one H1 per page, real buttons and landmarks
• Keyboard-reachable menu, accessible tabs with arrow-key support, FAQ rows built on real buttons
• 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 page; there is no server, no database and no API to configure.

What You Get

• The complete Next.js 16 project source
• 16 page templates covering 27 static pages
• 3 services, 5 case studies and 6 articles as editable MDX
• 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