feat: change layout and styles according to new design

src/app/page.tsx

@@ -19,10 +19,10 @@ export default function Home() {
         <main>
             <HeaderSection/>
             <HeroSection/>
+            <CooperationPlanSection/>
             <WhyDencoSection/>
             <WideChoiceSection/>
-            <FboFbsSection/>
-            <CooperationPlanSection/>
+            {/*<FboFbsSection/>*/}
             <DencoHelpsSection/>
             <PlanDescriptionSection/>
             <AccountSection/>

src/sections/CooperationPlanSection/CooperationPlanConfig.ts

@@ -0,0 +1,41 @@
+import cooperation1 from "@/shared/assets/images/cooperation1.png";
+import cooperation2 from "@/shared/assets/images/cooperation2.png";
+import cooperation3 from "@/shared/assets/images/cooperation3.png";
+import cooperation4 from "@/shared/assets/images/cooperation4.png";
+import cooperation5 from "@/shared/assets/images/cooperation5.png";
+import cooperation6 from "@/shared/assets/images/cooperation6.png";
+import {CooperationPlanItemProps} from "@/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem";
+
+
+export const cooperationPlanConfig: CooperationPlanItemProps[] = [
+    {
+        digit: 1,
+        text: 'Выбираете любые товары с нашего склада',
+        imgSrc: cooperation1
+    },
+    {
+        digit: 2,
+        text: 'Добавляете товары на МП по системе FBS',
+        imgSrc: cooperation2
+    },
+    {
+        digit: 3,
+        text: 'Получайте заказы в личном кабинете',
+        imgSrc: cooperation3
+    },
+    {
+        digit: 4,
+        text: 'Мы собираем и упаковываем ваши заказы',
+        imgSrc: cooperation4
+    },
+    {
+        digit: 5,
+        text: 'Доставляем заказы на сортировочные центры МП',
+        imgSrc: cooperation5
+    },
+    {
+        digit: 6,
+        text: 'Маркетплейс переводит вам деньги',
+        imgSrc: cooperation6
+    }
+]

src/sections/CooperationPlanSection/CooperationPlanSection.module.css

@@ -1,5 +1,5 @@
 .root {
-    margin-bottom: 4rem;
+    margin: 3rem 0 0;
 }
 
 .heading {
@@ -9,139 +9,21 @@
     margin-bottom: 2rem;
 }
 
-.innerContainer {
-    position: relative;
-    overflow: hidden;
-    margin: 0 -3rem;
-}
-
-.mask {
-    z-index: 10;
-    position: absolute;
-    inset: 0;
-    background: var(--black);
-    opacity: 0.4;
-}
-
-.block1, .block2 {
-    display: flex;
-    height: 12rem;
-}
-
-.block1 {
-    margin-bottom: -4.8rem;
-}
-
-.textBlock {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--white);
-    z-index: 11;
-    width: 70%;
-    position: absolute;
-    top: 0;
-    height: 80%;
-    justify-content: center;
-}
-
-.textBlockBottom {
-    top: unset;
-    bottom: 0;
-}
-
-.number {
-    font-family: var(--HelveticaNeueCyr);
-    font-size: 6.4rem;
-    position: relative;
-}
-
-.image {
-    object-fit: cover;
-    position: absolute;
-    height: 100%;
-    width: auto;
-    inset: 0;
-}
-
-.image1Block, .image2Block, .image3Block, .image4Block, .image5Block, .image6Block {
-    position: relative;
-    display: flex;
-    justify-content: center;
-}
-
-.image1Block {
-    clip-path: polygon(0 0, 100% 0, 100% 80%, 40% 80%, 30% 100%, 20% 80%, 0 80%);
-    flex: 1 1 30%;
-    z-index: 6;
-}
-
-.image2Block {
-    clip-path: polygon(0 0, 90% 0, 90% 40%, 100% 50%, 90% 60%, 90% 80%, 0 80%);
-    z-index: 3;
-    flex: 1 1 36%;
-    margin-right: -4%;
-}
-
-.image3Block {
-    clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0 80%);
-    flex: 1 1 34%;
-    z-index: 2;
-}
-
-.image4Block {
-    clip-path: polygon(0 20%, 90% 20%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 0 100%);
-    flex: 1 1 35%;
-    margin-right: -4%;
-    z-index: 5;
-}
-
-.image5Block {
-    clip-path: polygon(0 20%, 40% 20%, 50% 0, 60% 20%, 100% 20%, 100% 20%, 100% 100%, 0 100%);
-    flex: 1 1 32%;
-    z-index: 4;
-}
-
-.image6Block {
-    clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0% 100%);
-    flex: 1 1 33%;
-}
-
-@media screen and (min-width: 480px) {
-    .block1, .block2 {
-        height: 14rem;
-    }
-
-    .block1 {
-        margin-bottom: -5.6rem;
-    }
+.list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 12rem 12rem 12rem;
 }
 
 @media screen and (min-width: 641px) {
-    .innerContainer {
-        margin: 0 -6rem;
-    }
-
-    .number {
-        font-size: 8.4rem;
-    }
-
-    .block1, .block2 {
-        height: 18rem;
-    }
-
-    .block1 {
-        margin-bottom: -7.2rem;
-    }
-
-    .textBlock {
-        width: 85%;
-        gap: 1rem;
+    .list {
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 13rem 13rem;
     }
 }
 
-@media screen and (min-width: 992px) {
-    .innerContainer {
-        margin: 0;
+@media screen and (min-width: 768px) {
+    .list {
+        grid-template-rows: 16.6rem 16.6rem;
     }
 }

src/sections/CooperationPlanSection/CooperationPlanSection.tsx

@@ -1,72 +1,17 @@
-import Image from "next/image";
 import {Container} from "@/shared/components/Container/Container";
-import cooperation1 from "@/shared/assets/images/cooperation1.png";
-import cooperation2 from "@/shared/assets/images/cooperation2.png";
-import cooperation3 from "@/shared/assets/images/cooperation3.png";
-import cooperation4 from "@/shared/assets/images/cooperation4.png";
-import cooperation5 from "@/shared/assets/images/cooperation5.png";
-import cooperation6 from "@/shared/assets/images/cooperation6.png";
 import styles from './CooperationPlanSection.module.css';
-import classNames from "classnames";
+import {cooperationPlanConfig} from "@/sections/CooperationPlanSection/CooperationPlanConfig";
+import {CooperationPlanItem} from "@/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem";
 
 export function CooperationPlanSection() {
     return (
         <section className={styles.root}>
             <Container>
                 <h3 className={styles.heading}>Схема нашего сотрудничества</h3>
-                <div className={styles.innerContainer}>
-                    <div className={styles.block1}>
-                        <div className={styles.image1Block}>
-                            <div className={styles.mask}></div>
-                            <div className={styles.textBlock}>
-                                <p className={styles.number}>1</p>
-                                <p>Выбираете любые товары с нашего склада</p>
-                            </div>
-                            <Image className={classNames(styles.image)} placeholder={'blur'} fill src={cooperation1} sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image2Block}>
-                            <div className={styles.mask}></div>
-                            <div className={styles.textBlock}>
-                                <p className={styles.number}>4</p>
-                                <p>Мы собираем и упаковываем ваши заказы</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation4} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image3Block}>
-                            <div className={styles.mask}></div>
-                            <div className={styles.textBlock}>
-                                <p className={styles.number}>5</p>
-                                <p>Доставляем заказы на сортировочные центры МП</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation5} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                    </div>
-                    <div className={styles.block2}>
-                        <div className={styles.image4Block}>
-                            <div className={styles.mask}></div>
-                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
-                                <p className={styles.number}>2</p>
-                                <p>Добавляете товары на МП по системе FBS</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation2} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image5Block}>
-                            <div className={styles.mask}></div>
-                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
-                                <p className={styles.number}>3</p>
-                                <p>Получайте заказы в личном кабинете</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation3} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                        <div className={styles.image6Block}>
-                            <div className={styles.mask}></div>
-                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
-                                <p className={styles.number}>6</p>
-                                <p>Маркетплейс переводит вам деньги</p>
-                            </div>
-                            <Image className={styles.image} placeholder={'blur'} src={cooperation6} fill sizes={'33vw'} alt={''}/>
-                        </div>
-                    </div>
+                <div className={styles.list}>
+                    {cooperationPlanConfig.map(item => (
+                        <CooperationPlanItem key={item.digit} digit={item.digit} text={item.text} imgSrc={item.imgSrc}/>
+                    ))}
                 </div>
             </Container>
         </section>

