fix-Advantages enhancement_350_adaptive_main_page

src/entities/AdvantageCard/ui/AdvantageCard.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { advantagesData } from '@/mockData/advantagesData'
+
+import AdvantageCard from './AdvantageCard'
+
+const meta = {
+  title: 'entities/AdvantageCard',
+  component: AdvantageCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof AdvantageCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = () => {
+  const image = advantagesData[0].image
+  const alt = advantagesData[0].alt
+  const name = advantagesData[0].name
+
+  return (
+    <div style={{ width: '220px' }}>
+      <AdvantageCard image={image} alt={alt} name={name} route="#" />
+    </div>
+  )
+}
+
+Default.args = {
+  image: advantagesData[0].image,
+  alt: advantagesData[0].alt,
+  name: advantagesData[0].name,
+  route: '#'
+}

src/entities/AdvantageCard/ui/AdvantageCard.tsx

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

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

@@ -16,10 +16,32 @@
   line-height: 20px;
   color: var.$body-color;
   padding: 13px 18px;
-  transition: 0.25s;
-  border: 1px solid red;
+  transition: 0.3s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 0 5px var.$body-color-light-grey;
+  }
+
+  &:active {
+    box-shadow: 0 0 5px var.$body-color-light-grey;
+  }
+
+  @include media.respond-to('large') {
+    gap: 24px;
+    max-width: 100%;
+  }
+
+  @include media.respond-to('middle') {
+    justify-content: flex-start;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
 }
 
 .image {
   width: 36px;
+
+  @include media.respond-to('large') {
+    width: 44px;
+  }
 }

src/mockData/advantagesData.ts

@@ -4,36 +4,43 @@ import img3 from '@/assets/images/advantages/img3.png'
 import img4 from '@/assets/images/advantages/img4.png'
 import img5 from '@/assets/images/advantages/img5.png'
 import img6 from '@/assets/images/advantages/img6.png'
+import { Routes } from '@/shared/config/routerConfig/routes'
 
 export const advantagesData = [
   {
     image: img1,
     name: 'Бесплатная доставка',
-    alt: 'изображение'
+    alt: 'изображение',
+    route: Routes.DELIVERY
   },
   {
     image: img2,
     alt: 'изображение',
-    name: 'Бонусы за покупку'
+    name: 'Бонусы за покупку',
+    route: Routes.ADD_RETURN
   },
   {
     image: img3,
     alt: 'изображение',
-    name: 'Гарантированный возврат и обмен'
+    name: 'Гарантированный возврат и обмен',
+    route: Routes.BLOG
   },
   {
     image: img4,
     alt: 'изображение',
-    name: 'Сертификаты на все товары'
+    name: 'Сертификаты на все товары',
+    route: Routes.BRANDS
   },
   {
     image: img5,
     alt: 'изображение',
-    name: 'Сертификаты на все товары'
+    name: 'Сертификаты на все товары',
+    route: Routes.HOME
   },
   {
     image: img6,
     alt: 'изображение',
-    name: 'Гарантийное обслуживание'
+    name: 'Гарантийное обслуживание',
+    route: Routes.HOME
   }
 ]

src/widgets/Advantages/ui/Advantages.tsx

@@ -16,7 +16,7 @@ const Advantages: FC = () => {
         <ul className={styles.cards}>
           {advantagesData.map((item, index) => (
             <li key={index}>
-              <AdvantageCard image={item.image} alt={item.alt} name={item.name} />
+              <AdvantageCard image={item.image} alt={item.alt} name={item.name} route={item.route} />
             </li>
           ))}
         </ul>

src/widgets/Advantages/ui/advantages.module.scss

@@ -3,8 +3,6 @@
 .advantages {
   display: flex;
   width: 100%;
-
-  // user-select: none;
 }
 
 .cards {
@@ -13,13 +11,15 @@
   gap: 10px;
   width: 100%;
 
-
   @include media.respond-to('large') {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    justify-items: center;
     gap: 20px;
     width: 100%;
-    border: 1px solid red;
+  }
+
+  @include media.respond-to('middle') {
+    display: flex;
+    flex-direction: column;
   }
 }