He-man Stone Suppliers

Introduction

He-man Stone Suppliers is a business specializing in natural stones such as Kota, granite, marble, sandstones, and more. The primary objective of this project is to enhance product showcase and brand visibility.

System Overview

The system for He-man Stone Suppliers will focus on creating an engaging online presence that effectively showcases the variety of natural stones offered. The platform will serve as a digital catalog and marketing tool to increase brand visibility and attract potential customers.

Functional Requirements

• As a Visitor, I should be able to view a catalog of natural stone products.
• As a Visitor, I should be able to filter products by type, such as Kota, granite, marble, and sandstone.
• As a Visitor, I should be able to view detailed information about each product.
• As a Visitor, I should be able to see high-quality images of the products.
• As a Visitor, I should be able to contact the supplier for inquiries.
• As a Visitor, I should be able to access information about the company and its history.
• As an Admin, I should be able to add, update, or remove products from the catalog.
• As an Admin, I should be able to manage inquiries and customer interactions.

User Personas

• Visitor: Individuals interested in purchasing natural stones for personal or commercial use.
• Admin: Personnel responsible for managing the product catalog and customer inquiries.

Core User Flows

• Visitor browses product catalog -> filters by stone type -> views product details -> contacts supplier for inquiry.
• Admin logs into the system -> updates product catalog -> manages customer inquiries.

Visuals Colors and Theme

• primary: #2E4053 (a deep slate blue)
• primary_light: #5D6D7E (a lighter slate blue for hover states)
• secondary: #A93226 (a rich crimson for headlines and emphasis)
• accent: #F39C12 (a vibrant amber for CTAs and active states)
• highlight: #F4D03F (a warm gold for hover states and notifications)
• bg: #FDFEFE (a clean white background)
• surface: rgba(46, 64, 83, 0.8) (a semi-transparent slate blue for cards/panels)
• text: #1C2833 (a dark charcoal for primary text)
• text_muted: #839192 (a soft gray for secondary text)
• border: rgba(44, 62, 80, 0.2) (a subtle border color)

Signature Design Concept

The homepage will feature an interactive 3D stone quarry scene using @react-three/fiber and @react-three/drei. Visitors can navigate through the quarry, with each stone type represented as a distinct area. Hovering over a stone type will display a brief description, and clicking will transition to a detailed product page. This immersive experience will engage users and provide a memorable introduction to the brand's offerings.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll through the site. Decorative elements such as stone textures and atmospheric particles will move at different speeds, enhancing the storytelling aspect. Internal pages will maintain a "static" interaction model for clarity and ease of navigation.

Non-Functional Requirements

• The system should be responsive and accessible across all devices.
• The platform must support high-resolution images without compromising load times.
• Ensure secure handling of customer inquiries and data.

Tech Stack

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

Assumptions and Constraints

• The platform will primarily target users in India, considering local preferences and currency.
• The system should be scalable to accommodate future product expansions.

Glossary

• Kota Stone: A type of limestone widely used for flooring.
• Granite: A hard, granular rock used in construction.
• Marble: A metamorphic rock used in sculpture and architecture.
• Sandstone: A sedimentary rock used for building and paving.