enhancement_350_main_adaptive_new

src/app/styles/base/_reset.scss

@@ -1,7 +1,6 @@
 body {
   margin: 0 auto;
   max-width: 100vw;
-  min-width: 375px;
   font-family:
     Roboto,
     Arial,

src/components/WrapperForMainContent/wrapper.module.scss

@@ -1,22 +1,12 @@
-@use '../../shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/mixins' as media;
 
 .wrapper {
-  max-width: 1470px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;
-
-  @include media.respond-to('middle') {
-    max-width: 768px;
-    width: 100%;    
-  }
-
-  @include media.respond-to('small') {
-    width: 390px;
-    gap: 20px;
-  }
+  width: 100%;
+  max-width: 1470px;
+  margin: 0 auto;
+  padding: 25px;
 }

src/entities/AdvantageCard/index.tsx

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

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

@@ -0,0 +1,35 @@
+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} />
+    </div>
+  )
+}
+
+Default.args = {
+  image: advantagesData[0].image,
+  alt: advantagesData[0].alt,
+  name: advantagesData[0].name
+}

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

@@ -11,18 +11,17 @@ 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,23 @@
+@use '@/shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+
+.advantageCard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  width: 220px;
+  height: 70px;
+  border-radius: 10px;
+  background: var.$white;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var.$body-color;
+  padding: 13px 20px;
+  transition: 0.25s;
+}
+
+.image {
+  width: 45px;
+}

src/entities/BannerCard/BannerCard.module.scss

@@ -1,77 +1,85 @@
-@use '@/app/styles/index' as color;
-@use '../../shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
 .storybook {
   width: 1500px;
-  height: 400px;  
+  height: 400px;
 }
 
-.slider { 
-  flex: 1 0 100%;
+.bannerCard {
   position: relative;
-  background-color: color.$theme-secondary-color;
+  display: flex;
+  width: 100%;
+  flex: 1 0 100%;
 }
 
-.link {
-  color: color.$black;
+.content {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  top: 30%;
+  left: 12%;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
 
-  .content {
-    position: absolute;
-    left: 12%;
-    top: 100px;
+  @include media.respond-to('large') {
+    top: 20%;
+  }
 
-    @include media.respond-to('middle') {
-      left: 2%;
-      top: 40px;
-    }    
-    @include media.respond-to('small') {
-      left: 3%;
-      top: 10px;
-    }
-
-    .title {
-      margin-top: 5px;
-      font-size: 30px;      
-      color: color.$black;
-      line-height: 37.5px; 
+  @include media.respond-to('middle') {
+    left: 5%;
+    gap: 15px;
+  }
 
-      @include media.respond-to('middle') {
-        font-size: 15px;
-        line-height: 18px; 
-        font-weight: 500;      
-      }
-      @include media.respond-to('small') {
-        font-size: 13px;
-        line-height: 10px;            
-      }
-    }  
+  @include media.respond-to('small') {
+    top: 25%;
   }
 }
 
-.button {
-  border: 1px solid color.$body-color-light-grey;
-  column-gap: 15px;
-  background-color: inherit;
-  color: color.$black;
-  margin-top: 30px;
+.title {
+  display: flex;
+  flex-direction: column;
+  line-height: 37px;
+  font-size: 30px;
+  font-weight: 500;
 
-  path {
-    fill: color.$black;
+  @include media.respond-to('middle') {
+    line-height: 18px;
+    font-size: 15px;
   }
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  font-size: 16px;
+  color: var.$body-color;
+  fill: var.$body-color;
+  border: 1px solid rgb(52 52 52 / 10%);
+  border-radius: 5px;
+  padding: 5px 15px;
+  transition: 0.25s;
 
   @include media.respond-to('middle') {
-    font-size: 15px;    
-    width: 150px;
-    height: 30px;
-    margin-top: 10px;  
+    font-size: 13px;
   }
-  @include media.respond-to('small') {
-    font-size: 13px;    
-    width: 130px;
-    height: 20px;
-    margin-top: 10px;  
+
+  &:hover {
+    color: var.$white;
+    fill: var.$white;
+    background: var.$body-color;
+  }
+
+  &:active {
+    transform: scale(0.9);
   }
 }
+
+.icon {
+  transform: rotate(270deg);
+}
+
+.image {
+  object-fit: cover;
+}

src/entities/BannerCard/BannerCard.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { FC } from 'react'
 
 import img1 from '@/assets/images/banner/banner.png'
+import img2 from '@/assets/images/banner/banner_small.png'
 
 import BannerCard, { TBannerCard } from './BannerCard'
 import styles from './BannerCard.module.scss'
@@ -39,7 +40,7 @@ export const Normal: Story = {
   args: {
     id: 100,
     urlImg: img1,
-    urlImg_m: img1,
+    urlImg_m: img2,
     alt: 'Mobil',
     title: 'DJI OSMO',
     subtitle: 'Mobile 4',

src/entities/BannerCard/BannerCard.tsx

@@ -1,8 +1,7 @@
 import { FC } from 'react'
 
-import ArrowRightNextPage from '@/assets/icons/ArrowRightNextPage.svg'
+import ArrowIcon from '@/assets/images/sideBarMenu/IconArrowDown.svg'
 import { media } from '@/shared/styles/utils/media'
-import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
 import Img from '@/ui/img'
@@ -32,23 +31,18 @@ export type TBannerCard = {
 
 const BannerCard: FC<TBannerCard> = ({ alt, title, subtitle, href, urlImg, urlImg_m }) => {
   return (
-    <div className={styles.slider}>
-      <Link to={href} className={styles.link}>
-        <div className={styles.content}>
-          <Heading type={HeadingType.NORMAL} className={styles.title}>
-            {title}
-          </Heading>
-          <Heading type={HeadingType.NORMAL} className={styles.title}>
-            {subtitle}
-          </Heading>
-
-          <Button size={ButtonSize.S} theme={ButtonTheme.PRIMARY} className={styles.button}>
-            Подробнее
-            <ArrowRightNextPage className={styles.icon} />
-          </Button>
-        </div>
-        <Img srcSet={urlImg_m} media={media.middle} src={urlImg} alt={alt} />
-      </Link>
+    <div className={styles.bannerCard}>
+      <div className={styles.content}>
+        <Heading type={HeadingType.NORMAL} className={styles.title}>
+          <span>{title}</span>
+          <span>{subtitle}</span>
+        </Heading>
+        <Link to={href} className={styles.button}>
+          Подробнее
+          <ArrowIcon className={styles.icon} />
+        </Link>
+      </div>
+      <Img srcSet={urlImg_m} media={media.middle} src={urlImg} alt={alt} className={styles.image} />
     </div>
   )
 }