From eb7cdda70a10cb0a58b2fdc7f42a96b083361a20 Mon Sep 17 00:00:00 2001
From: Moaz Dawalibi <moaz.dawalibi@sdnone.net>
Date: Mon, 10 Jun 2024 12:17:21 +0300
Subject: [PATCH] fix header link

---
 src/Components/Home/HeroSection.tsx | 7 ++++++-
 src/Components/Ui/HeaderLink.tsx    | 4 ++--
 src/Styles/Layout/Layout.scss       | 7 +++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Components/Home/HeroSection.tsx b/src/Components/Home/HeroSection.tsx
index ca30d61..b4cdc65 100644
--- a/src/Components/Home/HeroSection.tsx
+++ b/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>
diff --git a/src/Components/Ui/HeaderLink.tsx b/src/Components/Ui/HeaderLink.tsx
index 062107b..bd8cfa3 100644
--- a/src/Components/Ui/HeaderLink.tsx
+++ b/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/>
             </>
             : ""
diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss
index 9e26d06..e66540d 100644
--- a/src/Styles/Layout/Layout.scss
+++ b/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);