Puchix is a premium, production-ready template for digital marketing agencies, creative studios, branding consultancies, and any service business that sells productised packages. Built on Next.js 16, React 19, and TypeScript, it ships with 20 page templates covering 37 prerendered routes, an MDX-powered blog, portfolio and package catalogue, a working storefront with cart and checkout, 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 bright, confident interface built around scroll-driven motion and pointer-tracked hovers. Every article, case study, package, and listing order lives in an MDX or JSON file — so you can launch a real agency site, portfolio and storefront in hours without touching the component code.

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

Tech Stack

• Next.js 16 — App Router, server components, all 37 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one script layer plus the cart
• TypeScript — strict mode, fully typed
• MDX — blog posts, case studies, and packages 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 — Urbanist served locally, no third-party font CDN
• Client-side storefront — cart and order state in localStorage, no database, no vendor SDK

Included Pages and Templates

• Home — a scroll-driven story: the animated hero, a logo belt, the studio intro, the why-choose-us row, the founder quote, services, a scroll-panned project row, the process timeline, statistics, testimonials, and the FAQ
• About — the studio story, company history, expertise, a scroll-linked awards list, global presence, the team strip that tracks your cursor, and three featured articles
• Service — the services accordion, the why-choose-us comparison, testimonials, the team strip, and the FAQ
• Works — the portfolio grid with animated tile reveals, plus 6 case study pages carrying a hero, a three-shot gallery, a services/client/year box, and related work
• Blog — two featured posts above a grid with 5 category tabs, plus 11 MDX articles with a hero, share row, and a similar-posts strip
• Pricing — the package comparison table, plus 3 package detail pages with scope, timeline, and add-to-cart
• Storefront — cart drawer in the navigation bar, checkout with shipping and billing address forms, a PayPal checkout variant, and an order confirmation page
• Contact — enquiry form, office details, and the shared FAQ
• Utility — Style Guide, Changelog, License, Privacy Policy, Terms & Conditions, 401 (password), 404

20 page templates, 37 prerendered routes.

Easy Content Editing

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

• Blog posts — src/content/blog/*.mdx. Frontmatter carries the title, date, category, and the hero and mid-article images. The body is ordinary Markdown, written as the two halves the design breaks an article around, separated by a rule. No special syntax to learn.
• Case studies — src/content/works/*.mdx. Frontmatter carries the title, the standfirst, the services, client and year, the hero, and the three gallery shots; the body is two Markdown halves.
• Packages — src/content/products/*.mdx. Frontmatter carries the name, tagline, price, timeline, scope, services, and the SKU the basket stores the item under.
• Listing order — src/content/collections.json records what a per-item file cannot state: which two posts are featured, the five category tabs, the three each post links on as similar, the works grid order, the four the home page pans through, the two each case study links on as related, and the pricing table order. Every listing card lives here too, so editing an article never changes how it looks in a grid.
• 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, FAQ, reviews and team — shared components edited once in src/components/.

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 37 routes prerendered, including every MDX article, case study, and package page
• Lazy-loaded imagery throughout, AVIF artwork
• 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
• Keyboard-navigable tabs and menus, and 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
• 20 page templates covering 37 prerendered routes
• MDX content collections: 11 blog articles, 6 case studies, and 3 packages, plus the listing order as JSON
• A working cart and checkout flow, ready to point at your payment provider
• 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)