windy-mist System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "windy-mist" project, which is a website designed to showcase Ankita Kabra's manufacturing products, including PVC Mist Eliminators, PolyCarbonate Light Diffusers, PolyCarbonate Police Lathi, and PolyCarbonate Anti Riot Shield.

System Overview

The "windy-mist" website will serve as a digital platform to effectively showcase Ankita Kabra's range of specialized manufacturing products. The primary focus will be on presenting detailed product galleries and descriptions to highlight the unique features and applications of each item. The website will enhance the online presence of the business and facilitate customer engagement.

Functional Requirements

• As a User, I should be able to view product galleries showcasing PVC Mist Eliminators, PolyCarbonate Light Diffusers, PolyCarbonate Police Lathi, and PolyCarbonate Anti Riot Shield.
• As a User, I should be able to read detailed product descriptions for each item in the gallery.
• As a User, I should be able to navigate through different sections of the website, including product galleries and contact information.

User Personas

• User: Individuals or businesses interested in purchasing or learning more about the manufacturing products offered by Ankita Kabra.

Visuals Colors and Theme

• primary: #1A73E8 (a deep blue representing trust and professionalism)
• primary_light: #E8F0FE (a light blue for hover states and secondary UI)
• secondary: #FF6F61 (a coral hue for headlines and emphasis)
• accent: #FFD700 (a vibrant gold for CTAs and active states)
• highlight: #FFA500 (a warm orange for hover states and notifications)
• bg: #FFFFFF (a clean white background)
• surface: rgba(240, 240, 240, 0.8) (a light grey for card/panel backgrounds)
• text: #333333 (a dark grey for primary text)
• text_muted: #777777 (a softer grey for secondary text)
• border: rgba(200, 200, 200, 0.5) (a subtle grey for borders)

Signature Design Concept

The "windy-mist" website will feature an interactive 3D product showcase on the homepage. Using @react-three/fiber and @react-three/drei, the homepage will present a rotating carousel of 3D models of the products. Users can click on each model to view detailed specifications and images. The background will subtly change colors based on the time of day, creating a dynamic and engaging experience. Hovering over products will trigger animations that highlight key features, making the interaction both informative and visually appealing.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model to create a layered depth effect as users scroll. Atmospheric elements will move at different speeds to enhance the storytelling aspect of the product showcase. Internal pages will maintain a "static" interaction model to ensure clarity and ease of access to information.

Non-Functional Requirements

• The website must load within 3 seconds on standard broadband connections.
• It should be responsive and accessible on all major browsers and devices.
• The design should adhere to accessibility standards to ensure usability for all users.

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 serve users in India, so it should consider local preferences and standards.
• The website will not include e-commerce functionalities at this stage.
• The focus will be on showcasing products rather than facilitating direct sales.

Glossary

• PVC Mist Eliminators: Devices used to remove mist from gas streams.
• PolyCarbonate Light Diffusers: Panels used to diffuse light evenly.
• PolyCarbonate Police Lathi: A baton used by police forces.
• PolyCarbonate Anti Riot Shield: A protective shield used in riot control.

This document outlines the requirements and design considerations for the "windy-mist" project, ensuring a comprehensive and engaging online presence for Ankita Kabra's manufacturing business.