STUDIO.ARCH is a premium, production-ready template for architecture studios, interior designers, landscape architects, and property developers. Built on Next.js 16, React 19, and TypeScript, it ships with 41 pre-built pages, an MDX-powered journal, portfolio, and services system, plan pages with a working cart, and a fully editable content layer — no CMS or backend required.

It's styled with a hand-crafted CSS design system (no utility-framework lock-in) and a self-contained interaction layer. Every article, project, and service is a Markdown/MDX file — so you can launch a real studio site in hours without touching the component code.

Live demo: https://studioarch-nextjs.vercel.app

Tech Stack

• Next.js 16 — App Router, server components, all 42 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one client component
• TypeScript — strict mode, fully typed
• MDX — journal, projects, and services via next-mdx-remote (frontmatter parsed with gray-matter), served by [slug] dynamic routes
• Hand-crafted CSS design system — colors, type scale, and spacing as CSS custom-property tokens in one :root block; re-theme everything in one place
• Self-hosted fonts — Creato Display served locally, no third-party font CDN
• Zero backend lock-in — no CMS, no commerce backend; the cart persists in localStorage

Included Pages and Templates

• Home — full-bleed hero with a preloader curtain, studio intro, animated odometer counters, featured projects with scroll-linked card scaling, services overview, approach section, testimonial slider, and a text marquee
• About — studio story, a three-step "vision to execution" walkthrough, proudest project, awards, and the team grid
• Works — editorial masonry portfolio listing plus 8 project case-study pages with fact cards, a rich-text overview, and a three-image gallery
• Services — 6 service detail pages: architectural design, sustainable design, landscape design, urban planning, project management, and interior design
• Store — priced listings filtered across four discipline tabs
• Pricing — plan comparison with a Monthly/Yearly toggle
• Journal — category-filtered listing plus 6 MDX posts with a detail template, drop-cap opening, term list, and social sharing, plus 3 category index pages
• Plans — 2 plan detail pages with feature lists, an FAQ accordion, and add-to-cart
• Commerce — mini-cart drawer, Checkout, PayPal Checkout, Order Confirmation (UI demo, no real payment)
• Utility — Style Guide, License, Changelog, 401 (password), 404

Easy Content Editing

No CMS needed — content lives in editable files you can change in any text editor:

• Journal posts — src/content/blog/*.mdx (frontmatter + Markdown body). Add a file to publish a new post; the listing, category page, and detail page pick it up automatically.
• Projects — src/content/projects/*.mdx, same pattern (drives the /projects/<slug> case studies).
• Services — src/content/services/*.mdx, same pattern.
• Plans and store listings — src/content/products.json and listings.json drive the pricing grid, both plan pages, the cart, and the store tabs from one source each.
• Grid layout — blog-layout.json and project-layouts.json record which item sits in which grid slot, so you can rearrange the editorial grids without touching a component.
• Theme — brand colors, fonts, type scale, and spacing are CSS custom properties at the top of public/assets/css/styles.css — change them once to re-skin the whole site.
• Header, footer & cart — shared components edited once in src/components/layout/.

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 42 routes prerendered, including every MDX post, project, and service
• Responsive imagery via native srcset, lazy-loaded throughout
• Self-hosted fonts — no third-party CDN requests at runtime
• Per-page titles and metadata via the Next.js Metadata API (generateMetadata on dynamic routes), with Open Graph and Twitter cards
• Semantic HTML structure, a route-aware active navigation state, and clean, crawlable URLs
• Every animation respects the reduced motion setting

Deployment

One-click deploy to Vercel — build settings are auto-detected. Also runs on Netlify, AWS Amplify, Cloudflare Pages, or any Node 20+ host.

What You Get

• Full Next.js 16 + TypeScript source code
• 41 pre-built pages covering every template section
• MDX content collections: 6 journal posts, 8 projects, 6 services, plus 2 plan pages and 14 store listings
• Self-contained HTML documentation
• Comprehensive README with setup and editing guide
• Friendly buyer support

Requirements

• Node.js 20 or higher
• Basic familiarity with the command line
• A text editor (VS Code recommended)