Waida Studio
A creative studio sells taste before it sells a service. Clients judge the studio's own website the way they will judge their future brand, so it has to feel crafted, confident and unmistakably designed. Minux opens with exactly that — a monochrome "Building Identity Beyond" hero set in Poppins with a flowing script accent, running ruler marks along every frame, and a service carousel that turns the studio's offer into something you can flick through. Built on the Next.js 16 App Router with React 19 and TypeScript in strict mode, it ships 16 page templates covering 36 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 a branding agency, a design studio, a creative direction practice or a digital product team, Minux gives you every page the pitch needs — four service pages with what is included and delivered, seven case studies with the challenge, the solution and two headline results each, twelve full-length journal articles filed under three categories, and a pricing page comparing three engagement models. Content lives in files: add a case study and it appears in the work grid 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 — Poppins, B612 Mono, Inter and Mea Culpa 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 running rulers, the letter-by-letter titles, the service carousel, the team slider, the shrinking award cards and the smooth wheel scroll are one TypeScript file
Included Pages and Templates
Core pages
Home with the "Building Identity Beyond" hero, a four-card service carousel, a featured project, the process, a breathing showreel, a cross-fading team slider, client logos, pricing tabs, testimonials, a blog rail and an FAQ accordion
About with the vision, stacked award cards that shrink as you scroll, the process, the client logos and the team
Pricing with three engagement models and a key-features table
Contact with a labelled enquiry form and the FAQ
Services
Services index with the process and the FAQ, and 4 service pages: web design, brand identity, creative direction, and motion and 3D, each with what is included and what is delivered
Work
Work index with a featured project over the grid, and 7 case studies: client, industry, year and services, the challenge and the solution, and two headline results each
Blog
Blog index with All, Insights, Design and Trends tabs, and 12 full-length articles on brand direction, identity, web design and the creative process
Utility pages
Style guide, instructions, licenses, changelog, a 401 password-protected page and a 404 page
16 page templates. 36 static pages.
Easy Content Editing
Everything you change lives in `src/content/`. Edit a file, rebuild, done.
`src/content/services/*.mdx` — the 4 services: the title, the tags, the statement and summary, what is included, what is delivered, and the card and gallery pictures
`src/content/work/*.mdx` — the 7 case studies: the client, industry, year and services, the tags, the summary, the challenge and the solution, the two results, the pictures, and the two projects shown under each
`src/content/blog/*.mdx` — the 12 articles: the title, the date, the category tab it is filed under, the card and banner pictures, and the body
`src/content/layout.json` — which posts the blog rail shows, which project is featured, and the home carousel's pictures
Every card reads the item's own entry, so a retitled article is retitled on the blog index, in its category tab and in the blog rail at once — with no component to touch. Tags print however many you give an item.
Article bodies are Markdown: headings, sub-headings, 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 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 36 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 lays out to the same height as the original at four widths. The stylesheet is the original, with two rules added so no page scrolls sideways on the smallest phones, and every page was swept for horizontal overflow from 320 to 1920 pixels wide with the menu open. Every interaction was driven on both and leaves the same state behind. The header, the footer and three shared sections, and 254 copies of four 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 throughout
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 36 static pages
4 services, 7 case studies and 12 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
36 static pages. 7 case studies. 12 articles.
MDX services, work and blog with category tabs.
Next.js 16. React 19. TypeScript. Fully static.