skeletonNewsBlock

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -6,6 +6,7 @@ import CartPage from '@/pages/CartPage/CartPage'
 import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import ContactsPage from '@/pages/ContactsPage/ContactsPage'
+import CreateAccountPage from '@/pages/CreateAccountPage/CreateAccountPage'
 import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
 import { FavoritesPage } from '@/pages/FavoritesPage/FavoritesPage'
@@ -118,6 +119,10 @@ export const AppRouter = createBrowserRouter([
       {
         path: Routes.CONTACTS,
         element: <ContactsPage />
+      },
+      {
+        path: Routes.REGISTRATION,
+        element: <CreateAccountPage />
       }
       /*       {
         path: Routes.CERTIFICATE,

src/app/styles/base/_reset.scss

@@ -1,7 +1,6 @@
 body {
   margin: 0 auto;
   max-width: 100vw;
-  min-width: 375px;
   font-family:
     Roboto,
     Arial,
@@ -18,6 +17,7 @@ body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    list-style: none;
   }
 
   h1,

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: 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,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/AdvantageCard.tsx → src/entities/AdvantageCard/ui/AdvantageCard.tsx

@@ -1,28 +1,31 @@
 import { FC } from 'react'
 
 import Link from '@/shared/ui/Link/Link'
+import Span from '@/shared/ui/Span/Span'
 
 import styles from './advantageCard.module.scss'
 
 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 (
-    <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={route} className={styles.advantageCard}>
+      <img src={image} alt={alt} className={styles.image} />
+      <Span className={styles.span}>{name}</Span>
+    </Link>
   )
 }
 

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

@@ -0,0 +1,50 @@
+@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;
+  padding: 13px 18px;
+  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;
+  }
+}
+
+.span {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  color: var.$body-color;
+}

src/entities/BannerCard/BannerCard.module.scss

@@ -1,77 +1,86 @@
-@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%;
+  user-select: none;
 }
 
-.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;
+}