Save

layout/style-scss/home-page.scss

@@ -37,6 +37,7 @@ strong {
 		}
 
 		@include respond-below(xs) {
+			font-size: 34px;
 			padding-left: 29px;
 			padding-right: 29px;
 		}
@@ -47,26 +48,57 @@ strong {
 		background: #f9f8f7;
 
 		&--wrapper {
-			.slider-box-0 {
+			display: grid;
-				.swiper-slide {
+			grid-template-columns: 1fr calc(100% - 460px);
+			position: relative;
 			padding-bottom: 20px;
 
-					.slide-wrapper {
+			@include respond-below(lg) {
-						position: relative;
+				grid-template-columns: 1fr calc(100% - 360px);
-						height: 400px;
+			}
-						display: flex;
-						flex-direction: row;
 
-						.slide-left {
+			@include respond-below(md) {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.box-left {
 				position: relative;
 				height: 400px;
 				width: 100%;
 				max-width: 460px;
 				align-content: center;
 
-							.slide-left--wrapper {
+				@include respond-below(lg) {
+					max-width: 360px;
+				}
+				@include respond-below(md) {
+					height: auto;
+					min-height: 200px;
+				}
+				@include respond-below(md) {
+					padding: 0 44px;
+					max-width: unset;
+				}
+
+				> svg {
+					position: absolute;
+					z-index: 2;
+					top: 0;
+					bottom: 0;
+					left: calc(100% - 1px);
+
+					@include respond-below(md) {
+						display: none;
+					}
+				}
+
+				.box-left--wrapper {
 					padding: 40px;
 
+					@include respond-below(lg) {
+						padding: 20px;
+					}
 					h3 {
 						color: #000000;
 						font-size: 50px;
@@ -77,6 +109,10 @@ strong {
 						font-family: $fCormorantGaramond;
 
 						margin-bottom: 26px;
+
+						@include respond-below(lg) {
+							font-size: 40px;
+						}
 					}
 					p {
 						color: #1d1d1e;
@@ -91,14 +127,37 @@ strong {
 							font-weight: 900;
 							font-size: 20px;
 							line-height: 0;
+
+							@include respond-below(lg) {
+								font-size: 16px;
+							}
+						}
+
+						@include respond-below(lg) {
+							font-size: 14px;
 						}
 					}
 				}
 			}
-						.slide-right {
+			.box-right {
+				.slider-box-0 {
+					.swiper-slide {
+						&:nth-child(1) {
+							@include respond-below(xs) {
+								.slide-wrapper {
+									.slide-bg {
+										img {
+											object-position: center;
+										}
+									}
+								}
+							}
+						}
+						.slide-wrapper {
 							position: relative;
-							flex: 1;
+							height: 400px;
-							align-content: end;
+							display: flex;
+							flex-direction: row;
 
 							&::before {
 								content: '';
@@ -114,12 +173,12 @@ strong {
 								);
 								z-index: 1;
 							}
-							> svg {
+
-								position: absolute;
+							@include respond-below(md) {
-								z-index: 2;
+								height: 290px;
-								top: 0;
+							}
-								bottom: 0;
+							@include respond-below(xs) {
-								left: -1px;
+								height: 246px;
 							}
 
 							.slide-bg {
@@ -139,8 +198,13 @@ strong {
 								padding: 40px 70px;
 								display: flex;
 								flex-direction: column;
+								justify-content: flex-end;
 								row-gap: 25px;
 
+								@include respond-below(xs) {
+									padding: 30px;
+								}
+
 								p {
 									color: #000000;
 									font-family: $font3;
@@ -151,6 +215,12 @@ strong {
 									strong {
 										font-weight: 500;
 									}
+									@include respond-below(md) {
+										font-size: 24px;
+									}
+									@include respond-below(xs) {
+										font-size: 20px;
+									}
 								}
 
 								.slide-btn {
@@ -198,6 +268,7 @@ strong {
 						}
 					}
 				}
+			}
 
 			.swiper-pagination {
 				bottom: 0;
@@ -215,12 +286,15 @@ strong {
 				}
 			}
 		}
-		}
 
 		.container {
 			@media (min-width: 1500px) {
 				max-width: 1430px;
 			}
+			@include respond-below(md) {
+				max-width: unset;
+				padding: 0;
+			}
 		}
 	}
 	.box-1 {
@@ -319,6 +393,7 @@ strong {
 			.slider-box-2 {
 				margin-bottom: 40px;
 				overflow: initial;
+				padding-bottom: 20px;
 
 				.swiper-wrapper {
 					align-items: stretch;
@@ -1259,7 +1334,7 @@ strong {
 					.tile-wrapper {
 						display: flex;
 						flex-direction: column;
-						row-gap: 48px;
+						row-gap: 20px;
 						padding: 35px;
 						height: 100%;
 
@@ -1295,6 +1370,11 @@ strong {
 						.tile-data {
 							flex: 1;
 
+							.tile-data--wrapper {
+								overflow: hidden;
+								height: 132px;
+							}
+
 							p {
 								color: $cBlack;
 								font-family: $font3;
@@ -1306,6 +1386,26 @@ strong {
 									font-size: 16px;
 								}
 							}
+
+							button {
+								padding: 0;
+								margin: 10px 0 0 0;
+								background: transparent;
+								border: none;
+								appearance: none;
+								outline: none !important;
+								cursor: pointer;
+
+								color: #1d1d1e;
+								font-family: $font3;
+								font-style: normal;
+								font-weight: 300;
+								font-size: 14px;
+								line-height: 1.2;
+								letter-spacing: 0.09em;
+								text-decoration-line: underline;
+								text-transform: uppercase;
+							}
 						}
 						.tile-author {
 							p {

templates_user/pages/home-page-v2.php

@@ -8,36 +8,27 @@
     <div class="box-0">
         <div class="container">
             <div class="box-0--wrapper">
+                <div class="box-left">
+                    <div class="box-left--wrapper">
+                        <h3>Okna i drzwi<br/> klasy premium</h3>
+                        <p>jakość <span>·</span> technologia <span>·</span> partnerstwo</p>
+                    </div>
+                    <?= $box0_shape; ?>
+                </div>
+                <div class="box-right">
                     <div class="swiper slider-box-0">
                         <div class="swiper-wrapper">
                             <div class="swiper-slide">
                                 <div class="slide-wrapper">
-                                <div class="slide-left">
-                                    <div class="slide-left--wrapper">
-                                        <h3>Okna i drzwi<br/> klasy premium</h3>
-                                        <p>jakość <span>·</span> technologia <span>·</span> partnerstwo</p>
-                                    </div>
-                                </div>
-                                <div class="slide-right">
-                                    <?= $box0_shape; ?>
                                     <div class="slide-bg">
-                                        <img src="/upload/filemanager/Pages/home-page/slides/s1.jpg" alt="">
+                                        <img src="/upload/filemanager/Pages/home-page/slides/s1-1.jpg" alt="">
                                     </div>
                                     <div class="slide-right--wrapper">
                                     </div>
                                 </div>
                             </div>
-                        </div>
                             <div class="swiper-slide">
                                 <div class="slide-wrapper">
-                                <div class="slide-left">
-                                    <div class="slide-left--wrapper">
-                                        <h3>Okna i drzwi<br/> klasy premium</h3>
-                                        <p>jakość <span>·</span> technologia <span>·</span> partnerstwo</p>
-                                    </div>
-                                </div>
-                                <div class="slide-right">
-                                    <?= $box0_shape; ?>
                                     <div class="slide-bg">
                                         <img src="/upload/filemanager/Pages/home-page/slides/s2.jpg" alt="">
                                     </div>
@@ -50,17 +41,8 @@
                                     </div>
                                 </div>
                             </div>
-                        </div>
                             <div class="swiper-slide">
                                 <div class="slide-wrapper">
-                                <div class="slide-left">
-                                    <div class="slide-left--wrapper">
-                                        <h3>Okna i drzwi<br/> klasy premium</h3>
-                                        <p>jakość <span>·</span> technologia <span>·</span> partnerstwo</p>
-                                    </div>
-                                </div>
-                                <div class="slide-right">
-                                    <?= $box0_shape; ?>
                                     <div class="slide-bg">
                                         <img src="/upload/filemanager/Pages/home-page/slides/s3.jpg" alt="">
                                     </div>
@@ -75,8 +57,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="swiper-pagination"></div>
                 </div>
+
+                <div class="swiper-pagination"></div>
             </div>
         </div>
     </div>
@@ -192,6 +175,7 @@
                             </div>
                         </div>
                     </div>
+                    <div class="swiper-pagination"></div>
                 </div>
                 <div class="box-2-gallery-source" hidden>
                     <div class="swiper slider-box-2-gallery-source">
@@ -663,8 +647,11 @@
                                 <?php endforeach; ?>
                             </ul>
                             <div class="tile-data">
+                                <div class="tile-data--wrapper">
                                     <p>Mój mąż przeprowadzał w ostatnim czasie kapitalny remont domu, do którego mamy się wprowadzić. Do wymiany poszło wiele rzeczy, w tym okna, które były nieszczelne. Znajomy polecił nam firmę VIDOK. Posłuchaliśmy się jego rekomendacji i zamówiliśmy  okna drewniane, które pięknie się prezentują i świetnie tłumią hałasy z zewnątrz.</p>
                                 </div>
+                                <button>Czytaj więcej</button>
+                            </div>
                             <div class="tile-author">
                                 <p>Monika, borek stary</p>
                             </div>
@@ -678,8 +665,11 @@
                                 <?php endforeach; ?>
                             </ul>
                             <div class="tile-data">
+                                <div class="tile-data--wrapper">
                                     <p>Kolejny raz. zaufalismy firmie VIDOK jako dostawcy okien do realizowanego przez nas projektu. Serdecznie pilecamy. Jakosc wykonania, a przede wszystkim jakosc montazu 👌😎 Dwoch Panow, ktorzy montowali okna 15 maja po poludniu absolutny 100 % profesjonalizm i cp moze nawet jest jeszcze wazniejsze najwyzsza kultura osobista nie zachwiana nawet podczas przeciwnosci konstrukcyjnych istniejacego podczas montazu okien. Polecamy 😎👌</p>
                                 </div>
+                                <button>Czytaj więcej</button>
+                            </div>
                             <div class="tile-author">
                                 <p>SARNA ARCHITEKCI, Rzeszów</p>
                             </div>
@@ -693,8 +683,11 @@
                                 <?php endforeach; ?>
                             </ul>
                             <div class="tile-data">
+                                <div class="tile-data--wrapper">
                                     <p>Bardzo polecam firmę. Zamówienie, doradztwo, obsługa , terminowość absolutnie znakomita. Osoby tam pracujące przywracają mi wiarę w solidność i profesjonalizm ludzką. Wrócę do Was po drzwi😀</p>
                                 </div>
+                                <button>Czytaj więcej</button>
+                            </div>
                             <div class="tile-author">
                                 <p>Katarzyna Woskowicz, Kraków</p>
                             </div>
@@ -716,7 +709,7 @@
             delay: 4000,
         },
         pagination: {
-            el: ".slider-box-0 .swiper-pagination",
+            el: ".box-0 .swiper-pagination",
             clickable: true,
         },
     });
@@ -852,4 +845,59 @@
             });
         });
         })();
+
+    $(function () {
+        var expandedText = "Zwiń";
+        var collapsedText = "Czytaj więcej";
+
+        $(".box-9 .tile-data").each(function () {
+            var $tileData = $(this);
+            var $wrapper = $tileData.find(".tile-data--wrapper").first();
+            var $button = $tileData.find("button").first();
+
+            if (!$wrapper.length || !$button.length) {
+                return;
+            }
+
+            var collapsedHeight = parseInt($wrapper.css("height"), 10) || 132;
+            var fullHeight = $wrapper.prop("scrollHeight");
+
+            $wrapper.data("collapsed-height", collapsedHeight);
+            $wrapper.data("expanded", false);
+
+            if (fullHeight <= collapsedHeight) {
+                $button.hide();
+                return;
+            }
+
+            $button.text(collapsedText);
+            $button.attr("aria-expanded", "false");
+        });
+
+        $("body").on("click", ".box-9 .tile-data button", function (e) {
+            e.preventDefault();
+
+            var $button = $(this);
+            var $wrapper = $button.closest(".tile-data").find(".tile-data--wrapper").first();
+
+            if (!$wrapper.length) {
+                return;
+            }
+
+            var collapsedHeight = $wrapper.data("collapsed-height") || 132;
+            var isExpanded = !!$wrapper.data("expanded");
+            var fullHeight = $wrapper.prop("scrollHeight");
+
+            $wrapper.stop(true).animate(
+                {
+                    height: isExpanded ? collapsedHeight : fullHeight
+                },
+                300
+            );
+
+            $wrapper.data("expanded", !isExpanded);
+            $button.attr("aria-expanded", isExpanded ? "false" : "true");
+            $button.text(isExpanded ? collapsedText : expandedText);
+        });
+    });
 </script>