Ofen — Real Estate React NextJs Template

Ofen — a real-estate brokerage site that is already finished (AI Ready)

Ofen is a residential brokerage site for Greater Boston, built in Next.js 16 and Tailwind CSS v4. From version 1.1.0 it ships with its design language written down for AI coding agents, so Claude Code, Cursor, Copilot or Codex can add a page, change the brand or review a change and stay inside the design you bought.

What makes it AI Ready

• DESIGN.md at the project root, 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, the file Cursor, Copilot and Codex read first. It covers the stack, where the data lives, what to set before deploying and the six conventions a plausible edit breaks first.
• Three agent skills in .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. Claude Code loads them on its own; any other agent can read them as plain files.
• 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.
• Tokens all the way down. Colours, the control corner radius, every animation length and curve are named tokens, so a request like “make the corners square” or “use our green” is a one-line edit your agent can find.

New in 1.1.0

• Dark mode on every page, drawn as its own near-black palette. A toggle in the header switches it on desktop and phone, and the choice is remembered. The site opens light; following the visitor’s system setting is a two-prop change.
• DESIGN.md, AGENTS.md and the three agent skills described above.
• A pressed state on every control: buttons and chips sink while held, cards and rows darken one step.
• One knob each for corner radius and motion speed.

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.

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
• 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 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, sitemap, robots and JSON-LD

What is not included

• No backend. Listings, agents and guides are typed arrays in .ts files, 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.