Update Footer.tsx

backend/src/App.tsx

@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import SuspenseRouter from '@/components/SuspenseRouter'
 import { GlobalProvider } from '@/context/GlobalContext'
+import ScrollToTop from '@/components/ScrollToTop'
 
 const SignIn = lazy(() => import('@/pages/SignIn'))
 const Activate = lazy(() => import('@/pages/Activate'))
@@ -41,6 +42,8 @@ const UpdateCountry = lazy(() => import('@/pages/UpdateCountry'))
 const App = () => (
   <GlobalProvider>
     <SuspenseRouter window={window}>
+      <ScrollToTop />
+
       <div className="app">
         <Suspense fallback={<></>}>
           <Routes>

backend/src/components/ScrollToTop.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}
+
+export default ScrollToTop

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import env from '@/config/env.config'
 import { GlobalProvider } from '@/context/GlobalContext'
 import { RecaptchaProvider } from '@/context/RecaptchaContext'
 import { init as initGA } from '@/common/ga4'
+import ScrollToTop from '@/components/ScrollToTop'
 
 if (env.GOOGLE_ANALYTICS_ENABLED) {
   initGA()
@@ -36,6 +37,8 @@ const App = () => (
   <GlobalProvider>
     <RecaptchaProvider>
       <SuspenseRouter window={window}>
+        <ScrollToTop />
+
         <div className="app">
           <Suspense fallback={<></>}>
             <Routes>

frontend/src/assets/css/footer.css

@@ -6,7 +6,7 @@ div.footer {
   display: flex;
   flex-direction: column;
   background: #f2f2f2;
-  color: #70757a;
+  color: #1a1a1a;
   border-top: 1px solid #ebebeb;
   font-size: 12px;
   padding: 12px;
@@ -25,17 +25,18 @@ div.footer section.main {
   display: flex;
   flex-direction: row;
   margin-bottom: 15px;
+  padding-bottom: 80px;
 }
 
 div.footer div.main-section {
   flex: 1 1 0%;
-  font-weight: bold;
 }
 
 div.footer div.main-section div.title {
   text-align: left;
   margin-bottom: 10px;
-  color: #121212;
+  color: #1a1a1a;
+  font-weight: bold;
 }
 
 div.footer ul.links {
@@ -50,26 +51,38 @@ div.footer ul.links li {
 }
 
 div.footer ul.links li:hover {
-  opacity: 0.85;
+  text-decoration: underline;
 }
 
-div.footer div.contact {
+div.footer div.footer-contact {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin: 10px 0;
 }
 
-div.footer div.contact .icon {
+div.footer div.footer-contact .icon {
+  color: #525252;
   margin-right: 5px;
 }
 
-div.footer div.contact a {
+div.footer div.footer-contact a {
   text-decoration: none;
-  color: #70757a;
+  color: #1a1a1a;
 }
 
-div.footer div.contact a:hover {
-  opacity: 0.85;
+div.footer div.footer-contact a:hover {
+  /* opacity: 0.85; */
+  text-decoration: underline;
+}
+
+div.footer div.footer-contact .social-icon {
+  color: #525252;
+  /* margin-right: 12px; */
+}
+
+div.footer div.footer-contact .social-icon:hover {
+  color: #1a1a1a;
 }
 
 div.footer section.payment {
@@ -91,13 +104,23 @@ div.footer section.payment div.payment-text {
 }
 
 @media only screen and (width <=960px) {
+  div.footer section.main {
+    flex-direction: column;
+  }
+
+  div.footer div.main-section {
+    margin: 10px;
+  }
+
   div.footer section.payment {
     display: flex;
     flex-direction: column;
   }
 
   div.footer section.payment div.payment-text {
     margin: 5px 0;
+    padding-left: 8px;
+    align-items: flex-start;
   }
 
   div.footer section.payment img {

frontend/src/components/Footer.tsx

@@ -1,6 +1,13 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { MailOutline } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
+import {
+  MailOutline,
+  FacebookTwoTone as FacebookIcon,
+  X,
+  LinkedIn,
+  Instagram,
+} from '@mui/icons-material'
 import { strings } from '@/lang/footer'
 
 import SecurePayment from '@/assets/img/secure-payment.png'
@@ -32,10 +39,16 @@ const Footer = () => {
           <ul className="links">
             <li onClick={() => navigate('/contact')}>{strings.CONTACT}</li>
           </ul>
-          <div className="contact">
+          <div className="footer-contact">
             <MailOutline className="icon" />
             <a href="mailto:[email protected]">[email protected]</a>
           </div>
+          <div className="footer-contact">
+            <IconButton href="https://www.facebook.com/" target="_blank" aria-label="Facebook" className="social-icon"><FacebookIcon /></IconButton>
+            <IconButton href="https://x.com/" target="_blank" aria-label="X" className="social-icon"><X /></IconButton>
+            <IconButton href="https://www.linkedin.com/" target="_blank" aria-label="LinkedIn" className="social-icon"><LinkedIn /></IconButton>
+            <IconButton href="https://www.instagram.com/" target="_blank" aria-label="Instagram" className="social-icon"><Instagram /></IconButton>
+          </div>
         </div>
       </section>
       <section className="payment">

frontend/src/components/ScrollToTop.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}
+
+export default ScrollToTop

frontend/src/main.tsx

@@ -161,14 +161,14 @@ const theme = createTheme(
       fontFamily: [
         '-apple-system',
         'BlinkMacSystemFont',
-        "'Segoe UI'",
+        '"Segoe UI"',
         'Roboto',
-        "'Helvetica Neue'",
+        '"Helvetica Neue"',
         'Arial',
         'sans-serif',
-        "'Apple Color Emoji'",
-        "'Segoe UI Emoji'",
-        "'Segoe UI Symbol'",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
       ].join(','),
     },
     components: {