Improved UIUX with pastel cards

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "liveServer.settings.root": "/frontend",
-  "liveServer.settings.port": 5500
+  "liveServer.settings.port": 5501
 }

frontend/early_summer.html

@@ -222,7 +222,7 @@ <h2>
 
         <p>
 
-            Summer Collection New Modern Design
+
 
         </p>
 

frontend/index.html

@@ -256,56 +256,64 @@ <h2>
             Explore Our Shop</button></a>
     </section>
 
-    <!-- New Arrivals -->
-    <section
-        id="new-arrivals"
-        class="section-p1 animate-on-scroll"
-    >
-        <h2>
-            New Arrivals
-        </h2>
+<!-- New Arrivals -->
+
+<section id="new-arrivals" class="section-p1 animate-on-scroll">
+
+
+    <div class="section-header-card arrivals-card">
+
+
+        <h2>New Arrivals</h2>
+
         <p>
-            Summer Collection New Modern Design
+            Just landed — explore the newest additions.
         </p>
-        <div
-            class="products-grid"
-            id="new-arrivals-container"
-        ></div>
-    </section>
+    </div>
+
+    <div class="products-grid" id="new-arrivals-container"></div>
+
+
+</section>
+
+<!-- Recently Viewed -->
+
+<section id="recently-viewed" class="section-p1 animate-on-scroll">
+
+    <div class="section-header-card recent-card">
+
+
+        <h2>Recently Viewed</h2>
 
-    <!-- Recently Viewed -->
-    <section
-        id="recently-viewed"
-        class="section-p1 animate-on-scroll"
-    >
-        <h2>
-            Recently Viewed
-        </h2>
         <p>
-            Products you explored recently
+            Your recently explored styles, all in one place.
         </p>
-        <div
-            class="products-grid"
-            id="recently-viewed-container"
-        ></div>
-    </section>
+    </div>
+
+    <div class="products-grid" id="recently-viewed-container"></div>
+
+</section>
+
+<!-- Recommended For You -->
+
+<section id="recommended" class="section-p1 animate-on-scroll">
+
+
+    <div class="section-header-card recommended-card">
+
+
+        <h2>Recommended For You</h2>
 
-    <!-- Recommended for You -->
-    <section
-        id="recommended"
-        class="section-p1 animate-on-scroll"
-    >
-        <h2>
-            Recommended for You
-        </h2>
         <p>
-            Personalized product suggestions based on your interests
+            Personalized selections chosen just for you.
         </p>
-        <div
-            class="products-grid"
-            id="recommended-products-container"
-        ></div>
-    </section>
+    </div>
+
+    <div class="products-grid" id="recommended-products-container"></div>
+
+
+</section>
+
 
 
     <!-- Small Banner -->
@@ -354,15 +362,15 @@ <h2>
                     <h4>NEW ARRIVALS</h4>
                     <h2>MEN'S COLLECTION</h2>
                     <span>Style. Comfort. Confidence.</span>
-                    <button class = "white">Shop Now<i class = "fas fa-arrow-right"></i></button>
+                    <button class = "white">Shop Now </button>
                 </div>
             </a>
              <a href = "womens.html" class = "collection-link">
                 <div class = "banner-box womens-collection-banner">
                     <h4>NEW ARRIVALS</h4>
                     <h2>WOMEN'S COLLECTION</h2>
                     <span>Elegant. Feminine. Fearless</span>
-                    <button class = "white">Shop Now<i class = "fas fa-arrow-right"></i></button>
+                    <button class = "white">Shop Now </button>
                 </div>
             </a>
 

frontend/scripts/recentlyViewed.js

@@ -18,13 +18,18 @@ const elements = {
 };
 
 // EMPTY STATE HELPER
