переделать компонент footer под FSD

src/components/Subscribe/Subscribe.tsx

@@ -1,6 +1,6 @@
 import styles from './Subscribe.module.scss'
 import imgSubs from '@/assets/images/img-subsc-small.png'
-import SubscribeForm from '../SubscribeForm/SubscribeForm'
+import SubscribeForm from '../../entities/SubscribeForm/SubscribeForm'
 
 const Subscribe = () => {
   const onSubmitHandler = () => {}

src/components/header/header.tsx

@@ -1,6 +1,7 @@
+import { coreBaseData } from '@/mockData/coreBaseData'
 import { useMemo } from 'react'
 import classNames from 'classnames'
-import Logo from '../logo/Logo'
+import Logo from '../../shared/ui/logo/Logo'
 import Search from '../search/search'
 import ArrowIcon from '@/assets/icons/arrow.svg'
 import LightningIcon from '@/assets/images/header/lightning.svg'
@@ -151,7 +152,13 @@ function Header() {
         </div>
 
         <div className={styles['header__row-two']}>
-          <Logo width="138px" height="46px" />
+          <Logo
+            image={coreBaseData.header.main_logo.image}
+            title={coreBaseData.header.main_logo.title}
+            url={coreBaseData.header.main_logo.url}
+            width="138px"
+            height="46px"
+          />
           <Search />
           <HeaderAccount {...headerAccountData} />
         </div>

src/components/SubscribeForm/SubscribeForm.tsx → src/entities/SubscribeForm/SubscribeForm.tsx

@@ -36,7 +36,9 @@ const SubscribeForm: FC<TSubscribeForm> = ({ className, type, onSubmit }) => {
       {/* @TODO: Добавить компонент Label
       https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/102 */}
       <span className={`${styles.label} ${classNameLabel}`}>Подписаться на рассылку</span>
-      <span className={`${styles.caption}`}>Мы не будем присылать вам спам. Только скидки и выгодные предложения</span>
+      <span className={`${styles.caption}`}>
+        Мы не будем присылать вам спам. Только скидки и выгодные предложения
+      </span>
       <form className={`${styles.form} ${classNameForm}`} onSubmit={onSubmit}>
         <Input name="subscribe" placeholder="Эл.почта" theme={InputTheme.DARK} customSize={InputSize.S} />
         <button className={`${styles.button}`}>

src/mockData/coreBaseData.ts

@@ -0,0 +1,54 @@
+export const coreBaseData = {
+  header: {
+    main_logo: {
+      image: 'https://maxboom.ru/image/catalog/Logo/IMG_5735.JPG',
+      url: '/',
+      title: 'Интернет-магазин «Maxboom.ru»'
+    },
+    support: {
+      name: 'Обрантый звонок',
+      phone_number: '+7 977 848-02-28'
+    }
+  },
+  footer: {
+    company_info: 'Интернет-магазин «Maxboom.ru»',
+    disclaimer: 'Мы не будем присылать вам спам. Только скидки и выгодные предложения',
+    support_work_time: 'Будни, с 10.00 до 20.00',
+    main_logo: {
+      image: 'https://maxboom.ru/image/catalog/Logo/IMG_5735.JPG',
+      url: '/',
+      title: 'Интернет-магазин «Maxboom.ru»'
+    },
+    additional_logos: [
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/icon-payments-visa.svg',
+        url: '//visa.ru',
+        title: 'visa'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/icon-payments-mastercard.svg',
+        url: '//mastercard.ru',
+        title: 'mastercard'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/mir-logo-h14px.svg',
+        url: '//mironline.ru',
+        title: 'мир'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/icons8-webmoney-25.svg',
+        url: '//webmoney.ru',
+        title: 'webmoney'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/io.svg',
+        url: '//yoomoney.ru',
+        title: 'yoomoney'
+      }
+    ],
+    support: {
+      name: 'Обрантый звонок',
+      phone_number: '+7 977 848-02-28'
+    }
+  }
+}

src/pages/RootPage/RootPage.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router'
 import Header from '@/components/header/header'
-import Footer from '@/components/Footer/Footer'
+import Footer from '@/widgets/Footer/Footer'
 import styles from './root.module.scss'
 import Contact from '../../features/Contacts/Contacts'
 import { messengerArray } from '@/shared/model/types/messengerArray'

src/shared/ui/logo/Logo.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import styles from './logo.module.scss'
+import Link from '@/shared/ui/Link/Link'
+
+type TLogoProps = {
+  image: string
+  title: string
+  url: string
+  width: string
+  height: string
+}
+/**
+ * @param {string} image - путь к логотипу на сервере
+ * @param {string} title - лейбл логотипа (и альт)
+ * @param {string} url - путь ссылки по нажатию на логотип
+ * @param {string} width - ширина логотипа
+ * @param {string} height  - высота логотипа
+ */
+
+const Logo: FC<TLogoProps> = ({ image, title, url, width, height }) => {
+  return (
+    <div className={`${styles.container}`}>
+      <Link to={url} className={styles.link}>
+        <img src={image} title={title} alt={title} style={{ width, height }} />
+      </Link>
+    </div>
+  )
+}
+
+export default Logo

src/widgets/Footer/Footer.tsx

@@ -0,0 +1,76 @@
+import { coreBaseData } from '@/mockData/coreBaseData'
+import Logo from '@/shared/ui/logo/Logo'
+import Link from '@/shared/ui/Link/Link'
+import SubscribeForm from '@/entities/SubscribeForm/SubscribeForm'
+import styles from './footer.module.scss'
+
+console.log(coreBaseData.footer)
+
+function Footer() {
+  const onSubmitHandler = () => {}
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footer__container}>
+        <div className={styles.footer__middle}>
+          <div className={styles['footer__col-one']}>
+            <Logo
+              image={coreBaseData.footer.main_logo.image}
+              title={coreBaseData.footer.main_logo.title}
+              url={coreBaseData.footer.main_logo.url}
+              width="114px"
+              height="38px"
+            />
+            <p className={styles.footer__caption}>{coreBaseData.footer.company_info}</p>
+          </div>
+          <div className={styles['footer__col-two']}>
+            <SubscribeForm type="footer" onSubmit={onSubmitHandler}></SubscribeForm>
+          </div>
+          <div className={styles['footer__col-three']}>
+            <p className={styles['footer__support-text']}>Поддержка</p>
+            <div className={styles.footer__wrapper}>
+              <ul className={styles.footer__nav}>
+                <li className={styles.footer__phone}>
+                  <Link to={''} className={styles.footer__link}>
+                    {coreBaseData.footer.support.phone_number}
+                  </Link>
+                </li>
+                <li className={styles.footer__item}>
+                  <Link to={''} className={styles.footer__link}>
+                    {coreBaseData.footer.support.name}
+                  </Link>
+                </li>
+              </ul>
+              <p className={styles.footer__hours}>{coreBaseData.footer.support_work_time}</p>
+            </div>
+          </div>
+        </div>
+        <div className={styles.footer__bottom}>
+          <div className={styles['footer__bottom-wrapper']}>
+            <p className={styles.footer__copyright}>
+              Created by{' '}
+              <Link to={''} className={styles['footer__copyright-link']}>
+                maxboom.ru
+              </Link>
+            </p>
+            <ul className={styles.footer__payments}>
+              {coreBaseData.footer.additional_logos.map(logo => (
+                <li className={styles['footer__payment-nav']} key={logo.title}>
+                  <Link to={logo.url} className={styles['footer__payment-item']}>
+                    <img
+                      className={styles['footer__payment-icon']}
+                      src={logo.image}
+                      title={logo.title}
+                      alt={logo.title}
+                    />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/Footer/footer.module.scss → src/widgets/Footer/footer.module.scss

@@ -1,4 +1,4 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '/src/shared/styles/utils/variables' as var;
 
 .footer {
   background-color: var.$footer-bg;
@@ -162,12 +162,19 @@
     display: flex;
     width: 34px;
     height: 24px;
+    padding: 3px;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
     background: var.$bg-no-image;
   }
 
+  &__payment-icon {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
   &__payment-nav {
     margin: 0;
     padding: 0;