Added route

src/App.js

@@ -1,43 +1,55 @@
-
-import './App.css';
-import Navbar from './Components/Navbar/Navbar';
-import { BrowserRouter,Routes,Route } from 'react-router-dom';
-import Shop from './Pages/Shop';
-import ShopCategory from './Pages/ShopCategory';
-import Product from './Pages/Product';
-import Cart from './Pages/Cart';
-import LoginSignup from './Pages/LoginSignup';
-import Footer from './Components/Footer/Footer';
-import men_banner from './Components/Assets/banner_mens.png'
-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 ScrollToTop from 'react-scroll-to-top';
-import { useContext,useEffect } from 'react';
-import { ShopContext } from './Context/ShopContext';
+import "./App.css";
+import Navbar from "./Components/Navbar/Navbar";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Shop from "./Pages/Shop";
+import ShopCategory from "./Pages/ShopCategory";
+import Product from "./Pages/Product";
+import Cart from "./Pages/Cart";
+import LoginSignup from "./Pages/LoginSignup";
+import Footer from "./Components/Footer/Footer";
+import men_banner from "./Components/Assets/banner_mens.png";
+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 ScrollToTop from "react-scroll-to-top";
+import { useContext, useEffect } from "react";
+import { ShopContext } from "./Context/ShopContext";
+import Collections from "./Pages/Collections";
+import Offers from "./Pages/Offers";
 function App() {
-  const {theme}=useContext(ShopContext);
+  const { theme } = useContext(ShopContext);
   return (
     <div className={`${theme}_app`}>
       <BrowserRouter>
-      <Navbar/>
-      <Routes>
-        <Route path='/' element={<Shop/>} />
-        <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='/product' element={<Product/>}>
-          <Route path=':productId' element={<Product/>}/>
-        </Route>
-        <Route path='/cart' element={<Cart/>} />
-        <Route path='/login' element={<LoginSignup/>} />
-        <Route path='/about' element={<About/>} />
-        <Route path='/contact' element={<Contact/>} />
-      </Routes>
-      <Footer/>
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<Shop />} />
+          <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="/product" element={<Product />}>
+            <Route path=":productId" element={<Product />} />
+          </Route>
+          <Route path="/cart" element={<Cart />} />
+          <Route path="/login" element={<LoginSignup />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/offers" element={<Offers />} />
+          <Route path="/collections" element={<Collections />} />
+        </Routes>
+        <Footer />
       </BrowserRouter>
-      <ScrollToTop smooth component={<p style={{ color: "blue" }}>↑</p>}/>
+      <ScrollToTop smooth component={<p style={{ color: "blue" }}>↑</p>} />
     </div>
   );
 }

src/Components/Hero/Hero.css

@@ -73,3 +73,7 @@
   margin-top: 150px;
   margin-left: 138px;
 }
+
+.link{
+    text-decoration: none;
+}

src/Components/Hero/Hero.jsx

@@ -1,34 +1,37 @@
-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 } 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 { Link } from "react-router-dom";
 
 const Hero = () => {
-    const {theme}=useContext(ShopContext)
-    return (
-        <div className={'hero_'+theme}>
-            <div className="hero-left">
-                <h2  className={'h2h_'+theme}>NEW ARRIVALS ONLY</h2>
-                <div>
-                    <div className="hero-hand-icon">
-                        <p className={'ph_'+theme}>New</p>
-                        <img src={hand_icon} alt="" />
-                    </div>
-                    <p className={'ph_'+theme}>Collections</p>
-                    <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="" />
-                </div>
-            </div>
-            <div className="hero-right">
-                <img src={hero_image} alt="" />
-            </div>
+  const { theme } = useContext(ShopContext);
+  return (
+    <div className={"hero_" + theme}>
+      <div className="hero-left">
+        <h2 className={"h2h_" + theme}>NEW ARRIVALS ONLY</h2>
+        <div>
+          <div className="hero-hand-icon">
+            <p className={"ph_" + theme}>New</p>
+            <img src={hand_icon} alt="" />
+          </div>
+          <p className={"ph_" + theme}>Collections</p>
+          <p className={"ph_" + theme}>For Everyone</p>
         </div>
-    )
-}
+        <Link className="link" to={"/collections"}>
+          <div className="hero-latest-btn">
+            <div className={"div_" + theme}>Latest Collection</div>
+            <img src={arrow_icon} alt="" />
+          </div>
+        </Link>
+      </div>
+      <div className="hero-right">
+        <img src={hero_image} alt="" />
+      </div>
+    </div>
+  );
+};
 
-export default Hero
+export default Hero;

src/Components/Offers/Offers.jsx

@@ -1,23 +1,26 @@
-import React, { useContext } from 'react'
-import './Offers.css'
-import exclusive_image from '../Assets/exclusive_image.png'
-import { ShopContext } from '../../Context/ShopContext'
+import React, { useContext } from "react";
+import "./Offers.css";
+import exclusive_image from "../Assets/exclusive_image.png";
+import { ShopContext } from "../../Context/ShopContext";
+import { Link } from "react-router-dom";
 
 const Offers = () => {
-  const {theme}=useContext(ShopContext);
+  const { theme } = useContext(ShopContext);
   return (
-    <div className='offers'>
-      <div className="offers-left">
-        <h1 className={`h1_${theme}`}>Exclusive</h1>
-        <h1 className={`h1_${theme}`}>Offers For You</h1>
-        <p className={`p_${theme}`}>ONLY ON BEST SELLERS PRODUCTS</p>
-        <button>Check Now</button>
+    <Link className="link" to={`/offers`}>
+      <div className="offers">
+        <div className="offers-left">
+          <h1 className={`h1_${theme}`}>Exclusive</h1>
+          <h1 className={`h1_${theme}`}>Offers For You</h1>
+          <p className={`p_${theme}`}>ONLY ON BEST SELLERS PRODUCTS</p>
+          <button>Check Now</button>
+        </div>
+        <div className="offers-right">
+          <img src={exclusive_image} alt="" />
+        </div>
       </div>
-      <div className="offers-right">
-        <img src={exclusive_image} alt="" />
-      </div>
-    </div>
-  )
-}
+    </Link>
+  );
+};
 
-export default Offers
+export default Offers;

src/Pages/Collections.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Collections = () => {
+  return (
+    <div>Collections</div>
+  )
+}
+
+export default Collections

src/Pages/Offers.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Offers = () => {
+  return <div>Offers</div>;
+};
+
+export default Offers;