Mint-Indo System Requirements Document

Introduction

This document outlines the system requirements for the "Mint-Indo" project, focusing on developing an e-commerce website that combines brand storytelling for an Indo-Korean fusion organic face wash.

System Overview

The Mint-Indo project aims to create an engaging e-commerce platform that highlights the unique qualities of an Indo-Korean fusion organic face wash. The website will facilitate online purchases while telling the brand's story, emphasizing the natural ingredients and their benefits.

Functional Requirements

• As a User, I should be able to view different product variants.
• As a User, I should be able to purchase products online.
• As a User, I should be able to learn about the product's ingredients and benefits.
• As a User, I should be able to read the brand's story.

User Personas

• Customer: Interested in purchasing organic skincare products and learning about their benefits.

Visuals Colors and Theme

• Use shared images as the source assets for the website design.
• primary: #4A7C59 (Deep Green)
• primary_light: #A8C3A0 (Light Green)
• secondary: #D4A373 (Warm Beige)
• accent: #E07A5F (Coral)
• highlight: #F4A261 (Amber)
• bg: #F7F3E9 (Cream)
• surface: rgba(255, 255, 255, 0.9)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Muted Gray)
• border: rgba(200, 200, 200, 0.5)

Signature Design Concept

The homepage will feature an interactive "Ingredient Journey" experience. Users can scroll through a timeline that visually represents the journey of each ingredient from its origin to its inclusion in the face wash. Each ingredient will have a clickable icon that expands to show detailed information, benefits, and a short video clip of its sourcing and processing. This will be implemented using framer-motion for smooth animations and gsap for scroll-triggered effects.

Interaction Model & Motion Direction

• Interaction Model: Parallax
• The landing page will use layered depth via scroll to create an immersive storytelling experience. Decorative layers will translate at different speeds, while real content scrolls naturally.
• Each section will have a distinctive core mechanic, such as kinetic typography or scroll-triggered animations.

Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• It should be accessible and responsive on all major devices and browsers.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL
• AI Models: GPT 5.4 for user-friendly responses
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target users in India.
• The design will follow the visual reference provided, maintaining consistency with the brand's aesthetic.

Glossary

• E-commerce: Electronic commerce, the buying and selling of goods online.
• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.
• Kinetic Typography: Animated text that moves or changes over time.

This document provides a comprehensive overview of the requirements for the Mint-Indo project, ensuring alignment with the project's goals and user expectations.