-const renderEmptyState = (
-    container,
-    message
-) => {
-    if(container){
-        container.innerHTML =
-            `<p>${message}</p>`;
+const renderEmptyState = (container, message) => {
+    if (container) {
+        container.innerHTML = `
+            <div class="empty-state-card recent-empty">
+                <div class="empty-icon">👁</div>
+                <h3>No Recently Viewed Products</h3>
+                <p>${message}</p>
+                <a href="shop.html" class="empty-state-btn">
+                    Start Shopping
+                </a>
+            </div>
+        `;
     }
 };
 

frontend/shop.html

@@ -132,7 +132,7 @@ <h2>
                 placeholder="Search products..."
             >
 
-            <i class="fas fa-search"></i>
+            <i class="fas fa-search search-icon"></i>
 
         </div>
 

frontend/styles/about.css

@@ -61,14 +61,14 @@
 }
 
 #about-head img {
-    width: 48%;
-    height: auto;
-    border-radius: 12px;
-    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+
+    width: 500px;
+    height: 420px;
     object-fit: cover;
-    transition: transform 0.3s ease;
+    display: block;
 }
 
+
 #about-head img:hover {
     transform: scale(1.02);
 }

frontend/styles/product.css

@@ -382,6 +382,7 @@ PRODUCT VARIANTS
     color: #666;
 }
 
+
 .product-buttons{
     display: flex;
     flex-wrap: wrap;
@@ -611,4 +612,5 @@ body.dark-theme .review-container p {
     color: #666;
     margin-top: 8px;
     font-size: 14px;
-}
+}
+

frontend/styles/shop.css

@@ -49,8 +49,11 @@
 .search-box i{
     position: absolute;
     right: 18px;
-    top: 16px;
-    color: #777;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 20px;
+    height: 52px;
+    line-height: 52px;
 }
 
 .filter-buttons{
@@ -76,14 +79,15 @@
 }
 
 .sort-box select{
-    padding: 12px 18px;
+    padding: 12px 38px 12px 18px;
     border: 1px solid #ddd;
     border-radius: 6px;
     outline: none;
     cursor: pointer;
     transition: 0.3s ease;
     background: #fff;
 }
+}
 
 .sort-box select:focus{
     border-color: #088178;
@@ -425,4 +429,46 @@
     #product-container {
         grid-template-columns: 1fr;
     }
+}
+
+.empty-state-card{
+    max-width: 500px;
+    margin: 20px auto;
+    padding: 32px;
+    text-align: center;
+
+    border-radius: 18px;
+
+    background: rgba(180, 210, 180, 0.08);
+
+    border: 1px solid rgba(255,255,255,0.08);
+
+    backdrop-filter: blur(8px);
+}
+
+.empty-icon{
+    font-size: 32px;
+    margin-bottom: 12px;
+}
+
+.empty-state-card h3{
+    margin-bottom: 10px;
+}
+
+.empty-state-card p{
+    color: #bdbdbd;
+    margin-bottom: 18px;
+}
+
+.empty-state-btn{
+    display: inline-block;
+    padding: 10px 18px;
+
+    border-radius: 12px;
+
+    text-decoration: none;
+
+    background: #b7c9b4;
+    color: #111;
+    font-weight: 600;
 }

frontend/styles/style.css

@@ -1,3 +1,4 @@
+
 /* product controls */
 .product-controls{
     width: 100%;
@@ -190,3 +191,82 @@
     }
 
 }
+/* =========================
+   SECTION HEADER CARDS
+========================= */
+
+.section-header-card {
+    width: 85%;
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 40px 60px;
+    border-radius: 24px;
+    text-align: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+}
+
+.section-header-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
+}
+
+.section-header-card h2 {
+    font-size: 42px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #2c3e50;
+}
+
+.section-header-card p {
+    font-size: 17px;
+    color: #666;
+    margin: 0;
+}
+
+/* New Arrivals */
+.arrivals-card {
+    background: linear-gradient(
+        135deg,
+        #fff2e8,
+        #ffe8d9
+    );
+    border-left: 8px solid #f4a261;
+}
+
+/* Recently Viewed */
+.recent-card {
+    background: linear-gradient(
+        135deg,
+        #edf8f6,
+        #dff3ef
+    );
+    border-left: 8px solid #6ab7a8;
+}
+
+/* Recommended */
+.recommended-card {
+    background: linear-gradient(
+        135deg,
+        #f3efff,
+        #ebe5ff
+    );
+    border-left: 8px solid #9b8cff;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .section-header-card {
+        width: 95%;
+        padding: 25px;
+    }
+
+    .section-header-card h2 {
+        font-size: 30px;
+    }
+
+    .section-header-card p {
+        font-size: 15px;
+    }
+}
+