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)