System Requirements Document (SRD)

Project Name: Mammoth-Website

1. Introduction

The Mammoth-Website project is aimed at creating a premium, modern, and visually impressive website for Prince Colour World, an interior color and paint finishing business based in Gandhinagar, Gujarat. The website will serve as a digital showcase of the business's expertise, professionalism, and premium services, while also providing an engaging user experience through detailed 3D visuals, dynamic models, interactive animations, and smooth transitions.

This document outlines the system requirements for the development of the Mammoth-Website, ensuring it aligns with the business's goals and user expectations.

2. System Overview

The Mammoth-Website will be a 4-page website designed to reflect the premium and professional nature of Prince Colour World. The website will feature:

• A 3D-inspired modern visual feel with texture-focused sections and dynamic models.
• Detailed 3D visuals showcasing paint finishes, wall textures, and project transformations.
• Interactive animations and smooth scrolling transitions for a seamless user experience.
• A before-and-after project showcase to highlight the quality of work.
• A highly professional layout with a colorful theme inspired by paint rollers and brushes to resonate with the interior design theme.

The website will include the following pages:

1. Home: A visually captivating landing page introducing the business with 3D elements and colorful animations.
2. About: A page detailing the story, values, and expertise of Prince Colour World.
3. Services: A detailed showcase of the services offered, including wall painting, texture finishes, and wallpaper installation, with interactive 3D previews.
4. Contact: A page with business contact details, operating hours, and a same-day delivery service option.

3. Functional Requirements

• As a User, I should be able to view a visually engaging homepage with 3D-inspired visuals, dynamic models, and smooth transitions.
• As a User, I should be able to navigate to the About page to learn about the business's story and expertise.
• As a User, I should be able to explore the Services page to view detailed descriptions and visuals of:
  • Wall painting services.
  • Texture finishes.
  • Wallpaper installation.
• As a User, I should be able to interact with 3D previews of textures and finishes to visualize them in real-time.
• As a User, I should be able to view a before-and-after project showcase to understand the quality of work.
• As a User, I should be able to access the Contact page to find the business's address, phone number, operating hours, and same-day delivery option.
• As a User, I should experience smooth scrolling and transitions across all pages.
• As a User, I should see paint roller and brush-inspired animations that reveal content dynamically.
• As an Admin, I should be able to manage website content, update service details, and upload project showcases through an easy-to-use CMS.

4. User Personas

1. Admin:

   • Role: Manages website content, updates service details, and uploads project showcases.
   • Needs: An easy-to-use content management system (CMS) for updating text, images, and videos.

2. Customer:

   • Role: Potential or existing customers looking for premium interior finishing services.
   • Needs: A visually engaging website that highlights services, showcases quality, and provides easy access to contact information.

3. Guest:

   • Role: Casual visitors exploring the business for potential services.
   • Needs: A professional and visually impressive website that builds trust and interest.

5. Creative Reference Stories

Based on the requirements, the Neon Cyberpunk Tokyo story has been adapted to create a vibrant, colorful, and energetic design direction. This story emphasizes bold neon-inspired colors and dynamic animations, which align with the colorful theme and paint roller/brush-inspired elements.

Design Interpretation:

• Mood: Electric, energetic, and bold, reflecting the creativity and vibrancy of Prince Colour World.
• Palette: A mix of vibrant neon colors and deep contrasting tones to create a dynamic and engaging look.
• Typography: Condensed futuristic sans-serif for headings to add boldness, paired with clean geometric sans-serif for body text for readability.
• Layout: Dynamic and immersive, with interactive elements inspired by paint rollers and brushes.
• Motion: Fast and responsive animations, such as neon glow effects and brushstroke transitions, to create a lively browsing experience.

6. Visuals Colors and Theme

A unique color palette has been created to reflect the vibrant and colorful nature of the project:

• Background: #1A1A2E (Deep Navy Blue)
• Surface: #16213E (Dark Indigo)
• Text: #EAEAEA (Bright Clean White)
• Accent 1: #FF6F61 (Vibrant Coral)
• Accent 2: #FFD700 (Electric Gold)
• Muted Tones: #A6A6A6 (Soft Gray)

These colors will be used consistently across the website to maintain a cohesive and visually striking look.

7. Signature Design Concept

The Mammoth-Website will feature a 3D-inspired homepage that immerses users in a dynamic, colorful environment inspired by paint rollers and brushes.

Key Features:

• Interactive Paint Roller Animation: The homepage will feature a paint roller animation that "paints" the screen as users scroll, revealing content dynamically.
• Dynamic 3D Brush Models: The Services page will include 3D models of paintbrushes and rollers, allowing users to interact with them to explore different textures or colors.
• Before-and-After Slider: A dynamic slider will allow users to drag a divider across images to reveal the transformation of spaces before and after Prince Colour World's services.
• Vibrant Paint Splashes: Backgrounds will feature colorful paint splashes and brushstroke patterns that animate subtly to create a lively and creative feel.
• Neon Glow Transitions: Smooth transitions between sections will use neon glow effects to maintain a cohesive and energetic visual experience.

This design concept ensures that the website is not only visually impressive but also interactive, memorable, and aligned with the brand identity.

8. Non-Functional Requirements

• The website must load within 3 seconds on standard broadband connections.
• The website must be responsive and optimized for both desktop and mobile devices.
• The website must adhere to WCAG 2.1 accessibility standards to ensure usability for all users.
• The website must be hosted on a secure server with HTTPS enabled.
• The website must support selective re-run capability, allowing users to manually trigger SRD regeneration for updates.

9. Tech Stack

Frontend:

• React for Web

Backend:

• Python
• FastAPI

Database:

• MySQL (with Alembic for migrations)

AI Tools:

• Google Nano Banana for generating high-quality images of textures and finishes.

Local Orchestration:

• Docker
• docker-compose

Server-Side Orchestration:

• Kubernetes

10. Assumptions and Constraints

• The website will primarily target users in Gandhinagar, Gujarat, and nearby regions.
• The website will use vibrant and colorful tones to align with the brand identity of Prince Colour World.
• The website will be developed in English, with the option to add regional languages in future updates.
• The website will not include e-commerce functionality in the initial phase.

11. Glossary

• 3D-inspired visuals: Design elements that create a sense of depth and realism, mimicking three-dimensional objects.
• Before-and-after showcase: A visual comparison of a project before and after completion.
• Paint roller animation: A dynamic effect where content is revealed as if painted on by a roller.
• Neon glow effects: Bright, glowing visual effects inspired by neon lights.
• WCAG 2.1: Web Content Accessibility Guidelines, a standard for making web content accessible to people with disabilities.
• Selective re-run capability: A feature allowing users to manually trigger updates or regeneration of specific components of the SRD.

This document ensures that the Mammoth-Website project aligns with the vision and requirements of Prince Colour World, delivering a premium, colorful, and visually engaging online presence.