added offers component

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/Offers.jsx

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