Ofen — Real Estate React NextJs & HTML Template

AI Ready: a real estate template in Next.js and plain HTML

Ofen is a residential brokerage site for Greater Boston: 21 homes, six neighborhoods, nine agents and six guides, in light and dark. It comes as a Next.js 16 app and as the same pages in plain HTML, in one download, and it carries its design language in a form AI coding agents can read, so the pages you add with Claude Code, Cursor or Copilot look like the ones you bought.

What makes it AI Ready

• DESIGN.md at the root of template/, in the shape of Google’s DESIGN.md format. Its front matter lists every colour, type size and radius, generated from app/globals.css. Below it, twelve sections of rules: colour, light and dark, typography, spacing, icons, shapes, component states, motion, sections, drawn accents, imagery and copy.
• AGENTS.md in template/, the file Cursor, Copilot and Codex read first. It covers the stack, where the data lives, what to set before deploying and the conventions a plausible edit breaks first.
• Three agent skills in template/.claude/skills/. build-page adds a page or section in the house style. restyle changes the brand colour, fonts, corners, motion or opening mode in both halves. review-design checks changed files against DESIGN.md.
• AGENTS.md in html/ explains how its pages, partials, scripts and data fit together and which edits break them.
• One source of truth. After you edit globals.css, npm run design rewrites the values in DESIGN.md, and npm run check fails if the two have drifted apart.

Two versions, one download

template/ is the Next.js version, with the stack listed below. html/ is the same pages as plain HTML5, styled with Tailwind CSS 4.3, made interactive with Alpine.js 3.17 and built with Vite 7. It runs without React and without a server.

• The HTML pages were captured from the Next.js build, so the markup, the copy and the look match.
• 12 pages: 9 fixed pages, plus a sample listing, a sample neighborhood and a sample guide. Every card and link that leads to one of those opens its sample, so the sample is the page to restyle.
• The finished site is already built in html/dist/ and opens straight from the folder, with no server.
• To edit it you need Node.js 20.19 or newer and npm. npm run build writes the site again.
• Pages share 11 Handlebars partials, so a change to the header or footer reaches every page.
• Saved homes, the listing filters, the maps, compare, the calculators and the viewing scheduler work as they do in the Next.js version.

New in 1.2.0

• The HTML version described above, with its own guide.
• The Ofen mark on the browser tab and a phone’s home screen, in place of the default Next.js icon.
• Every page shares a card of the home page, logo and headline included.
• The viewing scheduler draws its calendar from the first paint.

Pages

• Home: fifteen sections, from the inventory claim to the booking form, with hand-drawn accents on eight of them.
• Home 2: search first, with a live search bar, a map with a pin per home, saved searches with alerts, a compare view and an affordability calculator.
• Home 3: the minimal cut, with a fee table in place of the calculator.
• Listings: 21 homes with tenure tabs, sorting and filters that stay in the URL.
• Listing detail: gallery with a full-screen viewer, facts, rooms, the listing agent, a viewing scheduler and a monthly payment calculator.
• Neighborhoods: six areas with median prices, counts and an interactive price chart.
• Neighborhood detail: prices, a transit map, what is for sale there now and the agent who covers it.
• Agents: nine agents with license numbers, filterable by area.
• About: the story, a timeline, six offices and the fair housing notice.
• Guides and guide detail: six buying and selling guides, filterable by subject, with a table of contents and related reading.
• Contact: four desks, the full enquiry form and six offices.
• 404: three homes still on the market under the message, in the Next.js version.

What is built in

• Save a home with the heart on any card, kept between visits
• Affordability calculator that works back from a monthly budget
• Monthly payment calculator with term, deposit and rate
• Viewing scheduler with a calendar and time slots
• Map of homes with price pins, and a neighbourhood map with commute times
• Saved searches with alerts, and a side-by-side compare view
• Filter and sort on listings, agents and guides, shareable by URL
• Booking and contact forms with validation and a success state
• Photo gallery with a full-screen viewer, share and copy link
• Dark mode on every page, with a header toggle that remembers the choice
• FAQ accordion, mobile menu sheet, sticky header

Everything runs on demo data and client state. There is nothing to configure before the first npm run dev.

Built with

Next.js version:

• Next.js 16.3 (App Router, Turbopack) and React 19.2
• TypeScript
• Tailwind CSS v4, Base UI and shadcn/ui primitives
• next-themes for light and dark
• Hugeicons and Heroicons
• Geist through next/font
• Responsive from 320px, keyboard accessible, WCAG AA contrast in both modes
• Per-page metadata, share card, sitemap, robots and JSON-LD

HTML version:

• HTML5 pages with Handlebars partials
• Tailwind CSS 4.3, Alpine.js 3.17, Vite 7
• Geist and Geist Mono included as font files

What is not included

• No backend. Listings, agents and guides are typed arrays in .ts files in the Next.js version and JSON files in the HTML version, and the forms show a success state without sending anything.
• Photographs are loaded from Unsplash and Lummi for the demo and are not part of the purchase. Swap the URLs for your own.
• Press logos are placeholders.
• The HTML version has no sitemap or robots file. Add both to its public/ folder before you launch.
• A few details differ in the HTML version: it has no 404 page, the payment calculator shows the sale panel only, and the phone menu does not close with a swipe. The guide in documentation/html.html lists each one.