Waida Studio
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
Highlight Bullet Points
27 static pages. 3 services. 5 case studies.
MDX services, case studies and blog.
Next.js 16. React 19. TypeScript. Fully static.