Mobile-First Frontend Build in Next.js (React) + Tailwind (UI + HTML Only)

PROJECT: Premium Mobile-First Frontend Build in Next.js (React) + Tailwind (UI + HTML Only)

OVERVIEW: We are building House True, a premium, trust-first real estate platform for Delhi (Rent + Buy).
We need a frontend developer to build the full website UI in Next.js (React).
This is UI + HTML (rendered via Next.js) only. Our backend team will connect APIs, database, Zoho, and AI tracking later.
1. Use mock/static data so pages look and behave real.
2. Deliver a turnkey Next.js project that runs locally.
3. Detailed page layout Word document can be shared upon request after the project is awarded.

OUR TRAFFIC & COMPATIBILITY
Traffic mix: 65% mobile, 25% desktop, 10% tablets → mobile-first is critical.
Browsers
Chrome, Edge, Firefox, Safari (mobile + desktop)

Tech Requirements:
Next.js - App Router
Tailwind CSS- main styling
No Bootstrap look, no heavy animations

Note: In Next.js, the “HTML” is written inside React components (JSX) and rendered as real HTML in the browser.

What You Will Build (Pages):
A) Core Pages (UX provided for these)
1. Home
2. Listing (filters open as a bottom panel on mobile)+( media privacy + expandable sections)
3. Property Detail (media privacy + expandable sections)
4. Insights/Blog
5. Insights Home
6. Category pages (Rent / Buy / Market Reports)
7. Article detail page
8. Login (OTP UI)
9. Media Unlock Flow (OTP UI: attempt → success)
10. Shortlist Page
11. Compare Page (Focus Mode — clean mobile view, not spreadsheet grid)
12. FAQ Page
13. Contact Us Page
14. For Owners Page
15. Simple internal documentation/static page
16. 404 Page (Page Not Found)

Global Components (Reusable):
1. Header: Markets (Rent/Buy + location selector UI), Insights, Contact, Login
2. Footer: Company, Markets, Policies, Social links
3. Sticky bottom nav (mobile): Home, Search, Shortlist, Insights/Market, Account
4. Property cards, badges, trust strips, chips/tags
5. CTA Buttons, forms, modals, bottom sheets
6. UI states: loading, empty, error, disabled

Required UI Behaviors (Front-end Only):
1. Implement as working UI:
2. Filter bottom sheet open/close + apply/reset UI
3. Real-time filtering UI behavior using mock data (results update without full refresh)
4. Sticky bottom navigation behavior
5. Shortlist toggle (saved/unsaved state)
6. Compare “Focus Mode” layout (mobile-friendly)
7. Media unlock flow: OTP screen → success screen
8. Toast/success messages
9. All modals/bottom sheets should not break scrolling

Developer-Friendly Binding Rules (Very Important for Backend Integration):

To make backend binding easy later, please follow these rules:
1. Use clear placeholder variables in UI (example labels in code):
Property Id, title, price, location, bhk, areaSqft, furnishing, availability, images, verified Date, expandable sections, etc.
2. Stable HTML structure for repeated items
Property cards, chips, badges, sections should be consistent and reusable.
3. Add predictable attributes where useful
Use consistent element identifiers or data attributes like:
data-property-id, data-action="shortlist", data-action="compare", data-section="media-unlock"
(This helps later wiring and analytics.)
4. Do not hardcode text everywhere
Keep headings/labels centralized where possible (constants/config) so content changes are easy.
5. Components should be reusable
6. UI states must be built as components
Loading / Empty / Error states should be clearly available for backend to trigger later.

Styling & Brand Direction:
Calm, premium, minimal, advisory
Trust-first tone
Respectful media privacy messaging
Clear Rent/Buy context without clutter

How We Approve:
1. Core pages match provided UX closely
2. Premium spacing + typography consistency
3. Works across mobile/tablet/desktop and major browsers
4. Bottom sheets + sticky nav work correctly
5. No broken layouts, overlaps, inconsistent padding
6. Clean, readable code and reusable components
7. Follows the Binding Rules above (so backend integration is smooth)