strong-project

As a visitor, I want to experience the cinematic Haveli gate opening sequence when I first land on the website. Implement based on the existing JSX design (Homepage v1). Implement the full-screen GSAP-animated teak wooden Haveli doors with brass fittings and carved peacock/floral motifs slowly swinging open from center, warm golden-hour glow flooding in from amber to ivory, and the company name revealed in Cormorant Garamond gold lettering. This is the entry point of the Visitor user flow (Homepage: View Hero → Homepage: Experience Animations → Homepage: Scroll Sections).

As a visitor, I want to navigate the site smoothly via a clearly structured navigation menu that links to Home, Portfolio, About, Services, and Contact pages. Navigation should feature Indian heritage styling with brass/copper accents, serif typography, and smooth transition animations. Must be fully responsive (hamburger menu on mobile). The hanging brass jharokha element at the top of the navigation sways gently in a simulated breeze.

As a visitor, I want to see a globally consistent footer with jute/woven fabric texture background, company branding, navigation links, social media links, and contact details. Heritage iconography with lotus and brass styling. Fully responsive.

As a visitor, I want pages to load within 3 seconds with optimized images. Implement WebP format conversion for all property images on upload, lazy loading for image-heavy pages (Portfolio, Property Detail), and responsive image srcset for different viewport sizes. Integrate with Media Upload API pipeline.

As an admin, I want to securely log in to the admin panel through a dedicated Login page. Implement based on the existing JSX design (Login v1). Include email/password form with validation, authentication API call, redirect to Dashboard on success, and error handling for invalid credentials. This is the entry point of the Admin user flow (Login: Sign In → Dashboard: View Overview). Fully responsive.

As a visitor, I want to explore the Home hero section after the Haveli gate opens, experiencing the grand courtyard layout with breathable white space, carved stone pillar decorative borders, a slowly rotating low-opacity mandala watermark beneath hero text, floating diya animations along viewport edges with flickering CSS glow, and a peacock SVG silhouette whose tail feathers animate open further on scroll. Implement based on existing JSX design (Homepage v1). Implements 'Homepage: Experience Animations' and 'Homepage: Scroll Sections' steps in the Visitor flow.

As a visitor, I want to browse all property listings on the Portfolio page with filter and search capability. Implement based on the existing JSX design (Portfolio v1). Property cards animate in as 'stone tablets rising from the ground' using Framer Motion scroll-triggered reveals. Hover on a card shows a brass key icon with subtle rotation. Implement property filtering and search UI. Jaali screen overlay dissolve transition on section entry. Each card is styled as a framed Mughal miniature painting with ornate brass-colored border and diya-glow on hover. Calls the Properties API. Corresponds to 'Portfolio: Browse Listings' and 'Portfolio: Search Properties' in the Visitor flow.

As a visitor, I want to view detailed information about an individual property including an image gallery, full description, and specifications such as size, location, price, and amenities. Implement based on the existing JSX design (PropertyDetail v1). The page should use heritage-styled layouts with marble vein hero image overlay and scroll-triggered content reveals. Calls Properties API for property data. Implements 'PropertyDetail: View Images' and 'PropertyDetail: Read Specs' in the Visitor flow, leading to Contact.

As a visitor, I want to learn about the company's history, values, and team on the About page. Implement based on the existing JSX design (About v1). The page should feature scroll-triggered Framer Motion reveals, aged parchment texture section backgrounds, and heritage typography. Implements 'About: Read History' and 'About: Meet Team' in the Visitor flow, accessible from Homepage Scroll Sections and leading to Contact.

As a visitor, I want to view the company's real estate service offerings on the Services page with rich descriptive content and decorative Indian motif dividers between service categories. Scroll-triggered reveals using Framer Motion. Calls the Content Management API for dynamic service descriptions. Implements 'Services: View Offerings' accessible from the About page and leading to the Contact page. Design required — no existing design page for Services.

As a visitor, I want to submit an inquiry through the Contact page featuring a beautiful form with ink-on-parchment scroll-triggered text animation, and also view the company's phone, email, and address details. Implement based on the existing JSX design (Contact v1). Form submission should call the backend Contact Form API. Implements 'Contact: Submit Inquiry' in the Visitor flow, reachable from PropertyDetail, About, and Services.

As an admin, I want to view an overview dashboard after login showing summary stats: total properties, new contact submissions, and quick-access links to manage properties and submissions. Implement based on the existing JSX design (Dashboard v1). Includes Trigger Override button that fires the mandala bloom animation (full-screen mandala bloom: expands from center, glows gold, then contracts) and logs the override event via the Design Override API. Implements 'Dashboard: View Overview' and 'Dashboard: Trigger Override' in the Admin flow.

As an admin, I want to view, add, edit, and remove property listings from the admin panel. Implement the Properties page based on the existing JSX design (Properties v1). Includes properties list table, Add Listing form with image upload, Edit Listing form pre-populated with existing data, and Remove Listing confirmation dialog. Calls Properties API and Media Upload API. Implements Admin flow: Properties: View Listings → Add Listing, Edit Listing → Manage Images, Remove Listing.

As a visitor, I want to experience site-wide scroll and cursor micro-interactions: jaali lattice screen overlays dissolving on scroll to reveal content sections, horizontal sandstone texture swipe transitions between sections, rangoli dot-pattern cursor trail fading within 1-2 seconds, a custom animated diya flame cursor with golden trail, and parallax depth effects on heritage texture layers. Uses GSAP and Framer Motion. Also includes the carved stone panels 'sliding apart' via CSS clip-path animation and rangoli pattern bloom on section entry. Implements the 'Homepage: Experience Animations', 'Homepage: Scroll Sections' and ambient interaction layer throughout all pages.

As an admin, I want to view and manage contact form submissions in the admin panel. Implement the Inquiries page based on the existing JSX design (Inquiries v1). Show a list of inquiries with visitor name, email, message, and date. Support marking as read and deleting submissions. Calls Contact Form API. Implements Admin flow: Inquiries: View Submissions → Manage Inquiries.

As an admin, I want to update company information and services content through the admin panel. Implement the SiteContent page based on the existing JSX design (SiteContent v1). Provide editable forms for services descriptions and company info, including team details. Changes persist via the Content Management API. Implements Admin flow: SiteContent: Update Company Info → Edit Team Details.

As a visitor, I want the website to be discoverable via search engines and accessible to all users. Implement semantic HTML structure across all pages, meta tags and Open Graph tags per page, XML sitemap generation, alt text for all images, keyboard navigability, WCAG 2.1 AA color contrast compliance, and prefers-reduced-motion animation fallbacks.