System Requirements Document for garnet-bot

Introduction

The garnet-bot project aims to redesign the Shah Industries website to create a modern, engaging, and informative online presence. Shah Industries is a pioneer in manufacturing Reactive Dyes since 1976, with a strong global presence and a commitment to quality and long-term partnerships. The new website will reflect the company's values and competitive edge, drawing inspiration from industry competitors like Equinox.

System Overview

The garnet-bot project will deliver a complete redesign of the Shah Industries website, focusing on a modern aesthetic and enhanced user experience. The website will serve as a digital showcase for Shah Industries' products, certifications, and global reach. It will include sections for company introduction, product listings, client testimonials, and a blog to engage with the audience and share industry insights.

Functional Requirements

• As a Visitor, I should be able to view the company introduction to understand Shah Industries' history and values.
• As a Visitor, I should be able to browse the product listings to see the range of Reactive Dyes offered.
• As a Visitor, I should be able to read client testimonials to gain confidence in the company's reliability and quality.
• As a Visitor, I should be able to access the blog to read about industry trends and company news.
• As a Visitor, I should be able to view Shah Industries' certifications to verify compliance with global standards.
• As a Visitor, I should be able to contact Shah Industries for inquiries or further information.

User Personas

• Visitor: Individuals or companies interested in learning about Shah Industries, its products, and industry insights.
• Potential Client: Businesses looking for reliable suppliers of Reactive Dyes and interested in establishing partnerships.
• Industry Professional: Individuals seeking industry trends, news, and technical specifications related to Reactive Dyes.

Core User Flows

• Visitor navigates to the homepage -> reads company introduction -> browses product listings -> views client testimonials -> accesses the blog -> contacts Shah Industries.
• Potential Client visits the website -> explores product listings -> checks certifications -> reads client testimonials -> contacts Shah Industries for partnership inquiries.
• Industry Professional accesses the blog -> reads articles on industry trends -> explores technical specifications of products.

Visuals Colors and Theme

• primary: #1A73E8 (deep blue)
• primary_light: #E8F0FE (light blue)
• secondary: #FF7043 (coral)
• accent: #FFD600 (vibrant yellow)
• highlight: #FFAB40 (amber)
• bg: #FFFFFF (white)
• surface: rgba(255, 255, 255, 0.9)
• text: #212121 (dark grey)
• text_muted: #757575 (light grey)
• border: rgba(33, 33, 33, 0.1)

Signature Design Concept

The homepage will feature an interactive 3D globe using @react-three/fiber and @react-three/drei, representing Shah Industries' global reach. Users can rotate the globe to view different regions, with clickable markers indicating major markets and product availability. Hovering over a marker will display a tooltip with key information about that region's operations. This engaging visual will emphasize Shah Industries' international presence and market impact.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements like atmospheric blobs and distant shapes will move at different speeds, enhancing the storytelling aspect. Key sections will feature moderate scroll-triggered reveals and hover transitions, providing a polished and dynamic user experience.

Non-Functional Requirements

• The website must be responsive and accessible across all devices and browsers.
• Load times should be optimized to ensure a fast and seamless user experience.
• The website should comply with global web accessibility standards.

Tech Stack

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

Assumptions and Constraints

• The website will not include e-commerce functionalities.
• The design will draw inspiration from industry competitors but maintain a unique identity.
• The website will be primarily in English, with potential for multilingual support in the future.

Glossary

• Reactive Dyes: A class of highly colored organic substances used for tinting textiles.
• GOTS 7: Global Organic Textile Standard, version 7.
• OEKO-TEX® ECO-Passport: A certification for sustainable textile production.
• ZDHC Level 3 Compliant: Compliance with the Zero Discharge of Hazardous Chemicals program.
• ISO 9001:2015: An international standard for quality management systems.