Zelda is a premium, production-ready template for creative studios, design agencies, portfolios, and freelance designers. Built on Next.js 16, React 19, and TypeScript, it ships with 40+ pre-built pages, MDX-powered case studies, a shop and a blog with automatic detail pages, JSON-driven pricing plans 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 project, shop item, and blog post is a Markdown/MDX file, and the pricing plans are plain JSON — so you can launch a real client site in hours without touching the component code.

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

Tech Stack

• Next.js 16 — App Router, server components, all 43 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one client component
• TypeScript — strict mode, fully typed
• MDX — projects, shop items, and blog posts via next-mdx-remote (frontmatter parsed with gray-matter)
• Hand-crafted CSS design system — brand colors as CSS custom-property tokens in one :root block; re-theme everything in one place
• Self-hosted fonts — Creato Display & Droid Sans 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 — hero, services, selected works, horizontal scroll gallery, pricing, testimonials, recent articles, FAQ, sticky CTA
• About — animated intro, "Meet Our Team" hover gallery, awards accordion, testimonials
• Work — projects listing plus 5 case-study detail pages (with Related Works) and 4 work-tag archive pages
• Shop — indexed shop listing plus 7 product-item detail pages (overview, feature lists, Related Items)
• Blog — article listing plus 6 MDX posts with a detail template, Q&A sections, and Related Blogs
• Pricing — plan comparison (Starter / Pro) with FAQ
• Products — 2 JSON-driven pricing-plan pages with add-to-cart
• Categories — 2 product-category pages driven from the same data
• Contact — contact info and form
• Commerce — cart modal, Checkout, PayPal Checkout, Order Confirmation (UI demo, no real payment)
• Utility — Changelog, Style Guide, License, 401 (password), 404

Easy Content Editing

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

• Projects — src/content/works/*.mdx (frontmatter + Markdown body). Add a file to publish a new case study; the listing, detail page, tag archives, and Related Works rail pick it up automatically.
• Shop items — src/content/shops/*.mdx. Frontmatter holds the code, category, year, and feature lists; the body is the overview.
• Blog posts — src/content/blog/*.mdx. Add a file to publish a post; the listing, detail page, and Related Blogs section update automatically.
• Pricing plans — src/content/products.json drives the product pages, the category pricing pages, and the cart — change a price once and it propagates everywhere.
• Theme — brand colors are CSS custom properties at the top of public/assets/css/styles.css — change them once to re-skin the whole site.
• Header & footer — shared components edited once in src/components/layout/ (including the cart modal).

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 43 routes prerendered, including every MDX detail page
• Responsive imagery via native srcset
• Self-hosted fonts and videos — no third-party CDN requests at runtime
• Per-page titles, descriptions, and Open Graph metadata via the Next.js Metadata API (generateMetadata on dynamic routes)
• Semantic HTML structure and clean, crawlable URLs

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
• 40+ pre-built pages covering every template section
• MDX content collections: 5 project case studies, 7 shop items, and 6 categorized blog posts, plus 2 JSON pricing plans
• 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)