src/app/theme-layouts/layout2/Layout2.js

@@ -2,9 +2,9 @@ import FuseSuspense from '@fuse/core/FuseSuspense';
 import AppContext from 'src/app/contexts/AppContext';
 import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
 import i18next from 'i18next';
-import { memo, useContext } from 'react';
+import { memo, useContext, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useRoutes } from 'react-router-dom';
+import { useLocation, useRoutes } from 'react-router-dom';
 import { useAuth } from 'src/app/contexts/AuthContext';
 import FooterLayout2 from './components/FooterLayout2';
 import HeaderLayout2 from './components/HeaderLayout2';
@@ -18,6 +18,16 @@ function Layout2(props) {
   const authContext = useAuth();
   const appContext = useContext(AppContext);
   const { routes } = appContext;
+  const location = useLocation();
+
+  useEffect(() => {
+    const { hash } = location;
+
+    if (hash) {
+      const target = document.querySelector(hash);
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [location]);
 
   return (
     <>

src/app/theme-layouts/layout2/components/FooterLayout2.js

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import linksConfigLayout2 from './linksLayout2Config';
+import NavLinks from './NavLinks';
 
 function FooterLayout2() {
   const { t } = useTranslation('layout2');
@@ -35,14 +35,8 @@ function FooterLayout2() {
             </a>
           </li>
         </ul>
-        <ul className="flex flex-col gap-16 mt-96">
+        <ul className="flex flex-col gap-16 mt-[61px]">
-          {linksConfigLayout2.map((path) => (
+          <NavLinks className="text-lg leading-5 text-white no-underline" />
-            <li key={path}>
-              <Link className="text-lg leading-5 text-white no-underline" to={`/${path}`}>
-                {t(path)}
-              </Link>
-            </li>
-          ))}
         </ul>
       </div>
     </footer>

src/app/theme-layouts/layout2/components/HeaderLayout2.js

@@ -2,7 +2,7 @@ import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import linksConfigLayout2 from './linksLayout2Config';
+import Links from './NavLinks';
 
 function HeaderLayout2(props) {
   const { t } = useTranslation('layout2');
@@ -19,15 +19,7 @@ function HeaderLayout2(props) {
         </Link>
 
         <nav className="flex grow justify-center gap-72 items-center">
-          {linksConfigLayout2.map((path) => (
+          <Links className="text-lg leading-5 text-common-layout no-underline" />
-            <Link
-              className="text-lg leading-5 text-common-layout no-underline"
-              to={`/${path}`}
-              key={path}
-            >
-              {t(path)}
-            </Link>
-          ))}
         </nav>
 
         {props.isAuthenticated || (

src/app/theme-layouts/layout2/components/NavLinks.js

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+function NavLinks({ className }) {
+  const { t } = useTranslation('layout2');
+
+  return (
+    <>
+      <Link className={className} to="/rent-and-buy">
+        {t('rent_and_buy')}
+      </Link>
+      <Link className={className} to={{ hash: 'about-us' }}>
+        {t('about_us')}
+      </Link>
+      <Link className={className} to={{ hash: 'blog' }}>
+        {t('blog')}
+      </Link>
+      <Link className={className} to={{ hash: 'contacts' }}>
+        {t('contacts')}
+      </Link>
+    </>
+  );
+}
+
+export default memo(NavLinks);

src/app/theme-layouts/layout2/i18n/en.js

@@ -1,6 +1,6 @@
 const locale = {
-  'rent-and-buy': 'Rent&Buy Analysis',
+  rent_and_buy: 'Rent&Buy Analysis',
-  'about-us': 'About Us',
+  about_us: 'About Us',
   blog: 'Blog',
   contacts: 'Contacts',
   sign_in: 'Log In',