Oldage is a premium, production-ready template for residential care homes, assisted living communities, memory care units, home care agencies, hospices, and family medical clinics. Built on Next.js 16, React 19, and TypeScript, it ships with 25 page templates covering 37 prerendered routes, three care plans with a working cart and checkout, a community events calendar, a nine-article blog with category filtering, a staff directory, a photo gallery with a full-screen lightbox, and a fully editable content layer — no CMS or backend required.

Choosing care for a parent is one of the hardest decisions a family makes, and most of it happens on a website late at night. Oldage is styled with a hand-crafted CSS design system (no utility-framework lock-in) in a calm sage and off-white palette, with Scheherazade New headlines set against Inter and scroll-linked motion applied with restraint — so every page keeps attention on the people and the care rather than on the interface.

Live demo: https://oldage-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 content — articles, events and care plans as .mdx files (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 — Inter and Scheherazade New served locally, no third-party font CDN
• No animation library — scroll reveals, the logo belt, scroll-linked sections, mega menus, accordions, tab sets, sliders and the gallery lightbox in one TypeScript file, no GSAP and no jQuery
• Client-side storefront — cart and order state in localStorage, no database, no vendor SDK

Included Pages and Templates

• Home — a scroll-driven story: the video hero, the partner logo belt, the brand introduction, the scroll-linked experience panel, the four service cards, the mission tab set, the benefits grid, the location explorer, testimonials, and the latest journal entries
• About — the care philosophy, the founding story, a review slider, and four staff profiles
• Service — the six service cards in full, with the background video panel
• Team — all twelve staff cards, each linking to a profile
• Pricing — three care plan cards with a monthly / yearly switch, plus an FAQ
• Care plan — 3 detail pages with the included list, the closing notes, a Monthly / Yearly variant switch that repaints the price, add-to-cart, and an FAQ
• Gallery — an eight-image wall with a keyboard-accessible full-screen lightbox
• Events — a community calendar, plus 3 event pages with venue, date, time, fees, a share row and full details
• Blog — a directory with four category tabs over nine articles, plus 9 article pages with a hero, author block, pull quotes and a related strip
• Storefront — a cart drawer in the navigation bar, checkout, a PayPal checkout variant, and an order confirmation page
• Contact — enquiry form and clinic details
• Utility — Style Guide, Changelog, Instructions, License, Privacy, Terms, Coming Soon, 401 (password), 404

25 page templates, 37 prerendered routes.

Easy Content Editing

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

• Articles — src/content/blog/*.mdx. Frontmatter carries the title, date, reading time, category, author and the hero and thumbnail images.
• Events — src/content/events/*.mdx. Frontmatter carries the venue and its map link, the date, the time, the fees, the category and the images.
• Care plans — src/content/plans/*.mdx. Frontmatter carries the plan name, the billing variants and their prices, and the SKU the basket stores the item under. The body holds the included list and the closing notes.
• Writing a body — plain prose, not markdown: paragraphs, ## headings, > pull quotes and - list items. The page component puts each one inside the design's own markup, so the words are yours and the layout stays exactly as designed. No special syntax to learn.
• Staff — src/content/team.json. Twelve cards, printed in full on Team and as the first four on About.
• Listing order — src/content/collections.json records what a per-item file cannot state: which articles the blog directory lists under each of its four category tabs, the order the related-posts strip draws from, the order the events run in, and which four staff About prints.
• 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.
• Navigation, footer and cards — 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 article, event and care plan page
• Lazy-loaded imagery throughout, WebP artwork with responsive srcsets
• 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 single H1 per page, a route-aware active navigation state, and clean, crawlable URLs
• Keyboard-navigable tabs, menus and disclosures, a real <dialog> lightbox, 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
• 25 page templates covering 37 prerendered routes
• Content collections: 9 articles, 3 events and 3 care plans as MDX, plus the staff directory and 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)