project-ce7c2045

Introduction

The project-ce7c2045 aims to develop a premium, modern, minimalist eCommerce website for Fortis Lights, an Indian lighting brand. The website should embody a professional lighting showroom feel, focusing on clean, elegant, and conversion-focused design.

System Overview

The eCommerce platform for Fortis Lights will offer a seamless shopping experience with a focus on high-quality product photography, intuitive navigation, and fast performance. The website will cater to both desktop and mobile users, ensuring a responsive design that is optimized for Meta Ads traffic.

Functional Requirements as Story Points

• As a customer, I should be able to view a large full-width premium banner on the homepage to capture my attention.
• As a customer, I should be able to navigate through categories such as Interior Lighting, Decorative Lighting, and more to find products easily.
• As a customer, I should be able to view large premium product images to assess product quality.
• As a customer, I should be able to use a quick view and add to cart feature for a seamless shopping experience.
• As a customer, I should be able to read customer reviews to make informed purchasing decisions.
• As a customer, I should be able to subscribe to a newsletter to receive updates and promotions.
• As a customer, I should be able to access a clean product slider for best sellers to explore popular products.
• As a customer, I should be able to view product specifications, features, and descriptions on the product page.
• As a customer, I should be able to use a sticky add to cart and buy now button for easy purchasing.
• As a customer, I should be able to access customer support and quick links in the footer for assistance.

User Personas

• Customer: Individuals looking to purchase lighting products for various needs such as home, events, or spiritual purposes.
• Admin: Personnel responsible for managing the website content, product listings, and customer interactions.

Core User Flows

• Customer visits homepage -> views hero banner -> navigates to a category -> selects a product -> views product details -> adds product to cart -> proceeds to checkout.
• Customer subscribes to newsletter -> receives promotional emails -> visits website through email link -> makes a purchase.
• Admin logs in -> updates product listings -> manages customer reviews -> processes orders.

Visuals Colors and Theme

• primary: #2563EB (Blue)
• primary_light: #4F83FF (Light Blue)
• secondary: #F7F7F7 (Light Grey)
• accent: #FF5733 (Vibrant Orange)
• highlight: #FFC300 (Warm Yellow)
• bg: #FFFFFF (White)
• surface: rgba(247, 247, 247, 0.8)
• text: #222222 (Dark Grey)
• text_muted: #555555 (Muted Grey)
• border: rgba(34, 34, 34, 0.1)

Signature Design Concept

Imagine a homepage that transforms into a virtual lighting showroom. As users scroll, they experience a dynamic parallax effect where lighting fixtures illuminate in sequence, showcasing their glow and ambiance. Each section of the page represents a different room or setting, with interactive elements that allow users to change the lighting color or intensity, providing a real-time preview of the product's effect. This immersive experience is powered by @react-three/fiber for 3D interactions and gsap for smooth transitions, making the website not just a shopping platform but an interactive lighting experience.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "parallax". This will create a layered depth effect as users scroll through the page, enhancing the storytelling and visual richness of the Fortis Lights brand. Internal pages will maintain a "static" interaction model to prioritize layout clarity and reading speed.

Non-Functional Requirements

• The website must load within 3 seconds to ensure a fast user experience.
• The design should be mobile-first, ensuring optimal performance on smartphones and tablets.
• The platform should support secure payments and data protection to build customer trust.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB
• AI Tools: Not applicable
• Orchestration: Docker and Kubernetes

Assumptions and Constraints

• The website will be hosted on a scalable platform to handle increased traffic during peak shopping seasons.
• The design will adhere to the brand guidelines of Fortis Lights, focusing on a minimalist and premium aesthetic.

Glossary

• Hero Banner: A large image or video prominently displayed on the homepage.
• Parallax Effect: A visual effect where background images move slower than foreground images, creating a sense of depth.
• Sticky Add to Cart: A feature where the add to cart button remains visible as the user scrolls down the product page.