Mariq - Next.js 16 Creative Marketing Agency Template

Mariq is a premium, production-ready template for marketing agencies, branding studios, growth consultancies, creative teams, and independent professionals. Built on Next.js 16, React 19, and TypeScript, it ships with 19 pre-built page templates, an MDX-powered blog, JSON-driven case studies and service plans, a working cart and checkout flow, and a fully editable content layer — no CMS or backend required.

Every piece of content lives in JSON or MDX files, so you can launch a real client site in hours without touching the component code.

Tech Stack

• Next.js 16 — App Router, server components, static-first rendering

• React 19 — latest concurrent features

• TypeScript — strict mode, fully typed

• MDX — for blog articles via next-mdx-remote

• Hand-crafted CSS — one plain stylesheet, no utility framework and no build-time CSS pipeline to learn

• Self-hosted fonts — Anton, Geist, Exo, Varela Round and Droid Sans shipped as local woff2 files, with no third-party font requests at runtime

• Zero backend lock-in — no CMS, no font CDN, no commerce backend dependency

Included Pages and Templates

• Homepage — bold hero with a pointer-reactive collage, client logo row, services overview, 3D-flipping project cards, testimonial wall, pricing, FAQ, and a pinned horizontal-scroll quote section

• About — agency story, values, team, milestones, and animated statistics

• Projects — listing page plus 8 case studies with a detail template covering results statistics, client quotes, and conclusions

• Blog — category-tabbed listing plus 12 MDX articles with a detail template

• Pricing — pricing overview plus per-plan detail pages with feature breakdowns and FAQ

• FAQ — accordion-driven question set

• Careers — open roles and culture

• Contact — contact details and form, plus a shared "book an intro call" modal

• Checkout, PayPal Checkout, and Order Confirmation — cart-aware flow (no real payment wired; UI demo)

• Utility — style guide, license, changelog, 401 password protected, and 404

Everything prerenders to static HTML — 39 routes, all faithful to the original design.

Easy Content Editing

All editable content lives in the project's src/content folder — you never have to touch component code to launch the site. Update these files in any text editor:

• blog/*.mdx — blog articles: frontmatter for title, category, images, author, date, and reading time; Markdown for the body

• blog-categories.json — the order of the tab bar on the blog index

• projects.json — case studies: title, excerpt, services, year, client, images, three result statistics, conclusion, and the client quote

• products.json — service plans: name, tagline, icon, price, cart price, badge, and feature list

Add or edit a file and its page updates on the next build — the listing, the detail route, and the "related" strips all pick it up automatically. Every other page is a plain page.tsx you can edit directly, and the navbar, footer, contact modal, and cookie notice are shared components edited once.

Performance and SEO

• Server-rendered, static-first pages out of the box (App Router) — every route prerenders to static HTML

• Self-hosted fonts and images — no third-party CDN requests at runtime

• Lazy-loaded imagery throughout

• Open Graph and Twitter card metadata on every page

• Semantic HTML structure and a route-aware active navigation state

• 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 and TypeScript source code

• 19 pre-built page templates

• Sample content — 8 case studies, 12 blog posts, 2 service plans

• Self-contained HTML documentation

• Comprehensive README with setup and content-editing guide

• Friendly buyer support

Requirements

• Node.js 20 or higher

• Basic familiarity with the command line

• A text editor (VS Code recommended)