Silent-System

Introduction

The Silent-System project is aimed at developing a comprehensive website for Bombay Buildtech, a construction business based in India. This document outlines the system requirements necessary to create a robust and user-friendly platform that caters to the needs of the business and its clients.

System Overview

The Silent-System will serve as an online presence for Bombay Buildtech, providing information about the company's services, projects, and contact details. The website will be designed to enhance user engagement and facilitate easy navigation for potential clients and partners. It will also include features to showcase the company's portfolio and allow users to inquire about services.

Functional Requirements

• As a Visitor, I should be able to view the homepage with an overview of Bombay Buildtech.
• As a Visitor, I should be able to navigate through the services offered by Bombay Buildtech.
• As a Visitor, I should be able to view detailed information about past and ongoing projects.
• As a Visitor, I should be able to contact Bombay Buildtech through a contact form.
• As a Visitor, I should be able to access the company's location and contact details.
• As a Visitor, I should be able to submit inquiries regarding construction services.
• As an Admin, I should be able to update the content on the website, including services and project details.

User Personas

• Visitor: Individuals or businesses looking for construction services and information about Bombay Buildtech.
• Admin: Personnel responsible for managing website content and responding to inquiries.

Core User Flows

• Visitor lands on the homepage -> Navigates to services -> Views project portfolio -> Submits an inquiry through the contact form.
• Admin logs into the backend -> Updates service details -> Adds new projects to the portfolio -> Reviews and responds to inquiries.

Visuals Colors and Theme

• primary: #2C3E50 (Dark Slate Blue)
• primary_light: #34495E (Light Slate Blue)
• secondary: #E74C3C (Crimson)
• accent: #F39C12 (Vibrant Orange)
• highlight: #F1C40F (Golden Yellow)
• bg: #ECF0F1 (Light Grey)
• surface: rgba(236, 240, 241, 0.8)
• text: #2C3E50 (Dark Slate Blue)
• text_muted: #95A5A6 (Muted Grey)
• border: rgba(44, 62, 80, 0.2)

Signature Design Concept

The homepage of the Silent-System will feature an interactive blueprint design, where users can explore different sections of the website as if they are navigating through a digital architectural plan. As users hover over different areas, sections will illuminate, providing a preview of the content. Clicking on a section will zoom into detailed views, using gsap for smooth transitions and animations. This concept will create an engaging and memorable experience, reflecting the construction theme of Bombay Buildtech.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll through the site. Decorative elements such as architectural sketches and construction tools will move at different speeds, enhancing the storytelling aspect of the website. Internal pages will maintain a "static" interaction model to ensure clarity and ease of access to information.

Non-Functional Requirements

• The website should load within 3 seconds on standard broadband connections.
• It should be accessible on all major browsers and devices, including mobile phones and tablets.
• The website must comply with local data protection regulations.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local orchestration: Docker, docker-compose
• Server-side orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target users in India, considering local language and cultural nuances.
• The website will not include e-commerce functionalities.
• The admin panel will be accessible only to authorized personnel.

Glossary

• Visitor: A user accessing the website to view information or make inquiries.
• Admin: A user with permissions to manage and update website content.
• Parallax: A visual effect where background images move slower than foreground images, creating a sense of depth.
• Blueprint Design: A design concept that mimics architectural blueprints, used to enhance the thematic relevance of the website.