ShieldifyVPN is a Next.js 16 template for a VPN, privacy tool or security product — anything sold on the promise that a connection is encrypted and a company keeps no logs. Built on the App Router with React 19 and TypeScript in strict mode, it ships 23 page templates covering 38 fully static pages, with the articles, job openings and plan pages driven by MDX files and every repeated list on a page by JSON. A working basket and a full checkout run in the browser. No CMS or backend required.

Whether you are launching a consumer VPN, a privacy suite, a password manager, a secure-browsing extension or a security SaaS, ShieldifyVPN gives you every page the sale needs — a feature grid, a server network with five regions, three subscription plans with their own buy pages and category pages, a nine-article journal with category filters, four job openings, and a checkout that takes the order. Content lives in JSON or MDX files, so you can launch in hours: add an article and it appears at its own URL without touching a component.

Tech Stack

• Next.js 16 — App Router, every page prerendered to static HTML at build time
• React 19 — server components throughout, with small client islands for the basket and the interaction layer
• TypeScript — strict mode, npm run typecheck clean
• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
• Self-hosted webfonts — Inter and Fira Code as woff2, no third-party font requests at runtime
• MDX content layer — gray-matter frontmatter with a prose parser that renders into the design's own markup
• Zero animation libraries — no jQuery, no GSAP, no Lottie player: the scroll reveals, the page-load stagger, the four illustrations, the rolling counters, the mega-panel and both tab sets are one TypeScript file

Included Pages and Templates

Core pages

• Home with an animated globe, a scroll-revealed feature story, a padlock and two dashboard illustrations drawn in SVG and CSS, rolling statistics counters, a plan grid, a featured-article strip and a hover-opened FAQ
• About with the company story, statistics, the team, and four job openings as full cards
• Features with a feature grid and a five-region server network in keyboard-navigable tabs
• Contact with an enquiry form and the company details

Journal

• Journal index with five keyboard-navigable category tabs and 9 full-length articles with topic, published date, reading time, a pulled quote from a named expert and a plate

Careers

• 4 job opening pages with department, level, location, contract type, salary band, a requirements list and an application form

Storefront

• Pricing grid with 3 plans and a full feature comparison table
• 3 plan buy pages with the feature list, the price and Add to Cart
• 3 plan category pages, each showing its plan in the design's own layout above the comparison table
• Slide-out basket, checkout, PayPal checkout and an order confirmation that prints back what the checkout form collected

Account and utility pages

• Sign in, sign up, early access, style guide, licences, changelog, privacy policy, terms of use, a 401 password-protected page and a 404 page

23 page templates. 38 static pages.

Easy Content Editing

Everything you change lives in src/content/. Edit a file, rebuild, done.

• src/content/blog/*.mdx — the 9 articles: topic, published date, reading time, card, hero and body images, the pulled quote with its author, and the body
• src/content/careers/*.mdx — the 4 job openings: department, level, location, contract type, salary, the requirements list and the two-part write-up
• src/content/plans/*.mdx — the 3 plans: price, billing period, icon, the feature list, the basket line it adds and the plan's own long-form write-up
• src/content/categories.json — the 3 plan category pages
• src/content/layout.json — what the design owns rather than any one item: the journal's five filter tabs and what each prints, the three articles the home page features, the order and card modifier each plan grid uses, and the icons every opening and feature list repeats

Each file states its own order, so the sequence the design was built around lives with the content instead of in a separate index. Add an article and it appears at its own route with no component to touch.

Body copy is Markdown: headings, paragraphs and lists of both kinds. A prose parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. A # line opens a region of the page rather than a heading, which keeps an article one document you can read top to bottom instead of two fields with a picture and a quote wedged between them.

Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the :root block at the top of public/assets/css/styles.css. Change a value there and it propagates across every page.

The Basket

A real working basket, in localStorage, with no payment provider to configure. The header count, the drawer, both checkout summaries and the confirmation page read one store, so they always agree. "Place Order" reads the checkout form and hands the order forward, so the confirmation page prints the buyer's own details rather than an empty summary. Point placeOrder() at your own endpoint to go live.

Performance and SEO

• Every page prerendered as static HTML, ready for a CDN
• Per-page title, description and Open Graph and Twitter card metadata
• Absolute share-image URLs so link previews resolve
• Self-hosted fonts with font-display: swap and zero third-party requests
• Lazy-loaded imagery with responsive srcset on every photograph, above-the-fold artwork eager
• The four illustrations are SVG and CSS rather than an animation player, and each waits for the viewport before it starts
• Semantic markup with one H1 per page, real buttons, a skip link and landmarks
• Keyboard-reachable tabs, the mega-panel, the FAQ, the basket and every form
• Readable with JavaScript off — no content is hidden behind a script that has to run first

Deployment

Deploys to Vercel, Netlify, Cloudflare Pages or any static host. npm run build prerenders every page; there is no server, no database and no API to configure.

What You Get

• The complete Next.js 16 project source
• 23 page templates covering 38 static pages
• 9 articles, 4 job openings and 3 plans as editable MDX
• Two JSON files covering the plan categories and every repeated list in the design
• A working basket, a checkout in two variants and an order confirmation
• The original stylesheet and self-hosted webfonts
• Full HTML documentation
• Changelog and third-party license file

Requirements

• Node.js 20 or newer
• npm 10 or newer, or pnpm, yarn or bun