fix after review-1 enhancement_350_adaptive_main_page

src/entities/AdvantageCard/index.tsx

@@ -0,0 +1,2 @@
+import AdvantageCard from './ui/AdvantageCard'
+export default AdvantageCard

src/entities/AdvantageCard/ui/AdvantageCard/AdvantageCard.tsx → src/entities/AdvantageCard/ui/AdvantageCard.tsx

@@ -11,18 +11,18 @@ export type TAdvantageCardProps = {
 }
 
 /**
+ * Компонент AdvantageCard - это карточка достоинства магазина. Входит в компонент Advantages
  * @param {string} image - картинка для преимущества
  * @param {string} alt - описание картинки
  * @param {string} name - название преимущества
  */
+
 const AdvantageCard: FC<TAdvantageCardProps> = ({ image, alt, name }) => {
   return (
-    <div className={`${styles.card}`}>
-      <Link to="#" className={styles.link}>
-        <img src={image} alt={alt} className={styles.image} />
-        <p className={styles.text}>{name}</p>
-      </Link>
-    </div>
+    <Link to="#" className={styles.advantageCard}>
+      <img src={image} alt={alt} className={styles.image} />
+      <span>{name}</span>
+    </Link>
   )
 }
 

src/entities/AdvantageCard/ui/advantageCard.module.scss

@@ -0,0 +1,25 @@
+@use '@/shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+
+.advantageCard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 220px;
+  min-height: 70px;
+  border-radius: 10px;
+  background: var.$white;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  color: var.$body-color;
+  padding: 13px 18px;
+  transition: 0.25s;
+  border: 1px solid red;
+}
+
+.image {
+  width: 36px;
+}

src/entities/HeadingBlock/ui/HeadingBlock.module.scss

@@ -35,6 +35,28 @@
   }
 
   &__arrow {
-    transform: rotate(270deg);
+    animation: arrow 1.5s linear infinite;
+  }
+}
+
+@keyframes arrow {
+  0% {
+    transform: translateX(0) rotate(270deg);
+  }
+
+  25% {
+    transform: translateX(3px) rotate(270deg);
+  }
+
+  50% {
+    transform: translateX(0) rotate(270deg);
+  }
+
+  75% {
+    transform: translateX(-3px) rotate(270deg);
+  }
+
+  100% {
+    transform: translateX(0) rotate(270deg);
   }
 }

src/entities/LinkButton/index.tsx

@@ -0,0 +1,2 @@
+import LinkButton from './ui/LinkButton'
+export default LinkButton

src/entities/LinkButton/ui/LinkButton.module.scss

@@ -0,0 +1,91 @@
+@use '@/shared/styles/utils/variables' as var;
+
+.linkCard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+
+  &__link {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    width: 150px;
+    height: 150px;
+    border: 1px dashed var.$border-color;
+    border-radius: 50%;
+    background: var.$white;
+    box-shadow: 0 10px 20px var.$bg-no-image;
+    padding: 20px;
+    transition: 0.5s;
+
+    &:hover {
+      box-shadow: 0 10px 20px var.$body-color-light-grey;
+    }
+
+    &:active {
+      box-shadow: 0 10px 20px var.$body-color-light-grey;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px dashed var.$link-color;
+      border-radius: 50%;
+      animation: clippath 7s infinite linear;
+    }
+  }
+
+  &__arrow {
+    animation: arrow 1.5s linear infinite;
+    fill: var.$link-color;
+  }
+}
+
+@keyframes clippath {
+  0% {
+    clip-path: inset(50% 0 0 0);
+  }
+
+  25% {
+    clip-path: inset(0 50% 0 0);
+  }
+
+  50% {
+    clip-path: inset(0 0 50% 0);
+  }
+
+  75% {
+    clip-path: inset(0 0 0 50%);
+  }
+
+  100% {
+    clip-path: inset(50% 0 0 0);
+  }
+}
+
+@keyframes arrow {
+  0% {
+    transform: translateX(0) rotate(270deg);
+  }
+
+  25% {
+    transform: translateX(3px) rotate(270deg);
+  }
+
+  50% {
+    transform: translateX(0) rotate(270deg);
+  }
+
+  75% {
+    transform: translateX(-3px) rotate(270deg);
+  }
+
+  100% {
+    transform: translateX(0) rotate(270deg);
+  }
+}

