Created latest collection page

.vscode/settings.json

@@ -2,5 +2,8 @@
     "githubPullRequests.ignoredPullRequestBranches": [
         "master",
         "master"
+    ],
+    "cSpell.words": [
+        "latestcollection"
     ]
 }

src/App.js

@@ -13,7 +13,7 @@ import women_banner from './Components/Assets/banner_women.png'
 import kids_banner from './Components/Assets/banner_kids.png'
 import About from './Pages/About';
 import Contact from './Pages/Contact';
-import { useContext,useEffect } from 'react';
+import { useContext} from 'react';
 import { ShopContext } from './Context/ShopContext';
 function App() {
   const {theme}=useContext(ShopContext);
@@ -26,6 +26,7 @@ function App() {
         <Route path='/men' element={<ShopCategory banner={men_banner} category="men"/>} />
         <Route path='/women' element={<ShopCategory banner={women_banner} category="women"/>} />
         <Route path='/kids' element={<ShopCategory banner={kids_banner} category="kids"/>} />
+        {/* <Route path='/latestcollection' element={<ShopCategory banner={latest_collection_banner} category="latestcollection"/>} /> */}
         <Route path='/product' element={<Product/>}>
           <Route path=':productId' element={<Product/>}/>
         </Route>

src/Components/Hero/Hero.css

@@ -73,3 +73,15 @@
   margin-top: 150px;
   margin-left: 138px;
 }
+
+/* CSS file, e.g., App.css */
+.latest-collection-link {
+    text-decoration: none; /* Removes underline */
+    color: #ffffff; /* Sets initial text color, e.g., black */
+  }
+
+  .latest-collection-link:hover {
+    color: #fdfdfd; /* Changes text color on hover, e.g., to a shade of blue */
+    /* Add any other hover effects here, e.g., underline, text shadow, etc. */
+  }
+

src/Components/Hero/Hero.jsx

@@ -1,12 +1,15 @@
-import React, { useContext } from 'react'
+// import React, { useContext } from 'react'
 import './Hero.css'
 import hand_icon from '../Assets/hand_icon.png'
 import arrow_icon from '../Assets/arrow.png'
 import hero_image from '../Assets/hero_image.png'
 import { ShopContext } from '../../Context/ShopContext'
+import React, { useContext, useState } from 'react'
+import { Link } from 'react-router-dom'
 
 const Hero = () => {
     const {theme}=useContext(ShopContext)
+    // const [menu,setMenu]=useState("shop");
     return (
         <div className={'hero_'+theme}>
             <div className="hero-left">
@@ -20,10 +23,12 @@ const Hero = () => {
                     <p className={'ph_'+theme}>For Everyone</p>
                 </div>
                 <div className="hero-latest-btn">
-                    <div className={'div_'+theme}>Latest Collection</div>
-                    <img src={arrow_icon} alt="" />
+                <Link to="/latestcollection" className="latest-collection-link">
+                <b>Latest Collection  <img src={arrow_icon} alt="arrow" /></b>
+                </Link>
                 </div>
             </div>
+
             <div className="hero-right">
                 <img src={hero_image} alt="" />
             </div>

src/Components/LatestCollection/LatestCollection.css

@@ -0,0 +1,42 @@
+.latest-collections {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 100px;
+}
+.latest-collections .h1_dark {
+    color: #171717;
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.h1_light{
+    color: white;
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.new-collections hr{
+    width: 200px;
+    height: 6px;
+    border-radius: 10px;
+}
+
+.hr_dark{
+    background: #252525;
+}
+.hr_light{
+    background: white;
+}
+.new-collections-item{
+    margin-top: 50px;
+    display: flex;
+    gap: 30px;
+}
+.collections{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    margin-top: 50px;
+    gap: 30px;
+}

src/Components/LatestCollection/LatestCollection.jsx

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react'
+import './NewCollections.css'
+import new_collection from '../Assets/new_collections'
+import Item from '../Item/Item'
+import { ShopContext } from '../../Context/ShopContext'
+
+const LatestCollection = () => {
+    const {theme}=useContext(ShopContext);
+    return (
+        <div className='latest-collections'>
+            <h1 className={`h1_${theme}`}>LATEST COLLECTIONS</h1>
+            <hr className={`hr_${theme}`} />
+            <div className="collections">
+            {new_collection.map((item,i)=>{
+                return <Item key={i}   id={item.id}  name={item.name} image={item.image} new_price={item.new_price} old_price={item.old_price} />
+            })}
+            </div>
+
+        </div>
+    )
+}
+
+export default LatestCollection