Save

layout/js/custom.js

@@ -30,3 +30,22 @@ $(function () {
 		$(this).find('p').toggleClass('active')
 	})
 })
+
+
+$(function() {
+    if ($('#glassingApp').length) {
+        $('body').on('click', '.box-3 .tabs-nav .tab-item', function(e) {
+            e.preventDefault()
+            let tabId = $(this).data('tab')
+            let isActive = $(this).hasClass('active')
+
+            $('.box-3 .tabs-nav .tab-item').removeClass('active')
+            $('.box-3 .tab-content').removeClass('active').slideUp()
+
+            if (!isActive) {
+                $(this).addClass('active')
+                $(`.box-3 .tab-content[id="${tabId}"]`).addClass('active').slideDown()
+            }
+        })
+    }
+})

layout/style-css/szklenie-v2.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../style-scss/_variables.scss","../style-scss/szklenie-v2.scss"],"names":[],"mappings":"AAAQ,6QAAA,CACA,2FAAA,CACA,mDAAA,CAuBR,WACC,4BAAA,CACA,iKAAA,CAIA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,uJAAA,CAGA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,2IAAA,CAEA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,2BAAA,CACA,2IAAA,CAEA,kBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,iKAAA,CAIA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,qJAAA,CAEA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,2BAAA,CACA,2IAAA,CAEA,kBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,uJAAA,CAGA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,qJAAA,CAEA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,2IAAA,CAEA,gBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,+IAAA,CAEA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,+IAAA,CAEA,kBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,6IAAA,CAEA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,2JAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,yJAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,+IAAA,CAEA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,iJAAA,CAEA,kBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,6IAAA,CAEA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,mKAAA,CAIA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,yJAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,uJAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,2JAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,mKAAA,CAIA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,4BAAA,CACA,uJAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,+IAAA,CAEA,kBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,iJAAA,CAEA,kBAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,2IAAA,CAEA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,uJAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,uJAAA,CAGA,eAAA,CACA,iBAAA,CACA,iBAAA,CAGD,WACC,sBAAA,CACA,2IAAA,CAEA,eAAA,CACA,iBAAA,CACA,iBAAA,CCnTD,KACC,sBAAA,CACA,wBAAA,CAIA,WACC,eAAA,CAID,aACC,eAAA,CAGF,OACC,eAAA,CAGD,WACC,eAAA,CACA,gBAAA,CAGD,aACC,kBAAA","file":"szklenie-v2.css"}
+{"version":3,"sources":["../style-scss/_variables.scss","../style-scss/szklenie-v2.scss","../style-scss/_mixins.scss"],"names":[],"mappings":"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","file":"szklenie-v2.css"}

layout/style-scss/szklenie-v2.scss

