enhancement_350_adaptive_main_page

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

src/entities/HeadingBlock/index.tsx

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

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

@@ -0,0 +1,40 @@
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+
+.headingBlock {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  &__heading {
+    display: flex;
+    gap: 15px;
+    align-items: flex-end;
+  }
+
+  &__link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    font-size: 15px;
+    color: var.$link-color;
+    fill: var.$link-color;
+    cursor: pointer;
+    opacity: 1;
+    transition: 0.25s;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    @include media.respond-to('middle') {
+      display: none;
+    }
+  }
+
+  &__arrow {
+    transform: rotate(270deg);
+  }
+}

src/entities/HeadingBlock/ui/HeadingBlock.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import IconHand from '@/assets/images/img-hand.png.png'
+
+import HeadingBlock from './HeadingBlock'
+
+const meta = {
+  title: 'entities/HeadingBlock',
+  component: HeadingBlock,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof HeadingBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = () => {
+  const title = 'Новости'
+  const subtitle = 'Все новости'
+  const link = '#'
+
+  return (
+    <div style={{ width: '700px' }}>
+      <HeadingBlock
+        title={title}
+        isIcon={true}
+        image={IconHand}
+        isLink={true}
+        subtitle={subtitle}
+        link={link}
+      />
+    </div>
+  )
+}
+
+Default.args = {
+  title: 'Новости',
+  subtitle: 'Все новости',
+  link: '#'
+}

src/entities/HeadingBlock/ui/HeadingBlock.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react'
+
+import ArrowIcon from '@/assets/images/sideBarMenu/IconArrowDown.svg'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Link from '@/shared/ui/Link/Link'
+
+import styles from './HeadingBlock.module.scss'
+
+interface IHeadingBlock {
+  title: string
+  isIcon?: boolean
+  image?: string
+  alt?: string
+  isLink?: boolean
+  subtitle?: string
+  link?: string
+}
+
+/**
+ * Компонент HeadingBlock - это заголовок с отдельным линком. Отрисовывается на главной странице MainPage в блоках новостей, отзывов и т.п.
+ * @param {string} title - заголовок блока
+ * @param {boolean} isIcon - булево значение показывающее линк
+ * @param {string} image - картинка в заголовке блока
+ * @param {string} alt - alt картинки в заголовке блока
+ * @param {boolean} isLink - булево значение показывающее линк
+ * @param {string} subtitle - название линка
+ * @param {string} link - ссылка
+ */
+
+const HeadingBlock: FC<IHeadingBlock> = ({
+  title,
+  isIcon = false,
+  image,
+  alt,
+  isLink = false,
+  subtitle,
+  link
+}) => {
+  return (
+    <article className={styles.headingBlock}>
+      <Heading type={HeadingType.NORMAL} className={styles.headingBlock__heading}>
+        {title}
+        {isIcon && <img src={image} alt={alt} />}
+      </Heading>
+      {isLink && (
+        <Link to={link} className={styles.headingBlock__link}>
+          {subtitle}
+          <ArrowIcon className={styles.headingBlock__arrow} />
+        </Link>
+      )}
+    </article>
+  )
+}
+
+export default HeadingBlock

src/pages/MainPage/MainPage.tsx

@@ -1,20 +1,22 @@
+import { FC } from 'react'
+
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
-import ArticleBlock from '@/widgets/ArticleBlock/ArticleBlock'
+import ArticleBlock from '@/widgets/ArticleBlock'
 import BannerBlock from '@/widgets/BannerBlock/ui/BannerBlock'
 import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock'
 import BrandsBlock from '@/widgets/BrandBlock/ui/BrandBlock/BrandBlock'
-import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid'
+import CategoryGrid from '@/widgets/CategoryGrid'
 import HeroBlock from '@/widgets/HeroBlock/ui/HeroBlock/HeroBlock'
 import NewsBlock from '@/widgets/NewsBlock/ui/NewsBlock'
 import ReviewsBlock from '@/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock'
 import StoriesBlock from '@/widgets/StoriesBlock/ui/StoriesBlock'
 import Subscribe from '@/widgets/Subscribe/Subscribe'
 import { ViewedProducts } from '@/widgets/ViewedProducts/ViewedProducts'
 
-const MainPage = () => {
+const MainPage: FC = () => {
   return (
     <>
       <HeroBlock />

src/pages/RootPage/RootPage.tsx

@@ -9,14 +9,14 @@ import styles from './root.module.scss'
 
 const RootPage = () => {
   return (
-    <div className={styles.rootPageWrapper}>
+    <>
       <Header />
       <main className={styles.main}>
         <Outlet />
       </main>
       <Footer />
       <Contact messenger={messengerArray} />
-    </div>
+    </>
   )
 }
 

src/pages/RootPage/root.module.scss

@@ -1,12 +1,7 @@
-.rootPageWrapper {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  min-height: 100vh;
-  margin: 0;
-}
-
 .main {
   display: flex;
   flex-direction: column;
-  gap: 60px;
+  align-items: center;
+  gap: 23px;
+  width: 100%;
 }

src/shared/ui/CategoryCard/ui/CategoryCard.module.scss

@@ -1,16 +1,28 @@
-@use '../../../styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
-.div {
+.categoryCard {
   display: block;
   padding: 20px 0 0 20px;
   width: 100%;
-  min-width: 420px;
-  height: 300px;
+  min-width: 450px;
+  min-height: 300px;
   border-radius: 10px;
   background-position: right;
   background-size: contain;
   background-repeat: no-repeat;
   transition: opacity 0.3s ease-in-out;
+  user-select: none;
+
+  @include media.respond-to('large') {
+    min-width: 340px;
+    min-height: 260px;
+  }
+
+  @include media.respond-to('middle') {
+    min-width: 260px;
+    min-height: 260px;
+  }
 
   &:hover {
     opacity: 0.8;

src/shared/ui/CategoryCard/ui/CategoryCard.tsx

@@ -23,21 +23,20 @@ interface CategoryCardProps {
  * @param {object} card - объект категории для отображения названия и фотографии;
  * @param {number} index - индекс элемента массива категорий для выбора цвета;
  */
+
 const CategoryCard: FC<CategoryCardProps> = ({ card, index }) => {
   const dispatch = useDispatch<AppDispatch>()
   return (
-    <li>
-      <Link
-        to={`${Routes.CATEGORIES}/${card.slug}`}
-        onClick={() => {
-          dispatch(setCategoryId(card.id))
-          dispatch(setCategorySlug(card.slug))
-        }}
-        className={styles.div}
-        style={{ backgroundColor: COLORS[index], backgroundImage: `url(${card.image})` }}>
-        <Subheading className={styles.subheading}>{card.name}</Subheading>
-      </Link>
-    </li>
+    <Link
+      to={`${Routes.CATEGORIES}/${card.slug}`}
+      onClick={() => {
+        dispatch(setCategoryId(card.id))
+        dispatch(setCategorySlug(card.slug))
+      }}
+      className={styles.categoryCard}
+      style={{ backgroundColor: COLORS[index], backgroundImage: `url(${card.image})` }}>
+      <Subheading className={styles.subheading}>{card.name}</Subheading>
+    </Link>
   )
 }
 

src/shared/ui/Scroll/Scroll.module.scss

@@ -1,4 +1,5 @@
-@use '@/app/styles/index' as var;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
 .extra {
   background-color: orange;
@@ -13,21 +14,36 @@
 .scroll {
   display: flex;
   gap: 20px;
-  padding: 0 10px 20px;
+  padding-bottom: 20px;
   overflow: auto hidden;
   cursor: grab;
 
+  @include media.respond-to('middle') {
+    gap: 10px;
+  }
+
   &::-webkit-scrollbar {
     height: 3px;
+
+    @include media.respond-to('middle') {
+      height: 2px;
+    }
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var.$theme-primary-color;
-    cursor: grab;
+    background: var.$footer-form-color;
+    visibility: hidden;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      visibility: visible;
+    }
   }
 
-  &::-webkit-scrollbar-track {
-    margin-left: 10px;
-    margin-right: 10px;
+  &:active {
+    &::-webkit-scrollbar-thumb {
+      visibility: visible;
+    }
   }
 }

src/shared/ui/Scroll/Scroll.tsx

@@ -51,7 +51,7 @@ const Scroll: FC<TProps> = ({ withManualGrip = false, className, children }) =>
       {children}
     </div>
   ) : (
-    <div className={`${styles.scroll} ${className}`}>{children}</div>
+    <ul className={`${styles.scroll} ${className}`}>{children}</ul>
   )
 }