System Requirements Document

Project Name: infini-construction

1. Introduction

The infini-construction project aims to create a dynamic and user-friendly website for a construction company based in the US. The website will showcase the company's work, highlight client testimonials, and include an AI-powered quote estimator tool to provide instant project cost estimates based on user inputs. This document outlines the system requirements for the project, ensuring clarity and alignment with the user's vision.

2. System Overview

The infini-construction website will serve as a digital platform for the construction company to present its portfolio, build trust through client testimonials, and offer an interactive AI-powered quote estimator. The system will be designed to cater to potential clients, providing them with a seamless experience to explore the company's capabilities and estimate project costs.

Key features include:

• A gallery showcasing images of completed projects.
• A testimonials section to highlight client satisfaction and reliability.
• An AI-powered quote estimator tool for instant cost calculations based on user inputs like project size, materials, and other relevant parameters.

The website will be optimized for both desktop and mobile devices, ensuring accessibility and usability across platforms.

3. Functional Requirements

As User:

• I should be able to view a gallery of images showcasing completed construction projects.
• I should be able to read testimonials from previous clients.
• I should be able to use an AI-powered quote estimator to calculate project costs based on inputs like project size and materials.

4. User Personas

1. Potential Client

• Description: Individuals or businesses looking for construction services.
• Goals: Explore the company's portfolio, read testimonials, and get an instant quote for their project.
• Pain Points: Lack of transparency in pricing, difficulty in assessing the company's capabilities.

2. Admin

• Description: The construction company staff responsible for managing the website.
• Goals: Upload project images, manage testimonials, and ensure the AI quote estimator is functioning correctly.
• Pain Points: Need for an intuitive backend system to manage content efficiently.

5. Visuals Colors and Theme

Color Palette:

The infini-construction website will feature a professional yet approachable color scheme that reflects the reliability and innovation of the construction industry.

• primary: #2A4D69 (Deep Steel Blue)
• primary_light: #5A7D9A (Light Steel Blue)
• secondary: #F4A259 (Warm Coral)
• accent: #F9DC5C (Bright Yellow)
• highlight: #FFB400 (Golden Amber)
• bg: #F5F5F5 (Light Gray)
• surface: rgba(42, 77, 105, 0.8) (Semi-transparent Steel Blue)
• text: #1C1C1C (Dark Charcoal)
• text_muted: #6E6E6E (Muted Gray)
• border: rgba(42, 77, 105, 0.2) (Subtle Steel Blue)

6. Signature Design Concept

Blueprint Interactive Homepage

The homepage will resemble an architectural blueprint, complete with pencil-sketch animations and interactive elements. Users will feel immersed in the construction process as they navigate the site.

Key Features:

• Interactive Blueprint Design: The homepage will feature a blueprint-style layout with sections outlined as if drawn by hand. Hovering over sections will reveal animations, such as lines being drawn or measurements appearing dynamically.
• Dynamic Gallery: Images of completed projects will appear as "pop-up windows" on the blueprint, with smooth transitions and hover effects.
• AI Quote Estimator Integration: The estimator tool will be embedded within the blueprint, styled as a "calculator" that users can interact with directly.
• Micro-Interactions: Clicking on elements like testimonials or gallery images will trigger subtle animations, such as flipping cards or expanding sections.

Libraries to Use:

• @react-three/fiber + @react-three/drei for 3D blueprint effects.
• gsap for scroll-triggered animations and dynamic transitions.
• framer-motion for hover and click interactions.

7. Interaction Model & Motion Direction

Interaction Model: Parallax

The landing page will feature a parallax interaction model, creating a layered depth effect as users scroll. Decorative elements like blueprint lines and construction tools will move at different speeds, while the main content scrolls naturally.

Motion Direction:

• Scroll-triggered Animations: Sections will reveal themselves as users scroll, with smooth transitions and dynamic effects.
• Hover Effects: Interactive elements like buttons and images will respond to hover with subtle animations.
• Micro-Interactions: Small animations will enhance user engagement, such as glowing effects on the AI estimator or flipping testimonial cards.

8. Non-Functional Requirements

• Performance: The website must load within 3 seconds on both desktop and mobile devices.
• Accessibility: Ensure compliance with WCAG 2.1 standards for web accessibility.
• Scalability: The system should support future expansion, including additional features or increased traffic.
• Security: Implement SSL encryption and secure user data, especially for the AI quote estimator.
• Localization: Default to US locale settings, including currency in USD and timezone in EST.

9. Tech Stack

Frontend:

• React for Web

Backend:

• Python
• FastAPI

Database:

• MySQL or MariaDB (using Alembic for migrations)

AI Models:

• GPT 5.4 for user-friendly responses in the quote estimator

AI Tools:

• Litellm for LLM Routing
• Langchain

Local Orchestration:

• Docker
• docker-compose

Server-Side Orchestration:

• Kubernetes

10. Assumptions and Constraints

Assumptions:

• The AI quote estimator will calculate costs based solely on user inputs like project size and materials.
• The website will primarily target users in the US.

Constraints:

• The system must adhere to US locale settings, including currency (USD) and timezone (EST).
• The AI quote estimator must provide accurate results within 2 seconds.

11. Glossary

• AI Quote Estimator: A tool powered by artificial intelligence to calculate project costs based on user inputs.
• Blueprint Design: A visual style resembling architectural drawings, used for the website's homepage.
• Parallax Interaction: A scrolling effect where background and foreground elements move at different speeds to create depth.
• WCAG 2.1: Web Content Accessibility Guidelines, version 2.1, ensuring websites are accessible to all users.

End of Document.