src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.module.css

@@ -0,0 +1,43 @@
+.root {
+    position: relative;
+}
+
+.mask {
+    z-index: 10;
+    position: absolute;
+    inset: 0;
+    background: var(--black);
+    opacity: 0.6;
+}
+
+.textBlock {
+    display: flex;
+    gap: 0.5rem;
+    color: var(--white);
+    z-index: 11;
+    position: absolute;
+    justify-content: center;
+    height: 100%;
+    align-items: center;
+    padding: 1rem;
+}
+
+.number {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 6.4rem;
+    position: relative;
+}
+
+.image {
+    object-fit: cover;
+}
+
+@media screen and (min-width: 641px) {
+    .number {
+        font-size: 8.4rem;
+    }
+
+    .textBlock {
+        gap: 1rem;
+    }
+}

src/sections/CooperationPlanSection/components/CooperationPlanItem/CooperationPlanItem.tsx

@@ -0,0 +1,30 @@
+import {StaticImageData} from "next/image";
+import Image from "next/image";
+import styles from './CooperationPlanItem.module.css'
+import classNames from "classnames";
+
+export type CooperationPlanItemProps = {
+    digit: number,
+    text: string,
+    imgSrc: StaticImageData
+};
+
+export function CooperationPlanItem(props: CooperationPlanItemProps) {
+    return (
+        <div className={styles.root}>
+            <div className={styles.mask}></div>
+            <div className={styles.textBlock}>
+                <p className={styles.number}>{props.digit}</p>
+                <p>{props.text}</p>
+            </div>
+            <Image
+                className={classNames(styles.image)}
+                placeholder={'blur'}
+                fill
+                src={props.imgSrc}
+                sizes={'33vw'}
+                alt={''}
+            />
+        </div>
+    );
+};

