fix header link

src/Components/Home/HeroSection.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
 
 const HeroSection = () => {
   const [t] = useTranslation();
+  const Navigate = useNavigate();
+  const handleNavigate = () =>{
+    Navigate('/categories');
+  }
   return (
     <div className="HeroSection">
       <div>
@@ -10,7 +15,7 @@ const HeroSection = () => {
 
         <div>
           {/* <h3>  $229.50 </h3> */}
-          <button className="button">{t("Buy Now")}</button>
+          <button className="button" onClick={handleNavigate}>{t("Buy Now")}</button>
         </div>
       </div>
       <span>

src/Components/Ui/HeaderLink.tsx

@@ -9,12 +9,12 @@ const HeaderLink = ({text,isMulti,extraText,extraLink}:THeaderLink) => {
 
   return (
     <div className='header_link'>
-        <Link to={"/"}>{t("Home")}</Link>
+        <Link to={"/"} className='first_link'>{t("Home")}</Link>
         <FaChevronRight/>
         {
             isMulti ?
             <>
-                <Link to={`/${extraLink}`}>{ t(extraText || "")}</Link>
+                <Link to={`/${extraLink}`} className='first_link'>{ t(extraText || "")}</Link>
                 <FaChevronRight/>
             </>
             : ""

src/Styles/Layout/Layout.scss

@@ -21,6 +21,13 @@
   font-size: 20px;
   letter-spacing: .7px;
   cursor: pointer;
+  .first_link{
+    transition: ease-in-out .1s;
+    &:hover{
+      color: var(--primary);
+      border-bottom: 2px solid var(--primary);
+    }
+  }
   .page_title_link{
       color: var(--primary);
       border-bottom: 2px solid var(--primary);