feat: implement custom link

src/components/Shop/Product.jsx

@@ -1,5 +1,4 @@
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
+import { CustomLink } from '../styled/views/Home.styled';
 
 const Product = ({ product }) => {
   const { id, name, price, src } = product;
@@ -19,16 +18,4 @@ const Product = ({ product }) => {
   );
 };
 
-const CustomLink = styled(Link)`
-  text-decoration: none;
-
-  color: #800;
-  text-decoration: none;
-
-  :hover {
-    text-decoration: underline;
-    color: #e00;
-  }
-`;
-
 export default Product;

src/components/styled/views/Home.styled.jsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
 export const Container = styled.div`
   height: 100%;
@@ -456,3 +457,15 @@ export const Footer = styled.div`
     }
   }
 `;
+
+export const CustomLink = styled(Link)`
+  text-decoration: none;
+
+  color: #800 !important;
+  text-decoration: none;
+
+  :hover {
+    text-decoration: underline;
+    color: #e00 !important;
+  }
+`;

src/components/views/ProductItem.jsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Helmet } from 'react-helmet-async';
 import { Link, useParams } from 'react-router-dom';
-import { Container, Header, Logo, AboutContent, BoardsBox, BoardsContent } from '../styled/views/Home.styled';
+import { Container, Header, Logo, AboutContent, BoardsBox, BoardsContent, CustomLink } from '../styled/views/Home.styled';
 import { TEMP_PRODUCTS_DATA } from './Shop';
 import Categories from '../Shop/Categories';
 import FooterSection from '../FooterSection';
@@ -30,6 +30,7 @@ const ProductItem = () => {
               </Link>
             </Logo>
           </Header>
+          <CustomLink to='/shop'>Back to shop</CustomLink>
         </AboutContent>
         <br />
         <Categories />

src/components/views/ShopCategory.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { Container, Header, Logo, Page, Search, AboutContent, BoardsBox, BoardsContent } from '../styled/views/Home.styled';
+import { Container, Header, Logo, Page, Search, AboutContent, BoardsBox, BoardsContent, CustomLink } from '../styled/views/Home.styled';
 import { Link, useParams } from 'react-router-dom';
 import Product from '../Shop/Product';
 import Categories from '../Shop/Categories';
@@ -49,6 +49,7 @@ const Shop = () => {
           </Search>
         </Page>
         <br />
+        <CustomLink to='/shop'>Back to shop</CustomLink>
         <Categories />
         <BoardsBox>
           <div className='boxbar'>