diff --git a/pom.xml b/pom.xml
index 87f2b4fb2e..e12fa606cc 100644
--- a/pom.xml
+++ b/pom.xml
@@ -9,7 +9,7 @@
 
     <groupId>in.javahome</groupId>
     <artifactId>myweb</artifactId>
-    <version>8.8.4</version>
+    <version>8.8.6</version>
     <packaging>war</packaging>
 
     <name>Java Home myweb</name>
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 2bc134d79b..21e5cea791 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -1,1708 +1,2520 @@
-<!doctype html>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+
+<!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>NexusShop — Modern E‑Commerce</title>
 
-    <!-- Fonts & Icons -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
+    <meta charset="UTF-8">
+
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+
+    <title>StyleHub - Shop Dresses</title>
+
+    <link rel="preconnect"
+          href="https://fonts.googleapis.com">
+
+    <link rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossorigin>
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+          rel="stylesheet">
+
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+
 
     <style>
-        /* ========== ROOT VARIABLES ========== */
-        :root {
-            --bg: #fafaf8;
-            --bg-card: #ffffff;
-            --primary: #1a1a2e;
-            --primary-light: #2d2d44;
-            --accent: #e07a5f;
-            --accent-light: #f4d0c4;
-            --accent-dark: #c05a3e;
-            --muted: #6b6b7a;
-            --muted-light: #a0a0b0;
-            --surface: #f0efed;
-            --success: #2a9d8f;
-            --warning: #e9c46a;
-            --radius: 16px;
-            --radius-sm: 10px;
-            --shadow: 0 4px 24px rgba(26, 26, 46, 0.06);
-            --shadow-hover: 0 12px 48px rgba(26, 26, 46, 0.10);
-            --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-            --container: 1240px;
-        }
-
-        /* ========== RESET & BASE ========== */
+
         * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
-        }
-        html {
-            scroll-behavior: smooth;
-        }
-        body {
-            font-family: 'Inter', system-ui, -apple-system, sans-serif;
-            background: var(--bg);
-            color: var(--primary);
-            line-height: 1.5;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-        }
-        a {
-            color: inherit;
-            text-decoration: none;
-        }
-        img {
-            display: block;
-            max-width: 100%;
-        }
-        button {
-            cursor: pointer;
-            font-family: inherit;
-            border: none;
-            background: none;
-            color: inherit;
-        }
-        input {
-            font-family: inherit;
+            box-sizing: border-box;
         }
 
-        .container {
-            width: 100%;
-            max-width: var(--container);
-            margin: 0 auto;
-            padding: 0 24px;
+        body {
+            font-family: 'Inter', sans-serif;
+            background: #faf8f9;
+            color: #222;
         }
 
-        /* ========== UTILITIES ========== */
-        .muted {
-            color: var(--muted);
-        }
-        .text-center {
-            text-align: center;
-        }
-        .sr-only {
-            position: absolute;
-            width: 1px;
-            height: 1px;
-            padding: 0;
-            margin: -1px;
-            overflow: hidden;
-            clip: rect(0, 0, 0, 0);
-            border: 0;
-        }
 
-        /* ========== BUTTONS ========== */
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 12px 28px;
-            border-radius: 999px;
-            font-weight: 600;
-            font-size: 15px;
-            transition: var(--transition);
-            border: 2px solid transparent;
-        }
-        .btn-primary {
-            background: var(--accent);
-            color: #fff;
-            border-color: var(--accent);
-        }
-        .btn-primary:hover {
-            background: var(--accent-dark);
-            border-color: var(--accent-dark);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(224, 122, 95, 0.30);
-        }
-        .btn-secondary {
-            background: var(--primary);
-            color: #fff;
-            border-color: var(--primary);
-        }
-        .btn-secondary:hover {
-            background: var(--primary-light);
-            border-color: var(--primary-light);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(26, 26, 46, 0.20);
-        }
-        .btn-outline {
-            background: transparent;
-            color: var(--primary);
-            border-color: rgba(26, 26, 46, 0.15);
-        }
-        .btn-outline:hover {
-            background: var(--primary);
-            color: #fff;
-            border-color: var(--primary);
-            transform: translateY(-2px);
-        }
-        .btn-ghost {
-            background: rgba(255, 255, 255, 0.15);
-            color: #fff;
-            border-color: rgba(255, 255, 255, 0.25);
-        }
-        .btn-ghost:hover {
-            background: rgba(255, 255, 255, 0.25);
-            border-color: rgba(255, 255, 255, 0.4);
-            transform: translateY(-2px);
-        }
-        .btn-sm {
-            padding: 8px 18px;
-            font-size: 13px;
-        }
+        /* ================= HEADER ================= */
 
-        /* ========== HEADER ========== */
         header {
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            background: rgba(255, 255, 255, 0.92);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
-            border-bottom: 1px solid rgba(26, 26, 46, 0.04);
-        }
-        .header-inner {
+            background: #ffffff;
+            padding: 18px 7%;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            gap: 16px;
-            padding: 12px 0;
-            min-height: 68px;
+
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+
+            box-shadow: 0 2px 15px rgba(0,0,0,.06);
         }
 
