System Requirements Document (SRD)

Project Name: topaz-plumber

1. Introduction

The topaz-plumber project is a demonstration website designed for a local plumber in Toronto, Canada, named "Peak Flow Plumbing." This project serves as a showcase for Phil Greenspan's web agency, highlighting its ability to create visually appealing, high-converting, and functional websites tailored to local service businesses. The website will focus on sleek, modern visuals while maintaining a professional tone to build trust and drive lead generation.

The primary goal is to create a flexible, scalable, and visually impressive demo site that can be adapted to various client needs. It will include a direct contact form as the main call-to-action (CTA) and emphasize general plumbing services.

2. System Overview

The topaz-plumber website will serve as a demo for potential clients of Phil Greenspan's web agency. It will feature:

• A modern, responsive design optimized for desktop and mobile users.
• A direct contact form for lead generation.
• A focus on general plumbing services, with flexibility to adapt to specific client requirements.
• High-converting design elements, such as clear CTAs, trust-building visuals, and intuitive navigation.

The system will be built using a scalable tech stack, ensuring ease of maintenance and adaptability for future enhancements.

3. Functional Requirements

• As a User, I should be able to view a sleek, modern homepage that highlights general plumbing services.
• As a User, I should be able to access a direct contact form prominently displayed on the homepage.
• As a User, I should be able to navigate seamlessly across all pages on both desktop and mobile devices.
• As a User, I should be able to view a gallery or visual representation of plumbing services offered.
• As a User, I should be able to read customer testimonials to build trust.
• As a User, I should be able to see a clear call-to-action (e.g., "Contact Us Now") on every page.
• As a User, I should be able to access the website quickly, with minimal load times.

4. User Personas

4.1. Local Homeowner

• Description: A homeowner in Toronto looking for reliable plumbing services for repairs, installations, or emergencies.
• Goals: To find a trustworthy plumber quickly and easily.
• Pain Points: Difficulty in finding reliable service providers and unclear pricing.

4.2. Business Owner

• Description: A small business owner in Toronto seeking commercial plumbing services.
• Goals: To ensure plumbing issues are resolved efficiently to minimize business downtime.
• Pain Points: Lack of clear communication and delays in service.

4.3. Web Agency Client

• Description: A potential client of Phil Greenspan's web agency evaluating the demo site.
• Goals: To assess the agency's ability to create visually appealing and functional websites.
• Pain Points: Concerns about design quality, responsiveness, and lead generation capabilities.

5. Visuals Colors and Theme

Color Palette

The topaz-plumber website will use a unique, modern color palette that conveys professionalism, trust, and a touch of luxury:

• Background: #F4F9FF (Soft Sky Blue)
• Surface: #FFFFFF (Pure White)
• Text: #2B2D42 (Deep Charcoal)
• Accent: #0077B6 (Vivid Blue)
• Muted Tones: #ADB5BD (Soft Gray)

This palette ensures a clean, modern look while emphasizing trust and professionalism.

6. Signature Design Concept

The topaz-plumber homepage will feature an interactive water ripple effect.

Concept Details:

• Visuals: The homepage background will simulate a calm water surface with ripples that react to user interactions (e.g., mouse movements or touch gestures).
• Animation: Subtle, smooth animations will create a sense of fluidity and motion, reinforcing the plumbing theme.
• Transitions: Sections of the homepage will "flow" into each other with wave-like transitions, creating a seamless browsing experience.
• Micro-interactions: Buttons and CTAs will have water-droplet effects when hovered over or clicked.
• Call-to-Action: The direct contact form will appear as a floating element on the water surface, drawing immediate attention.

This bold, memorable design will captivate users and leave a lasting impression, showcasing the web agency's creativity and technical expertise.

7. Non-Functional Requirements

• The website must load within 2 seconds on both desktop and mobile devices.
• The design must be fully responsive and compatible with all major browsers (Chrome, Firefox, Safari, Edge).
• The contact form must be secure and prevent spam submissions.
• The website must adhere to accessibility standards (WCAG 2.1 AA).
• The system must support future scalability for additional features or pages.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Tools

• Litellm for LLM Routing

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

• The website will primarily target users in Toronto, Canada, and will use English as the default language.
• The project is a demo site and does not require integration with live plumbing service systems.
• The scope is flexible, allowing the project manager to adapt features as needed.
• The website will not include e-commerce functionality.

10. Glossary

• CTA: Call-to-Action, a prompt for users to take a specific action (e.g., "Contact Us Now").
• Responsive Design: A design approach that ensures the website looks and functions well on all devices.
• WCAG: Web Content Accessibility Guidelines, standards for making web content accessible to people with disabilities.
• Docker: A platform for developing, shipping, and running applications in containers.
• Kubernetes: A system for automating the deployment, scaling, and management of containerized applications.