src/sections/FooterSection/FooterSection.module.css

@@ -1,24 +1,25 @@
-.container {
-    border-radius: 5px;
+.root {
     background-color: var(--grey2);
-    padding: 2rem 2.5rem;
+}
+
+.container {
+    padding: 3rem 2.5rem;
     color: var(--white);
-    margin-bottom: 5rem;
 }
 
 .heading {
     font-family: var(--HelveticaNeueCyr);
-    font-size: 3.2rem;
+    font-size: 2rem;
     margin-bottom: 1rem;
 }
 
 .joinButton {
-    font-size: 2rem;
+    font-size: 1.4rem;
     color: var(--white);
     background-color: var(--blue);
-    border-radius: 10px;
-    padding: 1.5rem 2rem;
-    margin-bottom: 3.5rem;
+    border-radius: 5px;
+    padding: 1rem;
+    margin-bottom: 2rem;
 }
 
 .bottom {
@@ -40,22 +41,13 @@
 }
 
 .instruction {
-    font-family: var(--HelveticaNeueCyr);
-    font-size: 2rem;
+    text-decoration: underline;
 }
 
 .logo {
     width: 6rem;
 }
 
-.logoContainer {
-
-}
-
-.contactUs {
-    font-size: 1.6rem;
-}
-
 .socialButtons {
     display: flex;
     gap: 1rem;
@@ -73,12 +65,7 @@
 
 @media screen and (min-width: 641px) {
     .container {
-        padding: 3.7rem 6.2rem 6.2rem;
-        border-radius: 10px;
-    }
-
-    .contactUs {
-        font-weight: 700;
+        padding: 3rem 5rem;
     }
 
     .whatsAppLogo, .telegramLogo {
@@ -87,9 +74,6 @@
 }
 
 @media screen and (min-width: 992px) {
-    .container {
-        border-radius: 15px;
-    }
 
     .whatsAppLogo, .telegramLogo {
         width: 40px;

src/sections/FooterSection/FooterSection.tsx

@@ -3,38 +3,39 @@ import {Container} from "@/shared/components/Container/Container";
 import Link from "next/link";
 import Image from "next/image";
 import dencoLogo from "@/shared/assets/icons/DENCO 2024.svg";
-import whatsAppLogo from '@/shared/assets/icons/ватсап.svg';
-import telegramLogo from '@/shared/assets/icons/телеграм.svg';
+import whatsAppLogo from '@/shared/assets/icons/ватсап.svg'
+import telegramLogo from '@/shared/assets/icons/телеграм.svg'
 
 export function FooterSection() {
     return (
-        <footer>
+        <footer className={styles.root}>
             <Container className={styles.container}>
                 <h3 className={styles.heading}>Зарабатывайте вместе с нами!</h3>
-                <Link href={'https://t.me/dencofulfillmant_manager'}
-                      className={styles.joinButton}>Стать
-                    партнёром</Link>
-
+                <Link href={'https://t.me/dencofulfillmant_manager'} className={styles.joinButton}>Стать партнёром</Link>
                 <div className={styles.bottom}>
-
+                    <div className={styles.bottomLeft}>
+                        <Link href={''} className={styles.instruction}>Инструкция к подключению</Link>
+                        <Image className={styles.logo} src={dencoLogo} alt={'Логотип'}/>
+                        <p>Все права защищены</p>
+                        <p>© 2017-2023 DENCO</p>
+                    </div>
                     <div className={styles.bottomRight}>
                         <p className={styles.contactUs}>Свяжитесь с нами!</p>
+                        <div className={styles.socialButtons}>
+                            <Link href={''}>
+                                <Image className={styles.whatsAppLogo} src={whatsAppLogo} alt={'логотип Ватсап'}/>
+                            </Link>
+                            <Link href={''}>
+                                <Image className={styles.telegramLogo} src={telegramLogo} alt={'логотип Ватсап'}/>
+                            </Link>
+                        </div>
                         <div className={styles.contactDetails}>
                             <Link href={'tel:+79951541493'}>+7 (995) 154-14-93</Link>
                             <Link href={'mailto:info@denco.store'}>info@denco.store</Link>
                         </div>
-
-                    </div>
-                    <div className={styles.bottomLeft}>
-                        {/*<p className={styles.instruction}>Инструкция к подключению</p>*/}
-                        <div className={styles.logoContainer}>
-                            <Image className={styles.logo} src={dencoLogo} alt={'Логотип'}/>
-                            <p>Все права защищены</p>
-                        </div>
-
                     </div>
                 </div>
             </Container>
         </footer>
     );
-};
+}

src/sections/TestimonialsSection/TestimonialsSection.module.css

@@ -9,9 +9,6 @@
     font-size: 2rem;
 }
 
-.container {
-    max-width: 30rem;
-}
 @media screen and (min-width: 641px) {
     .title {
         font-size: 2.8rem;

src/sections/TestimonialsSection/TestimonialsSection.tsx

@@ -1,19 +1,40 @@
 import {Container} from "@/shared/components/Container/Container";
-import chpok from '@/shared/assets/images/chpok.png';
 import styles from './TestimonialsSection.module.css';
-import Image from "next/image";
 import {Carousel} from "@/shared/components/Carousel/Carousel";
+import {TestimonialItem, TestimonialItemProps} from "@/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem";
+
+const testimonialsSrc: TestimonialItemProps[] = [
+    {
+        src: "drop/videos/1.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    },
+    {
+        src: "drop/videos/2.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    },
+    {
+        src: "drop/videos/3.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    },
+    {
+        src: "drop/videos/4.mp4",
+        clientName: "Имя клиента",
+        keyPhrase: "Ключевая фраза из видео-отзыва клиента будет находиться здесь."
+    }
+]
 
 export function TestimonialsSection() {
     return (
         <section className={styles.root}>
-            <Container className={styles.container}>
+            <Container>
                 <h3 className={styles.title}>Посмотрите отзывы от наших клиентов</h3>
                 <Carousel>
-                    <video  controls src={"drop/videos/1.mp4"}/>
-                    <video  controls src={"drop/videos/2.mp4"}/>
-                    <video  controls src={"drop/videos/3.mp4"}/>
-                    <video  controls src={"drop/videos/4.mp4"}/>
+                    {testimonialsSrc.map(item => (
+                        <TestimonialItem key={item.src} src={item.src} keyPhrase={item.keyPhrase} clientName={item.clientName}/>
+                    ))}
                 </Carousel>
             </Container>
         </section>

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.module.css

@@ -0,0 +1,35 @@
+.innerContainer {
+    display: flex;
+    height: 30rem;
+}
+
+.video {
+    flex: 60% 1 1;
+    object-fit: cover;
+}
+
+.description {
+    flex: 40% 1 1;
+    background-color: var(--black);
+    color: var(--white);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.keyPhrase {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+}
+
+.clientName {
+    font-size: 1.6rem;
+}
+
+@media screen and (min-width: 480px) {
+    .innerContainer {
+        height: 40rem;
+    }
+}

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx

@@ -0,0 +1,22 @@
+import styles from './TestimonialItem.module.css'
+
+export type TestimonialItemProps = {
+    src: string,
+    keyPhrase: string,
+    clientName: string
+};
+
+export function TestimonialItem(props: TestimonialItemProps) {
+    const {src, keyPhrase, clientName, ...otherProps} = props;
+    return (
+        <div {...otherProps}>
+            <div className={styles.innerContainer}>
+                <video className={styles.video} controls src={src}/>
+                <div className={styles.description}>
+                    <p className={styles.keyPhrase}>{keyPhrase}</p>
+                    <p className={styles.clientName}>{clientName}</p>
+                </div>
+            </div>
+        </div>
+    );
+};

src/sections/WhyDencoSection/WhyDencoSection.module.css

@@ -6,7 +6,8 @@
 .heading {
     font-family: var(--HelveticaNeueCyr);
     font-size: 2rem;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
 }
 
 .itemList {

src/sections/WhyDencoSection/WhyDencoSection.tsx

@@ -39,14 +39,14 @@ export function WhyDencoSection() {
                 <div className={styles.itemList}>
                     {items.map((item, i) => <WhyDencoItem key={i} position={item.position} body={item.body}/>)}
                 </div>
-                <div className={styles.certificates}>
-                    <div className={styles.certificate}>
-                        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
-                    </div>
-                    <div className={styles.certificate}>
-                        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
-                    </div>
-                </div>
+                {/*<div className={styles.certificates}>*/}
+                {/*    <div className={styles.certificate}>*/}
+                {/*        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>*/}
+                {/*    </div>*/}
+                {/*    <div className={styles.certificate}>*/}
+                {/*        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>*/}
+                {/*    </div>*/}
+                {/*</div>*/}
             </Container>
             <div className={styles.forgetEverything}>
                 <Container>

src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.module.css

@@ -22,7 +22,6 @@
     position: relative;
     z-index: 2;
     flex:1;
-    text-align: center;
 }
 
 @media screen and (min-width: 641px) {

src/sections/WideChoiceSection/WideChoiceSection.module.css

@@ -1,6 +1,6 @@
 .innerContainer {
     background-color: var(--grey);
-    padding: 1rem 3rem 4rem;
+    padding: 1rem 3rem 2rem;
     margin: 0 -3rem;
 }
 
@@ -14,9 +14,38 @@
     margin-bottom: 1.5rem;
 }
 
+.list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: min-content;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.joinButton {
+    font-size: 1.4rem;
+    color: var(--white);
+    background-color: var(--blue);
+    border-radius: 5px;
+    padding: 1rem;
+    width: 100%;
+    text-align: center;
+}
+
+@media screen and (min-width: 480px) {
+    .innerContainer {
+        padding: 1rem 5rem 2rem;
+    }
+
+    .list {
+        gap: 2rem;
+    }
+}
+
 @media screen and (min-width: 641px) {
     .innerContainer {
         margin: 0 -6rem;
+        padding: 1rem 7rem 2rem;
     }
 
     .heading {

src/sections/WideChoiceSection/WideChoiceSection.tsx

@@ -1,6 +1,3 @@
-'use client'
-
-import Image from "next/image";
 import {Container} from "@/shared/components/Container/Container";
 import styles from './WideChoiceSection.module.css';
 import {WideChoiceItem} from "@/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem";
@@ -8,34 +5,14 @@ import bear from '@/shared/assets/images/bear.png'
 import tools from '@/shared/assets/images/tools.png'
 import ball from '@/shared/assets/images/ball.png'
 import stationery from '@/shared/assets/images/stationery.png'
-import garden from '@/shared/assets/images/garden.png'
-import home from '@/shared/assets/images/home.png'
-import healthAndBeauty from '@/shared/assets/images/health and beauty.png'
+import huntingAndFishing from '@/shared/assets/images/huntingAndFishing.png'
+import feast from '@/shared/assets/images/feast.png'
+import healthAndBeauty from '@/shared/assets/images/healthAndBeauty.png'
 import electronics from '@/shared/assets/images/electronics.png'
-import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
-import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
-import Slider, {Settings} from "react-slick";
+import textile from '@/shared/assets/images/textile.png'
+import Link from "next/link";
 
 export function WideChoiceSection() {
-    const settings: Settings = {
-        dots: true,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 4,
-        slidesToScroll: 4,
-        lazyLoad: 'progressive',
-        prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
-        nextArrow: <Image src={sliderArrowRight} alt={''}/>,
-        responsive: [
-            {
-                breakpoint: 480,
-                settings: {
-                    slidesToShow: 3,
-                    slidesToScroll: 3,
-                }
-            }
-        ]
-    };
 
     return (
         <section>
@@ -43,7 +20,7 @@ export function WideChoiceSection() {
                 <div className={styles.innerContainer}>
                     <h3 className={styles.heading}>Обширный выбор товаров из различных категорий.</h3>
                     <p className={styles.subHeading}>Более миллиона товаров - ассортимент обновляется ежедневно</p>
-                    <Slider {...settings}>
+                    <div className={styles.list}>
                         <WideChoiceItem
                             href={"https://denco.store/toy"}
                             imgSrc={bear}
@@ -66,16 +43,31 @@ export function WideChoiceSection() {
                             alt={'Канцтовары'}/>
                         <WideChoiceItem
                             href={"https://denco.store/sad-i-ogorod"}
-                            imgSrc={garden}
-                            name={'Сад и огород'}
-                            alt={'Сад и огород'}/>
+                            imgSrc={huntingAndFishing}
+                            name={'Охота и рыбалка'}
+                            alt={'Охота и рыбалка'}/>
                         <WideChoiceItem
                             href={"https://denco.store/tovaryi-dlya-doma"}
-                            imgSrc={home}
-                            name={'Товары для дома'}
-                            alt={'Товары для дома'}/>
-
-                    </Slider>
+                            imgSrc={feast}
+                            name={'Праздник'}
+                            alt={'Праздник'}/>
+                        <WideChoiceItem
+                            href={"https://denco.store/tovaryi-dlya-doma"}
+                            imgSrc={healthAndBeauty}
+                            name={'Красота'}
+                            alt={'Красота'}/>
+                        <WideChoiceItem
+                            href={"https://denco.store/tovaryi-dlya-doma"}
+                            imgSrc={electronics}
+                            name={'Электроника'}
+                            alt={'Электроника'}/>
+                        <WideChoiceItem
+                            href={"https://denco.store/tovaryi-dlya-doma"}
+                            imgSrc={textile}
+                            name={'Текстиль'}
+                            alt={'Текстиль'}/>
+                    </div>
+                    <Link href={''} className={styles.joinButton}>Больше товаров</Link>
                 </div>
             </Container>
         </section>

src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.module.css

@@ -1,30 +1,70 @@
 .root {
-    width: 100%;
+    /*width: 12rem;*/
+    /*height: 12rem;*/
+    background-color: var(--white);
+    position: relative;
 }
 
 .container {
-    width: 10rem;
-    height: 14rem;
-    border: 1px solid var(--grey2);
-    margin: 0 auto;
-    display: block;
-}
-
-.imageContainer {
-    height: 75%;
+    /*height: 100%;*/
+    /*display: block;*/
+    height: 12rem;
+    /*width: 8rem;*/
+    padding: 1rem;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    border-bottom: 1px solid var(--grey2);
+    flex-direction: column;
 }
 
 .name {
-    position: relative;
-    padding: 0.3rem 0;
-    width: 100%;
+    height: 30%;
     text-align: center;
-    height: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.name > p {
+    /*position: absolute;*/
+}
+
+.imageContainer {
+    /*height: 75%;*/
+    height: 70%;
     display: flex;
     justify-content: center;
-    align-items: center;
 }
+
+.img {
+    width: auto;
+}
+
+/*.root {*/
+/*    width: 100%;*/
+/*}*/
+
+/*.container {*/
+/*    width: 10rem;*/
+/*    height: 14rem;*/
+/*    border: 1px solid var(--grey2);*/
+/*    margin: 0 auto;*/
+/*    display: block;*/
+/*}*/
+
+/*.imageContainer {*/
+/*    height: 75%;*/
+/*    display: flex;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
+/*    border-bottom: 1px solid var(--grey2);*/
+/*}*/
+
+/*.name {*/
+/*    position: relative;*/
+/*    padding: 0.3rem 0;*/
+/*    width: 100%;*/
+/*    text-align: center;*/
+/*    height: 25%;*/
+/*    display: flex;*/
+/*    justify-content: center;*/
+/*    align-items: center;*/
+/*}*/

src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.tsx

@@ -8,12 +8,12 @@ export type WideChoiceItemProps = {
     href: string,
 };
 
-export function WideChoiceItem({imgSrc, name, alt,href , ...otherProps}: WideChoiceItemProps) {
+export function WideChoiceItem({imgSrc, name, alt, href}: WideChoiceItemProps) {
     return (
-        <div className={styles.root} {...otherProps}>
+        <div className={styles.root}>
             <a href={href} className={styles.container}>
                 <div className={styles.imageContainer}>
-                    <Image src={imgSrc} alt={alt} sizes='100vw' placeholder={'blur'}/>
+                    <Image className={styles.img} src={imgSrc} alt={alt} sizes='30vw' placeholder={'blur'}/>
                 </div>
                 <div className={styles.name}>
                     <p>{name}</p>

src/shared/components/Carousel/Carousel.tsx

@@ -19,6 +19,7 @@ const settings: ComponentProps<typeof Slider> = {
     lazyLoad: 'progressive',
     prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
     nextArrow: <Image src={sliderArrowRight} alt={''}/>,
+    dots: true
 };
 
 export function Carousel({children}: Props) {