-        .brand {
-            display: flex;
-            align-items: center;
-            gap: 10px;
+        .logo {
+            font-size: 26px;
             font-weight: 800;
-            font-size: 22px;
-            letter-spacing: -0.5px;
-            color: var(--primary);
-            flex-shrink: 0;
-        }
-        .brand .accent {
-            color: var(--accent);
         }
-        .brand i {
-            font-size: 26px;
-            color: var(--accent);
+
+        .logo span {
+            color: #db2777;
         }
 
-        nav.main-nav ul {
+        nav {
             display: flex;
-            gap: 4px;
-            list-style: none;
-            align-items: center;
+            gap: 28px;
         }
-        nav.main-nav li a {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            padding: 8px 16px;
-            border-radius: var(--radius-sm);
-            font-weight: 500;
+
+        nav a {
+            color: #555;
+            text-decoration: none;
             font-size: 14px;
-            color: var(--muted);
-            transition: var(--transition);
-        }
-        nav.main-nav li a:hover,
-        nav.main-nav li a.active {
-            background: var(--surface);
-            color: var(--primary);
+            font-weight: 600;
         }
-        nav.main-nav li a i {
-            font-size: 14px;
+
+        nav a:hover {
+            color: #db2777;
         }
 
         .header-actions {
             display: flex;
             align-items: center;
-            gap: 6px;
-            flex-shrink: 0;
-        }
-        .header-actions .icon-btn {
-            width: 42px;
-            height: 42px;
-            display: grid;
-            place-items: center;
-            border-radius: 50%;
-            font-size: 18px;
-            color: var(--muted);
-            transition: var(--transition);
-            position: relative;
+            gap: 20px;
         }
-        .header-actions .icon-btn:hover {
-            background: var(--surface);
-            color: var(--primary);
+
+        .header-actions i {
+            cursor: pointer;
+            font-size: 19px;
         }
 
-        .cart-wrap {
+        .cart-icon {
             position: relative;
         }
+
         .cart-count {
             position: absolute;
-            top: -2px;
-            right: -2px;
-            background: var(--accent);
-            color: #fff;
-            font-size: 11px;
-            font-weight: 700;
-            width: 20px;
-            height: 20px;
+            top: -11px;
+            right: -11px;
+
+            width: 19px;
+            height: 19px;
+
             border-radius: 50%;
-            display: grid;
-            place-items: center;
-            border: 2px solid #fff;
-        }
 
-        .search-wrap {
+            background: #db2777;
+            color: white;
+
+            font-size: 10px;
+
             display: flex;
             align-items: center;
-            background: var(--surface);
-            border-radius: 999px;
-            padding: 0 16px 0 18px;
-            transition: var(--transition);
-            border: 2px solid transparent;
-            min-width: 220px;
-        }
-        .search-wrap:focus-within {
-            border-color: var(--accent);
-            background: #fff;
-            box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.10);
-        }
-        .search-wrap input {
-            border: 0;
-            background: transparent;
-            outline: none;
-            width: 100%;
-            padding: 10px 0;
-            font-size: 14px;
-            color: var(--primary);
-        }
-        .search-wrap input::placeholder {
-            color: var(--muted-light);
-        }
-        .search-wrap button {
-            padding: 8px 0 8px 10px;
-            color: var(--muted);
-            font-size: 15px;
-            transition: var(--transition);
-        }
-        .search-wrap button:hover {
-            color: var(--accent);
+            justify-content: center;
         }
 
-        .mobile-toggle {
-            display: none;
-            width: 42px;
-            height: 42px;
-            border-radius: 50%;
-            font-size: 20px;
-            background: var(--surface);
-            color: var(--primary);
-            transition: var(--transition);
-        }
-        .mobile-toggle:hover {
-            background: var(--accent-light);
-        }
 
-        #mobileMenu {
-            display: none;
-            background: #fff;
-            border-top: 1px solid rgba(26, 26, 46, 0.04);
-            padding: 12px 0 20px;
-        }
-        #mobileMenu ul {
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-        #mobileMenu ul li a {
+        /* ================= HERO ================= */
+
+        .hero {
+            background:
+                linear-gradient(
+                    120deg,
+                    #831843,
+                    #be185d,
+                    #ec4899
+                );
+
+            color: white;
+
+            padding: 75px 7%;
+
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            gap: 12px;
-            padding: 12px 16px;
-            border-radius: var(--radius-sm);
-            font-weight: 500;
-            color: var(--primary);
-            transition: var(--transition);
+
+            gap: 40px;
+        }
+
+        .hero-content {
+            max-width: 650px;
         }
-        #mobileMenu ul li a:hover {
-            background: var(--surface);
+
+        .hero h1 {
+            font-size: 50px;
+            line-height: 1.1;
+            margin-bottom: 20px;
         }
-        #mobileMenu ul li a i {
-            width: 22px;
-            color: var(--muted);
+
+        .hero p {
+            color: #fce7f3;
+            font-size: 17px;
+            line-height: 1.7;
+            margin-bottom: 30px;
         }
 
-        /* ========== HERO ========== */
-        .hero {
-            position: relative;
+        .search-box {
+            background: white;
+
+            border-radius: 12px;
+
             display: flex;
             align-items: center;
-            min-height: 480px;
-            padding: 60px 0;
-            border-radius: var(--radius);
-            overflow: hidden;
-            margin: 20px 24px 0;
-            background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
+
+            padding: 6px;
+
+            max-width: 620px;
         }
-        .hero::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
-            opacity: 0.35;
-            z-index: 0;
+
+        .search-box i {
+            color: #777;
+            margin-left: 15px;
         }
-        .hero .container {
-            position: relative;
-            z-index: 1;
-        }
-        .hero .badge {
-            display: inline-block;
-            background: rgba(224, 122, 95, 0.20);
-            color: var(--accent);
-            padding: 4px 16px;
-            border-radius: 999px;
-            font-weight: 600;
-            font-size: 13px;
-            letter-spacing: 0.3px;
-            margin-bottom: 16px;
+
+        .search-box input {
+            border: none;
+            outline: none;
+
+            flex: 1;
+
+            padding: 15px;
+
+            font-size: 15px;
         }
-        .hero h1 {
-            font-family: 'Playfair Display', serif;
-            font-size: 48px;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1.15;
-            max-width: 640px;
-            margin-bottom: 16px;
+
+        .search-box button {
+            background: #222;
+            color: white;
+
+            border: none;
+
+            padding: 14px 22px;
+
+            border-radius: 9px;
+
+            cursor: pointer;
+
+            font-weight: 600;
         }
-        .hero p {
-            color: rgba(255, 255, 255, 0.80);
-            font-size: 17px;
-            max-width: 520px;
-            margin-bottom: 28px;
-            line-height: 1.6;
+
+        .hero-dress {
+            font-size: 180px;
+            opacity: .2;
         }
-        .hero .actions {
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
+
+
+        /* ================= COMMON ================= */
+
+        .container {
+            width: 86%;
+            max-width: 1400px;
+            margin: auto;
         }
 
-        /* ========== SECTION ========== */
         .section {
-            padding: 56px 0;
+            padding: 55px 0;
         }
-        .section-header {
+
+        .section-title {
             display: flex;
-            align-items: flex-end;
             justify-content: space-between;
-            gap: 16px;
-            margin-bottom: 32px;
-            flex-wrap: wrap;
+            align-items: center;
+
+            margin-bottom: 28px;
         }
-        .section-header .title-group h2 {
+
+        .section-title h2 {
             font-size: 28px;
-            font-weight: 700;
-            letter-spacing: -0.3px;
         }
-        .section-header .title-group p {
-            color: var(--muted);
-            margin-top: 4px;
-            font-size: 15px;
+
+        #resultCount {
+            color: #777;
+            font-size: 13px;
         }
-        .section-header .view-all {
-            font-weight: 600;
-            color: var(--accent);
+
+
+        /* ================= CATEGORIES ================= */
+
+        .categories {
             display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 14px;
-            transition: var(--transition);
-            white-space: nowrap;
-        }
-        .section-header .view-all:hover {
-            gap: 12px;
-            color: var(--accent-dark);
-        }
+            gap: 14px;
 
-        /* ========== CATEGORIES ========== */
-        .categories-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 16px;
+            overflow-x: auto;
+
+            padding-bottom: 10px;
         }
-        .cat-card {
-            background: var(--bg-card);
-            border-radius: var(--radius);
-            padding: 24px 16px;
-            text-align: center;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
+
+        .category {
+            background: white;
+
+            border: 1px solid #e5e7eb;
+
+            padding: 13px 23px;
+
+            border-radius: 30px;
+
             cursor: pointer;
-            border: 2px solid transparent;
-        }
-        .cat-card:hover {
-            transform: translateY(-6px);
-            box-shadow: var(--shadow-hover);
-            border-color: var(--accent-light);
-        }
-        .cat-card .icon-wrap {
-            width: 56px;
-            height: 56px;
-            border-radius: 50%;
-            background: var(--accent-light);
-            display: grid;
-            place-items: center;
-            margin: 0 auto 12px;
-            font-size: 24px;
-            color: var(--accent);
-            transition: var(--transition);
-        }
-        .cat-card:hover .icon-wrap {
-            background: var(--accent);
-            color: #fff;
-        }
-        .cat-card h4 {
-            font-size: 15px;
+
+            white-space: nowrap;
+
             font-weight: 600;
+
+            transition: .2s;
         }
-        .cat-card .count {
-            font-size: 13px;
-            color: var(--muted);
-            margin-top: 4px;
+
+        .category:hover,
+        .category.active {
+            background: #db2777;
+            color: white;
+            border-color: #db2777;
         }
 
-        /* ========== PRODUCTS ========== */
-        .products-grid {
+
+        /* ================= PRODUCTS ================= */
+
+        .product-grid {
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 20px;
+
+            grid-template-columns:
+                repeat(4, 1fr);
+
+            gap: 25px;
         }
+
         .product-card {
-            background: var(--bg-card);
-            border-radius: var(--radius);
+            background: white;
+
+            border-radius: 18px;
+
             overflow: hidden;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-            display: flex;
-            flex-direction: column;
-            border: 2px solid transparent;
+
+            border: 1px solid #e5e7eb;
+
+            transition: .3s;
+
+            position: relative;
         }
+
         .product-card:hover {
             transform: translateY(-6px);
-            box-shadow: var(--shadow-hover);
-            border-color: var(--accent-light);
+
+            box-shadow:
+                0 15px 35px
+                rgba(0,0,0,.09);
         }
-        .product-card .img-wrap {
-            position: relative;
-            overflow: hidden;
-            background: var(--surface);
-            aspect-ratio: 1 / 1;
+
+        .wishlist {
+            position: absolute;
+
+            right: 15px;
+            top: 15px;
+
+            width: 38px;
+            height: 38px;
+
+            border-radius: 50%;
+
+            border: none;
+
+            background: white;
+
+            box-shadow:
+                0 4px 15px
+                rgba(0,0,0,.12);
+
+            cursor: pointer;
+
+            z-index: 2;
         }
-        .product-card .img-wrap img {
+
+        .wishlist:hover {
+            color: #e11d48;
+        }
+
+        .product-image {
+            height: 330px;
+
+            background: #fdf2f8;
+
+            display: flex;
+
+            align-items: center;
+            justify-content: center;
+
+            padding: 12px;
+        }
+
+        .product-image img {
             width: 100%;
             height: 100%;
+
             object-fit: cover;
-            transition: var(--transition);
+
+            border-radius: 12px;
+
+            transition: .3s;
         }
-        .product-card:hover .img-wrap img {
+
+        .product-card:hover
+        .product-image img {
             transform: scale(1.04);
         }
-        .product-card .badge {
-            position: absolute;
-            top: 12px;
-            left: 12px;
-            background: var(--accent);
-            color: #fff;
-            padding: 4px 12px;
-            border-radius: 999px;
+
+        .product-info {
+            padding: 20px;
+        }
+
+        .category-name {
+            color: #db2777;
+
             font-size: 11px;
+
             font-weight: 700;
-            letter-spacing: 0.3px;
+
+            text-transform: uppercase;
         }
-        .product-card .badge.sale {
-            background: var(--warning);
-            color: var(--primary);
+
+        .product-name {
+            font-size: 18px;
+
+            font-weight: 700;
+
+            margin: 7px 0;
         }
-        .product-card .wish-btn {
-            position: absolute;
-            top: 12px;
-            right: 12px;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.90);
-            display: grid;
-            place-items: center;
-            font-size: 16px;
-            color: var(--muted);
-            transition: var(--transition);
-            backdrop-filter: blur(4px);
-        }
-        .product-card .wish-btn:hover {
-            background: #fff;
-            color: var(--accent);
-            transform: scale(1.10);
-        }
-        .product-card .body {
-            padding: 16px 18px 14px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-        .product-card .body .category-tag {
+
+        .description {
+            color: #777;
+
             font-size: 12px;
-            color: var(--muted-light);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-weight: 600;
-        }
-        .product-card .body h5 {
-            font-size: 15px;
-            font-weight: 600;
-            line-height: 1.3;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-        .product-card .body .price-row {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-top: 4px;
-        }
-        .product-card .body .price {
-            font-weight: 700;
-            font-size: 18px;
-            color: var(--primary);
-        }
-        .product-card .body .old-price {
-            color: var(--muted-light);
-            text-decoration: line-through;
-            font-size: 14px;
+
+            line-height: 1.6;
+
+            margin-bottom: 12px;
         }
-        .product-card .body .rating {
-            display: flex;
-            align-items: center;
-            gap: 4px;
+
+        .rating {
             font-size: 13px;
-            color: #f5a623;
-        }
-        .product-card .body .rating span {
-            color: var(--muted);
-            font-weight: 400;
+
+            margin-bottom: 13px;
         }
-        .product-card .footer {
-            padding: 0 18px 18px;
-            display: flex;
-            gap: 10px;
+
+        .rating i {
+            color: #f59e0b;
         }
-        .product-card .footer .add-btn {
-            flex: 1;
-            padding: 10px;
-            border-radius: var(--radius-sm);
-            background: var(--primary);
-            color: #fff;
-            font-weight: 600;
-            font-size: 14px;
-            transition: var(--transition);
+
+        .price-row {
             display: flex;
+
+            justify-content:
+                space-between;
+
             align-items: center;
-            justify-content: center;
-            gap: 8px;
         }
-        .product-card .footer .add-btn:hover {
-            background: var(--accent);
-            transform: scale(1.02);
-        }
-        .product-card .footer .add-btn.added {
-            background: var(--success);
+
+        .price {
+            font-size: 20px;
+
+            font-weight: 800;
         }
 
-        /* ========== DEAL ========== */
-        .deal-wrap {
-            display: flex;
-            gap: 0;
-            background: var(--bg-card);
-            border-radius: var(--radius);
-            overflow: hidden;
-            box-shadow: var(--shadow);
+        .old-price {
+            color: #aaa;
+
+            text-decoration:
+                line-through;
+
+            font-size: 12px;
+
+            margin-left: 5px;
         }
-        .deal-wrap .deal-img {
-            flex: 0 0 48%;
-            background: var(--surface);
-            min-height: 300px;
+
+        .buy-btn {
+            background: #db2777;
+
+            color: white;
+
+            border: none;
+
+            padding: 11px 15px;
+
+            border-radius: 9px;
+
+            cursor: pointer;
+
+            font-weight: 600;
         }
-        .deal-wrap .deal-img img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+
+        .buy-btn:hover {
+            background: #be185d;
         }
-        .deal-wrap .deal-content {
-            flex: 1;
-            padding: 40px 44px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+
+
+        /* ================= FEATURES ================= */
+
+        .features {
+            display: grid;
+
+            grid-template-columns:
+                repeat(4, 1fr);
+
+            gap: 20px;
         }
-        .deal-wrap .deal-content .tag {
-            display: inline-block;
-            background: var(--warning);
-            color: var(--primary);
-            padding: 4px 14px;
-            border-radius: 999px;
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            align-self: flex-start;
-            margin-bottom: 12px;
+
+        .feature {
+            background: white;
+
+            padding: 25px;
+
+            border-radius: 15px;
+
+            text-align: center;
         }
-        .deal-wrap .deal-content h3 {
+
+        .feature i {
             font-size: 28px;
-            font-weight: 700;
-            margin-bottom: 6px;
-        }
-        .deal-wrap .deal-content .desc {
-            color: var(--muted);
-            margin-bottom: 18px;
-        }
-        .deal-wrap .deal-content .price-big {
-            font-size: 32px;
-            font-weight: 800;
-            color: var(--primary);
+
+            color: #db2777;
+
+            margin-bottom: 15px;
         }
-        .deal-wrap .deal-content .price-big .old {
-            font-size: 20px;
-            font-weight: 400;
-            color: var(--muted-light);
-            text-decoration: line-through;
-            margin-left: 10px;
+
+        .feature h3 {
+            font-size: 15px;
+
+            margin-bottom: 7px;
         }
-        .deal-wrap .deal-content .stock {
-            font-size: 14px;
-            color: var(--muted);
-            margin: 4px 0 16px;
+
+        .feature p {
+            color: #777;
+
+            font-size: 12px;
         }
-        .deal-wrap .deal-content .stock strong {
-            color: var(--accent);
+
+
+        /* ================= MODAL ================= */
+
+        .modal {
+            display: none;
+
+            position: fixed;
+
+            inset: 0;
+
+            background:
+                rgba(0,0,0,.65);
+
+            z-index: 2000;
+
+            align-items: center;
+
+            justify-content: center;
+
+            padding: 20px;
         }
 
-        .timer-grid {
+        .modal.show {
             display: flex;
-            gap: 12px;
-            margin: 16px 0 20px;
-        }
-        .timer-box {
-            background: var(--primary);
-            color: #fff;
-            padding: 10px 16px;
-            border-radius: var(--radius-sm);
-            min-width: 68px;
-            text-align: center;
         }
-        .timer-box .num {
-            font-size: 26px;
-            font-weight: 700;
-            line-height: 1.2;
+
+        .modal-content {
+            background: white;
+
+            width: 100%;
+
+            max-width: 580px;
+
+            border-radius: 20px;
+
+            padding: 30px;
+
+            position: relative;
+
+            max-height: 90vh;
+
+            overflow-y: auto;
         }
-        .timer-box .label {
-            font-size: 11px;
-            opacity: 0.70;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+
+        .close {
+            position: absolute;
+
+            right: 20px;
+            top: 18px;
+
+            font-size: 25px;
+
+            cursor: pointer;
+
+            color: #777;
         }
 
-        /* ========== TESTIMONIALS ========== */
-        .testimonials-scroll {
-            display: flex;
-            gap: 20px;
-            overflow-x: auto;
-            padding: 8px 4px 16px;
-            scroll-snap-type: x mandatory;
-            -webkit-overflow-scrolling: touch;
-        }
-        .testimonials-scroll::-webkit-scrollbar {
-            height: 4px;
-        }
-        .testimonials-scroll::-webkit-scrollbar-thumb {
-            background: var(--accent-light);
-            border-radius: 999px;
-        }
-        .testimonial-card {
-            flex: 0 0 340px;
-            background: var(--bg-card);
-            border-radius: var(--radius);
-            padding: 24px 26px;
-            box-shadow: var(--shadow);
-            scroll-snap-align: start;
-            transition: var(--transition);
-        }
-        .testimonial-card:hover {
-            box-shadow: var(--shadow-hover);
-        }
-        .testimonial-card .stars {
-            color: #f5a623;
-            font-size: 16px;
-            letter-spacing: 2px;
-            margin-bottom: 10px;
+        .modal-title {
+            font-size: 24px;
+
+            margin-bottom: 5px;
         }
-        .testimonial-card blockquote {
-            font-size: 15px;
-            line-height: 1.6;
-            color: var(--primary);
-            margin-bottom: 14px;
-            font-style: italic;
+
+        .modal-subtitle {
+            color: #777;
+
+            font-size: 13px;
+
+            margin-bottom: 25px;
         }
-        .testimonial-card .author {
+
+
+        /* ================= CART ================= */
+
+        .cart-item {
             display: flex;
+
             align-items: center;
-            gap: 12px;
+
+            gap: 14px;
+
+            background: #fdf2f8;
+
+            padding: 12px;
+
+            border-radius: 12px;
+
+            margin-bottom: 10px;
         }
-        .testimonial-card .author .avatar {
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
+
+        .cart-item img {
+            width: 65px;
+            height: 75px;
+
             object-fit: cover;
-            background: var(--surface);
+
+            border-radius: 9px;
         }
-        .testimonial-card .author .name {
-            font-weight: 600;
+
+        .cart-item-info {
+            flex: 1;
+        }
+
+        .cart-item-info h4 {
             font-size: 14px;
+
+            margin-bottom: 4px;
         }
-        .testimonial-card .author .role {
+
+        .cart-item-price {
+            color: #db2777;
+
             font-size: 13px;
-            color: var(--muted);
-        }
 
-        /* ========== NEWSLETTER ========== */
-        .newsletter-wrap {
-            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
-            border-radius: var(--radius);
-            padding: 48px 56px;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 32px;
-            flex-wrap: wrap;
-        }
-        .newsletter-wrap .text h3 {
-            font-size: 26px;
             font-weight: 700;
-            margin-bottom: 4px;
-        }
-        .newsletter-wrap .text p {
-            opacity: 0.75;
-            font-size: 15px;
         }
-        .newsletter-wrap form {
+
+        .quantity {
             display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            flex: 1;
-            max-width: 480px;
+
+            align-items: center;
+
+            gap: 8px;
         }
-        .newsletter-wrap form input {
-            flex: 1;
-            min-width: 200px;
-            padding: 14px 20px;
-            border-radius: 999px;
-            border: 0;
-            font-size: 15px;
-            background: rgba(255, 255, 255, 0.12);
-            color: #fff;
-            transition: var(--transition);
-            outline: 2px solid transparent;
-        }
-        .newsletter-wrap form input::placeholder {
-            color: rgba(255, 255, 255, 0.5);
-        }
-        .newsletter-wrap form input:focus {
-            outline-color: var(--accent);
-            background: rgba(255, 255, 255, 0.18);
-        }
-        .newsletter-wrap form .btn {
-            background: var(--accent);
-            color: #fff;
-            border-color: var(--accent);
-            padding: 14px 32px;
-        }
-        .newsletter-wrap form .btn:hover {
-            background: var(--accent-dark);
-            border-color: var(--accent-dark);
-        }
-        #newsletterMsg {
-            margin-top: 12px;
-            font-size: 14px;
-            opacity: 0.9;
-            width: 100%;
+
+        .quantity button {
+            width: 27px;
+            height: 27px;
+
+            border: none;
+
+            border-radius: 6px;
+
+            background: #db2777;
+
+            color: white;
+
+            cursor: pointer;
         }
 
-        /* ========== FOOTER ========== */
-        footer {
-            margin-top: 16px;
-            padding: 44px 0 28px;
-            border-top: 1px solid rgba(26, 26, 46, 0.04);
+        .quantity span {
+            font-weight: 700;
+
+            min-width: 15px;
+
+            text-align: center;
         }
-        .footer-grid {
-            display: grid;
-            grid-template-columns: 2fr 1fr 1fr 1fr;
-            gap: 40px;
-            margin-bottom: 32px;
+
+        .empty-cart {
+            text-align: center;
+
+            padding: 30px;
+
+            color: #888;
         }
-        .footer-grid .brand-col .brand {
-            font-size: 20px;
-            margin-bottom: 8px;
+
+        .empty-cart i {
+            font-size: 45px;
+
+            margin-bottom: 12px;
+
+            color: #ddd;
         }
-        .footer-grid .brand-col p {
-            color: var(--muted);
-            font-size: 14px;
-            max-width: 300px;
-            line-height: 1.6;
+
+
+        /* ================= FORM ================= */
+
+        .form-group {
+            margin-bottom: 17px;
         }
-        .footer-grid .brand-col .socials {
-            display: flex;
-            gap: 10px;
-            margin-top: 14px;
+
+        .form-group label {
+            display: block;
+
+            font-size: 13px;
+
+            font-weight: 600;
+
+            margin-bottom: 7px;
         }
-        .footer-grid .brand-col .socials a {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: var(--surface);
-            display: grid;
-            place-items: center;
-            color: var(--muted);
-            transition: var(--transition);
-            font-size: 16px;
+
+        .form-group input,
+        .form-group select {
+            width: 100%;
+
+            padding: 13px;
+
+            border: 1px solid #d1d5db;
+
+            border-radius: 8px;
+
+            outline: none;
         }
-        .footer-grid .brand-col .socials a:hover {
-            background: var(--accent);
-            color: #fff;
+
+        .form-group input:focus,
+        .form-group select:focus {
+            border-color: #db2777;
         }
-        .footer-grid .col h5 {
-            font-weight: 700;
-            font-size: 14px;
-            margin-bottom: 12px;
-            color: var(--primary);
+
+
+        /* ================= SUMMARY ================= */
+
+        .summary {
+            background: #f8fafc;
+
+            padding: 18px;
+
+            border-radius: 12px;
+
+            margin: 20px 0;
         }
-        .footer-grid .col ul {
-            list-style: none;
+
+        .summary-row {
             display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-        .footer-grid .col ul li a {
-            color: var(--muted);
+
+            justify-content:
+                space-between;
+
+            margin-bottom: 10px;
+
             font-size: 14px;
-            transition: var(--transition);
-        }
-        .footer-grid .col ul li a:hover {
-            color: var(--accent);
-        }
-        .footer-bottom {
-            text-align: center;
-            padding-top: 20px;
-            border-top: 1px solid rgba(26, 26, 46, 0.04);
-            color: var(--muted-light);
-            font-size: 13px;
         }
 
-        /* ========== RESPONSIVE ========== */
-        @media (max-width: 1200px) {
-            .products-grid {
-                grid-template-columns: repeat(3, 1fr);
-            }
-            .categories-grid {
-                grid-template-columns: repeat(3, 1fr);
-            }
-            .footer-grid {
-                grid-template-columns: 1fr 1fr;
-                gap: 28px;
-            }
+        .summary-total {
+            border-top:
+                1px solid #ddd;
+
+            padding-top: 12px;
+
+            font-weight: 800;
+
+            font-size: 18px;
         }
 
-        @media (max-width: 992px) {
-            .hero h1 {
-                font-size: 36px;
-            }
-            .hero {
-                min-height: 380px;
-                margin: 16px 16px 0;
-                padding: 40px 0;
-            }
-            .deal-wrap {
-                flex-direction: column;
-            }
-            .deal-wrap .deal-img {
-                flex: 0 0 240px;
-            }
-            .deal-wrap .deal-content {
-                padding: 28px 30px;
-            }
-            .newsletter-wrap {
-                padding: 32px 28px;
-                flex-direction: column;
-                text-align: center;
-            }
-            .newsletter-wrap form {
-                max-width: 100%;
-            }
-            .search-wrap {
-                min-width: 150px;
-            }
+        .confirm-btn {
+            width: 100%;
+
+            padding: 15px;
+
+            border: none;
+
+            background: #db2777;
+
+            color: white;
+
+            border-radius: 10px;
+
+            font-weight: 700;
+
+            cursor: pointer;
         }
 
-        @media (max-width: 768px) {
-            nav.main-nav {
-                display: none;
-            }
-            .mobile-toggle {
-                display: grid;
-                place-items: center;
-            }
-            .products-grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 14px;
-            }
-            .categories-grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 12px;
-            }
-            .hero h1 {
-                font-size: 28px;
-            }
-            .hero p {
-                font-size: 15px;
-            }
-            .section-header h2 {
-                font-size: 22px;
-            }
-            .deal-wrap .deal-content h3 {
-                font-size: 22px;
-            }
-            .deal-wrap .deal-content .price-big {
-                font-size: 26px;
-            }
-            .timer-box {
-                min-width: 56px;
-                padding: 8px 12px;
-            }
-            .timer-box .num {
-                font-size: 20px;
-            }
-            .footer-grid {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-            .header-inner {
-                flex-wrap: nowrap;
-            }
-            .brand {
-                font-size: 18px;
-            }
-            .brand i {
-                font-size: 20px;
-            }
-            .search-wrap {
-                min-width: 120px;
-                padding: 0 10px 0 14px;
-            }
-            .search-wrap input {
-                font-size: 13px;
-                padding: 8px 0;
-            }
-            .header-actions .icon-btn {
-                width: 36px;
-                height: 36px;
-                font-size: 15px;
-            }
-            .cart-count {
-                width: 18px;
-                height: 18px;
-                font-size: 10px;
-            }
-            .testimonial-card {
-                flex: 0 0 280px;
+        .confirm-btn:hover {
+            background: #be185d;
+        }
+
+
+        /* ================= FOOTER ================= */
+
+        footer {
+            background: #171717;
+
+            color: white;
+
+            padding: 50px 7%;
+
+            margin-top: 30px;
+        }
+
+        .footer-grid {
+            display: grid;
+
+            grid-template-columns:
+                2fr 1fr 1fr 1fr;
+
+            gap: 40px;
+        }
+
+        footer h3 {
+            margin-bottom: 15px;
+        }
+
+        footer p,
+        footer a {
+            color: #aaa;
+
+            font-size: 13px;
+
+            line-height: 2;
+
+            text-decoration: none;
+
+            display: block;
+        }
+
+        footer a:hover {
+            color: #db2777;
+        }
+
+        .copyright {
+            border-top:
+                1px solid #333;
+
+            margin-top: 35px;
+
+            padding-top: 20px;
+
+            color: #888;
+
+            font-size: 12px;
+        }
+
+
+        /* ================= RESPONSIVE ================= */
+
+        @media(max-width:1000px) {
+
+            .product-grid {
+                grid-template-columns:
+                    repeat(3,1fr);
             }
-            .hero .actions .btn {
-                padding: 10px 20px;
-                font-size: 14px;
+
+            .features {
+                grid-template-columns:
+                    repeat(2,1fr);
             }
-            .section {
-                padding: 36px 0;
+
+            .hero-dress {
+                display: none;
             }
+
         }
 
-        @media (max-width: 480px) {
-            .products-grid {
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
+
+        @media(max-width:700px) {
+
+            header {
+                padding: 15px 5%;
             }
-            .categories-grid {
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
+
+            nav {
+                display: none;
             }
+
             .hero {
-                margin: 10px 10px 0;
-                min-height: 300px;
-                padding: 28px 0;
-                border-radius: var(--radius-sm);
+                padding: 45px 5%;
             }
+
             .hero h1 {
-                font-size: 24px;
+                font-size: 36px;
             }
+
             .container {
-                padding: 0 14px;
+                width: 90%;
             }
-            .deal-wrap .deal-content {
-                padding: 20px 18px;
-            }
-            .deal-wrap .deal-img {
-                flex: 0 0 180px;
-            }
-            .newsletter-wrap {
-                padding: 24px 18px;
-            }
-            .newsletter-wrap .text h3 {
-                font-size: 20px;
+
+            .product-grid {
+                grid-template-columns:
+                    repeat(2,1fr);
+
+                gap: 15px;
             }
-            .product-card .body {
-                padding: 12px 12px 8px;
+
+            .product-image {
+                height: 250px;
             }
-            .product-card .body h5 {
-                font-size: 13px;
+
+            .product-info {
+                padding: 14px;
             }
-            .product-card .body .price {
+
+            .product-name {
                 font-size: 15px;
             }
-            .product-card .footer {
-                padding: 0 12px 12px;
-            }
-            .product-card .footer .add-btn {
-                font-size: 12px;
-                padding: 8px;
+
+            .price {
+                font-size: 16px;
             }
-            .timer-box {
-                min-width: 46px;
-                padding: 6px 8px;
+
+            .buy-btn {
+                padding: 8px 10px;
+
+                font-size: 11px;
             }
-            .timer-box .num {
-                font-size: 16px;
+
+            .features {
+                grid-template-columns: 1fr;
             }
-            .timer-box .label {
-                font-size: 9px;
+
+            .footer-grid {
+                grid-template-columns:
+                    1fr 1fr;
             }
-            .cat-card {
-                padding: 16px 10px;
+
+        }
+
+
+        @media(max-width:450px) {
+
+            .product-grid {
+                grid-template-columns: 1fr;
             }
-            .cat-card .icon-wrap {
-                width: 44px;
-                height: 44px;
-                font-size: 18px;
+
+            .product-image {
+                height: 350px;
             }
-            .cat-card h4 {
-                font-size: 13px;
+
+            .footer-grid {
+                grid-template-columns: 1fr;
             }
+
         }
+
     </style>
+
 </head>
 
+
 <body>
 
-    <!-- ===== HEADER ===== -->
-    <header>
-        <div class="container header-inner">
-            <div style="display:flex;align-items:center;gap:12px;">
-                <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <a class="brand" href="#">
-                    <i class="fas fa-store-alt"></i>
-                    <span>Nexus<span class="accent">Shop</span></span>
-                </a>
-            </div>
 
-            <nav class="main-nav" id="mainNav" aria-label="Main navigation">
-                <ul>
-                    <li><a href="#" class="active"><i class="fas fa-home"></i> Home</a></li>
-                    <li><a href="#categories"><i class="fas fa-th-large"></i> Categories</a></li>
-                    <li><a href="#products"><i class="fas fa-fire"></i> Trending</a></li>
-                    <li><a href="#deals"><i class="fas fa-tag"></i> Deals</a></li>
-                    <li><a href="#testimonials"><i class="fas fa-star"></i> Reviews</a></li>
-                </ul>
-            </nav>
-
-            <div style="display:flex;align-items:center;gap:10px;">
-                <div class="search-wrap" role="search">
-                    <input type="search" id="searchInput" placeholder="Search products..." aria-label="Search" />
-                    <button id="searchBtn" aria-label="Submit search"><i class="fas fa-search"></i></button>
-                </div>
+<!-- ================= HEADER ================= -->
 
-                <div class="header-actions">
-                    <button class="icon-btn" title="Account" aria-label="Account"><i class="far fa-user"></i></button>
-                    <button class="icon-btn" title="Wishlist" aria-label="Wishlist"><i class="far fa-heart"></i></button>
-                    <div class="cart-wrap">
-                        <button class="icon-btn" id="cartBtn" title="Cart" aria-label="Cart">
-                            <i class="fas fa-shopping-bag"></i>
-                        </button>
-                        <span class="cart-count" id="cartCount">0</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+<header>
+
+    <div class="logo">
+        Style<span>Hub</span>
+    </div>
+
+
+    <nav>
+
+        <a href="#">
+            Home
+        </a>
+
+        <a href="#dresses">
+            Dresses
+        </a>
+
+        <a href="#offers">
+            Offers
+        </a>
+
+        <a href="#about">
+            About
+        </a>
+
+    </nav>
+
+
+    <div class="header-actions">
+
+        <i class="fa-regular fa-user"
+           onclick="showLogin()">
+        </i>
+
+
+        <div class="cart-icon"
+             onclick="openCart()">
+
+            <i class="fa-solid fa-bag-shopping">
+            </i>
+
+            <span class="cart-count"
+                  id="cartCount">
+                0
+            </span>
 
-        <!-- Mobile Menu -->
-        <div id="mobileMenu">
-            <div class="container">
-                <ul>
-                    <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
-                    <li><a href="#categories"><i class="fas fa-th-large"></i> Categories</a></li>
-                    <li><a href="#products"><i class="fas fa-fire"></i> Trending</a></li>
-                    <li><a href="#deals"><i class="fas fa-tag"></i> Deals</a></li>
-                    <li><a href="#testimonials"><i class="fas fa-star"></i> Reviews</a></li>
-                    <li><a href="#"><i class="far fa-user"></i> Account</a></li>
-                    <li><a href="#"><i class="far fa-heart"></i> Wishlist</a></li>
-                </ul>
-            </div>
         </div>
-    </header>
-
-    <!-- ===== MAIN ===== -->
-    <main>
-
-        <!-- HERO -->
-        <section class="hero" aria-label="Hero banner">
-            <div class="container">
-                <div class="badge"><i class="fas fa-sparkles"></i> New Collection 2026</div>
-                <h1>Discover Premium <br>Essentials</h1>
-                <p>Curated fashion, tech & accessories with free shipping on your first order. Limited-time deals await.</p>
-                <div class="actions">
-                    <button class="btn btn-primary" id="shopNow"><i class="fas fa-arrow-right"></i> Shop Now</button>
-                    <button class="btn btn-ghost" id="exploreDeals"><i class="fas fa-clock"></i> Explore Deals</button>
-                </div>
-            </div>
-        </section>
-
-        <!-- CATEGORIES -->
-        <section class="section" id="categories" aria-labelledby="cat-title">
-            <div class="container">
-                <div class="section-header">
-                    <div class="title-group">
-                        <h2 id="cat-title">Browse Categories</h2>
-                        <p>Find exactly what you're looking for</p>
-                    </div>
-                    <a href="#" class="view-all">All Categories <i class="fas fa-arrow-right"></i></a>
-                </div>
-                <div class="categories-grid" id="categoriesGrid" aria-live="polite"></div>
-            </div>
-        </section>
-
-        <!-- PRODUCTS -->
-        <section class="section" id="products" aria-labelledby="prod-title">
-            <div class="container">
-                <div class="section-header">
-                    <div class="title-group">
-                        <h2 id="prod-title">Trending Now</h2>
-                        <p>What's hot — popular picks from our community</p>
-                    </div>
-                    <a href="#" class="view-all">View All <i class="fas fa-arrow-right"></i></a>
-                </div>
-                <div class="products-grid" id="productsGrid" aria-live="polite"></div>
-            </div>
-        </section>
-
-        <!-- DEAL -->
-        <section class="section" id="deals" aria-labelledby="deals-title">
-            <div class="container">
-                <div class="section-header">
-                    <div class="title-group">
-                        <h2 id="deals-title">⚡ Flash Deal</h2>
-                        <p>Grab it before it's gone — limited stock</p>
-                    </div>
-                </div>
-                <div class="deal-wrap">
-                    <div class="deal-img">
-                        <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?auto=format&fit=crop&w=800&q=80" alt="MacBook Air M2" loading="lazy">
-                    </div>
-                    <div class="deal-content">
-                        <span class="tag"><i class="fas fa-bolt"></i> Limited Offer</span>
-                        <h3>MacBook Air M2</h3>
-                        <p class="desc">Thin, light, and incredibly powerful — the M2 chip redefines performance.</p>
-                        <div>
-                            <span class="price-big">$999 <span class="old">$1,199</span></span>
-                        </div>
-                        <p class="stock">Only <strong>12</strong> items left — hurry!</p>
-                        <div class="timer-grid" id="dealTimer">
-                            <div class="timer-box">
-                                <div class="num" id="dealDays">0</div>
-                                <div class="label">Days</div>
-                            </div>
-                            <div class="timer-box">
-                                <div class="num" id="dealHours">00</div>
-                                <div class="label">Hours</div>
-                            </div>
-                            <div class="timer-box">
-                                <div class="num" id="dealMinutes">00</div>
-                                <div class="label">Mins</div>
-                            </div>
-                            <div class="timer-box">
-                                <div class="num" id="dealSeconds">00</div>
-                                <div class="label">Secs</div>
-                            </div>
-                        </div>
-                        <button class="btn btn-primary" id="buyDeal"><i class="fas fa-cart-plus"></i> Add to Cart</button>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- TESTIMONIALS -->
-        <section class="section" id="testimonials" aria-labelledby="test-title">
-            <div class="container">
-                <div class="section-header">
-                    <div class="title-group">
-                        <h2 id="test-title">What Our Customers Say</h2>
-                        <p>Real reviews from real people</p>
-                    </div>
-                </div>
-                <div class="testimonials-scroll" id="testimonialsList"></div>
-            </div>
-        </section>
-
-        <!-- NEWSLETTER -->
-        <section class="section" aria-labelledby="news-title">
-            <div class="container">
-                <div class="newsletter-wrap">
-                    <div class="text">
-                        <h3 id="news-title">Stay in the Loop</h3>
-                        <p>Get exclusive offers, early access & new arrivals</p>
-                    </div>
-                    <form id="newsletterForm" onsubmit="return false;">
-                        <input type="email" id="newsletterEmail" placeholder="Enter your email" aria-label="Email" required />
-                        <button class="btn" id="subscribeBtn"><i class="fas fa-paper-plane"></i> Subscribe</button>
-                        <div id="newsletterMsg"></div>
-                    </form>
-                </div>
-            </div>
-        </section>
-
-    </main>
-
-    <!-- ===== FOOTER ===== -->
-    <footer>
-        <div class="container">
-            <div class="footer-grid">
-                <div class="brand-col">
-                    <div class="brand">
-                        <i class="fas fa-store-alt"></i>
-                        <span>Nexus<span class="accent">Shop</span></span>
-                    </div>
-                    <p>Modern e‑commerce demo built with care. Quality products, seamless experience.</p>
-                    <div class="socials">
-                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-                        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
-                    </div>
-                </div>
-                <div class="col">
-                    <h5>Company</h5>
-                    <ul>
-                        <li><a href="#">About</a></li>
-                        <li><a href="#">Careers</a></li>
-                        <li><a href="#">Press</a></li>
-                        <li><a href="#">Blog</a></li>
-                    </ul>
-                </div>
-                <div class="col">
-                    <h5>Support</h5>
-                    <ul>
-                        <li><a href="#">Help Center</a></li>
-                        <li><a href="#">Shipping</a></li>
-                        <li><a href="#">Returns</a></li>
-                        <li><a href="#">Contact</a></li>
-                    </ul>
-                </div>
-                <div class="col">
-                    <h5>Legal</h5>
-                    <ul>
-                        <li><a href="#">Privacy</a></li>
-                        <li><a href="#">Terms</a></li>
-                        <li><a href="#">Cookies</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="footer-bottom">
-                &copy; <span id="year"></span> NexusShop. All rights reserved.
-            </div>
+
+    </div>
+
+</header>
+
+
+
+<!-- ================= HERO ================= -->
+
+<section class="hero">
+
+    <div class="hero-content">
+
+        <h1>
+            Fashion That<br>
+            Feels Like You
+        </h1>
+
+        <p>
+            Discover beautiful dresses for every occasion.
+            Shop the latest styles at amazing prices.
+        </p>
+
+
+        <div class="search-box">
+
+            <i class="fa-solid fa-magnifying-glass">
+            </i>
+
+            <input
+                type="text"
+                id="searchInput"
+                placeholder="Search dresses, gowns, sarees..."
+                onkeyup="searchProducts()">
+
+
+            <button onclick="searchProducts()">
+                Search
+            </button>
+
         </div>
-    </footer>
-
-    <!-- ===== SCRIPT ===== -->
-    <script>
-        // ============================================================
-        // DATA
-        // ============================================================
-        const CATEGORIES = [
-            { id: 'phones', name: 'Smartphones', icon: 'fa-mobile-alt', count: 24 },
-            { id: 'laptops', name: 'Laptops', icon: 'fa-laptop', count: 18 },
-            { id: 'clothing', name: 'Clothing', icon: 'fa-tshirt', count: 42 },
-            { id: 'gadgets', name: 'Gadgets', icon: 'fa-headphones', count: 31 },
-            { id: 'footwear', name: 'Footwear', icon: 'fa-shoe-prints', count: 27 },
-            { id: 'accessories', name: 'Accessories', icon: 'fa-watch', count: 39 }
-        ];
-
-        const PRODUCTS = [
-            { id: 1, title: 'iPhone 14 Pro Max', price: 1099, oldPrice: 1199, rating: 5, reviews: 128, badge: 'New',
-                img: 'https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?auto=format&fit=crop&w=600&q=80',
-                category: 'Smartphones' },
-            { id: 2, title: 'MacBook Pro 14"', price: 1999, rating: 4, reviews: 86, badge: '',
-                img: 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?auto=format&fit=crop&w=600&q=80',
-                category: 'Laptops' },
-            { id: 3, title: 'Apple Watch Series 8', price: 349, oldPrice: 399, rating: 5, reviews: 214, badge: 'Sale',
-                img: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?auto=format&fit=crop&w=600&q=80',
-                category: 'Accessories' },
-            { id: 4, title: 'Nike Air Max 270', price: 150, rating: 4, reviews: 53, badge: '',
-                img: 'https://images.unsplash.com/photo-1542272604-787c3835535d?auto=format&fit=crop&w=600&q=80',
-                category: 'Footwear' },
-            { id: 5, title: 'Sony A7 IV Camera', price: 2499, rating: 5, reviews: 42, badge: 'New',
-                img: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?auto=format&fit=crop&w=600&q=80',
-                category: 'Gadgets' },
-            { id: 6, title: 'Chanel No. 5', price: 120, rating: 5, reviews: 189, badge: '',
-                img: 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?auto=format&fit=crop&w=600&q=80',
-                category: 'Accessories' },
-            { id: 7, title: 'Travel Backpack', price: 79, oldPrice: 99, rating: 4, reviews: 67, badge: 'Sale',
-                img: 'https://images.unsplash.com/photo-1551232864-3f0890e580d9?auto=format&fit=crop&w=600&q=80',
-                category: 'Accessories' },
-            { id: 8, title: 'Sony WH-1000XM5', price: 399, rating: 5, reviews: 156, badge: '',
-                img: 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?auto=format&fit=crop&w=600&q=80',
-                category: 'Gadgets' }
-        ];
-
-        const TESTIMONIALS = [{
-            name: 'Ava Martin',
-            role: 'Verified Buyer',
-            avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=80&q=80',
-            text: 'Fast shipping and excellent support. The product exceeded my expectations!',
-            stars: 5
-        }, {
-            name: 'Michael Lee',
-            role: 'Frequent Shopper',
-            avatar: 'https://images.unsplash.com/photo-1546456073-6712f79251bb?auto=format&fit=crop&w=80&q=80',
-            text: 'Great selection and smooth checkout. Will definitely shop again.',
-            stars: 4
-        }, {
-            name: 'Sophia Chen',
-            role: 'Designer',
-            avatar: 'https://images.unsplash.com/photo-1494790108378-be9c29b29330?auto=format&fit=crop&w=80&q=80',
-            text: 'Love the quality and the packaging. Everything arrived in perfect condition.',
-            stars: 5
-        }, {
-            name: 'James Wilson',
-            role: 'Tech Enthusiast',
-            avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80',
-            text: 'Amazing prices on electronics. The M2 MacBook deal was unbeatable.',
-            stars: 5
-        }];
-
-        // ============================================================
-        // STATE
-        // ============================================================
-        let cartCount = 0;
-
-        // ============================================================
-        // DOM REFS
-        // ============================================================
-        const categoriesGrid = document.getElementById('categoriesGrid');
-        const productsGrid = document.getElementById('productsGrid');
-        const cartCountEl = document.getElementById('cartCount');
-        const searchInput = document.getElementById('searchInput');
-        const searchBtn = document.getElementById('searchBtn');
-        const mobileToggle = document.getElementById('mobileToggle');
-        const mobileMenu = document.getElementById('mobileMenu');
-        const newsletterForm = document.getElementById('newsletterForm');
-        const newsletterEmail = document.getElementById('newsletterEmail');
-        const newsletterMsg = document.getElementById('newsletterMsg');
-        const testimonialsList = document.getElementById('testimonialsList');
-
-        // ============================================================
-        // RENDER FUNCTIONS
-        // ============================================================
-        function renderCategories() {
-            categoriesGrid.innerHTML = '';
-            CATEGORIES.forEach(cat => {
-                const el = document.createElement('div');
-                el.className = 'cat-card';
-                el.innerHTML = `
-                    <div class="icon-wrap"><i class="fas ${cat.icon}"></i></div>
-                    <h4>${cat.name}</h4>
-                    <div class="count">${cat.count} items</div>
-                `;
-                el.addEventListener('click', () => {
-                    searchInput.value = cat.name;
-                    filterProducts(cat.name);
-                    document.getElementById('products').scrollIntoView({ behavior: 'smooth', block: 'start' });
-                });
-                categoriesGrid.appendChild(el);
-            });
-        }
 
-        function renderProducts(list) {
-            productsGrid.innerHTML = '';
-            if (!list.length) {
-                productsGrid.innerHTML =
-                `<p style="grid-column:1/-1;text-align:center;padding:40px;color:var(--muted);">No products found.</p>`;
-                return;
-            }
-            list.forEach(p => {
-                const el = document.createElement('article');
-                el.className = 'product-card';
-                const badgeClass = p.badge === 'Sale' ? 'sale' : '';
-                const badgeHtml = p.badge ? `<span class="badge ${badgeClass}">${p.badge}</span>` : '';
-                const oldPriceHtml = p.oldPrice ? `<span class="old-price">$${p.oldPrice.toLocaleString()}</span>` :
-                '';
-                const stars = '★'.repeat(Math.round(p.rating)) + '☆'.repeat(5 - Math.round(p.rating));
-                el.innerHTML = `
-                    <div class="img-wrap">
-                        <img src="${p.img}" alt="${escapeHtml(p.title)}" loading="lazy">
-                        ${badgeHtml}
-                        <button class="wish-btn" aria-label="Add to wishlist"><i class="far fa-heart"></i></button>
-                    </div>
-                    <div class="body">
-                        <div class="category-tag">${p.category}</div>
-                        <h5>${escapeHtml(p.title)}</h5>
-                        <div class="price-row">
-                            <span class="price">$${p.price.toLocaleString()}</span>
-                            ${oldPriceHtml}
-                        </div>
-                        <div class="rating">
-                            ${stars} <span>(${p.reviews})</span>
-                        </div>
-                    </div>
-                    <div class="footer">
-                        <button class="add-btn" data-id="${p.id}"><i class="fas fa-cart-plus"></i> Add</button>
-                    </div>
-                `;
-                productsGrid.appendChild(el);
-            });
+    </div>
 
-            // Add to cart listeners
-            productsGrid.querySelectorAll('.add-btn').forEach(btn => {
-                btn.addEventListener('click', function(e) {
-                    e.stopPropagation();
-                    const id = Number(this.dataset.id);
-                    addToCart(id, this);
-                });
-            });
-        }
 
-        function renderTestimonials() {
-            testimonialsList.innerHTML = '';
-            TESTIMONIALS.forEach(t => {
-                const stars = '★'.repeat(t.stars) + '☆'.repeat(5 - t.stars);
-                const el = document.createElement('div');
-                el.className = 'testimonial-card';
-                el.innerHTML = `
-                    <div class="stars">${stars}</div>
-                    <blockquote>“${escapeHtml(t.text)}”</blockquote>
-                    <div class="author">
-                        <img class="avatar" src="${t.avatar}" alt="${escapeHtml(t.name)}" loading="lazy">
-                        <div>
-                            <div class="name">${escapeHtml(t.name)}</div>
-                            <div class="role">${escapeHtml(t.role)}</div>
-                        </div>
-                    </div>
-                `;
-                testimonialsList.appendChild(el);
-            });
-        }
+    <div class="hero-dress">
 
-        // ============================================================
-        // UTILITY FUNCTIONS
-        // ============================================================
-        function escapeHtml(text) {
-            return String(text).replace(/[&<>"']/g, s => ({
-                '&': '&amp;',
-                '<': '&lt;',
-                '>': '&gt;',
-                '"': '&quot;',
-                "'": '&#39;'
-            } [s]));
-        }
-
-        function updateCartCount() {
-            cartCountEl.textContent = cartCount;
-            // animate
-            cartCountEl.style.transform = 'scale(1.3)';
-            setTimeout(() => cartCountEl.style.transform = 'scale(1)', 200);
-        }
-
-        function addToCart(productId, btnEl) {
-            const p = PRODUCTS.find(x => x.id === productId);
-            if (!p) return;
-            cartCount++;
-            updateCartCount();
-
-            if (btnEl) {
-                const orig = btnEl.innerHTML;
-                btnEl.innerHTML = '<i class="fas fa-check"></i> Added';
-                btnEl.classList.add('added');
-                setTimeout(() => {
-                    btnEl.innerHTML = orig;
-                    btnEl.classList.remove('added');
-                }, 1500);
-            }
-            // subtle feedback
-            const cartBtn = document.getElementById('cartBtn');
-            cartBtn.style.color = 'var(--accent)';
-            setTimeout(() => cartBtn.style.color = '', 400);
-        }
+        <i class="fa-solid fa-person-dress">
+        </i>
 
-        function filterProducts(query) {
-            const q = String(query || '').trim().toLowerCase();
-            if (!q) {
-                renderProducts(PRODUCTS);
-                return;
-            }
-            const filtered = PRODUCTS.filter(p =>
-                p.title.toLowerCase().includes(q) ||
-                p.category.toLowerCase().includes(q)
-            );
-            renderProducts(filtered);
-        }
-
-        // ============================================================
-        // DEAL TIMER
-        // ============================================================
-        (function setupDealTimer() {
-            const now = new Date();
-            const target = new Date(now.getTime() + (24 * 60 + 36) * 60 * 1000);
-
-            function tick() {
-                const diff = target - new Date();
-                if (diff <= 0) {
-                    document.getElementById('dealDays').textContent = '0';
-                    document.getElementById('dealHours').textContent = '00';
-                    document.getElementById('dealMinutes').textContent = '00';
-                    document.getElementById('dealSeconds').textContent = '00';
-                    return;
-                }
-                const days = Math.floor(diff / (24 * 3600 * 1000));
-                const hours = Math.floor((diff % (24 * 3600 * 1000)) / (3600 * 1000));
-                const mins = Math.floor((diff % (3600 * 1000)) / (60 * 1000));
-                const secs = Math.floor((diff % (60 * 1000)) / 1000);
-                document.getElementById('dealDays').textContent = days;
-                document.getElementById('dealHours').textContent = String(hours).padStart(2, '0');
-                document.getElementById('dealMinutes').textContent = String(mins).padStart(2, '0');
-                document.getElementById('dealSeconds').textContent = String(secs).padStart(2, '0');
-            }
-            tick();
-            setInterval(tick, 1000);
-        })();
-
-        // ============================================================
-        // EVENT BINDINGS
-        // ============================================================
-
-        // Search
-        searchBtn.addEventListener('click', () => filterProducts(searchInput.value));
-        searchInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') filterProducts(e.target.value);
-        });
+    </div>
 
-        // Mobile menu
-        mobileToggle.addEventListener('click', () => {
-            const isOpen = mobileMenu.style.display === 'block';
-            mobileMenu.style.display = isOpen ? 'none' : 'block';
-            mobileToggle.innerHTML = isOpen ? '<i class="fas fa-bars"></i>' : '<i class="fas fa-times"></i>';
-        });
+</section>
 
-        // Close mobile menu on link click
-        mobileMenu.querySelectorAll('a').forEach(link => {
-            link.addEventListener('click', () => {
-                mobileMenu.style.display = 'none';
-                mobileToggle.innerHTML = '<i class="fas fa-bars"></i>';
-            });
-        });
 
-        // Hero buttons
-        document.getElementById('shopNow').addEventListener('click', () => {
-            document.getElementById('products').scrollIntoView({ behavior: 'smooth', block: 'start' });
-        });
-        document.getElementById('exploreDeals').addEventListener('click', () => {
-            document.getElementById('deals').scrollIntoView({ behavior: 'smooth', block: 'start' });
-        });
 
-        // Deal buy
-        document.getElementById('buyDeal').addEventListener('click', function() {
-            cartCount++;
-            updateCartCount();
-            const orig = this.innerHTML;
-            this.innerHTML = '<i class="fas fa-check"></i> Added!';
-            this.style.background = 'var(--success)';
-            setTimeout(() => {
-                this.innerHTML = orig;
-                this.style.background = '';
-            }, 1600);
-        });
+<!-- ================= CATEGORIES ================= -->
 
-        // Newsletter
-        newsletterForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const email = newsletterEmail.value.trim();
-            if (!email || !email.includes('@')) {
-                newsletterMsg.textContent = 'Please enter a valid email address.';
-                newsletterMsg.style.color = '#ffb3b3';
-                newsletterMsg.style.display = 'block';
-                return;
-            }
-            newsletterMsg.textContent = '🎉 Thanks for subscribing!';
-            newsletterMsg.style.color = '#a8e6cf';
-            newsletterMsg.style.display = 'block';
-            newsletterEmail.value = '';
-            setTimeout(() => {
-                newsletterMsg.style.display = 'none';
-            }, 3500);
-        });
+<section class="section">
 
-        // Cart button click feedback
-        document.getElementById('cartBtn').addEventListener('click', () => {
-            alert(`🛒 Your cart has ${cartCount} item${cartCount !== 1 ? 's' : ''}.`);
-        });
+    <div class="container">
 
-        // Year in footer
-        document.getElementById('year').textContent = new Date().getFullYear();
+        <div class="section-title">
 
-        // ============================================================
-        // INIT
-        // ============================================================
-        renderCategories();
-        renderProducts(PRODUCTS);
-        renderTestimonials();
-        updateCartCount();
+            <h2>
+                Shop by Category
+            </h2>
 
-        // Close mobile menu on resize to desktop
-        window.addEventListener('resize', () => {
-            if (window.innerWidth > 768) {
-                mobileMenu.style.display = 'none';
-                mobileToggle.innerHTML = '<i class="fas fa-bars"></i>';
-            }
-        });
+        </div>
 
-        console.log('🚀 NexusShop — user‑friendly e‑commerce demo loaded.');
-    </script>
 
-</body>
+        <div class="categories">
+
+            <div class="category active"
+                 onclick="filterCategory('All',this)">
+                All
+            </div>
+
+            <div class="category"
+                 onclick="filterCategory('Casual',this)">
+                👗 Casual
+            </div>
+
+            <div class="category"
+                 onclick="filterCategory('Party',this)">
+                ✨ Party Wear
+            </div>
+
+            <div class="category"
+                 onclick="filterCategory('Gown',this)">
+                💃 Gowns
+            </div>
+
+            <div class="category"
+                 onclick="filterCategory('Saree',this)">
+                🥻 Sarees
+            </div>
+
+            <div class="category"
+                 onclick="filterCategory('Kurti',this)">
+                🌸 Kurtis
+            </div>
+
+            <div class="category"
+                 onclick="filterCategory('Wedding',this)">
+                💍 Wedding
+            </div>
+
+        </div>
+
+    </div>
+
+</section>
+
+
+
+<!-- ================= PRODUCTS ================= -->
+
+<section class="section"
+         id="dresses">
+
+    <div class="container">
+
+        <div class="section-title">
+
+            <h2>
+                Trending Dresses
+            </h2>
+
+            <span id="resultCount">
+            </span>
+
+        </div>
+
+
+        <div class="product-grid"
+             id="productGrid">
+        </div>
+
+    </div>
+
+</section>
+
+
+
+<!-- ================= FEATURES ================= -->
+
+<section class="section"
+         id="offers">
+
+    <div class="container">
+
+        <div class="features">
+
+
+            <div class="feature">
+
+                <i class="fa-solid fa-truck-fast">
+                </i>
+
+                <h3>
+                    Fast Delivery
+                </h3>
+
+                <p>
+                    Quick and reliable delivery
+                    to your doorstep.
+                </p>
+
+            </div>
+
+
+            <div class="feature">
+
+                <i class="fa-solid fa-shirt">
+                </i>
+
+                <h3>
+                    Premium Quality
+                </h3>
+
+                <p>
+                    Carefully selected fashion
+                    for every occasion.
+                </p>
+
+            </div>
+
+
+            <div class="feature">
+
+                <i class="fa-solid fa-tags">
+                </i>
+
+                <h3>
+                    Best Offers
+                </h3>
+
+                <p>
+                    Enjoy exciting discounts
+                    on trending styles.
+                </p>
+
+            </div>
+
+
+            <div class="feature">
+
+                <i class="fa-solid fa-rotate-left">
+                </i>
+
+                <h3>
+                    Easy Returns
+                </h3>
+
+                <p>
+                    Simple and hassle-free
+                    return policy.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</section>
+
+
+
+<!-- ================= CART MODAL ================= -->
+
+<div class="modal"
+     id="cartModal">
+
+
+    <div class="modal-content">
+
+
+        <span class="close"
+              onclick="closeCart()">
+
+            &times;
+
+        </span>
+
+
+        <h2 class="modal-title">
+            Shopping Bag
+        </h2>
+
+
+        <p class="modal-subtitle">
+            Review your items before placing your order.
+        </p>
+
+
+        <div id="cartItems">
+        </div>
+
+
+        <div id="checkoutSection">
+
+
+            <div class="form-group">
+
+                <label>
+                    Full Name
+                </label>
+
+                <input
+                    type="text"
+                    id="customerName"
+                    placeholder="Enter your name">
+
+            </div>
+
+
+            <div class="form-group">
+
+                <label>
+                    Mobile Number
+                </label>
+
+                <input
+                    type="tel"
+                    id="customerPhone"
+                    placeholder="Enter mobile number">
+
+            </div>
+
+
+            <div class="form-group">
+
+                <label>
+                    Email Address
+                </label>
+
+                <input
+                    type="email"
+                    id="customerEmail"
+                    placeholder="Enter email">
+
+            </div>
+
+
+            <div class="form-group">
+
+                <label>
+                    Delivery Address
+                </label>
+
+                <input
+                    type="text"
+                    id="customerAddress"
+                    placeholder="House No, Street, City">
+
+            </div>
+
+
+            <div class="form-group">
+
+                <label>
+                    Size
+                </label>
+
+                <select id="dressSize">
+
+                    <option value="S">
+                        Small (S)
+                    </option>
+
+                    <option value="M">
+                        Medium (M)
+                    </option>
+
+                    <option value="L">
+                        Large (L)
+                    </option>
+
+                    <option value="XL">
+                        Extra Large (XL)
+                    </option>
+
+                    <option value="XXL">
+                        XXL
+                    </option>
+
+                </select>
+
+            </div>
+
+
+            <div class="form-group">
+
+                <label>
+                    Payment Method
+                </label>
+
+                <select id="paymentMethod">
+
+                    <option value="UPI">
+                        UPI
+                    </option>
+
+                    <option value="CARD">
+                        Credit / Debit Card
+                    </option>
+
+                    <option value="COD">
+                        Cash on Delivery
+                    </option>
+
+                    <option value="NETBANKING">
+                        Net Banking
+                    </option>
+
+                </select>
+
+            </div>
+
+
+            <div class="summary">
+
+                <div class="summary-row">
+
+                    <span>
+                        Subtotal
+                    </span>
+
+                    <span id="summarySubtotal">
+                        ₹0
+                    </span>
+
+                </div>
+
+
+                <div class="summary-row">
+
+                    <span>
+                        Delivery
+                    </span>
+
+                    <span id="deliveryFee">
+                        ₹49
+                    </span>
+
+                </div>
+
+
+                <div class="summary-row">
+
+                    <span>
+                        Discount
+                    </span>
+
+                    <span id="discount">
+                        ₹0
+                    </span>
+
+                </div>
+
+
+                <div class="summary-row summary-total">
+
+                    <span>
+                        Total
+                    </span>
+
+                    <span id="summaryTotal">
+                        ₹0
+                    </span>
+
+                </div>
+
+            </div>
+
+
+            <button class="confirm-btn"
+                    onclick="confirmOrder()">
+
+                <i class="fa-solid fa-lock">
+                </i>
+
+                Place Order
+
+            </button>
+
+        </div>
+
+    </div>
+
+</div>
+
+
+
+<!-- ================= FOOTER ================= -->
+
+<footer id="about">
+
+
+    <div class="footer-grid">
+
+
+        <div>
+
+            <h3>
+                StyleHub
+            </h3>
+
+            <p>
+                Your destination for stylish dresses,
+                modern fashion and affordable prices.
+            </p>
+
+        </div>
+
+
+        <div>
+
+            <h3>
+                Quick Links
+            </h3>
+
+            <a href="#">
+                Home
+            </a>
+
+            <a href="#dresses">
+                Dresses
+            </a>
+
+            <a href="#offers">
+                Offers
+            </a>
+
+            <a href="#about">
+                Contact
+            </a>
+
+        </div>
+
+
+        <div>
+
+            <h3>
+                Customer Care
+            </h3>
+
+            <a href="#">
+                Help Center
+            </a>
+
+            <a href="#">
+                Orders
+            </a>
+
+            <a href="#">
+                Shipping
+            </a>
+
+            <a href="#">
+                Returns
+            </a>
+
+        </div>
+
+
+        <div>
+
+            <h3>
+                Follow Us
+            </h3>
+
+            <a href="#">
+                <i class="fa-brands fa-instagram">
+                </i>
+                Instagram
+            </a>
+
+            <a href="#">
+                <i class="fa-brands fa-facebook">
+                </i>
+                Facebook
+            </a>
+
+            <a href="#">
+                <i class="fa-brands fa-pinterest">
+                </i>
+                Pinterest
+            </a>
+
+        </div>
+
+    </div>
+
+
+    <div class="copyright">
+
+        © 2026 StyleHub. All rights reserved.
+
+    </div>
+
+</footer>
+
+
+
+<script>
+
+
+    /* ================= DRESS DATA ================= */
+
+    const products = [
+
+        {
+            id: 1,
+            category: "Casual",
+            name: "Floral Summer Dress",
+            price: 899,
+            oldPrice: 1299,
+            rating: 4.8,
+            description:
+                "Beautiful floral dress perfect for casual outings.",
+            image:
+                "https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 2,
+            category: "Party",
+            name: "Elegant Party Dress",
+            price: 1499,
+            oldPrice: 1999,
+            rating: 4.9,
+            description:
+                "Stylish party dress with a modern elegant look.",
+            image:
+                "https://images.unsplash.com/photo-1566174053879-31528523f8ae?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 3,
+            category: "Gown",
+            name: "Evening Maxi Gown",
+            price: 2199,
+            oldPrice: 2799,
+            rating: 4.7,
+            description:
+                "Premium evening gown designed for special occasions.",
+            image:
+                "https://images.unsplash.com/photo-1566174053879-31528523f8ae?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 4,
+            category: "Saree",
+            name: "Designer Silk Saree",
+            price: 2499,
+            oldPrice: 3299,
+            rating: 4.8,
+            description:
+                "Traditional designer saree with a premium finish.",
+            image:
+                "https://images.unsplash.com/photo-1610030469983-98e550d6193c?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 5,
+            category: "Kurti",
+            name: "Printed Cotton Kurti",
+            price: 699,
+            oldPrice: 999,
+            rating: 4.6,
+            description:
+                "Comfortable cotton kurti for everyday wear.",
+            image:
+                "https://images.unsplash.com/photo-1583391733956-6c78276477e2?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 6,
+            category: "Wedding",
+            name: "Bridal Lehenga",
+            price: 5999,
+            oldPrice: 7499,
+            rating: 4.9,
+            description:
+                "Luxury bridal lehenga for your special day.",
+            image:
+                "https://images.unsplash.com/photo-1594223274512-ad4803739b7c?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 7,
+            category: "Casual",
+            name: "Denim Shirt Dress",
+            price: 999,
+            oldPrice: 1399,
+            rating: 4.7,
+            description:
+                "Trendy denim shirt dress with a relaxed fit.",
+            image:
+                "https://images.unsplash.com/photo-1539008835657-9e8e9680c956?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 8,
+            category: "Party",
+            name: "Satin Cocktail Dress",
+            price: 1799,
+            oldPrice: 2299,
+            rating: 4.8,
+            description:
+                "Elegant satin dress for parties and celebrations.",
+            image:
+                "https://images.unsplash.com/photo-1595777457583-95e059d581b8?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 9,
+            category: "Gown",
+            name: "Princess Style Gown",
+            price: 2899,
+            oldPrice: 3499,
+            rating: 4.9,
+            description:
+                "Beautiful flowing gown with a princess silhouette.",
+            image:
+                "https://images.unsplash.com/photo-1566479179817-c0f5d7d8f8f7?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 10,
+            category: "Saree",
+            name: "Embroidered Saree",
+            price: 1999,
+            oldPrice: 2599,
+            rating: 4.7,
+            description:
+                "Elegant embroidered saree for festive occasions.",
+            image:
+                "https://images.unsplash.com/photo-1610030469668-8e9f641aaf1b?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 11,
+            category: "Kurti",
+            name: "Anarkali Kurti",
+            price: 1199,
+            oldPrice: 1599,
+            rating: 4.8,
+            description:
+                "Beautiful Anarkali style kurti with a graceful fit.",
+            image:
+                "https://images.unsplash.com/photo-1597983073493-88cd35cf93e7?auto=format&fit=crop&w=600&q=80"
+        },
+
+
+        {
+            id: 12,
+            category: "Wedding",
+            name: "Embroidered Bridal Dress",
+            price: 4499,
+            oldPrice: 5999,
+            rating: 4.9,
+            description:
+                "Premium embroidered dress for weddings and receptions.",
+            image:
+                "https://images.unsplash.com/photo-1594552072238-5c1a0f1f2d4b?auto=format&fit=crop&w=600&q=80"
+        }
+
+    ];
+
+
+    /* ================= VARIABLES ================= */
+
+    let selectedCategory = "All";
+
+    let cart = [];
+
+
+    /* ================= RENDER PRODUCTS ================= */
+
+    function renderProducts() {
+
+        const grid =
+            document.getElementById("productGrid");
+
+
+        const search =
+            document.getElementById("searchInput")
+                .value
+                .toLowerCase();
+
+
+        const filteredProducts =
+            products.filter(product => {
+
+
+                const categoryMatch =
+                    selectedCategory === "All" ||
+                    product.category === selectedCategory;
+
+
+                const searchMatch =
+                    product.name
+                        .toLowerCase()
+                        .includes(search)
+
+                    ||
+
+                    product.category
+                        .toLowerCase()
+                        .includes(search)
+
+                    ||
+
+                    product.description
+                        .toLowerCase()
+                        .includes(search);
+
+
+                return categoryMatch &&
+                       searchMatch;
+
+            });
+
+
+        document.getElementById("resultCount")
+            .innerText =
+            filteredProducts.length + " dresses";
+
+
+        grid.innerHTML = "";
+
+
+        if (filteredProducts.length === 0) {
+
+            grid.innerHTML = `
+
+                <div style="
+                    grid-column:1/-1;
+                    text-align:center;
+                    padding:50px;
+                    color:#777;
+                ">
+
+                    <i class="fa-solid fa-face-sad-tear"
+                       style="
+                       font-size:45px;
+                       margin-bottom:15px;
+                       ">
+                    </i>
+
+                    <h3>
+                        No dresses found
+                    </h3>
+
+                    <p>
+                        Try another search.
+                    </p>
+
+                </div>
+
+            `;
+
+            return;
+        }
+
+
+        filteredProducts.forEach(product => {
+
+
+            grid.innerHTML += `
+
+                <div class="product-card">
+
+
+                    <button class="wishlist"
+                            onclick="
+                            addWishlist('${product.name}')
+                            ">
+
+                        <i class="
+                            fa-regular
+                            fa-heart
+                        ">
+                        </i>
+
+                    </button>
+
+
+                    <div class="product-image">
+
+                        <img
+                            src="${product.image}"
+                            alt="${product.name}">
+
+                    </div>
+
+
+                    <div class="product-info">
+
+
+                        <div class="category-name">
+
+                            ${product.category}
+
+                        </div>
+
+
+                        <div class="product-name">
+
+                            ${product.name}
+
+                        </div>
+
+
+                        <div class="description">
+
+                            ${product.description}
+
+                        </div>
+
+
+                        <div class="rating">
+
+                            <i class="
+                                fa-solid
+                                fa-star
+                            ">
+                            </i>
+
+                            ${product.rating}
+
+                            <span>
+                                Excellent
+                            </span>
+
+                        </div>
+
+
+                        <div class="price-row">
+
+
+                            <div>
+
+                                <span class="price">
+
+                                    ₹${product.price
+                                    .toLocaleString("en-IN")}
+
+                                </span>
+
+
+                                <span class="old-price">
+
+                                    ₹${product.oldPrice
+                                    .toLocaleString("en-IN")}
+
+                                </span>
+
+                            </div>
+
+
+                            <button class="buy-btn"
+                                    onclick="
+                                    addToCart(${product.id})
+                                    ">
+
+                                <i class="
+                                    fa-solid
+                                    fa-bag-shopping
+                                ">
+                                </i>
+
+                                Add
+
+                            </button>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            `;
+
+        });
+
+    }
+
+
+    /* ================= CATEGORY FILTER ================= */
+
+    function filterCategory(
+        category,
+        element
+    ) {
+
+        selectedCategory = category;
+
+
+        document.querySelectorAll(".category")
+            .forEach(item =>
+                item.classList.remove("active")
+            );
+
+
+        element.classList.add("active");
+
+
+        renderProducts();
+
+    }
+
+
+    /* ================= SEARCH ================= */
+
+    function searchProducts() {
+
+        renderProducts();
+
+    }
+
+
+    /* ================= ADD TO CART ================= */
+
+    function addToCart(id) {
+
+
+        const product =
+            products.find(
+                product =>
+                    product.id === id
+            );
+
+
+        const existing =
+            cart.find(
+                item =>
+                    item.id === id
+            );
+
+
+        if (existing) {
+
+            existing.quantity++;
+
+        }
+
+        else {
+
+            cart.push({
+
+                ...product,
+
+                quantity: 1
+
+            });
+
+        }
+
+
+        updateCartCount();
+
+
+        alert(
+            product.name +
+            " added to your bag!"
+        );
+
+    }
+
+
+    /* ================= CART COUNT ================= */
+
+    function updateCartCount() {
+
+
+        const total =
+            cart.reduce(
+                (sum,item) =>
+                    sum + item.quantity,
+                0
+            );
+
+
+        document.getElementById(
+            "cartCount"
+        ).innerText = total;
+
+    }
+
+
+    /* ================= OPEN CART ================= */
+
+    function openCart() {
+
+
+        renderCart();
+
+
+        document.getElementById(
+            "cartModal"
+        ).classList.add("show");
+
+    }
+
+
+    /* ================= CLOSE CART ================= */
+
+    function closeCart() {
+
+
+        document.getElementById(
+            "cartModal"
+        ).classList.remove("show");
+
+    }
+
+
+    /* ================= RENDER CART ================= */
+
+    function renderCart() {
+
+
+        const cartItems =
+            document.getElementById(
+                "cartItems"
+            );
+
+
+        if (cart.length === 0) {
+
+
+            cartItems.innerHTML = `
+
+                <div class="empty-cart">
+
+                    <i class="
+                        fa-solid
+                        fa-bag-shopping
+                    ">
+                    </i>
+
+                    <h3>
+                        Your bag is empty
+                    </h3>
+
+                    <p>
+                        Add some beautiful dresses
+                        to continue shopping.
+                    </p>
+
+                </div>
+
+            `;
+
+
+            document.getElementById(
+                "checkoutSection"
+            ).style.display = "none";
+
+
+            return;
+
+        }
+
+
+        document.getElementById(
+            "checkoutSection"
+        ).style.display = "block";
+
+
+        cartItems.innerHTML = "";
+
+
+        cart.forEach(item => {
+
+
+            cartItems.innerHTML += `
+
+                <div class="cart-item">
+
+
+                    <img
+                        src="${item.image}"
+                        alt="${item.name}">
+
+
+                    <div class="
+                        cart-item-info
+                    ">
+
+                        <h4>
+                            ${item.name}
+                        </h4>
+
+                        <span class="
+                            cart-item-price
+                        ">
+
+                            ₹${item.price
+                            .toLocaleString("en-IN")}
+
+                        </span>
+
+                    </div>
+
+
+                    <div class="quantity">
+
+
+                        <button
+                            onclick="
+                            changeQuantity(
+                                ${item.id},
+                                -1
+                            )">
+
+                            -
+
+                        </button>
+
+
+                        <span>
+
+                            ${item.quantity}
+
+                        </span>
+
+
+                        <button
+                            onclick="
+                            changeQuantity(
+                                ${item.id},
+                                1
+                            )">
+
+                            +
+
+                        </button>
+
+                    </div>
+
+                </div>
+
+            `;
+
+        });
+
+
+        updateSummary();
+
+    }
+
+
+    /* ================= QUANTITY ================= */
+
+    function changeQuantity(
+        id,
+        change
+    ) {
+
+
+        const item =
+            cart.find(
+                item =>
+                    item.id === id
+            );
+
+
+        if (!item)
+            return;
+
+
+        item.quantity += change;
+
+
+        if (item.quantity <= 0) {
+
+            cart =
+                cart.filter(
+                    item =>
+                        item.id !== id
+                );
+
+        }
+
+
+        updateCartCount();
+
+
+        renderCart();
+
+    }
+
+
+    /* ================= SUMMARY ================= */
+
+    function updateSummary() {
+
+
+        const subtotal =
+            cart.reduce(
+                (sum,item) =>
+                    sum +
+                    item.price *
+                    item.quantity,
+                0
+            );
+
+
+        const delivery =
+            subtotal >= 1499
+                ? 0
+                : 49;
+
+
+        const discount =
+            subtotal >= 2999
+                ? 300
+                : subtotal >= 1999
+                    ? 150
+                    : 0;
+
+
+        const total =
+            subtotal +
+            delivery -
+            discount;
+
+
+        document.getElementById(
+            "summarySubtotal"
+        ).innerText =
+            "₹" +
+            subtotal.toLocaleString("en-IN");
+
+
+        document.getElementById(
+            "deliveryFee"
+        ).innerText =
+            delivery === 0
+                ? "FREE"
+                : "₹" + delivery;
+
+
+        document.getElementById(
+            "discount"
+        ).innerText =
+            "₹" +
+            discount.toLocaleString("en-IN");
+
+
+        document.getElementById(
+            "summaryTotal"
+        ).innerText =
+            "₹" +
+            total.toLocaleString("en-IN");
+
+    }
+
+
+    /* ================= CONFIRM ORDER ================= */
+
+    function confirmOrder() {
+
+
+        const name =
+            document.getElementById(
+                "customerName"
+            ).value.trim();
+
+
+        const phone =
+            document.getElementById(
+                "customerPhone"
+            ).value.trim();
+
+
+        const email =
+            document.getElementById(
+                "customerEmail"
+            ).value.trim();
+
+
+        const address =
+            document.getElementById(
+                "customerAddress"
+            ).value.trim();
+
+
+        const size =
+            document.getElementById(
+                "dressSize"
+            ).value;
+
+
+        const payment =
+            document.getElementById(
+                "paymentMethod"
+            ).value;
+
+
+        if (cart.length === 0) {
+
+            alert(
+                "Your shopping bag is empty."
+            );
+
+            return;
+
+        }
+
+
+        if (
+            !name ||
+            !phone ||
+            !email ||
+            !address
+        ) {
+
+            alert(
+                "Please fill all delivery details."
+            );
+
+            return;
+
+        }
+
+
+        if (phone.length < 10) {
+
+            alert(
+                "Please enter a valid mobile number."
+            );
+
+            return;
+
+        }
+
+
+        const subtotal =
+            cart.reduce(
+                (sum,item) =>
+                    sum +
+                    item.price *
+                    item.quantity,
+                0
+            );
+
+
+        const delivery =
+            subtotal >= 1499
+                ? 0
+                : 49;
+
+
+        const discount =
+            subtotal >= 2999
+                ? 300
+                : subtotal >= 1999
+                    ? 150
+                    : 0;
+
+
+        const total =
+            subtotal +
+            delivery -
+            discount;
+
+
+        alert(
+
+            "Order placed successfully! 🎉\n\n" +
+
+            "Customer: " +
+            name +
+            "\n" +
+
+            "Size: " +
+            size +
+            "\n" +
+
+            "Payment: " +
+            payment +
+            "\n" +
+
+            "Total: ₹" +
+            total.toLocaleString("en-IN") +
+
+            "\n\n" +
+
+            "Thank you for shopping with StyleHub!"
+
+        );
+
+
+        cart = [];
+
+
+        updateCartCount();
+
+
+        closeCart();
+
+
+        document.getElementById(
+            "customerName"
+        ).value = "";
+
+
+        document.getElementById(
+            "customerPhone"
+        ).value = "";
+
+
+        document.getElementById(
+            "customerEmail"
+        ).value = "";
+
+
+        document.getElementById(
+            "customerAddress"
+        ).value = "";
+
+    }
+
+
+    /* ================= WISHLIST ================= */
+
+    function addWishlist(name) {
+
+        alert(
+            name +
+            " added to wishlist ❤️"
+        );
+
+    }
+
+
+    /* ================= LOGIN ================= */
+
+    function showLogin() {
+
+        alert(
+            "Login page can be connected here."
+        );
+
+    }
+
+
+    /* ================= CLOSE MODAL ================= */
+
+    document.getElementById(
+        "cartModal"
+    ).addEventListener(
+        "click",
+        function(event) {
+
+            if (
+                event.target === this
+            ) {
+
+                closeCart();
+
+            }
+
+        }
+    );
+
+
+    /* ================= INITIAL LOAD ================= */
+
+    renderProducts();
+
+</script>
+
+
+</body>
+
 </html>

No products found.