@@ -7,6 +7,8 @@ html {
 }
 
 body {
+	background: #f9f8f7;
+
 	&.fixed {
 		overflow: hidden;
 	}
@@ -23,8 +25,360 @@ strong {
 .main-page {
 	padding-top: 0px;
 	padding-bottom: 0;
+	background: #f9f8f7;
 }
 
 .breadcrumbs {
 	margin: 60px 0 10px;
+
+	@include respond-below(sm) {
+		column-gap: 16px;
+	}
+}
+
+.box-1 {
+	margin-bottom: 80px;
+
+	.box-1--wrapper {
+		height: 258px;
+		background-image: url('/upload/filemanager/Pages/Szklenie/img-1.png');
+		background-position: center right;
+		background-repeat: no-repeat;
+		background-size: contain;
+		align-content: center;
+
+		@include respond-below(lg) {
+			height: 280px;
+		}
+		@include respond-below(md) {
+			background: transparent;
+		}
+
+		h1 {
+			color: $cBlack;
+			font-size: 40px;
+			font-family: $font3;
+			font-weight: 400;
+			line-height: 1.3;
+			letter-spacing: -0.02em;
+			margin-bottom: 36px;
+		}
+
+		.box-1--text {
+			width: 100%;
+			max-width: 728px;
+			margin-bottom: 52px;
+
+			p {
+				color: #1d1d1e;
+				font-family: $font3;
+				font-weight: 300;
+				font-size: 16px;
+				line-height: 20px;
+				letter-spacing: 1px;
+			}
+
+			@include respond-below(lg) {
+				max-width: 410px;
+			}
+			@include respond-below(md) {
+				max-width: unset;
+			}
+		}
+		ol {
+			display: flex;
+			flex-direction: row;
+			column-gap: 39px;
+			row-gap: 24px;
+			align-items: center;
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			flex-wrap: wrap;
+
+			li {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 10px;
+
+				span {
+					color: $cBlack;
+					font-family: $font3;
+					font-weight: 400;
+					font-size: 16px;
+					line-height: 1.3;
+					text-transform: uppercase;
+				}
+			}
+		}
+	}
+}
+
+.box-2 {
+	margin-bottom: 80px;
+
+	.box-2--wrapper {
+		h2 {
+			color: #13293f;
+			font-family: $font3;
+			font-style: normal;
+			font-weight: 400;
+			font-size: 30px;
+			line-height: 36px;
+			margin-bottom: 30px;
+		}
+
+		.tiles {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			column-gap: 37px;
+			row-gap: 23px;
+
+			@include respond-below(md) {
+				grid-template-columns: 1fr;
+			}
+
+			.tile {
+				display: flex;
+				flex-direction: row;
+
+				border-radius: 20px;
+				border: 1px solid #d2cec4;
+				background: #fff;
+				overflow: hidden;
+
+				@include respond-below(sm) {
+					flex-direction: column-reverse;
+				}
+
+				.tile-data {
+					flex: 1;
+					padding: 30px 30px 30px 50px;
+
+					@include respond-below(lg) {
+						padding: 30px;
+					}
+
+					h3 {
+						color: $cBlack;
+						font-family: $font3;
+						font-weight: 500;
+						font-size: 20px;
+						line-height: 1.3;
+						text-transform: uppercase;
+						margin-bottom: 10px;
+						width: 100%;
+						max-width: 150px;
+					}
+
+					p {
+						font-family: $font3;
+						font-style: normal;
+						font-weight: 300;
+						font-size: 16px;
+						line-height: 1.5;
+						margin: 0;
+					}
+				}
+				.tile-img {
+					width: 207px;
+					min-width: 207px;
+					height: 204px;
+
+					@include respond-below(lg) {
+						width: 150px;
+						min-width: 150px;
+					}
+					@include respond-below(md) {
+						width: 250px;
+						min-width: 250px;
+						height: 100%;
+					}
+					@include respond-below(sm) {
+						width: 100%;
+						max-width: unset;
+						height: 200px;
+					}
+
+					img {
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+				}
+			}
+		}
+	}
+}
+
+.box-3 {
+	margin-bottom: 80px;
+
+	.box-3--wrapper {
+		.box-3--head {
+			text-align: center;
+			padding-bottom: 50px;
+
+			h2 {
+				color: #13293f;
+				font-family: $font3;
+				font-style: normal;
+				font-weight: 300;
+				font-size: 30px;
+				line-height: 36px;
+				margin-bottom: 14px;
+
+				strong {
+					font-weight: 500;
+				}
+			}
+
+			ol.tabs-nav {
+				padding: 0;
+				margin: 0;
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				gap: 29px;
+
+				@include respond-below(sm) {
+					flex-direction: column;
+				}
+
+				li.tab-item {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					column-gap: 20px;
+					box-sizing: border-box;
+					background: #ffffff;
+					border: 1px solid #d2cec4;
+					box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.15);
+					border-radius: 20px;
+					width: 306px;
+					height: 84px;
+					padding: 10px 10px 10px 18px;
+					cursor: pointer;
+
+					@include respond-below(sm) {
+						width: 100%;
+					}
+
+					&.active {
+						.tab-icon {
+							transform: rotate(180deg);
+						}
+					}
+
+					.tab-img {
+						height: 49px;
+
+						img {
+							height: 49px;
+							object-fit: contain;
+						}
+					}
+					.tab-title {
+						font-family: $font3;
+						font-weight: 500;
+						font-size: 20px;
+						line-height: 1.3;
+						text-transform: uppercase;
+						color: #000000;
+						flex: 1;
+						text-align: left;
+					}
+					.tab-icon {
+						transition: all 250ms ease-in-out;
+					}
+				}
+			}
+		}
+		.box-3--body {
+			text-align: center;
+
+			img {
+				width: 100%;
+				max-width: fit-content;
+			}
+		}
+	}
+}
+
+.box-4 {
+	margin-bottom: 60px;
+
+	.box-4--wrapper {
+		height: 177px;
+		background-image: url('/upload/filemanager/Pages/Szklenie/image-696.png');
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+		border-radius: 20px;
+		padding: 30px 20% 30px 30px;
+
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: 50px;
+
+		@include respond-below(md) {
+			padding: 30px;
+		}
+		@include respond-below(sm) {
+			flex-direction: column;
+			align-items: flex-start;
+			row-gap: 30px;
+			height: 100%;
+		}
+
+		h2 {
+			color: $cBlack;
+			font-family: $font3;
+			font-weight: 300;
+			font-size: 30px;
+			line-height: 1.4;
+			width: 100%;
+			max-width: 310px;
+			margin-bottom: 0;
+
+			strong {
+				font-weight: 600;
+			}
+		}
+		a.btn {
+			display: inline-flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 18px;
+			padding: 18px 27px 18px 27px;
+			margin: 0;
+			background: #1e2832;
+			border-radius: 6px;
+			color: #ffffff;
+			font-size: 16px;
+			font-family: $font3;
+			font-weight: 700;
+			letter-spacing: 1px;
+			text-transform: uppercase;
+			line-height: 1;
+			box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+			width: fit-content !important;
+			height: auto;
+			border: none;
+			outline: none;
+			cursor: pointer;
+			// &:active {
+			// 	background: #f0e875;
+			// }
+
+			img {
+				width: 20px;
+				height: 20px;
+				object-fit: contain;
+			}
+		}
+	}
 }

templates_user/pages/page-szklenie-v2.php

@@ -15,11 +15,13 @@
         </div>
     </div>
 
-    <div class="box-1">
+    <section class="box-1">
         <div class="container">
             <div class="box-1--wrapper">
                 <h1>Szklenie VIDOK</h1>
+                <div class="box-1--text">
                     <p>Zadaniem szyb jest nie tylko wpuszczanie światła do budynku, ale przede wszystkim ochrona przed utratą ciepła, hałasem i włamaniem zapewniając komfort i bezpieczeństwo.</p>
+                </div>
                 <ol>
                     <li>
                         <img src="/upload/filemanager/icon/more-light.svg" alt="">
@@ -36,5 +38,113 @@
                 </ol>
             </div>
         </div>
+    </section>
+
+    <section class="box-2">
+        <div class="container">
+            <div class="box-2--wrapper">
+                <h2>Spektrum <strong>szklenia</strong></h2>
+
+                <div class="tiles">
+                    <div class="tile">
+                        <div class="tile-data">
+                            <h3>Szkło przeciwsłoneczne</h3>
+                            <p>Skuteczna ochrona cieplna,<br/> niższe straty energii i wyższy<br/> komfort w każdym sezonie.</p>
                         </div>
+                        <div class="tile-img">
+                            <img src="/upload/filemanager/Pages/Szklenie/img-2.png" alt="">
+                        </div>
+                    </div>
+                    <div class="tile">
+                        <div class="tile-data">
+                            <h3>Szkło DŹWIĘKOIZOLACYJNE</h3>
+                            <p>Ogranicza hałas z zewnątrz,<br/> zapewnia ciszę i komfort<br/> w Twoim domu.</p>
+                        </div>
+                        <div class="tile-img">
+                            <img src="/upload/filemanager/Pages/Szklenie/img-3.png" alt="">
+                        </div>
+                    </div>
+                    <div class="tile">
+                        <div class="tile-data">
+                            <h3>Szkło BEZPIECZNE</h3>
+                            <p>Zwiększa bezpieczeństwo,<br/> chroni przed włamaniem<br/> i ogranicza ryzyko zranienia.</p>
+                        </div>
+                        <div class="tile-img">
+                            <img src="/upload/filemanager/Pages/Szklenie/img-4.png" alt="">
+                        </div>
+                    </div>
+                    <div class="tile">
+                        <div class="tile-data">
+                            <h3>Szkło ORNAMENTOWE</h3>
+                            <p>Dekoracyjny efekt, prywatność<br/> i subtelne rozproszenie<br/> światła.</p>
+                        </div>
+                        <div class="tile-img">
+                            <img src="/upload/filemanager/Pages/Szklenie/img-5.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="box-3">
+        <div class="container">
+            <div class="box-3--wrapper">
+                <div class="box-3--head">
+                    <h2><strong>Wybierz</strong> szklenie dla:</h2>
+                    <ol class="tabs-nav">
+                        <li class="tab-item" data-tab="tab-1" class="active">
+                            <div class="tab-img">
+                                <img src="/upload/filemanager/Pages/Szklenie/tab-1.jpg" alt="">
+                            </div>
+                            <span class="tab-title">PVC i aluminium</span>
+                            <div class="tab-icon">
+                                <img src="/upload/filemanager/icon/Group-1422.svg" alt="">
+                            </div>
+                        </li>
+                        <li class="tab-item" data-tab="tab-2">
+                            <div class="tab-img">
+                                <img src="/upload/filemanager/Pages/Szklenie/tab-2.jpg" alt="">
+                            </div>
+                            <span class="tab-title">drewno</span>
+                            <div class="tab-icon">
+                                <img src="/upload/filemanager/icon/Group-1422.svg" alt="">
+                            </div>
+                        </li>
+                        <li class="tab-item" data-tab="tab-3">
+                            <span class="tab-title">ciepłe ramki</span>
+                            <div class="tab-icon">
+                                <img src="/upload/filemanager/icon/Group-1422.svg" alt="">
+                            </div>
+                        </li>
+                    </ol>
+                </div>
+                <div class="box-3--body">
+                    <div class="tab-content" id="tab-1" style="display: block;">
+                        <img src="/upload/filemanager/Pages/Szklenie/pvc-1.jpg" alt="">
+                        <img src="/upload/filemanager/Pages/Szklenie/pvc-2.jpg" alt="">
+                    </div>
+                    <div class="tab-content" id="tab-2" style="display: none;">
+                        <img src="/upload/filemanager/Pages/Szklenie/drewno-1.jpg" alt="">
+                        <img src="/upload/filemanager/Pages/Szklenie/drewno-2.jpg" alt="">
+                    </div>
+                    <div class="tab-content" id="tab-3" style="display: none;">
+                        <img src="/upload/filemanager/Pages/Szklenie/cieple-ramki.jpg" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="box-4">
+        <div class="container">
+            <div class="box-4--wrapper">
+                <h2>Optymalne połączenie <strong>dekoracji i komfortu</strong></h2>
+                <a class="btn" href="/kontakt/">
+                    WYŚLIJ ZAPYTANIE
+                    <img src="/upload/filemanager/icon/Arrow-1-yellow.svg" alt="">
+                </a>
+            </div>
+        </div>
+    </section>
 </main>