rustic-real

As a buyer, I want to use the Home page to explore an interactive map of India with property pins, apply dynamic filters for price and location, and see micro-animations on pin drops and transitions. Implement the Home page based on the existing JSX design (Home v2). Includes: NavBar, Hero with interactive map, filter panel, hover interactions showing property previews, and a 'Contact Seller' button on each pin. Page links to Listings and Property Detail pages.

As a buyer, I want to browse property listings with essential details like price, location, and description, and apply filters to refine results. Implement the Listings page based on the existing JSX design (Listings v2). Includes: filter sidebar (price range, location), property cards with thumbnail, price in INR, location, and description, and pagination. Page is reached from the Home map/filters and links to Property Detail.

As a buyer, I want to view full property details including a photo gallery carousel, price, location, description, and a direct contact/inquiry option. Implement the Property Detail page based on the existing JSX design (Property v2). Includes: image gallery with carousel, property specs, map embed showing property location, and a 'Contact Seller' CTA. Page is reached from Listings and links to the Contact page.

As a buyer, I want to submit an inquiry about a property through a contact form with fields for name, email, phone, subject, and message. Implement the Contact page based on the existing JSX design (Contact v2). Includes: ContactHero, ContactInfoStrip, ContactForm, ContactSidebar, OfficeLocationsMap, FAQAccordion, SocialAndCommunity, and Footer sections. Page is reached from Property Detail and Home map pins.

As a buyer, I want to use a backend API to fetch property listings with filtering by price range and location so that the Listings and Home pages can display real data. Implement FastAPI endpoints: GET /api/properties (with query params: min_price, max_price, location, page, limit), returning property id, title, price (INR), location, description, thumbnail URL, and coordinates. Include MySQL schema for properties table and Alembic migration.

As a buyer, I want to use a backend API to submit a property inquiry form so that my message is saved and the seller/agent is notified. Implement FastAPI endpoint: POST /api/inquiries accepting name, email, phone, subject, message, and optional property_id. Store in MySQL inquiries table with Alembic migration. Return success confirmation.

As a buyer, I want to use a backend API to fetch full property details including photo gallery URLs so that the Property Detail page displays complete information. Implement FastAPI endpoint: GET /api/properties/{id} returning all property fields plus an array of image URLs for the gallery carousel. Include Alembic migration for property_images table.

As a buyer, I want all pages to load real property data from the backend so that the browsing experience reflects actual listings. Wire up the Home map, Listings page filters, Property Detail page, and Contact form to their respective FastAPI endpoints using React fetch/axios. Handle loading states, error boundaries, and empty states for a polished experience.

As a buyer using mobile or tablet, I want all pages to be fully responsive and accessible so that I can browse properties on any device. Audit and fix all pages (Home, Listings, Property, Contact) for mobile breakpoints, touch-friendly tap targets (min 44x44px), keyboard navigation, WCAG 2.1 contrast ratios, and screen reader compatibility. Test on iOS Safari, Android Chrome, and desktop browsers.