Premium Real Estate Website Redesign
Budget: ₹12,500 – ₹37,500 INR
# Greeham — Design Requirements
**Goal:** Elevate every page and every state to a premium "quiet-luxury" standard — perfectly designed for both mobile and desktop, from the homepage hero down to the smallest detail.
---
## About Greeham
A **premium real-estate marketplace** for the Tricity region (Chandigarh, Panchkula, Mohali, Zirakpur), connecting buyers/owners, brokers, and builders. Differentiator: **quality and trust** — curated premium listings, not high-volume classifieds.
**Positioning:** Quiet luxury. Reference tier: **Aman, Sotheby's Realty, Aesop** — restrained, editorial, spacious. Avoid the cluttered 99acres/MagicBricks look entirely. Must feel trustworthy, calm, considered.
## Brand assets (refine, don't replace)
- Accent: antique gold `#a17839`
- Display/heading: Fraunces (serif). Body/UI: Plus Jakarta Sans
- The designer may extend the palette (neutrals, semantic colors), spacing, type scale — but gold + Fraunces + Plus Jakarta Sans stay.
- **Deliver a documented design system / token set applied consistently across ALL pages** — not one-off page designs.
---
## Scope — every page, both mobile + desktop, all states
### Public / marketing
1. Homepage — hero + search, featured listings, city tiles, value props, seller CTAs, empty states (strongest first impression)
2. Listings/browse — results grid, filters (Indian area-unit + price), sort, active-filter chips, pagination, no-results empty state
3. Property detail — gallery, 3D tour, key facts (₹ Indian format, area in Marla/Kanal + sqft), description, map, login-gated contact panel, seller card, similar listings, breadcrumb, sticky mobile contact bar
4. Project detail (builder) — landing-style, gallery, units, amenities, builder card, brochure
5. Unit detail — specs, per-unit 3D tour, pricing
6. Brokers directory + 7. Broker profile (currently "too basic" — needs most elevation)
8. Builders directory + 9. Builder profile (portfolio)
10. City SEO pages (/property-in-[city])
11. Pricing pages — 3 variants (buyer/broker/builder): plan cards, features, FAQs, CTAs ("Request a call" paid, "Start free" free, "Current plan" when logged in)
12. Insights/content (article list + reading view)
13. Footer pages — About, Contact, Privacy, Terms, Careers, Press
14. Auth — login, signup (user-type select), reset, email-confirm states
### Authenticated / dashboard
15. **Main dashboard** — THE big one. Works for **9 user_type+plan variants** (owner/buyer ×4; broker ×3; builder ×3). Plan card (tier/expiry/quota bars), stat cards, feature nav-tiles (some plan-locked w/ upgrade prompts), listings table OR builder projects (per-project units/views/leads/status), recent leads, upgrade CTAs, expiring-soon banner. Function is built — design the layout/hierarchy so each variant is clean, not cluttered.
16. Post property — sections (details, area+unit dropdown, price w/ live Indian commas, photo uploader, description), required/validation states, at-submit upgrade redirect
17. Post project (builder) — larger (units, gallery, cover, brochure, amenities, landing options)
18. Edit property/project/unit — pre-filled versions
19. Units management (within project)
20. Lead CRM — table, contacts, status, CSV export (Signature-gated), Source column
21. Analytics — views/leads charts, per-listing/project (plan-gated)
22-23. Broker + builder leads/analytics/spotlights pages
24. Team management (broker_pro+)
25. Profile/settings — name, phone (validated), WhatsApp, agency, bio, avatar+crop, RERA, specializations, slug editor
26. Saved/alerts · 27. 3D tour booking · 28. Upgrade/plan-request modal
### Admin (internal — clean & usable, less premium pressure)
29-32. Admin hub, Plan Leads, User Management, Verification/Tours/Spotlights/Sponsored
---
## States for every relevant page (the "down to small things")
- **Loading** — premium skeletons/shimmer, not spinners
- **Empty** — thoughtful states w/ next-step CTAs, never blank
- **Error** — validation errors, failed loads, on-brand 404/500
- **Success** — submitted, requested, saved confirmations
- **Interactive** — hover, focus (keyboard), active, disabled, selected
- **Gated/locked** — plan-locked features w/ upgrade affordance; login-gated content
---
## Component library (design once, reuse everywhere)
Consistent set with all states:
- Buttons (primary/gold, secondary, text, destructive; sizes; loading; disabled)
- Inputs (text, number, select, textarea, checkbox, radio, toggle, file-dropzone, area-unit selector, price input w/ live commas)
- Cards (property, project, broker, builder, plan, stat, lead) w/ images, badges (verified/boosted/featured), price, facts
- Nav (desktop header + mega-menus, mobile drawer, footer, breadcrumbs, dashboard tiles, tabs)
- Modals/sheets (mobile bottom-sheets vs desktop modals)
- Badges/chips (verified, plan tier, status, filter chips, "complimentary" tags)
- Tables (desktop table → mobile cards)
- Galleries/image viewers (incl. 3D-tour embed)
- Toasts/banners (expiring-soon, limit warnings, success)
- Quota/progress bars · premium-styled maps · avatars (verified ring, initials fallback) · pagination · empty + skeleton templates
---
## Mobile (equal priority, not afterthought)
Likely majority of traffic. Design mobile first-class:
- Fully responsive, no horizontal overflow, no cut-off elements
- Touch targets ≥44px, thumb-reachable primary actions
- Mobile nav drawer, mobile search, filters as bottom-sheets
- Sticky property contact bar (hides when inline CTA visible)
- Tables → cards; modals → bottom-sheets
- Correct input keyboards (numeric for price/phone); swipeable galleries
- Breakpoints: 360–375px, large phone, tablet, desktop, wide
## Accessibility (build in)
WCAG AA contrast (check gold-on-white) · keyboard focus states · aria-labels · logical headings · labeled fields w/ error association
## Premium details
Generous whitespace (luxury = space) · editorial type (Fraunces w/ restraint) · subtle micro-interactions · consistent radii/shadows/borders (one system) · high-quality image treatment (blur-up, ratios, overlays) · one icon set · Indian-context correct (₹1,00,00,000, Marla/Kanal) · bespoke, not templated SaaS
---
## Deliverables
1. Design system / token sheet (colors, type, spacing, radii, shadows, components) — the foundation
2. Hi-fi designs for every page above, **mobile + desktop**
3. All states (above) per relevant page
4. Reusable component library (Figma preferred)
5. Implementation-ready handoff: specs, tokens, exported assets/icons, notes — precise enough to build faithfully
6. Organized, iterable Figma file (frames by page + state)
## Technical context (so designs are implementable)
- Built in **Next.js + Tailwind CSS** — map designs to a Tailwind-friendly token system
- Functional structure, flows, data, per-plan logic are **already built** — this is **visual/UI design on existing functional pages**, not UX/flow redesign. Flag genuine usability issues, but default = restyle, not re-architect.
- Fonts loaded via next/font (Fraunces, Plus Jakarta Sans)
## Priority (if phased)
1. Design system + core components (foundation)
2. Homepage + Listings + Property detail (buyer core, highest traffic)
3. Dashboard (9 variants — most complex, biggest current weakness)
4. Broker/builder profiles + directories (broker profile flagged "too basic")
5. Pricing pages
6. Post/edit forms + dashboard sub-pages
7. Auth, footer, content
8. Admin (internal, lowest pressure)
## "Done" looks like
Every page — mobile + desktop, every state — looks like one coherent premium brand: calm, trustworthy, editorial, fit for a major property decision. Nothing feels unfinished, templated, or inconsistent. The smallest detail (empty state, disabled button, skeleton, validation error) is as considered as the homepage hero.
**Goal:** Elevate every page and every state to a premium "quiet-luxury" standard — perfectly designed for both mobile and desktop, from the homepage hero down to the smallest detail.
---
## About Greeham
A **premium real-estate marketplace** for the Tricity region (Chandigarh, Panchkula, Mohali, Zirakpur), connecting buyers/owners, brokers, and builders. Differentiator: **quality and trust** — curated premium listings, not high-volume classifieds.
**Positioning:** Quiet luxury. Reference tier: **Aman, Sotheby's Realty, Aesop** — restrained, editorial, spacious. Avoid the cluttered 99acres/MagicBricks look entirely. Must feel trustworthy, calm, considered.
## Brand assets (refine, don't replace)
- Accent: antique gold `#a17839`
- Display/heading: Fraunces (serif). Body/UI: Plus Jakarta Sans
- The designer may extend the palette (neutrals, semantic colors), spacing, type scale — but gold + Fraunces + Plus Jakarta Sans stay.
- **Deliver a documented design system / token set applied consistently across ALL pages** — not one-off page designs.
---
## Scope — every page, both mobile + desktop, all states
### Public / marketing
1. Homepage — hero + search, featured listings, city tiles, value props, seller CTAs, empty states (strongest first impression)
2. Listings/browse — results grid, filters (Indian area-unit + price), sort, active-filter chips, pagination, no-results empty state
3. Property detail — gallery, 3D tour, key facts (₹ Indian format, area in Marla/Kanal + sqft), description, map, login-gated contact panel, seller card, similar listings, breadcrumb, sticky mobile contact bar
4. Project detail (builder) — landing-style, gallery, units, amenities, builder card, brochure
5. Unit detail — specs, per-unit 3D tour, pricing
6. Brokers directory + 7. Broker profile (currently "too basic" — needs most elevation)
8. Builders directory + 9. Builder profile (portfolio)
10. City SEO pages (/property-in-[city])
11. Pricing pages — 3 variants (buyer/broker/builder): plan cards, features, FAQs, CTAs ("Request a call" paid, "Start free" free, "Current plan" when logged in)
12. Insights/content (article list + reading view)
13. Footer pages — About, Contact, Privacy, Terms, Careers, Press
14. Auth — login, signup (user-type select), reset, email-confirm states
### Authenticated / dashboard
15. **Main dashboard** — THE big one. Works for **9 user_type+plan variants** (owner/buyer ×4; broker ×3; builder ×3). Plan card (tier/expiry/quota bars), stat cards, feature nav-tiles (some plan-locked w/ upgrade prompts), listings table OR builder projects (per-project units/views/leads/status), recent leads, upgrade CTAs, expiring-soon banner. Function is built — design the layout/hierarchy so each variant is clean, not cluttered.
16. Post property — sections (details, area+unit dropdown, price w/ live Indian commas, photo uploader, description), required/validation states, at-submit upgrade redirect
17. Post project (builder) — larger (units, gallery, cover, brochure, amenities, landing options)
18. Edit property/project/unit — pre-filled versions
19. Units management (within project)
20. Lead CRM — table, contacts, status, CSV export (Signature-gated), Source column
21. Analytics — views/leads charts, per-listing/project (plan-gated)
22-23. Broker + builder leads/analytics/spotlights pages
24. Team management (broker_pro+)
25. Profile/settings — name, phone (validated), WhatsApp, agency, bio, avatar+crop, RERA, specializations, slug editor
26. Saved/alerts · 27. 3D tour booking · 28. Upgrade/plan-request modal
### Admin (internal — clean & usable, less premium pressure)
29-32. Admin hub, Plan Leads, User Management, Verification/Tours/Spotlights/Sponsored
---
## States for every relevant page (the "down to small things")
- **Loading** — premium skeletons/shimmer, not spinners
- **Empty** — thoughtful states w/ next-step CTAs, never blank
- **Error** — validation errors, failed loads, on-brand 404/500
- **Success** — submitted, requested, saved confirmations
- **Interactive** — hover, focus (keyboard), active, disabled, selected
- **Gated/locked** — plan-locked features w/ upgrade affordance; login-gated content
---
## Component library (design once, reuse everywhere)
Consistent set with all states:
- Buttons (primary/gold, secondary, text, destructive; sizes; loading; disabled)
- Inputs (text, number, select, textarea, checkbox, radio, toggle, file-dropzone, area-unit selector, price input w/ live commas)
- Cards (property, project, broker, builder, plan, stat, lead) w/ images, badges (verified/boosted/featured), price, facts
- Nav (desktop header + mega-menus, mobile drawer, footer, breadcrumbs, dashboard tiles, tabs)
- Modals/sheets (mobile bottom-sheets vs desktop modals)
- Badges/chips (verified, plan tier, status, filter chips, "complimentary" tags)
- Tables (desktop table → mobile cards)
- Galleries/image viewers (incl. 3D-tour embed)
- Toasts/banners (expiring-soon, limit warnings, success)
- Quota/progress bars · premium-styled maps · avatars (verified ring, initials fallback) · pagination · empty + skeleton templates
---
## Mobile (equal priority, not afterthought)
Likely majority of traffic. Design mobile first-class:
- Fully responsive, no horizontal overflow, no cut-off elements
- Touch targets ≥44px, thumb-reachable primary actions
- Mobile nav drawer, mobile search, filters as bottom-sheets
- Sticky property contact bar (hides when inline CTA visible)
- Tables → cards; modals → bottom-sheets
- Correct input keyboards (numeric for price/phone); swipeable galleries
- Breakpoints: 360–375px, large phone, tablet, desktop, wide
## Accessibility (build in)
WCAG AA contrast (check gold-on-white) · keyboard focus states · aria-labels · logical headings · labeled fields w/ error association
## Premium details
Generous whitespace (luxury = space) · editorial type (Fraunces w/ restraint) · subtle micro-interactions · consistent radii/shadows/borders (one system) · high-quality image treatment (blur-up, ratios, overlays) · one icon set · Indian-context correct (₹1,00,00,000, Marla/Kanal) · bespoke, not templated SaaS
---
## Deliverables
1. Design system / token sheet (colors, type, spacing, radii, shadows, components) — the foundation
2. Hi-fi designs for every page above, **mobile + desktop**
3. All states (above) per relevant page
4. Reusable component library (Figma preferred)
5. Implementation-ready handoff: specs, tokens, exported assets/icons, notes — precise enough to build faithfully
6. Organized, iterable Figma file (frames by page + state)
## Technical context (so designs are implementable)
- Built in **Next.js + Tailwind CSS** — map designs to a Tailwind-friendly token system
- Functional structure, flows, data, per-plan logic are **already built** — this is **visual/UI design on existing functional pages**, not UX/flow redesign. Flag genuine usability issues, but default = restyle, not re-architect.
- Fonts loaded via next/font (Fraunces, Plus Jakarta Sans)
## Priority (if phased)
1. Design system + core components (foundation)
2. Homepage + Listings + Property detail (buyer core, highest traffic)
3. Dashboard (9 variants — most complex, biggest current weakness)
4. Broker/builder profiles + directories (broker profile flagged "too basic")
5. Pricing pages
6. Post/edit forms + dashboard sub-pages
7. Auth, footer, content
8. Admin (internal, lowest pressure)
## "Done" looks like
Every page — mobile + desktop, every state — looks like one coherent premium brand: calm, trustworthy, editorial, fit for a major property decision. Nothing feels unfinished, templated, or inconsistent. The smallest detail (empty state, disabled button, skeleton, validation error) is as considered as the homepage hero.