src/entities/LinkButton/ui/LinkButton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import LinkButton from './LinkButton'
+
+const meta = {
+  title: 'entities/LinkButton',
+  component: LinkButton,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof LinkButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = () => {
+  const text = 'Link Button'
+
+  return (
+    <div style={{ width: '500px' }}>
+      <LinkButton link="#" text={text} />
+    </div>
+  )
+}
+
+Default.args = {
+  link: '#',
+  text: 'Link Button'
+}

src/entities/LinkButton/ui/LinkButton.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+
+import ArrowIcon from '@/assets/images/sideBarMenu/IconArrowDown.svg'
+import Link from '@/shared/ui/Link/Link'
+
+import styles from './LinkButton.module.scss'
+
+interface ILinkButton {
+  link: string
+  text: string
+}
+
+/**
+ * Компонент LinkButton - используется как кнопка перехода
+ * @param {string} link - массив категорий полученный из редакса;
+ * @param {string} text - телефон полученный из редакса;
+ */
+
+const LinkButton: FC<ILinkButton> = ({ link, text }) => {
+  return (
+    <li className={styles.linkCard}>
+      <Link to={link} className={styles.linkCard__link}>
+        <span>{text}</span>
+        <ArrowIcon className={styles.linkCard__arrow} />
+      </Link>
+    </li>
+  )
+}
+
+export default LinkButton

src/entities/ReviewCard/ui/ReviewCardFeedback/ReviewCardFeedback.module.scss

@@ -44,10 +44,11 @@
     flex-direction: column;
   }
 
-  &__span {
+  &__subheading {
     display: flex;
     gap: 3px;
     font-size: 12px;
+    color: color.$body-color;
   }
 
   &__review {

src/entities/ReviewCard/ui/ReviewCardFeedback/ReviewCardFeedback.tsx

@@ -45,10 +45,10 @@ export const ReviewCardFeedback: FC<IReviewCardFeedbackProps> = ({ pk, text, sco
         <div className={styles.reviewCardFeedback__initials}>{initials}</div>
         <div className={styles.reviewCardFeedback__heading}>
           <Heading type={HeadingType.SMALL}>{name}</Heading>
-          <span className={styles.reviewCardFeedback__span}>
+          <Subheading className={styles.reviewCardFeedback__subheading}>
             Оценил(а) магазин на {score.toFixed(1)}
             <IconStar />
-          </span>
+          </Subheading>
         </div>
       </div>
 

src/features/SubscribeForm/SubscribeForm.module.scss

@@ -1,11 +1,12 @@
 @use '@/shared/styles/utils/variables' as var;
 @use '@/shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/z-index' as index;
 
 .container {
   display: flex;
   flex-direction: column;
   width: 100%;
-  z-index: 5;
+  z-index: index.$five;
 
   &_footer {
     max-width: 570px;

src/pages/MainPage/MainPage.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
+import Advantages from '@/widgets/Advantages'
 import ArticleBlock from '@/widgets/ArticleBlock'
 import BannerBlock from '@/widgets/BannerBlock/ui/BannerBlock'
 import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock'

src/pages/ProductPage/ProductPage.tsx

@@ -7,7 +7,7 @@ import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperFor
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading from '@/shared/ui/Heading/Heading'
-import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
+import Advantages from '@/widgets/Advantages'
 import { Product } from '@/widgets/Product/Product'
 import { ProductInfo } from '@/widgets/ProductInfo/ProductInfo'
 import { ViewedProducts } from '@/widgets/ViewedProducts/ViewedProducts'

src/shared/constants/constants.ts

@@ -18,6 +18,16 @@ export const LINK_NEWS_ALL = 'Все новости'
 export const LINK_CATEGORY_ALL = 'Все категории'
 export const LINK_REVIEWS_ALL = 'Все отзывы'
 
+export const VIEW_TWO_ITEMS = 2
+export const VIEW_THREE_ITEMS = 3
+export const VIEW_FOUR_ITEMS = 4
+export const VIEW_FIVE_ITEMS = 5
+export const VIEW_SIX_ITEMS = 6
+export const VIEW_SEVEN_ITEMS = 7
+export const VIEW_EIGHT_ITEMS = 8
+export const VIEW_NINE_ITEMS = 9
+export const VIEW_TEN_ITEMS = 10
+
 export const VIEWED_PRODUCTS_COUNT_ON_MAIN = 4
 
 //mock for BlogMainItem component

src/shared/styles/utils/_z-index.scss

@@ -0,0 +1,5 @@
+$one: 1;
+$two: 2;
+$three: 3;
+$four: 4;
+$five: 5;