Skip to content
VibeFather
Join
↗

2 cases built from this template

Same prompt, different [VARIABLES]. Click one to preview it above.

About this template

Apartment Leasing Website is a single-page property site for an invented residential building. It is designed for independent landlords, leasing teams, and property managers who need to present real inventory without burying visitors in a generic listing portal. The experience moves from a strong architectural hero to floor-plan discovery, unit-level availability, interiors, amenities, neighborhood context, and a focused tour request.

The visual system combines warm chalk, dark ink, oxblood, and sage with editorial serif headlines and restrained interface typography. Large, cohesive property photographs give the page the feel of an operating residence, while code-drawn floor plans and a simple neighborhood diagram keep practical information lightweight. The layout is spacious without becoming vague: every section answers a renter's next question.

The floor-plan finder filters four layouts and eight concrete units by bedrooms, maximum rent, and desired move-in date. Plan cards summarize size, price, and availability, then connect directly to the matching rows in the availability table. Visitors can carry a selected unit into the tour form, choose an in-person or video tour, and receive an on-device confirmation without a backend. Empty states, mobile inventory cards, keyboard controls, reduced motion, and clear demo-data notes are part of the design.

Six generated architectural images create one consistent property shoot. Brand, building type, location, starting rent, tour hours, and leasing email are variables; property copy, inventory, amenities, and contact details live in one content file. Adapt those values for another apartment building, loft residence, or small rental community while retaining the same layout and interactions.

The template prompt

The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Apartment Leasing Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished single-page leasing website for [BRAND], a [PROPERTY_TYPE] in [LOCATION]. Pair generous architectural photography with an interactive inventory of four floor plans and eight units, an amenity and neighborhood story, and a client-side tour request. Homes are advertised from [STARTING_RENT], tours run [TOUR_HOURS], and the leasing contact is [LEASING_EMAIL].

- Audience: Prospective renters comparing layouts, monthly rent, and move-in timing, followed by small property teams who need a clear, adaptable leasing presence.
- Goal: Help a visitor narrow the inventory to a suitable home, understand daily life at the property, and carry a selected unit into a complete tour request with no backend.
- Tone: Warm, assured, precise, and residential rather than corporate. Use specific details and calm calls to action; avoid pressure tactics, superlatives, and vague luxury claims.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource/dm-serif-display (OFL), @fontsource-variable/inter (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set vite.config.ts to use React, base: './', build.outDir: 'dist', and build.sourcemap: false.
  - Configure tailwind.config.ts with content for index.html and src/**/*.{ts,tsx}; define the listed colors and font families as theme tokens.
  - Import the self-hosted font packages in src/main.tsx and global Tailwind directives in src/index.css.
  - Put every headline, paragraph, label, inventory record, amenity, neighborhood item, contact detail, link, and image path in src/content.ts keyed by section.
  - Build small section components and keep filter, selected-unit, accordion, mobile-menu, and tour-form state in React; use Motion for React only for the specified reveals and transitions.
  - Store unit availability as non-negative day offsets from the visitor's current local date, format dates in US English, and derive both the move-in filter and tour calendar from that local date.

## Variables
- [BRAND] — Property name (default: "Alder & Row"). Use an invented residential property name.
- [PROPERTY_TYPE] — Building description (default: "modern brick courtyard residences"). A short lowercase description used in the hero and introduction.
- [LOCATION] — Neighborhood and city (default: "Elm Park, Chicago"). Use a plausible location and adapt the surrounding area copy.
- [STARTING_RENT] — Advertised starting rent (default: "$1,875"). Monthly rent including the currency symbol; keep inventory consistent with it.
- [TOUR_HOURS] — Tour availability (default: "Daily, 9 AM–6 PM"). A concise human-readable schedule.
- [LEASING_EMAIL] — Leasing email (default: "[email protected]"). Use an invented address for the fictional property.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/apartment-leasing-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

Join Pro early access →

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Apartment Leasing Website"
colors:
  chalk: "#F4F1EA"
  ink: "#24251F"
  oxblood: "#713F35"
  sage: "#A8B09B"
  linen: "#E7E1D6"
  stone_line: "#CFC8BA"
typography:
  display: { family: "DM Serif Display", weights: [400] }
  body_and_interface: { family: "Inter Variable", weights: [400, 500, 600] }
spacing: "Use an 8px base grid, a 1360px maximum content width, 40px desktop gutters, and 20px mobile gutters. Sections have 112px vertical padding on desktop and 72px on mobile. Use 12-column desktop grids with 24px gaps, 16px form-field gaps, and 64–80px between major headings and content."
radius: "Use 4px corners on photographs, cards, tables, and form panels; 2px on inputs; and fully rounded pill shapes only for compact filters, status chips, and primary buttons. Avoid nested rounded cards and soft bubble containers."
---

# Apartment Leasing Website — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Chalk** `#F4F1EA` — Primary page background and light text on dark photographs
- **Ink** `#24251F` — Headlines, body copy, footer background, and primary controls
- **Oxblood** `#713F35` — Calls to action, active filter states, links, and small editorial accents
- **Sage** `#A8B09B` — Availability indicators, map fills, and quiet decorative panels
- **Linen** `#E7E1D6` — Alternating section backgrounds and selected card surfaces
- **Stone Line** `#CFC8BA` — Borders, table rules, input outlines, and floor-plan strokes

## Typography
- **Display** — DM Serif Display (OFL), weights 400. Self-host the font files.
- **Body and interface** — Inter Variable (OFL), weights 400/500/600. Self-host the font files.

## Spacing & shape
- Spacing: Use an 8px base grid, a 1360px maximum content width, 40px desktop gutters, and 20px mobile gutters. Sections have 112px vertical padding on desktop and 72px on mobile. Use 12-column desktop grids with 24px gaps, 16px form-field gaps, and 64–80px between major headings and content.
- Radius: Use 4px corners on photographs, cards, tables, and form panels; 2px on inputs; and fully rounded pill shapes only for compact filters, status chips, and primary buttons. Avoid nested rounded cards and soft bubble containers.

## Motion
- On first load, fade the hero copy upward by 18px over 600ms while the hero photograph settles from scale 1.035 to 1 over 900ms; stagger the eyebrow, heading, paragraph, and actions by 70ms.
- Reveal section headings and image grids with a 20px rise and opacity transition over 500ms when they enter the viewport, once only, with no scroll hijacking.
- Animate floor-plan result changes and accordion expansion with 180–240ms opacity and height transitions; keep inventory updates immediate and readable.
- Give buttons, links, table-row actions, and gallery tiles a 160ms color, underline, or image-scale response on hover and visible keyboard focus.
- Disable nonessential transforms, smooth scrolling, and staggered reveals under prefers-reduced-motion; never animate availability numbers or form errors in a way that delays reading.

## Imagery
Use the six supplied generated images as one coherent warm architectural shoot: a large exterior hero, two apartment interiors, two amenity scenes, and one neighborhood street. Crop with object-fit: cover without distorting straight verticals. Add original code-drawn SVG floor plans and a schematic street map; these are informational diagrams, not decorative substitutes for photography. Do not add recognizable people, branded products, property logos, or landmarks.

## Tone
Warm, assured, precise, and residential rather than corporate. Use specific details and calm calls to action; avoid pressure tactics, superlatives, and vague luxury claims.

---
— Prompt by VibeFather · https://vibefather.ai/t/apartment-leasing-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown