Footer Logo is Not Clickable Currently

src/components/footer/index.jsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import { Divider, Button, Space } from "antd";
+import { useNavigate } from "react-router-dom";
 import {
   GithubOutlined,
   SlackOutlined,
@@ -11,6 +12,7 @@ import "./index.scss";
 
 const Footer = () => {
   const { locale, t } = useTranslation();
+  const navigate = useNavigate();
   return (
     <footer className="footer">
       <section className="footer-content">
@@ -46,7 +48,10 @@ const Footer = () => {
         <div className="footer-desc">
           <div className="footer-left">
             <div className="footer-logo">
-              <div className="footer-logo-white"></div>
+              <div className="footer-logo-white"
+              onClick={() => {
+                navigate(`/${locale}`);
+              }}></div>
             </div>
             <div className="footer-copyright">
               Copyright © 2019-{new Date().getFullYear()} The Apache Software

src/components/footer/index.scss

@@ -63,6 +63,7 @@
     width: 100%;
   }
   &-logo-white {
+    cursor: pointer;
     width: 244px;
     height: 48.67px;
     background-image: url("../../images/logo_white.webp");
@@ -104,4 +105,4 @@
       color: #fff;
     }
   }
-}
+}

src/views/Home/Community.jsx

@@ -36,14 +36,16 @@ export const Community = ({ star, fork }) => {
           </div>
           <Space className="home-community-icons" size={20}>
             <Button
-              icon={<GithubOutlined />}
+              className="home-community-buttons"
+              icon={<GithubOutlined/>}
               type="text"
               size="large"
               shape="circle"
               href={GITHUB_LINK}
               target="_blank"
             />
             <Button
+              className="home-community-buttons"
               icon={<SlackOutlined />}
               type="text"
               size="large"
@@ -52,6 +54,7 @@ export const Community = ({ star, fork }) => {
               target="_blank"
             />
             <Button
+              className="home-community-buttons"
               icon={<TwitterOutlined />}
               type="text"
               size="large"

src/views/Home/community.scss

@@ -1,65 +1,70 @@
 .home-community {
-  padding-top: 100px;
-  &-title {
-    font-weight: 700;
-    color: #031b3e;
-    font-size: 50px;
-    text-align: center;
-    padding-bottom: 60px;
-
-    @media screen and (max-width: 640px) {
-      font-size: 7vw;
+    padding-top: 100px;
+    &-title {
+      font-weight: 700;
+      color: #031b3e;
+      font-size: 50px;
+      text-align: center;
+      padding-bottom: 60px;
+
+      @media screen and (max-width: 640px) {
+        font-size: 7vw;
+      }
     }
-  }
-  &-content {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &-total {
-    display: flex;
-    align-items: center;
-    text-align: center;
-  }
-  &-item {
-    padding-right: 50px;
-  }
-  &-amount {
-    font-weight: 700;
-    color: var(--primary-color);
-    font-size: 60px;
-
-    @media screen and (max-width: 640px) {
-      font-size: 10vw;
+    &-content {
+      display: flex;
+      justify-content: space-between;
     }
-  }
-  &-text {
-    color: #000000;
-    font-size: 20px;
-    margin-top: 8px;
-
-    @media screen and (max-width: 640px) {
-      font-size: 16px;
+
+    &-total {
+      display: flex;
+      align-items: center;
+      text-align: center;
     }
-  }
-  .ant-divider-vertical {
-    height: 80px;
-    border-color: #707070;
-    margin-right: 50px;
-  }
-  &-icons {
-    margin-top: 30px;
-    margin-bottom: 50px;
-  }
-  .anticon {
-    font-size: 30px;
-    &:hover {
+    &-item {
+      padding-right: 50px;
+    }
+    &-amount {
+      font-weight: 700;
       color: var(--primary-color);
+      font-size: 60px;
+
+      @media screen and (max-width: 640px) {
+        font-size: 10vw;
+      }
+    }
+    &-text {
+      color: #000000;
+      font-size: 20px;
+      margin-top: 8px;
+
+      @media screen and (max-width: 640px) {
+        font-size: 16px;
+      }
+    }
+    .ant-divider-vertical {
+      height: 80px;
+      border-color: #707070;
+      margin-right: 50px;
+    }
+    &-icons {
+      margin-top: 30px;
+      margin-bottom: 50px;
+    }
+    .anticon {
+      font-size: 30px;
+      &:hover {
+        color: var(--primary-color);
+      }
     }
-  }
-  .ant-image {
-    @media screen and (max-width: 640px) {
-      display: none;
+    .ant-image {
+      @media screen and (max-width: 640px) {
+        display: none;
+      }
     }
-  }
 }
+.home-community-icons .home-community-buttons:hover,
+.home-community-icons .home-community-buttons:active,
+.home-community-icons .home-community-buttons:focus {
+    background-color: transparent !important;
+}