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 (
@@ -10,7 +15,7 @@ const HeroSection = () => {
{/*
$229.50
*/}
-
+
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 (
- {t("Home")}
+ {t("Home")}
{
isMulti ?
<>
- { t(extraText || "")}
+ { t(extraText || "")}
>
: ""
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);