HOUSE OF SAANJH

bySuraj Paswan

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>House of Saanjh | Luxury Ethnic Wear</title> <style> /* Color Palette inspired by your brand */ :root { --primary-gold: #c5a059; --dark-bg: #1a1a1a; --text-light: #f9f9f9; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Georgia', serif; } body { background-color: var(--dark-bg); color: var(--text-light); line-height: 1.6; } /* Header & Navigation */ header { text-align: center; padding: 2rem; background-color: #000; border-bottom: 2px solid var(--primary-gold); } .logo-img { max-width: 250px; height: auto; } nav { margin-top: 1rem; } nav a { color: var(--primary-gold); text-decoration: none; margin: 0 15px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; } nav a:hover { color: #fff; } /* Hero Banner Section */ .hero { position: relative; text-align: center; padding: 4rem 2rem; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('1000023962.jpg') no-repeat center center/cover; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero h1 { font-size: 4rem; color: var(--primary-gold); margin-bottom: 1rem; text-shadow: 2px 2px 4px #000; } .hero p { font-size: 1.5rem; margin-bottom: 2rem; } .btn { background-color: var(--primary-gold); color: #000; padding: 15px 30px; text-decoration: none; font-weight: bold; font-size: 1.2rem; border-radius: 5px; transition: 0.3s; } .btn:hover { background-color: #fff; } /* Collections Section */ .collections { padding: 5rem 10%; text-align: center; background-color: #222; } .collections h2 { color: var(--primary-gold); font-size: 2.5rem; margin-bottom: 3rem; } .grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; } .card { background-color: #000; border: 1px solid var(--primary-gold); padding: 15px; width: 45%; min-width: 300px; } .card img { width: 100%; height: auto; border-bottom: 1px solid var(--primary-gold); margin-bottom: 15px; } /* Footer & Contact */ footer { background-color: #000; text-align: center; padding: 3rem; border-top: 2px solid var(--primary-gold); } .contact-info h3 { color: var(--primary-gold); margin-bottom: 1rem; } .contact-info p { margin-bottom: 0.5rem; } .footer-banner { max-width: 600px; width: 100%; margin: 20px auto; } </style> </head> <body> <header> <!-- Logo --> <img src="1000023963.jpg" alt="House of Saanjh Logo" class="logo-img"> <nav> <a href="#home">Home</a> <a href="#collections">Collections</a> <a href="#sale">Offers</a> <a href="#contact">Contact</a> </nav> </header> <section id="home" class="hero"> <h1>GRAND FESTIVAL SALE</h1> <p>Celebrate in Style. Up to 50% Off Everything!</p> <a href="#collections" class="btn">Shop The Sale</a> </section> <section id="collections" class="collections"> <h2>Handcrafted Heritage</h2> <div class="grid"> <!-- Festive Collection Poster --> <div class="card"> <img src="1000023961.jpg" alt="Festive Collection Live"> <h3 style="color: #c5a059;">Festive Collection Now Live</h3> <p>Embrace the essence of tradition and style.</p> </div> <!-- Grand Sale Poster --> <div class="card"> <img src="1000023962.jpg" alt="Luxury Ethnic Wear"> <h3 style="color: #c5a059;">Shop Lehengas, Sarees & Kurtas</h3> <p>Visit our stores & online for limited period offers.</p> </div> </div> </section> <footer id="contact"> <div class="contact-info"> <h3>Visit House of Saanjh</h3> <p>For Orders Contact: <strong>(7000066666)</strong></p> <p>Website: www.houseofsaanjh.com</p> <p>Instagram: @houseofsaanjh | Facebook: @HouseOfSaanjh</p> </div> <!-- Footer Banner Image --> <img src="1000023049.jpg" alt="Follow for more content" class="footer-banner"> <p style="margin-top: 2rem; font-size: 0.9rem;">&copy; 2026 House of Saanjh. All rights reserved.</p> </footer> </body> </html> Create a website

LandingLoginCartInventoryUsersProducts
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

HOUSE OF SAANJH

Introduction

The "House of Saanjh" project is focused on creating a luxury ethnic wear e-commerce platform tailored to the Indian market. This document outlines the system requirements for developing a website that reflects the brand's elegance and provides a seamless shopping experience for users.

System Overview

The House of Saanjh platform will be developed as a fully functional, visually complete real website page. The House of Saanjh platform will serve as an online storefront for luxury ethnic wear, offering users the ability to browse collections, make purchases, and engage with the brand through various digital touchpoints. The system will support multiple user interactions, including browsing, purchasing, and managing user accounts.

Page 2 of 5

Functional Requirements

  • As a User, I should be able to browse the collections of luxury ethnic wear.
  • As a User, I should be able to view detailed information about each product.
  • As a User, I should be able to add items to a shopping cart.
  • As a User, I should be able to proceed to checkout with items in my cart.
  • As a User, I should be able to view the MRP (Maximum Retail Price) of each clothing item.
  • As a User, I should be able to choose from multiple payment options at checkout.
  • As a Guest, I should be able to checkout without creating an account.
  • As a User, I should be able to apply a coupon code for discounts during checkout.
  • As a User, I should be able to save items to a wishlist for future reference.
  • As a User, I should be able to create and manage my account.
  • As a User, I should be able to view and track my order history.
  • As an Admin, I should be able to manage product listings and inventory.
  • As an Admin, I should be able to manage user accounts and permissions.
  • As an Admin, I should be able to view sales reports and analytics.

User Personas

  • User: A customer interested in purchasing luxury ethnic wear, who may or may not have an account.
  • Guest: A visitor who prefers to shop without creating an account.
  • Admin: A staff member responsible for managing the website's content, inventory, and user accounts.
Page 3 of 5

Core User Flows

  • User browses collections -> selects items -> adds to cart -> proceeds to checkout -> selects payment option -> completes purchase.
  • Guest browses collections -> selects items -> adds to cart -> proceeds to guest checkout -> selects payment option -> completes purchase.
  • User applies coupon code -> discount is applied -> completes purchase.
  • User adds items to wishlist -> views wishlist -> moves items from wishlist to cart.
  • Admin logs in -> updates product listings -> manages inventory -> reviews sales analytics.

Visuals Colors and Theme

  • primary: #c5a059 (Gold)
  • primary_light: #e0c08a (Light Gold)
  • secondary: #f9f9f9 (Light Text)
  • accent: #ff5733 (Vibrant Orange)
  • highlight: #ffcc00 (Amber)
  • bg: #1a1a1a (Dark Background)
  • surface: rgba(0, 0, 0, 0.8) (Dark Surface)
  • text: #f9f9f9 (Light Text)
  • text_muted: #b3b3b3 (Muted Text)
  • border: rgba(197, 160, 89, 0.2) (Gold Border)
Page 4 of 5

Signature Design Concept

The homepage will feature an interactive 3D floating island concept using @react-three/fiber and @react-three/drei. Each section of the website will be represented as a distinct building on the island. Users can navigate between sections by "flying" over the island, with smooth transitions and animations triggered by gsap. The island will be surrounded by a dynamic sky that changes colors based on the time of day, creating an immersive experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth effects as users scroll. Decorative elements will move at different speeds to create a sense of depth, while the main content scrolls naturally. Internal pages will adopt a "static" model to prioritize readability and clarity.

Non-Functional Requirements

  • The website must load within 3 seconds on a standard broadband connection.
  • The system should handle up to 10,000 concurrent users.
  • The platform must be mobile-responsive and accessible on all major browsers.
Page 5 of 5

Tech Stack

  • Frontend: React for Web
  • Backend: Python with FastAPI
  • Database: MySQL or MariaDB
  • AI Tools: Not applicable
  • Local Orchestration: Docker, docker-compose
  • Server-side Orchestration: Kubernetes

Assumptions and Constraints

  • The platform will primarily target the Indian market, with INR as the default currency.
  • The system will comply with local data protection regulations.
  • The website will support English as the primary language.

Glossary

  • User: A registered customer of the platform.
  • Guest: A non-registered visitor who can make purchases.
  • Admin: A staff member with access to manage the platform's backend.
  • Parallax: A scrolling technique that creates an illusion of depth.
  • 3D Floating Island: An interactive design concept for the homepage.
Landing design preview
Login: Sign In
AdminDashboard: View Analytics
AdminDashboard: View Sales Reports
Products: Manage Listings
Products: Add Product
Products: Edit MRP
Inventory: Manage Stock
Users: Manage Accounts
Users: Edit Permissions