From b5ba15ea9b1b9795099d36a6ea47e8979bae3ec3 Mon Sep 17 00:00:00 2001
From: playing-god <maithri.bhat.12@gmail.com>
Date: Tue, 8 Oct 2024 17:55:15 +0530
Subject: [PATCH] Improved styling of the pages

---
 src/App.jsx                      | 13 ++---
 src/components/Newcollection.css | 96 ++++++++++++++++++++++++++++++++
 src/components/Newcollection.jsx |  1 +
 3 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Newcollection.css

diff --git a/src/App.jsx b/src/App.jsx
index 5f988f0..2e91b2b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,13 +9,8 @@ import Cart from "./pages/Cart";
 import Footer from "./components/Footer";
 import men_banner from "./components/assets/banner_mens.png";
 
-import women from "./components/assets/banner_women.png";
-import kids from "./components/assets/banner_kids.png";
-import AboutPage from "./pages/AboutPage";
-
-
-import women from './components/assets/banner_women.png'
-import kids from './components/assets/banner_kids.png'
+import women_banner from "./components/assets/banner_women.png";
+import kids_banner from "./components/assets/banner_kids.png";
 import AboutPage from "./pages/AboutPage";
 
 
@@ -35,11 +30,11 @@ function App() {
           />
           <Route
             path="/kids"
-            element={<ShopCategory banner={kids} category="kids" />}
+            element={<ShopCategory banner={kids_banner} category="kids" />}
           />
           <Route
             path="/women"
-            element={<ShopCategory banner={women} category="women" />}
+            element={<ShopCategory banner={women_banner} category="women" />}
           />
           <Route path="/product" element={<Product />}>
             <Route path=":productId" element={<Product />} />
diff --git a/src/components/Newcollection.css b/src/components/Newcollection.css
new file mode 100644
index 0000000..5b44be0
--- /dev/null
+++ b/src/components/Newcollection.css
@@ -0,0 +1,96 @@
+.popular {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 96px;
+  }
+  
+  .popular h1 {
+    font-size: 2.5rem; /* 4xl size */
+    text-align: center;
+    font-weight: bold;
+  }
+  
+  .popular hr {
+    width: 12rem; /* 48px */
+    height: 4px;
+    background-color: #252525;
+    border-radius: 4px;
+  }
+  
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-top: 64px;
+  }
+  
+  @media (min-width: 768px) {
+    .grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+  
+  @media (min-width: 1024px) {
+    .grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+  
+  .item-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.3s ease;
+  }
+  
+  .item-container:hover {
+    transform: scale(1.05);
+  }
+  
+  .item-image img {
+    width: 100%;
+    height: auto;
+    transition: transform 0.5s;
+  }
+  
+  .item-image:hover img {
+    transform: scale(1.05);
+  }
+  
+  .item-name {
+    margin-top: 12px;
+    font-size: 1.125rem; /* 18px */
+    font-weight: 600;
+    color: #333;
+    text-align: center;
+  }
+  
+  .item-price {
+    margin-top: 8px;
+    font-size: 1rem;
+    color: #5e5e5e;
+  }
+  
+  .item-price .old-price {
+    text-decoration: line-through;
+    color: #999;
+  }
+  
+  .item-price .new-price {
+    font-weight: bold;
+    color: #252525;
+  }
+  
+  @media (max-width: 768px) {
+    .popular h1 {
+      font-size: 1.875rem; /* 3xl size */
+    }
+  
+    .popular hr {
+      width: 8rem; /* 32px */
+      height: 3px;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/components/Newcollection.jsx b/src/components/Newcollection.jsx
index a842962..637cccb 100644
--- a/src/components/Newcollection.jsx
+++ b/src/components/Newcollection.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import new_collection from './assets/new_collections';
 import Item from './items';
+import './Newcollection.css';
 
 const Newcollection = () => {
   return (