Sutrahomes Real Estate System Requirements Document

1. Introduction

This System Requirements Document (SRD) outlines the specifications for the Sutrahomes real estate portfolio website. The project aims to create a premium, high-performance, single-file full-stack website inspired by the structure of homeambit.com. The brand name is "Sutrahomes," and the design system follows a strict high-end minimalist monochrome aesthetic.

2. System Overview

The Sutrahomes website will serve as a comprehensive platform for showcasing real estate properties. It will feature a minimalist design with a focus on high performance and user engagement through interactive elements and a 3D animated logo. The website will integrate global tools such as WhatsApp and Google Maps for enhanced user interaction and navigation.

2a. Source Content Inventory

• Source: https://homeambit.com
  • Structure Reference: Navigation, hierarchy, grouping, pages, sections, and information architecture.

3. Functional Requirements as Story Points

• As a User, I should be able to view a minimalist hero headline with an architectural grid filter search block.
• As a User, I should be able to filter properties by region (Medinipur, Kharagpur, Bardhaman, Arambagh), configuration layout (2 BHK, 3 BHK), maximum budget, and construction status.
• As a User, I should be able to see property cards displaying details such as price in Lakhs/Crores and configuration layout.
• As a User, I should be able to interact with a 3D animated logo in the navigation header.
• As a User, I should be able to click a floating WhatsApp button to initiate a chat.
• As a User, I should be able to use "Open Office Map Direction" buttons to navigate using Google Maps.
• As a User, I should be able to view a corporate mapping footer with operational zones, regulatory links, and contact information.
• As a User, I should be able to create items, as pre-resolved by the API supervisor.

4. User Personas

• General User: Interested in browsing and filtering real estate properties.
• Agent: Engages with potential buyers and provides property details.
• Admin: Manages property listings and website content.

5. Core User Flows

• User visits the homepage -> interacts with the hero filter -> selects region and configuration -> views filtered property cards.
• User hovers over property images -> images transition from grayscale to color.
• User clicks on the WhatsApp button -> initiates chat with an agent.
• User clicks on "Open Office Map Direction" -> navigates using Google Maps.
• Admin logs in -> creates or updates property listings -> saves changes.

6. Visuals Colors and Theme

• primary: #000000 (pure black)
• primary_light: #e5e5e5 (light gray for borders)
• secondary: #ffffff (pure white for backgrounds)
• accent: #25d366 (vibrant green for WhatsApp button on hover)
• highlight: #e5e5e5 (light gray for hover states)
• bg: #ffffff (page background)
• surface: rgba(255, 255, 255, 0.8) (card/panel background)
• text: #000000 (primary text color)
• text_muted: #e5e5e5 (muted text for secondary information)
• border: rgba(229, 229, 229, 0.8) (subtle border color)

7. Signature Design Concept

The Sutrahomes homepage will feature a 3D animated logo in the sticky header navbar. This logo will be a geometric architectural house monogram that rotates smoothly on a 3D axis, creating a subtle depth illusion. On hover, the logo will flip 180 degrees, showcasing its structural depth before returning to its ambient rotation. This interactive element will be built using pure CSS/SVG, providing a seamless and engaging user experience.

8. Interaction Model & Motion Direction

• Interaction Model: Parallax
  • The homepage will feature layered depth via scroll, with decorative elements translating at different speeds to create a visually rich first impression.
• Motion Direction: Animated
  • Moderate scroll-triggered reveals and hover transitions will be used to enhance user interaction.

9. Non-Functional Requirements

• The website must load within 3 seconds on standard broadband connections.
• It must be responsive and accessible on all major browsers and devices.
• The design must adhere to the minimalist monochrome aesthetic.

10. Tech Stack

• Frontend: React for Web
• Backend: FastAPI
• Database: MySQL
• AI Tools: Not applicable
• Local Orchestration: Docker
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The website will primarily serve users in India, with currency displayed in INR.
• The design and functionality will be inspired by the structure of homeambit.com but will not replicate its content.

12. Glossary

• BHK: Bedroom, Hall, Kitchen
• INR: Indian Rupee
• 3D Animated Logo: A logo that rotates on a 3D axis to create depth.
• Parallax: A scrolling technique that creates an illusion of depth by moving background and foreground elements at different speeds.