Landing pages · React
Single property listing
Elegant page for one home for sale, with photos, key facts, room-by-room details, viewing times and a viewing request form.
What you get
A dedicated page for a single property: an editorial hero with the guide price, headline numbers, a photo gallery, key facts, room-by-room notes, open-house times with the agent's details, an FAQ and a viewing request form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "14 Harbour Lane", "nav": [ { "label": "Photos", "href": "#photos" }, { "label": "Details", "href": "#details" }, { "label": "Viewings", "href": "#viewings" } ], "navCta": { "label": "Book a viewing", "href": "#contact" }, "sections": [ { "kind": "hero", "variant": "editorial", "eyebrow": "For sale · Guide price £865,000 · Freehold", "title": "A four-bedroom Edwardian house, two minutes from the harbour.", "text": "Built in 1912 and carefully restored, with a south-facing walled garden, a kitchen that runs the width of the house, and views of the water from the top floor.", "primary": { "label": "Book a viewing", "href": "#contact" }, "secondary": { "label": "See the photos", "href": "#photos" }, "visual": { "type": "tiles", "tones": [ "#2f5d50", "#a8a29e", "#57534e", "#1c1917" ], "caption": "Garden, late afternoon in October" } }, { "kind": "stats", "items": [ { "value": "4", "label": "Bedrooms" }, { "value": "2", "label": "Bathrooms" }, { "value": "168 m²", "label": "Internal floor area" }, { "value": "22 m", "label": "South-facing garden" } ] }, { "kind": "gallery", "id": "photos", "eyebrow": "Photos", "title": "Inside and out", "items": [ { "title": "Kitchen and dining room", "caption": "Ground floor, 7.4 × 4.1 m", "tone": "#2f5d50" }, { "title": "Front sitting room", "caption": "Original fireplace", "tone": "#57534e" }, { "title": "Main bedroom", "caption": "Harbour view", "tone": "#44403c" }, { "title": "Family bathroom", "caption": "Roll-top bath", "tone": "#3f4f46" }, { "title": "Walled garden", "caption": "Gate to the lane", "tone": "#365314" }, { "title": "Top-floor study", "caption": "Could be bedroom five", "tone": "#292524" } ] }, { "kind": "split", "id": "details", "eyebrow": "Key facts", "title": "The practical details", "text": "Full survey from August 2026 available on request. The sellers have found their next home and can move to suit.", "bullets": [ "New roof and rewiring in 2021", "Double glazing in period-style timber frames", "On-street resident parking, permit £95 a year" ], "visual": { "type": "mock", "title": "14 Harbour Lane", "rows": [ { "label": "Tenure", "value": "Freehold" }, { "label": "Council tax", "value": "Band F" }, { "label": "Energy rating", "value": "C (71)" }, { "label": "Heating", "value": "Gas, underfloor in kitchen" }, { "label": "Broadband", "value": "Full fibre, 900 Mbps" } ], "footer": "Floor plan and EPC available at viewings" }, "reverse": true }, { "kind": "features", "eyebrow": "Room by room", "title": "How the house lives", "columns": 3, "items": [ { "title": "Kitchen", "text": "Oak worktops, a range cooker and French doors straight onto the garden terrace.", "icon": "home" }, { "title": "Living rooms", "text": "Two reception rooms with original fireplaces, one with a log burner.", "icon": "sun" }, { "title": "Bedrooms", "text": "Four doubles across two floors. The main bedroom has an en suite shower room.", "icon": "heart" }, { "title": "Garden", "text": "Walled, south-facing, with a brick terrace, raised beds and an apple tree.", "icon": "leaf" }, { "title": "Study", "text": "A top-floor room with harbour views, currently a quiet office.", "icon": "book" }, { "title": "Location", "text": "Two minutes to the harbour, eight to the station, and a primary school on the next street.", "icon": "pin" } ] }, { "kind": "hours", "id": "viewings", "eyebrow": "Viewings", "title": "Open house and private viewings", "text": "Come to the open house, or book a private viewing at a time that suits you.", "rows": [ { "day": "Open house · Sat 7 Nov", "time": "10:00 – 13:00" }, { "day": "Private viewings · Mon – Fri", "time": "By appointment, 9:00 – 18:00" }, { "day": "Private viewings · Saturday", "time": "By appointment, 9:00 – 15:00" } ], "address": "14 Harbour Lane, Kingsferry", "phone": "01234 555 0187", "email": "harbourlane@calderrowe.co.uk" }, { "kind": "faq", "eyebrow": "FAQ", "title": "Questions buyers ask", "items": [ { "q": "Is there a chain?", "a": "No onward chain. The sellers have bought elsewhere and are flexible on completion dates." }, { "q": "Is the house in a conservation area?", "a": "Yes. Exterior changes need consent, which has protected the character of the lane." }, { "q": "Has it ever flooded?", "a": "No. The house sits 9 metres above high tide and the search came back clear." } ] }, { "kind": "contact", "id": "contact", "eyebrow": "Book a viewing", "title": "Come and see it", "text": "Pick a preferred date and we'll confirm a time within one working day. Calder & Rowe, selling agents.", "fields": [ "name", "email", "phone", "date", "message" ], "button": "Request a viewing" } ], "footer": { "text": "Offered for sale by Calder & Rowe, independent estate agents.", "columns": [ { "title": "Property", "links": [ "Guide price £865,000", "Freehold", "No onward chain" ] }, { "title": "Agent", "links": [ "Calder & Rowe", "01234 555 0187" ] }, { "title": "Legal", "links": [ "Privacy", "Complaints procedure" ] } ], "legal": "© Calder & Rowe. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Single property listing's files. The box is already started for you: finish “Start from Single property listing and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Budgeting app launch
Launch page for a household budgeting app with a live budget mock, pricing, beta reviews and an early-access form.
Design conference
Bold two-day design conference page with speakers, programme, venue, ticket tiers and an FAQ, ready for ticket sales.
30-day running plan
Friendly sign-up page for a free 30-day plan that takes beginners from walking to running 20 minutes without stopping.
Build on Single property listing
Create a free account, start from this template, and ask the AI agent to turn it into your app.