SAMBUDAR · anchalbha · Aug 7, 2025 · Aug 8, 2025 · Aug 8, 2025
diff --git a/README.md b/README.md
@@ -1,227 +1,222 @@
-# STYLÉKA - Modern E-Commerce Fashion Website
 
-![STYLÉKA Logo](https://img.shields.io/badge/STYL%C3%89KA-Fashion%20Store-088178?style=for-the-badge&logo=shopping-bag&logoColor=white)
+# ✨ STYLÉKA - Modern E-Commerce Fashion Website
 
-A modern, responsive e-commerce website for fashion and lifestyle products built with HTML, CSS, and JavaScript.
+![STYLÉKA Badge](https://img.shields.io/badge/STYL%C3%89KA-Fashion%20Store-088178?style=for-the-badge&logo=shopping-bag&logoColor=white)
 
-## 🌟 Features
+> A modern, responsive e-commerce platform tailored for fashion & lifestyle products. Crafted with HTML, CSS, and JavaScript — delivering smooth performance and a stunning user experience.
+
+---
+
+## 🌟 Features Overview
 
 ### 🛍️ Core E-Commerce Features
-- **Product Catalog**: Comprehensive product listings with detailed information
-- **Advanced Search**: Real-time product search with multiple filters
-- **Shopping Cart**: Add to cart functionality with cart management
-- **Product Categories**: Organized product sections (Featured Products, New Arrivals)
-- **Individual Product Pages**: Detailed product views with specifications
+- 📦 **Product Catalog** — Intuitive layout with rich product details  
+- 🔎 **Advanced Search** — Instant filtering by name, brand, and price  
+- 🛒 **Shopping Cart** — Add/manage items with ease  
+- 🧾 **Product Categories** — Featured, New Arrivals & curated sections  
+- 📃 **Product Pages** — Dedicated view with specifications & imagery  
+- ⭐ **Product Reviews** — Users can submit written feedback on each product  
+- 🌟 **Product Ratings** — Visual star rating system with averages
 
 ### 🎨 Modern UI/UX
-- **Responsive Design**: Mobile-first approach, works on all devices
-- **Gradient Backgrounds**: Modern gradient designs throughout the site
-- **Interactive Elements**: Hover effects, smooth transitions, and animations
-- **Glass Morphism**: Modern translucent design elements
-- **Professional Typography**: Clean and readable font choices
-
-### 🔍 Advanced Search System
-- **Text Search**: Search by product name, brand, or description
-- **Brand Filtering**: Filter products by specific brands (Adidas, Zara, Gucci, etc.)
-- **Price Range Filtering**: Filter by price ranges (₹0-2000, ₹2000-5000, etc.)
-- **Real-time Results**: Instant filtering as you type
-- **Clear Search**: Easy reset functionality
+- 📱 **Responsive Design** — Seamless across mobile, tablet, and desktop  
+- 🎞️ **Interactive UI** — Hover effects, transitions & animations  
+- 🌈 **Glass Morphism** — Trendy translucent components  
+- 🖋️ **Professional Typography** — Clean and readable font pairings
 
 ### 📱 User Experience
-- **Authentication UI**: Login and signup interfaces
-- **Newsletter Subscription**: Email subscription for updates
-- **Social Media Integration**: Follow us on various platforms
-- **Mobile Navigation**: Hamburger menu for mobile devices
-- **Fast Loading**: Optimized images and efficient code
+- 🔐 **Authentication UI** — Smooth login & signup experience  
+- 💌 **Newsletter Signup** — Stay updated on trends and deals  
+- 📲 **Mobile Navigation** — Touch-optimized hamburger menu  
+- ⚡ **Fast Loading** — Optimized assets & efficient scripts  
+- 🔗 **Social Media Integration** — Expand your fashion network
+
+---
 
-## 🏗️ Project Structure
+## 🗂️ Project Structure
 
-```
+```bash
 STYLÉKA/
 ├── index.html              # Homepage
-├── shop.html              # Product catalog page
-├── blog.html              # Blog/news section
-├── about.html             # About us page
-├── contact.html           # Contact information
-├── login.html             # User login page
-├── register.html          # User registration page
-├── cart.html              # Shopping cart
-├── cancel.html            # Order cancellation
-├── success.html           # Order success page
-├── sproduct*.html         # Individual product pages (1-15)
-├── style.css              # Main stylesheet
-├── script.js              # JavaScript functionality
-├── server.js              # Backend server (if applicable)
-└── README.md              # Project documentation
+├── shop.html               # Product catalog
+├── blog.html               # Blog / News
+├── about.html              # About the brand
+├── contact.html            # Contact info
+├── login.html              # Login page
+├── register.html           # Register page
+├── cart.html               # Shopping cart
+├── cancel.html             # Cancel order
+├── success.html            # Order success
+├── sproduct*.html          # Individual product pages
+├── style.css               # Core styles
+├── script.js               # All JS functionality
+├── server.js               # Backend (optional)
+└── README.md               # Project documentation
 ```
 
-## 🛠️ Technologies Used
+## 🛠️ Tech Stack
 
-### Frontend
-- **HTML5**: Semantic markup and structure
-- **CSS3**: Modern styling with flexbox, grid, gradients, and animations
-- **JavaScript (ES6+)**: Interactive functionality and DOM manipulation
-- **Font Awesome 6.4.2**: Icons and visual elements
-- **Google Fonts**: Professional typography
+### 🔧 Frontend
+- HTML5 — Semantic structure  
+- CSS3 — Flexbox, Grid, gradients & animations  
+- JavaScript (ES6+) — Dynamic interactions
 
-### Design Elements
-- **Responsive Design**: Mobile-first approach
-- **CSS Grid & Flexbox**: Modern layout systems
-- **CSS Animations**: Smooth transitions and hover effects
-- **Gradient Backgrounds**: Modern visual appeal
-- **Box Shadows**: Depth and visual hierarchy
+### 🎨 Design Tools
+- Font Awesome 6.4.2 — Clean icons  
+- Google Fonts — Modern typography  
+- Pexels & Unsplash — Product & banner images
 
-### External Resources
-- **Pexels CDN**: High-quality product images
-- **Unsplash**: Hero section backgrounds
-- **FontAwesome CDN**: Icons and UI elements
+---
 
 ## 🚀 Getting Started
 
 ### Prerequisites
-- Modern web browser (Chrome, Firefox, Safari, Edge)
-- Text editor or IDE (VS Code recommended)
-- Local server (optional, for full functionality)
+- Browser: Chrome, Firefox, Safari, Edge  
+- IDE: VS Code or any modern editor  
+- Optional: Local server (Live Server, Python, Node.js)
 
 ### Installation
 
-1. **Clone the repository**
-   ```bash
-   git clone https://github.com/Channpreetk/Styleka.git
-   cd Styleka
-   ```
-
-2. **Open the project**
-   - Open `index.html` in your web browser, or
-   - Use a local server for better performance:
-   ```bash
-   # Using Python
-   python -m http.server 8000
-
-   # Using Node.js
-   npx serve .
-
-   # Using VS Code Live Server extension
-   Right-click on index.html → "Open with Live Server"
-   ```
-
-3. **Navigate the website**
-   - Visit `http://localhost:8000` (if using local server)
-   - Or simply open `index.html` in your browser
-
-## 📖 Usage Guide
-
-### 🏠 Homepage Features
-- **Hero Section**: Eye-catching banner with call-to-action
-- **Featured Products**: Highlighted products with search functionality
-- **Why Choose Us**: Benefits and unique selling points
-- **New Arrivals**: Latest product additions
-- **Newsletter Signup**: Stay updated with latest offers
-
-### 🛒 Shopping Features
-- **Product Search**: Use the search bar to find specific products
-- **Filter Options**: Use brand and price filters to narrow down results
-- **Product Details**: Click on products to view detailed information
-- **Add to Cart**: Add desired items to your shopping cart
-
-### 📱 Mobile Experience
-- **Responsive Navigation**: Hamburger menu for mobile devices
-- **Touch-Friendly**: Optimized for touch interactions
-- **Fast Loading**: Optimized for mobile networks
+```bash
+git clone https://github.com/Channpreetk/Styleka.git
+cd Styleka
+```
 
-## 🎨 Customization
+### Run the Project
 
-### Color Scheme
-The website uses a modern teal-based color palette:
-- **Primary**: #088178 (Teal)
-- **Secondary**: #06b19e (Light Teal)
-- **Accent**: Various gradients and complementary colors
+Open `index.html` directly or use a local server:
 
-### Fonts
-- **Primary Font**: "Play" - Modern, clean sans-serif
-- **Fallback**: System fonts for compatibility
+```bash
+# Python
+python -m http.server 8000
 
-### Images
-- All product images are sourced from Pexels CDN for reliability
-- Hero backgrounds from Unsplash for high quality
+# Node
+npx serve .
+```
 
-## 🔧 Configuration
+Or use Live Server in VS Code: Right-click `index.html` → "Open with Live Server"
 
-### Search Functionality
-The search system can be customized in `script.js`:
-- Add new brands to the brand filter
-- Modify price ranges
-- Adjust search algorithms
+Visit: `http://localhost:8000`
 
-### Styling
-Main styles are in `style.css`:
-- Modify color variables for theme changes
-- Adjust responsive breakpoints
-- Customize animations and transitions
+---
 
-## 🌐 Browser Support
+## 📖 User Guide
 
-- **Chrome**: ✅ Fully supported
-- **Firefox**: ✅ Fully supported
-- **Safari**: ✅ Fully supported
-- **Edge**: ✅ Fully supported
-- **Mobile Browsers**: ✅ Optimized for mobile
+### 🏠 Homepage Highlights
+- Hero Banner — High-impact visuals + CTA  
+- New Arrivals — Fresh seasonal picks  
+- Featured Picks — Hand-selected must-haves  
+- Newsletter — Stay in vogue
 
-## 📊 Performance Features
+### 🛍️ Shopping Features
+- Search Bar — Real-time, keyword-based  
+- Filters — Brand & price range  
+- Product View — See specs, images, ratings & reviews  
+- Cart — Add, update, remove items  
 
-- **Optimized Images**: Compressed and properly sized images
-- **Efficient CSS**: Minimized CSS with efficient selectors
-- **Fast JavaScript**: Optimized DOM manipulation
-- **CDN Resources**: Fast loading external resources
+### ⭐ Product Ratings (1-5)
+- Users can leave star ratings  
+- Display average rating per product  
+- Ratings shown visually on product listings and detail pages  
 
-## 🤝 Contributing
+### 💬 Product Reviews
+- Users can leave written reviews for each product  
+- Display all submitted reviews under each product  
+- Reviews can be edited/deleted if user-authenticated  
+- Dynamically updatable with backend support
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+---
 
-1. Fork the project
-2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
+## 📱 Mobile Experience
+- Fully responsive layout  
+- Touch-friendly navigation  
+- Optimized media & performance
 
-## 📝 License
+## 🎨 Customization
 
-This project is open source and available under the [MIT License](LICENSE).
+### 🎨 Color Scheme
+- Primary: `#088178` (Teal)  
+- Secondary: `#06b19e` (Light Teal)  
+- Accents: Gradients & contrast-based UI highlights
 
-## 👨‍💻 Author
+### ✏️ Fonts
+- Primary: `"Play"`  
+- Fallback: System UI fonts
 
-**Channpreet Kaur**
-- GitHub: [@Channpreetk](https://github.com/Channpreetk)
+### 🖼️ Images
+- Product visuals: Pexels  
+- Hero & banners: Unsplash
 
-## 🙏 Acknowledgments
+### 🔧 Configuration
 
-- **Images**: Pexels and Unsplash for high-quality images
-- **Icons**: Font Awesome for beautiful icons
-- **Fonts**: Google Fonts for typography
-- **Inspiration**: Modern e-commerce design trends
+#### 🧠 Search & Filters (`script.js`)
+- Modify price brackets or brands  
+- Adjust filtering logic for backend support
 
-## 📞 Contact
-
-For any queries or support, please contact:
-- **Email**: [Your Email]
-- **Phone**: (+91) - 8507566667
-- **Address**: Guru Nanak Dev University, Amritsar
+#### 🧵 Styles (`style.css`)
+- Change theme colors  
+- Update breakpoints for responsiveness  
+- Customize animations
 
 ---
 
-<div align="center">
-  <strong>Made with ❤️ for modern fashion enthusiasts</strong>
-</div>
+## 🌐 Browser Support
+
+| Browser         | Supported |
+|----------------|-----------|
+| Chrome          | ✅         |
+| Firefox         | ✅         |
+| Safari          | ✅         |
+| Edge            | ✅         |
+| Mobile Browsers | ✅         |
+
+## 📈 Performance Highlights
+- ✅ Compressed images  
+- ✅ Modular CSS  
+- ✅ Efficient JavaScript  
+- ✅ CDN-delivered assets
 
 ---
 
-## 🔄 Version History
+## 🙌 Contribution Guide
+
+```bash
+# Contribute
+1. Fork the repository
+2. Create a branch: git checkout -b feature/AmazingFeature
+3. Commit: git commit -m 'Add AmazingFeature'
+4. Push: git push origin feature/AmazingFeature
+5. Open a Pull Request
+```
+
+## 📦 Version History
 
-- **v1.0.0** - Initial release with basic e-commerce functionality
-- **v1.1.0** - Added advanced search and filtering
-- **v1.2.0** - Enhanced mobile responsiveness
-- **v1.3.0** - Improved UI/UX with modern design elements
+| Version | Description |
+|---------|-------------|
+| v1.0.0  | Initial release |
+| v1.1.0  | Added advanced search & filtering |
+| v1.2.0  | Improved mobile responsiveness |
+| v1.3.0  | Glass morphism & modern UI elements |
+| v1.4.0  | Added separate reviews & ratings system |
 
 ---
 
-*Last updated: January 2025*
+## 👤 Author
+
+**Channpreet Kaur**  
+GitHub: [@Channpreetk](https://github.com/Channpreetk)
+
+## 💬 Contact
+
+📧 Email: [Your Email]  
+📞 Phone: (+91) 85075-66667  
+📍 Location: Guru Nanak Dev University, Amritsar
+
+## 🙏 Acknowledgments
+
+- 🖼️ Images: Pexels, Unsplash  
+- 🧩 Icons: Font Awesome  
+- 🖋️ Fonts: Google Fonts  
+- 💡 Inspiration: Modern e-commerce design trends
+
+<div align="center"><strong>💖 Built for modern fashion lovers — STYLÉKA</strong></div>