feat: create layout2 regular components

src/app/configs/navigation-i18n/en.js

@@ -1,8 +1,8 @@
-const en = {
+const locale = {
   dashboard: 'Dashboard',
   favorites: 'Favorites',
   history: 'History',
   profile: 'My profile',
 };
 
-export default en;
+export default locale;

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

@@ -0,0 +1,32 @@
+import FuseSuspense from '@fuse/core/FuseSuspense';
+import AppContext from 'app/AppContext';
+import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
+import i18next from 'i18next';
+import { memo, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { useRoutes } from 'react-router-dom';
+import FooterLayout2 from './components/FooterLayout2';
+import HeaderLayout2 from './components/HeaderLayout2';
+
+import en from './i18n/en';
+
+i18next.addResourceBundle('en', 'layout2', en);
+
+function Layout2(props) {
+  const config = useSelector(selectFuseCurrentLayoutConfig);
+  const appContext = useContext(AppContext);
+  const { routes } = appContext;
+
+  return (
+    <>
+      {config.header.display && <HeaderLayout2 />}
+      <main id="fuse-main" className="flex flex-col min-h-full min-w-full mt-72">
+        <FuseSuspense>{useRoutes(routes)}</FuseSuspense>
+        {props.children}
+      </main>
+      {config.footer.display && <FooterLayout2 />}
+    </>
+  );
+}
+
+export default memo(Layout2);

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

@@ -0,0 +1,37 @@
+const config = {
+  title: 'Layout 2 - Regular',
+  defaults: {
+    header: {
+      display: true,
+    },
+    footer: {
+      display: true,
+    },
+  },
+  form: {
+    mode: {
+      title: 'Mode',
+      type: 'radio',
+      options: [
+        {
+          name: 'Boxed',
+          value: 'boxed',
+        },
+        {
+          name: 'Full Width',
+          value: 'fullwidth',
+        },
+        {
+          name: 'Container',
+          value: 'container',
+        },
+      ],
+    },
+    containerWidth: {
+      title: 'Container Width (px)',
+      type: 'number',
+    },
+  },
+};
+
+export default config;

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

@@ -0,0 +1,52 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import linksConfigLayout2 from './linksLayout2Config';
+
+function FooterLayout2() {
+  const { t } = useTranslation('layout2');
+
+  return (
+    <footer className="w-full bg-gray-900">
+      <div className="flex gap-96 max-w-screen-2xl px-10 py-52">
+        <ul className="flex flex-col gap-16 mr-96">
+          <li>
+            <Link to="/">
+              <img
+                className="max-w-[88px] max-h-[45px]"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png"
+                alt={t('logo_alt')}
+              />
+            </Link>
+          </li>
+          <li>
+            <a
+              className="text-lg leading-5 text-white"
+              href="mailto:propertyinform@gmail.com"
+              target="_blank"
+              rel="noreferrer"
+            >
+              propertyinform@gmail.com
+            </a>
+          </li>
+          <li>
+            <a className="text-lg leading-5 text-white" href="tel:(123) 456-78-90">
+              (123) 456-78-90
+            </a>
+          </li>
+        </ul>
+        <ul className="flex flex-col gap-16 mt-96">
+          {linksConfigLayout2.map((path) => (
+            <li key={path}>
+              <Link className="text-lg leading-5 text-white no-underline" to={`/${path}`}>
+                {t(path)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </footer>
+  );
+}
+
+export default memo(FooterLayout2);

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

@@ -0,0 +1,48 @@
+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';
+
+function HeaderLayout2() {
+  const { t } = useTranslation('layout2');
+
+  return (
+    <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
+      <div className="flex justify-between max-w-screen-2xl w-full">
+        <Link to="/">
+          <img
+            className="max-w-[88px] max-h-[45px]"
+            src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png"
+            alt={t('logo_alt')}
+          />
+        </Link>
+        <nav className="flex gap-72 items-center">
+          {linksConfigLayout2.map((path) => (
+            <Link
+              className="text-lg leading-5 text-slate-800 no-underline"
+              to={`/${path}`}
+              key={path}
+            >
+              {t(path)}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex gap-32 items-center">
+          <Link className="text-indigo-400" to="/sign-up">
+            {t('sign_up')}
+          </Link>
+          <Link
+            className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
+            to="/sign-in"
+          >
+            <span>{t('sign_in')}</span>
+            <FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default memo(HeaderLayout2);

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

@@ -0,0 +1,3 @@
+const linksConfigLayout2 = ['rent-and-buy', 'about-us', 'blog', 'contacts'];
+
+export default linksConfigLayout2;

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

@@ -0,0 +1,11 @@
+const locale = {
+  'rent-and-buy': 'Rent&Buy Analysis',
+  'about-us': 'About Us',
+  blog: 'Blog',
+  contacts: 'Contacts',
+  sign_up: 'Log In',
+  sign_in: 'Register',
+  logo_alt: 'Logo',
+};
+
+export default locale;