сделал reviews для пк

assets/css/gp-style-core.css

@@ -92,6 +92,9 @@ body{
 
     text-decoration: none;
 }
+.title--center{
+    text-align: center;
+}
 .text-1{
     font-weight: 400;
     color: var(--text-white);

assets/css/gp-style-desktop.css

@@ -566,11 +566,142 @@
 }
 /* free */
 
-/* text and form */
+/* reviews */
-.text-form{
+.reviews{
+    margin-top: 56px;
+    
+    position: relative;
+
+    overflow: hidden;
+}
+.reviews__item{
     display: flex;
 
+    padding-bottom: 88px;
+}
+.reviews-item__content{
+    width: 100%;
+}
+.reviews-item-content__header{
+    display: flex;
+    align-items: center;
+}
+.reviews-item-content-header__img{
+    width: 112px;
+    height: 112px;
 
+    border-radius: 4px;
+}
+.reviews-item-content-header__block{
+    margin-left: 40px;
+
+    width: 100%;
+}
+.reviews-item-content-header__item{
+    margin-top: 16px;
+
+    width: 100%;
+
+    display: flex;
+    justify-content: space-between;
+}
+.reviews-item-content-header__item:first-child{
+    margin-top: 0;
+}
+.reviews-item-content-header__pin{
+    padding-left: 40px;
+
+    display: flex;
+    align-items: center;
+
+    background-image: url(/assets/img/icon/pin.svg);
+    background-repeat: no-repeat;
+    background-position: left;
+}
+.reviews-item-content__text{
+    margin-top: 40px;
+}
+.reviews-item__img{
+    margin-left: 164px;
+
+    width: 577px;
+    height: 600px;
+    border-radius: 4px;
+
+    object-fit: cover;
+
+    flex-shrink: 0;
+}
+.reviews .swiper-pagination{
+    position: absolute;
+    right: 32px;
+    bottom: 104px;
+
+    padding-right: 32px;
+
+    text-align: end;
+}
+.reviews .swiper-pagination-bullet{
+    width: 97px;
+    height: 4px;
+
+    background-color: #111114;
+    opacity: 1 !important;
+
+    border-radius: 0;
+}
+.reviews .swiper-pagination-bullet-active{
+    background-color: var(--text-white);
+}
+.reviews__counter{
+    position: absolute;
+    bottom: 0px;
+
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+
+    font-weight: 400;
+    font-size: 24px;
+    color: var(--text-white);
+}
+.reviews__counter--grey{
+    color: var(--link);
+}
+
+.reviews .swiper-button-next::after, .reviews .swiper-button-prev::after{
+    position: static;
+
+    font-size: 0;
+}
+.reviews .swiper-button-next, .reviews .swiper-button-prev{
+    position: static;
+
+    margin-top: 0;
+
+    width: 32px;
+    height: 32px;
+}
+.reviews .swiper-button-next{
+    margin-left: 40px;
+
+    background-image: url(/assets/img/icon/slider-righ.svg);
+    background-repeat: no-repeat;
+}
+.reviews .swiper-button-prev{
+    margin-right: 40px;
+
+    background-image: url(/assets/img/icon/slider-left.svg);
+    background-repeat: no-repeat;
+}
+/* reviews */
+
+/* text and form */
+.text-form{
+    margin-top: 88px;
+
+    display: flex;
 }
 .text-form__content{
     width: 100%;

assets/img/icon/slider-left.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 4L10.5 16L22.5 28" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

assets/img/icon/slider-righ.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 4L22.5 16L10.5 28" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

assets/js/main.js

@@ -2,7 +2,6 @@
 
 const gymSwiper = new Swiper('.gym-swiper', {
     direction: 'horizontal',
-    slidesPerView: 1.20,
     breakpoints: {
         320:{
             slidesPerView: 1.20,
@@ -14,4 +13,33 @@ const gymSwiper = new Swiper('.gym-swiper', {
     }
 });
 
+
+
+const reviewsSwiper = new Swiper('.reviews-swiper', {
+    spaceBetween: 24,
+    // If we need pagination
+    pagination: {
+        el: '.swiper-pagination',
+    },
+
+    // Navigation arrows
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    // And if we need scrollbar
+    scrollbar: {
+        el: '.swiper-scrollbar',
+    },
+    runCallbacksOnInit: true,
+    // === new change
+    on: {
+        slideChange: function(){
+            let offer = document.querySelector('#numberReviews');
+            offer.innerHTML = (this.activeIndex +  1);
+        }
+    }
+})
+
 // gymSwiper.destroy();

index.html

@@ -593,6 +593,169 @@
                 </article>
             </div>
 
+            <div class="main__item">
+                <p class="title-1 title--center">
+                    Отзывы клиентов
+                </p>
+
+                <article class="reviews reviews-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="reviews__item swiper-slide">
+                            <div class="reviews-item__content">
+                                <div class="reviews-item-content__header">
+                                    <img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
+    
+                                    <div class="reviews-item-content-header__block">
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-1">Название клуба</p>
+    
+                                            <p class="reviews-item-content-header__pin text-2">Локация</p>
+                                        </div>
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-2">ФИО</p>
+                                        </div>
+                                    </div>
+                                </div>
+    
+                                <div class="reviews-item-content__text">
+                                    <p class="text-2">
+                                        Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
+                                        Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
+                                        Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
+                                    </p>
+                                </div>
+                            </div>
+    
+                            <img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
+                        </div>
+
+                        <div class="reviews__item swiper-slide">
+                            <div class="reviews-item__content">
+                                <div class="reviews-item-content__header">
+                                    <img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
+    
+                                    <div class="reviews-item-content-header__block">
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-1">Название клуба</p>
+    
+                                            <p class="reviews-item-content-header__pin text-2">Локация</p>
+                                        </div>
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-2">ФИО</p>
+                                        </div>
+                                    </div>
+                                </div>
+    
+                                <div class="reviews-item-content__text">
+                                    <p class="text-2">
+                                        Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
+                                        Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
+                                        Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
+                                    </p>
+                                </div>
+                            </div>
+    
+                            <img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
+                        </div>
+
+                        <div class="reviews__item swiper-slide">
+                            <div class="reviews-item__content">
+                                <div class="reviews-item-content__header">
+                                    <img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
+    
+                                    <div class="reviews-item-content-header__block">
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-1">Название клуба</p>
+    
+                                            <p class="reviews-item-content-header__pin text-2">Локация</p>
+                                        </div>
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-2">ФИО</p>
+                                        </div>
+                                    </div>
+                                </div>
+    
+                                <div class="reviews-item-content__text">
+                                    <p class="text-2">
+                                        Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
+                                        Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
+                                        Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
+                                    </p>
+                                </div>
+                            </div>
+    
+                            <img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
+                        </div>
+
+                        <div class="reviews__item swiper-slide">
+                            <div class="reviews-item__content">
+                                <div class="reviews-item-content__header">
+                                    <img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
+    
+                                    <div class="reviews-item-content-header__block">
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-1">Название клуба</p>
+    
+                                            <p class="reviews-item-content-header__pin text-2">Локация</p>
+                                        </div>
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-2">ФИО</p>
+                                        </div>
+                                    </div>
+                                </div>
+    
+                                <div class="reviews-item-content__text">
+                                    <p class="text-2">
+                                        Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
+                                        Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
+                                        Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
+                                    </p>
+                                </div>
+                            </div>
+    
+                            <img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
+                        </div>
+
+                        <div class="reviews__item swiper-slide">
+                            <div class="reviews-item__content">
+                                <div class="reviews-item-content__header">
+                                    <img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
+    
+                                    <div class="reviews-item-content-header__block">
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-1">Название клуба</p>
+    
+                                            <p class="reviews-item-content-header__pin text-2">Локация</p>
+                                        </div>
+                                        <div class="reviews-item-content-header__item">
+                                            <p class="text-2">ФИО</p>
+                                        </div>
+                                    </div>
+                                </div>
+    
+                                <div class="reviews-item-content__text">
+                                    <p class="text-2">
+                                        Недавно я воспользовался услугами этой компании, и остался в полном восторге! Сначала у меня были сомнения, но профессионализм команды моментально развеял все мои опасения. Каждый этап сотрудничества был тщательно продуман, начиная с первичной консультации и заканчивая реализацией проекта.<br><br>
+                                        Отдельно хочу отметить их внимание к деталям и индивидуальный подход. Каждое предложение звучало обоснованно, и я чувствовал, что мои идеи действительно важны для них. Проект был выполнен в срок и даже превзошел мои ожидания! <br><br>
+                                        Рекомендую эту компанию всем, кто ищет качественные услуги и надежное сотрудничество. Спасибо вам за отличную работу!
+                                    </p>
+                                </div>
+                            </div>
+    
+                            <img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
+                        </div>
+                    </div>
+
+                    <div class="swiper-pagination"></div>
+
+                    <div class="reviews__counter">
+                        <div class="swiper-button-prev"></div>
+                        <span id="numberReviews">1</span>/<span class="reviews__counter--grey">5</span>
+                        <div class="swiper-button-next"></div> 
+                    </div>
+                </article>
+            </div>
+
             <div class="main__item">
                 <div class="text-form">
                     <div class="text-form__content">
@@ -656,7 +819,7 @@
                                
             </div>
 
-            <!-- <div class="main__item">
+            <div class="main__item">
                 <p class="title-1">
                     Дополнительные услуги
                 </p>
@@ -728,7 +891,7 @@
                         </div>
                     </div>
                 </article>
-            </div> -->
+            </div>
         </main>
 
         <footer class="footer">