Project-Pro/ostal.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add winter season promotional section and update project inquiry form

Browse Source 
- Introduced a winter header and benefits section on page-2101.php to promote early bookings for spring-summer 2026.
- Enhanced the project inquiry form with additional fields and updated budget ranges for better user experience.
- Improved styling and layout for collaboration steps on page-2598.php, including hover effects and responsive design adjustments.
- Updated text content for clarity and consistency across both pages.
This commit is contained in:
Jacek Pyziak
2026-02-09 22:13:49 +01:00
parent 5f1dbd9e19
commit 0dd4cbe82f
6 changed files with 571 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
wp-content/themes/ostal_WP/css/custom.css
View File

File diff suppressed because one or more lines are too long

2
wp-content/themes/ostal_WP/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

627
wp-content/themes/ostal_WP/css/custom.scss
View File

@@ -1,407 +1,422 @@
#home-page-seo {
.wrapper {
padding-top: 75px;
padding-bottom: 0;
.wrapper {
padding-top: 75px;
padding-bottom: 0;
h2 {
margin-left: 0;
max-width: 100%;
}
}
h2 {
margin-left: 0;
max-width: 100%;
}
}
}
#garden-page-seo {
.wrapper {
padding-top: 0;
padding-bottom: 75px;
.wrapper {
padding-top: 0;
padding-bottom: 75px;
h2 {
margin-left: 0;
max-width: 100%;
}
}
h2 {
margin-left: 0;
max-width: 100%;
}
}
}
.pagination {
display: flex;
align-items: center;
margin: 25px 0 50px;
justify-content: center;
width: 100%;
font-size: 16px;
gap: 10px;
display: flex;
align-items: center;
margin: 25px 0 50px;
justify-content: center;
width: 100%;
font-size: 16px;
gap: 10px;
a {
font-size: 16px;
}
a {
font-size: 16px;
}
}
.c-select {
p {
margin-bottom: 5px !important;
}
p {
margin-bottom: 5px !important;
}
select {
border: 1px solid #88b14b;
padding: 10px;
width: 100%;
}
select {
border: 1px solid #88b14b;
padding: 10px;
width: 100%;
}
}
body.page-id-2598 {
main {
section#korzysci {
.boxes.simple-cards {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
}
main {
section#korzysci {
.boxes.simple-cards {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
}
section#garden-page-seo {
.wrapper.wrapper--inner {
flex-direction: column;
padding-bottom: 0;
section#garden-page-seo {
.wrapper.wrapper--inner {
flex-direction: column;
padding-bottom: 0;
h2 {
margin: 0;
}
h2 {
margin: 0;
}
p {
margin: 0;
}
}
}
}
p {
margin: 0;
}
}
}
}
}
#calc-ch-1 {
.slide-data {
flex-wrap: wrap;
.slide-data {
flex-wrap: wrap;
.calc-texts {
width: calc(100% - 200px) !important;
}
}
.calc-texts {
width: calc(100% - 200px) !important;
}
}
}
.checkboxes-confirm {
padding: 5px 37px;
padding: 5px 37px;
}
.tabs_examples {
width: 100%;
width: 100%;
h3 {
font-size: 18px;
font-weight: 600;
color: #333;
}
h3 {
font-size: 18px;
font-weight: 600;
color: #333;
}
&-nav {
display: flex;
gap: 0;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
&-nav {
display: flex;
gap: 0;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
button {
flex: 1;
padding: 12px 20px;
border: none;
background: #f5f5f5;
font-size: 15px;
font-weight: 500;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
button {
flex: 1;
padding: 12px 20px;
border: none;
background: #f5f5f5;
font-size: 15px;
font-weight: 500;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
&:hover {
background: #eee;
color: #333;
}
&:hover {
background: #eee;
color: #333;
}
&.active {
background: #fff;
color: #88b14b;
border-bottom-color: #88b14b;
font-weight: 600;
}
}
}
&.active {
background: #fff;
color: #88b14b;
border-bottom-color: #88b14b;
font-weight: 600;
}
}
}
&-content {
padding: 0;
}
&-content {
padding: 0;
}
&-panel {
display: flex;
gap: 20px;
align-items: flex-start;
&-panel {
display: flex;
gap: 20px;
align-items: flex-start;
@media (max-width: 768px) {
flex-direction: column;
}
}
@media (max-width: 768px) {
flex-direction: column;
}
}
&-img {
flex: 0 0 45%;
&-img {
flex: 0 0 45%;
img {
width: 100%;
height: auto;
border-radius: 8px;
}
}
img {
width: 100%;
height: auto;
border-radius: 8px;
}
}
&-desc {
flex: 1;
&-desc {
flex: 1;
h4 {
font-size: 17px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
h4 {
font-size: 17px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
p {
font-size: 14px;
line-height: 1.6;
color: #555;
}
}
p {
font-size: 14px;
line-height: 1.6;
color: #555;
}
}
}
.c-datepicker {
p {
margin-bottom: 5px !important;
}
p {
margin-bottom: 5px !important;
}
}
.datepicker-wrapper {
position: relative;
width: 100%;
position: relative;
width: 100%;
}
.datepicker-input {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #88b14b;
padding: 10px 14px;
cursor: pointer;
background: #fff;
transition:
border-color 0.2s,
box-shadow 0.2s;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #88b14b;
padding: 10px 14px;
cursor: pointer;
background: #fff;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:hover {
border-color: #6d9338;
box-shadow: 0 0 0 3px rgba(136, 177, 75, 0.12);
}
&:hover {
border-color: #6d9338;
box-shadow: 0 0 0 3px rgba(136, 177, 75, 0.12);
}
span {
flex: 1;
font-size: 15px;
color: #333;
span {
flex: 1;
font-size: 15px;
color: #333;
&.placeholder {
color: #999;
}
}
&.placeholder {
color: #999;
}
}
}
.datepicker-chevron {
transition: transform 0.2s;
transition: transform 0.2s;
&.open {
transform: rotate(180deg);
}
&.open {
transform: rotate(180deg);
}
}
.datepicker-calendar {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 100;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 16px;
width: 310px;
animation: dpFadeIn 0.15s ease;
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 100;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 16px;
width: 310px;
animation: dpFadeIn 0.15s ease;
}
@keyframes dpFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
span {
font-weight: 600;
font-size: 15px;
color: #333;
}
span {
font-weight: 600;
font-size: 15px;
color: #333;
}
button {
width: 32px;
height: 32px;
border: none;
background: #f5f5f5;
border-radius: 50%;
font-size: 20px;
color: #555;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.2s,
color 0.2s;
line-height: 1;
button {
width: 32px;
height: 32px;
border: none;
background: #f5f5f5;
border-radius: 50%;
font-size: 20px;
color: #555;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.2s,
color 0.2s;
line-height: 1;
&:hover {
background: #88b14b;
color: #fff;
}
}
&:hover {
background: #88b14b;
color: #fff;
}
}
}
.datepicker-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 6px;
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 6px;
span {
font-size: 12px;
font-weight: 600;
color: #999;
text-transform: uppercase;
padding: 4px 0;
}
span {
font-size: 12px;
font-weight: 600;
color: #999;
text-transform: uppercase;
padding: 4px 0;
}
}
.datepicker-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.datepicker-day {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 14px;
color: #333;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 14px;
color: #333;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
&.empty {
cursor: default;
}
&.empty {
cursor: default;
}
&:not(.empty):not(.disabled):hover {
background: rgba(136, 177, 75, 0.15);
}
&:not(.empty):not(.disabled):hover {
background: rgba(136, 177, 75, 0.15);
}
&.today {
font-weight: 700;
border: 2px solid #88b14b;
}
&.today {
font-weight: 700;
border: 2px solid #88b14b;
}
&.selected {
background: #88b14b;
color: #fff;
font-weight: 600;
}
&.selected {
background: #88b14b;
color: #fff;
font-weight: 600;
}
&.disabled {
color: #ccc;
cursor: not-allowed;
}
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.swiper-wrapper.wrapper--inner {
background: #000;
background: #000;
.swiper-slide:first-child {
h1 {
flex: 0 0 35% !important;
}
.swiper-slide:first-child {
h1 {
flex: 0 0 35% !important;
}
.hero-slider-content {
flex: 0 0 65% !important;
}
}
.hero-slider-content {
flex: 0 0 65% !important;
}
}
}
section#price_tiles {
> .wrapper {
padding-bottom: 0;
}
>.wrapper {
padding-bottom: 0;
}
ol.price-tiles {
display: flex;
flex-direction: row;
column-gap: 30px;
row-gap: 30px;
flex-wrap: wrap;
ol.price-tiles {
display: flex;
flex-direction: row;
column-gap: 30px;
row-gap: 30px;
flex-wrap: wrap;
li.price-tile {
position: relative;
display: flex;
// flex-direction: column;
flex-direction: row;
gap: 30px;
// width: calc(100% / 3);
width: 80%;
li.price-tile {
position: relative;
display: flex;
// flex-direction: column;
flex-direction: row;
gap: 30px;
// width: calc(100% / 3);
width: 80%;
padding: 40px 22px 30px;
clip-path: polygon(
0% 5%,
5% 0%,
100% 0%,
100% 5%,
100% 100%,
0% 100%,
0% 5%
);
background-color: #f7f5f5;
padding: 40px 22px 30px;
clip-path: polygon(0% 5%,
5% 0%,
100% 0%,
100% 5%,
100% 100%,
0% 100%,
0% 5%);
background-color: #f7f5f5;
&:nth-child(2) {
margin: 0 auto;
}
&:nth-child(2) {
margin: 0 auto;
}
&:nth-child(3) {
margin-left: auto;
}
&:nth-child(3) {
margin-left: auto;
}
.price-tile--img {
img {
width: 300px;
}
}
.price-tile--data {
width: 100%;
}
}
}
.price-tile--img {
img {
width: 300px;
}
}
.price-tile--data {
width: 100%;
}
}
}
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next {
top: 30px !important;
}
#main-nav nav .main-menu {
gap: 15px !important
}
.page-id-2598 {
.heading--xl {
font-size: 30px !important;
}
}

338
wp-content/themes/ostal_WP/page-2101.php
View File

@@ -27,6 +27,63 @@
<?php if (have_posts()) : ?>
<div id="app">
<div class="page-data post">
<!-- Zimowy nagłówek i sekcje -->
<div v-if="isWinterSeason" class="winter-header" style="text-align: center; margin-bottom: 40px; padding: 30px; background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); border-radius: 12px; color: white;">
<h2 style="font-size: 28px; font-weight: 700; margin-bottom: 10px; color: white;">Przyjmujemy zamówienia na realizacje wiosna-lato 2026</h2>
<p style="font-size: 18px; margin: 0; color: rgba(255,255,255,0.95);">Zarezerwuj termin i cenę już teraz.</p>
</div>
<div v-if="isWinterSeason" class="winter-benefits" style="background-color: #f8f9fa; padding: 40px 30px; border-radius: 12px; margin-bottom: 40px; border: 2px solid #88b14b;">
<h3 style="font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #333; text-align: center;">Dlaczego warto zamówić zimą?</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
<div style="display: flex; align-items: flex-start; gap: 12px;">
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
<span style="font-size: 16px; color: #333;">Gwarancja ceny przed sezonem</span>
</div>
<div style="display: flex; align-items: flex-start; gap: 12px;">
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
<span style="font-size: 16px; color: #333;">Priorytetowy termin montażu</span>
</div>
<div style="display: flex; align-items: flex-start; gap: 12px;">
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
<span style="font-size: 16px; color: #333;">Spokojne przygotowanie projektu</span>
</div>
<div style="display: flex; align-items: flex-start; gap: 12px;">
<span style="color: #88b14b; font-size: 24px; flex-shrink: 0;">✓</span>
<span style="font-size: 16px; color: #333;">Brak kolejek produkcyjnych</span>
</div>
</div>
<div style="background-color: white; padding: 25px; border-radius: 8px; margin-bottom: 25px; border-left: 4px solid #88b14b;">
<p style="font-size: 16px; margin: 0; color: #666;">Podpisz umowę zimą – zarezerwuj termin realizacji na wiosnę.</p>
</div>
<div style="background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); padding: 25px; border-radius: 8px; color: white;">
<h4 style="font-size: 18px; font-weight: 600; margin-bottom: 15px; color: white;">ZIMOWY BONUS</h4>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px;">
<span style="font-size: 20px; flex-shrink: 0;">🎁</span>
<span style="font-size: 15px;">Darmowy upgrade szyby z ochroną przeciwsłoneczną gratis.</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px;">
<span style="font-size: 20px; flex-shrink: 0;">🎁</span>
<span style="font-size: 15px;">Darmowa konsultacja projektowa</span>
</li>
<li style="display: flex; align-items: flex-start; gap: 10px;">
<span style="font-size: 20px; flex-shrink: 0;">🎁</span>
<span style="font-size: 15px;">Priorytetowy termin montażu</span>
</li>
</ul>
</div>
<div style="text-align: center; margin-top: 25px; padding: 20px; background-color: #fff3cd; border-radius: 8px; border: 2px dashed #88b14b;">
<p style="font-size: 18px; font-weight: 600; margin: 0; color: #333;">
⏰ Dostępne terminy realizacji na sezon 2026: <span style="color: #88b14b; font-size: 24px;">{{ availableSlots }}</span>
</p>
</div>
</div>
<div id="calc-container">
<div class="calc-bar-fix">
<div id="calc-bar" ref="calcBar">
@@ -150,6 +207,15 @@
<div class="calc-box--title">
<h2>Krok 3</h2>
</div>
<div v-if="selected_option_1 === 0" style="margin-top: 20px; margin-bottom: 30px;">
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px; color: #333;">Orientacyjny budżet realizacji</h3>
<p style="font-size: 14px; line-height: 1.6; color: #666; margin-bottom: 20px;">
Na podstawie wybranego typu konstrukcji i podanych wymiarów możemy pokazać orientacyjny budżet realizacji.<br><br>
Każdy ogród zimowy projektujemy indywidualnie, dlatego podane kwoty mają charakter przykładowy i służą jedynie do wstępnej oceny, czy inwestycja mieści się w zakładanym budżecie.
</p>
</div>
<ul class="calc-radio" v-if="isLoaded && this.selected_option_1 !== 2">
<li
v-for="(step, index) in acfData_step_3"
@@ -187,53 +253,66 @@
</li>
</ul>
<div class="tabs_examples" v-if="selected_option_1 === 0" style="margin-top: 50px;">
<h3>Przykłady cen ogrodu zimowego 4x5m</h3>
<div class="tabs_examples-nav">
<button :class="{ active: activeExampleTab === 'standard' }" @click="activeExampleTab = 'standard'">Standard</button>
<button :class="{ active: activeExampleTab === 'comfort' }" @click="activeExampleTab = 'comfort'">Comfort</button>
<button :class="{ active: activeExampleTab === 'premium' }" @click="activeExampleTab = 'premium'">Premium</button>
<div class="price_examples" v-if="selected_option_1 === 0" style="margin-top: 20px;">
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #333;">PRZYKŁADY CEN</h3>
<div class="price_example-item" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #88b14b;">
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;">Przykład 1 Ogród zimowy 4 x 5 m (ok. 20 m2)</h4>
<ul style="list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #666;">
<li style="margin-bottom: 5px;">- dach jednospadowy</li>
<li style="margin-bottom: 5px;">- szyby zespolone jednokomorowe Ug=1,1</li>
<li style="margin-bottom: 5px;">- markiza dachowa zewnętrzna w cenie.</li>
</ul>
<p style="font-size: 15px; font-weight: 600; color: #88b14b; margin-top: 15px;">Orientacyjny budżet realizacji 120 000 – 150 000 zł netto</p>
</div>
<div class="tabs_examples-content">
<!-- Standard -->
<div class="tabs_examples-panel" v-if="activeExampleTab === 'standard'">
<div class="tabs_examples-img">
<img src="/wp-content/uploads/2026/02/image-1.png" alt="Ogród zimowy Standard 4x5m">
</div>
<div class="tabs_examples-desc">
<h4>Ogród zimowy Classic 1 Standard.<br>Cena brutto 114.390,00 zł (z VAT 8%)</h4>
<p>- Szyby izolacyjne Ug=1,1 na dachu i ścianach.<br>
- 1 szt. drzwi tarasowe uchylno-przesuwnymi PSK na frontowej ścianie.<br>
- Bez osłon przeciwsłonecznych. (w zacienione miejsca)</p>
</div>
</div>
<!-- Comfort -->
<div class="tabs_examples-panel" v-if="activeExampleTab === 'comfort'">
<div class="tabs_examples-img">
<img src="/wp-content/uploads/2026/02/image-2.png" alt="Ogród zimowy Comfort 4x5m">
</div>
<div class="tabs_examples-desc">
<h4>Ogród zimowy Classic 2 Comfort.<br>Cena brutto 142.819,00 zł (z VAT 8%)</h4>
<p>- Szyby izolacyjne Ug=1,1 na dachu i ścianach.<br>
- 2 szt. drzwi tarasowych uchylno-przesuwnymi PSK na ścianie frontowej i ścianie bocznej.<br>
- Komplet osłon przeciwsłonecznych na dachu. 2 osłony Veranda ster. Elektr + pilot.</p>
</div>
</div>
<!-- Premium -->
<div class="tabs_examples-panel" v-if="activeExampleTab === 'premium'">
<div class="tabs_examples-img">
<img src="/wp-content/uploads/2026/02/image-3.png" alt="Ogród zimowy Premium 4x5m">
</div>
<div class="tabs_examples-desc">
<h4>Ogród zimowy Classic 3 Premium.<br>Cena brutto 203.550,00 zł (z VAT 8%)</h4>
<p>- Szyby Energooszczędne Ug=0,5 na dachu i ścianach.<br>
- 1 szt. drzwi tarasowych uchylno-przesuwnymi PSK na frontowej ścianie + 1 szt. drzwi unoszono przesuwne HS na bocznej ścianie.<br>
- Komplet osłon przeciwsłonecznych na dachu. 2 osłony Veranda ster. Elektr. + pilot + czujnik słoneczno-wiatrowy.<br>
- Osłony przeciwsłoneczne ścian żaluzje C80 sterowane ele. + pilot.<br>
- Okno HS w dachu przesuwane, sterowane ele.<br>
- oświetlenie punktowe LED z pilotem.</p>
</div>
</div>
<div class="price_example-item" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #88b14b;">
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;">Przykład 2 Ogród zimowy 3 x 4 m (ok. 12 m2)</h4>
<ul style="list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #666;">
<li style="margin-bottom: 5px;">- dach jednospadowy</li>
<li style="margin-bottom: 5px;">- szyby zespolone jednokomorowe Ug=1,1</li>
<li style="margin-bottom: 5px;">- markiza zewnętrzna.</li>
</ul>
<p style="font-size: 15px; font-weight: 600; color: #88b14b; margin-top: 15px;">Orientacyjny budżet realizacji 80 000 – 100 000 zł netto</p>
</div>
<div class="price_example-item" style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #88b14b;">
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;">Przykład 3 Ogród zimowy 5 x 6 m (ok. 30 m2)</h4>
<ul style="list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #666;">
<li style="margin-bottom: 5px;">- Dach jednospadowy lub wielospadowy.</li>
<li style="margin-bottom: 5px;">- większe przeszklenia szyby Ug=1,1</li>
<li style="margin-bottom: 5px;">- markiza zewnętrzna.</li>
</ul>
<p style="font-size: 15px; font-weight: 600; color: #88b14b; margin-top: 15px;">Orientacyjny budżet realizacji 170 000 – 210 000 zł netto</p>
</div>
<div style="margin-top: 30px; padding: 20px; background-color: #fff; border-radius: 8px;">
<p style="font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 20px; font-weight: 500;">
Większość naszych realizacji mieści się w powyższych zakresach po dopasowaniu projektu do potrzeb i budżetu klienta.
</p>
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #333;">Ostateczna cena zależy m.in. od:</h4>
<ul style="list-style: none; padding: 0; margin: 0 0 25px 0; font-size: 14px; color: #666;">
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
<span style="position: absolute; left: 0; color: #88b14b;">•</span> bryły i rodzaju dachu
</li>
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
<span style="position: absolute; left: 0; color: #88b14b;">•</span> ilości i rodzaju przeszkleń
</li>
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
<span style="position: absolute; left: 0; color: #88b14b;">•</span> systemów otwierania
</li>
<li style="margin-bottom: 8px; padding-left: 20px; position: relative;">
<span style="position: absolute; left: 0; color: #88b14b;">•</span> dodatkowego wyposażenia
</li>
</ul>
<a href="https://ostal.pl/kontakt/"
style="display: inline-block; background-color: #88b14b; color: white; padding: 15px 30px; border-radius: 6px; text-decoration: none; font-size: 16px; font-weight: 600; text-align: center; transition: background-color 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
onmouseover="this.style.backgroundColor='#6a8f3a'"
onmouseout="this.style.backgroundColor='#88b14b'">
Porozmawiajmy o Twoim projekcie
</a>
</div>
</div>
</div>
@@ -282,25 +361,36 @@
<div class="calc-box--title">
<h2>Krok 4</h2>
</div>
<div style="margin-top: 20px; margin-bottom: 30px;">
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px; color: #333;">Wyślij zapytanie o swój projekt</h3>
<p style="font-size: 14px; line-height: 1.6; color: #666; margin-bottom: 10px;">
Na podstawie podanych informacji przygotujemy wstępne dopasowanie projektu oraz orientacyjny budżet realizacji.
</p>
<p style="font-size: 14px; line-height: 1.6; color: #666;">
Realizacje całorocznych ogrodów zimowych rozpoczynają się od około 100 000 zł netto.
</p>
</div>
<ul class="calc-texts" v-if="isLoaded">
<li>
<p>{{acfData.acf.step_4.miejsce_montazu}}</p>
<input v-model="configData.step_4.miejsce_montazu" type="text" name="miejsce_montazu" id="calc_miejsce_montazu" class="input" require>
</li>
<li>
<p>{{acfData.acf.step_4.name}}</p>
<p>Imię i nazwisko</p>
<input v-model="configData.step_4.name" type="text" name="name" id="calc_name" class="input" require>
</li>
<li>
<p>{{acfData.acf.step_4.email}}</p>
<p>Email</p>
<input v-model="configData.step_4.email" type="email" name="email" id="calc_email" class="input" require>
</li>
<li>
<p>{{acfData.acf.step_4.phone}}</p>
<p>Telefon</p>
<input v-model="configData.step_4.phone" type="tel" name="phone" id="calc_phone" class="input" require>
</li>
<li>
<p>{{acfData.acf.step_4.attachment}}</p>
<p>Miejsce montażu i kod pocztowy</p>
<input v-model="configData.step_4.miejsce_montazu" type="text" name="miejsce_montazu" id="calc_miejsce_montazu" class="input" require>
</li>
<li>
<p>Załącznik (opcjonalnie)</p>
<div class="file-upload-area"
:class="{ 'dragover': isDragOver }"
@dragover.prevent="isDragOver = true"
@@ -344,58 +434,27 @@
</li>
</ul>
<ul v-if="selected_option_1 === 0" class="calc-texts" style="margin-top: 20px;">
<li class="c-datepicker">
<p>Planowany termin montażu</p>
<div class="datepicker-wrapper">
<div class="datepicker-input" @click="showDatepicker = !showDatepicker">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#88b14b" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span :class="{ placeholder: !configData.step_4.planned_date }">
{{ configData.step_4.planned_date || 'Wybierz datę' }}
</span>
<svg class="datepicker-chevron" :class="{ open: showDatepicker }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="datepicker-calendar" v-if="showDatepicker">
<div class="datepicker-header">
<button type="button" @click.stop="dpPrevMonth">&lsaquo;</button>
<span>{{ dpMonthName }} {{ dpYear }}</span>
<button type="button" @click.stop="dpNextMonth">&rsaquo;</button>
</div>
<div class="datepicker-weekdays">
<span>Pn</span><span>Wt</span><span>Śr</span><span>Cz</span><span>Pt</span><span>Sb</span><span>Nd</span>
</div>
<div class="datepicker-days">
<span v-for="blank in dpFirstDayOffset" class="datepicker-day empty"></span>
<span
v-for="day in dpDaysInMonth"
:key="day"
class="datepicker-day"
:class="{
selected: dpIsSelected(day),
disabled: dpIsDisabled(day),
today: dpIsToday(day)
}"
@click.stop="dpSelectDay(day)"
>{{ day }}</span>
</div>
</div>
</div>
<ul class="calc-texts" style="margin-top: 30px;">
<li class="c-select">
<p>Planowany termin realizacji:</p>
<select v-model="configData.step_4.planned_season">
<option value="">-- Wybierz --</option>
<option value="Wiosna">Wiosna</option>
<option value="Lato">Lato</option>
<option value="Jesień">Jesień</option>
<option value="Zima">Zima</option>
<option value="Jeszcze nie wiem">Jeszcze nie wiem</option>
</select>
</li>
<li class="c-select">
<p>Orientacyjny budżet</p>
<p>Budżet inwestycji:</p>
<select v-model="configData.step_4.budget_range">
<option value="">-- Wybierz --</option>
<option value="100.000 zł - 150.000 zł">100.000 zł - 150.000 zł</option>
<option value="150.000 zł - 200.000 zł">150.000 zł - 200.000 zł</option>
<option value="250.000 zł - 300.000 zł">250.000 zł - 300.000 zł</option>
<option value="Pow. 300.000 zł">Pow. 300.000 zł</option>
<option value="do 100 tyś.">do 100 tyś.</option>
<option value="100-150 tyś.">100-150 tyś.</option>
<option value="150-200 tyś.">150-200 tyś.</option>
<option value="Powyżej 200 tyś.">Powyżej 200 tyś.</option>
<option value="Chcę omówić">Chcę omówić</option>
</select>
</li>
<li class="c-select">
@@ -408,7 +467,7 @@
</li>
</ul>
<div v-if="selected_option_1 === 0" class="checkboxes-confirm" style="margin-top: 20px;">
<div v-if="selected_option_1 === 0" class="checkboxes-confirm" style="margin-top: 30px;">
<label style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; cursor: pointer;">
<input type="checkbox" v-model="configData.step_4.confirm_budget" style="margin-top: 4px; flex-shrink: 0;">
<span style="font-size: 14px;">Rozumiem, że realizacje całorocznych ogrodów zimowych zaczynają się od około 120 000 zł netto.</span>
@@ -419,7 +478,7 @@
</label>
</div>
<button class="btn_send btn btn-primary" type="submit" @click="sendEmail()" :disabled="isSended">Wyślij</button>
<button class="btn_send btn btn-primary" type="submit" @click="sendEmail()" :disabled="isSended" style="margin-top: 30px;">Wyślij zapytanie i sprawdź budżet projektu</button>
</div>
<div v-if="windowWidth > 1000">
@@ -495,13 +554,11 @@
selected_option_3: null,
progressBar: 25,
windowWidth: 0,
activeExampleTab: 'standard',
showDatepicker: false,
dpMonth: new Date().getMonth(),
dpYear: new Date().getFullYear(),
uploadedFiles: [],
isDragOver: false,
fileError: '',
isWinterSeason: false,
availableSlots: 8,
acfData: {
acf: {}
@@ -521,7 +578,8 @@
name: '',
email: '',
phone: '',
planned_date: '',
miejsce_montazu: '',
planned_season: '',
budget_range: '',
is_owner: '',
confirm_budget: false,
@@ -531,6 +589,7 @@
}
},
async beforeMount() {
this.checkWinterSeason();
this.getWindowWidth();
try {
const res = await fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`);
@@ -543,6 +602,12 @@
}
},
methods: {
checkWinterSeason() {
const now = new Date();
const month = now.getMonth(); // 0-11 (0 = styczeń, 11 = grudzień)
// Sezon zimowy: listopad (10), grudzień (11), styczeń (0), luty (1), marzec (2), kwiecień (3)
this.isWinterSeason = month >= 10 || month <= 3;
},
setStep_1(value, index) {
this.configData.step_1 = value
this.selected_option_1 = index
@@ -667,19 +732,16 @@
return true;
};
return checkFields(configData, ['step_3_extra', 'planned_date', 'budget_range', 'is_owner', 'confirm_budget', 'confirm_deposit']);
return checkFields(configData, ['step_3_extra', 'confirm_budget', 'confirm_deposit']);
},
checkFields() {
const basicFieldsFilled = this.areAllFieldsFilled(this.configData);
// Dla ogrodów zimowych (selected_option_1 === 0) wymagaj dodatkowych pól i checkboxów
// Dla ogrodów zimowych (selected_option_1 === 0) wymagaj checkboxów
if (this.selected_option_1 === 0) {
if (!this.configData.step_4.planned_date ||
!this.configData.step_4.budget_range ||
!this.configData.step_4.is_owner ||
!this.configData.step_4.confirm_budget ||
if (!this.configData.step_4.confirm_budget ||
!this.configData.step_4.confirm_deposit) {
return false;
}
@@ -720,36 +782,6 @@
}
}
},
dpPrevMonth() {
if (this.dpMonth === 0) { this.dpMonth = 11; this.dpYear--; }
else { this.dpMonth--; }
},
dpNextMonth() {
if (this.dpMonth === 11) { this.dpMonth = 0; this.dpYear++; }
else { this.dpMonth++; }
},
dpSelectDay(day) {
if (this.dpIsDisabled(day)) return;
const d = String(day).padStart(2, '0');
const m = String(this.dpMonth + 1).padStart(2, '0');
this.configData.step_4.planned_date = `${d}.${m}.${this.dpYear}`;
this.showDatepicker = false;
},
dpIsSelected(day) {
const d = String(day).padStart(2, '0');
const m = String(this.dpMonth + 1).padStart(2, '0');
return this.configData.step_4.planned_date === `${d}.${m}.${this.dpYear}`;
},
dpIsDisabled(day) {
const date = new Date(this.dpYear, this.dpMonth, day);
const today = new Date();
today.setHours(0,0,0,0);
return date < today;
},
dpIsToday(day) {
const now = new Date();
return day === now.getDate() && this.dpMonth === now.getMonth() && this.dpYear === now.getFullYear();
},
handleFileDrop(e) {
this.isDragOver = false;
const files = Array.from(e.dataTransfer.files);
@@ -833,26 +865,10 @@
mounted() {
window.addEventListener('resize', this.getWindowWidth);
this.getWindowWidth();
document.addEventListener('click', (e) => {
if (this.showDatepicker && !e.target.closest('.datepicker-wrapper')) {
this.showDatepicker = false;
}
});
},
computed: {
debug() {
return this.configData
},
dpMonthName() {
const names = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
return names[this.dpMonth];
},
dpDaysInMonth() {
return new Date(this.dpYear, this.dpMonth + 1, 0).getDate();
},
dpFirstDayOffset() {
const d = new Date(this.dpYear, this.dpMonth, 1).getDay();
return d === 0 ? 6 : d - 1;
}
},

92
wp-content/themes/ostal_WP/page-2598.php
View File

@@ -26,19 +26,19 @@ $gallery_2 = [
$benefits = [
[
'title' => '',
'text' => 'Dodatkową powierzchnię użytkową przez cały rok.',
'text' => 'dodatkową powierzchnię użytkową przez cały rok.',
],
[
'title' => '',
'text' => 'Ochronę przed deszczem, wiatrem i niską temperaturą oraz przed palącym letnim słońcem.',
'text' => 'ochronę przed deszczem, wiatrem, niską temperaturą oraz przed palącym słońcem.',
],
[
'title' => '',
'text' => 'Estetyczne i trwałe rozwiązanie klasy premium.',
'text' => 'estetyczne i trwałe rozwiązanie klasy premium.',
],
[
'title' => '',
'text' => 'Przewidywalny harmonogram i jasne warunki współpracy.',
'text' => 'przewidywalny harmonogram i jasne warunki współpracy.',
]
];
@@ -96,12 +96,12 @@ $collaboration = [
<h2 class="section-heading heading heading--md textRight">
Sprawdzone systemy aluminiowe</h2>
<div class="col-text-content">
<p>Pracujemy na <strong>izolowanych systemach aluminiowych</strong>, z szybami o bardzo dobrych parametrach cieplnych (Ug = 0,5), z możliwością zastosowania:</p>
<p>
- dachów jednospadowych i wielospadowych<br>
- zintegrowanych markiz zewnętrznych, żaluzji fasadowych i osłon typu ZIIIP<br>
- przeszkleń stałych, przesuwnych i składanych.
</p>
<p>Pracujemy na <strong>izolowanych systemach aluminiowych</strong>, z szybami o bardzo dobrych parametrach cieplnych (Ug = 1,1 lub 0,5), z możliwością zastosowania:</p>
<ul style="list-style: none; padding: 0;">
<li>– dachów jednospadowych i wielospadowych</li>
<li>– zintegrowanych markiz zewnętrznych, żaluzji fasadowych i osłon typu ZIIIP</li>
<li>– przeszkleń stałych, przesuwnych i składanych.</li>
</ul>
<p>To rozwiązania stosowane również w nowoczesnych elewacjach i obiektach komercyjnych.</p>
</div>
</div>
@@ -123,25 +123,34 @@ $collaboration = [
<div class="col col-text">
<h2 class="section-heading heading heading--md textRight">Doświadczenie w realizacjach dla firm</h2>
<div class="col-text-content">
<p>Od lat realizujemy dla klientów biznesowych <strong>systemy aluminiowe</strong>, żaluzje fasadowe i rolety zewnętrzne w obiektach komercyjnych.</p>
<p>Od lat realizujemy dla klientów biznesowych <strong>systemy aluminiowe, stolarkę</strong>, żaluzje fasadowe i rolety zewnętrzne w obiektach komercyjnych.</p>
<p>Ogrody zimowe są naturalnym rozszerzeniem tych systemów — opartym na tej samej technologii, standardach montażu i podejściu projektowym.</p>
</div>
</div>
</div>
</section>
<section id="collaboration" class="section-boxes-repeater ">
<section id="collaboration" class="section-boxes-repeater">
<div class="wrapper wrapper--inner">
<h2 class="section-heading heading--md">Jak wygląda współpraca?</h2>
<div class="boxes simple-cards">
<?php foreach ($collaboration as $item) : ?>
<div class="box-single ">
<span class="box-counter"></span>
<!-- <div class="box-image">
<img src="https://ostal.pl/wp-content/uploads/2023/10/Vector.png" alt="" class="img-auto">
</div> -->
<div class="box-content">
<h3 class="box-content__heading heading--sm"><?= $item; ?></h3>
<div class="collaboration-steps" style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
<?php foreach ($collaboration as $index => $item) : ?>
<div class="collaboration-step" style="display: flex; align-items: flex-start; gap: 20px; margin-bottom: <?= ($index < count($collaboration) - 1) ? '40px' : '0' ?>; position: relative;">
<!-- Numer kroku -->
<div class="step-number" style="flex-shrink: 0; width: 60px; height: 60px; background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; box-shadow: 0 4px 8px rgba(136, 177, 75, 0.3); position: relative; z-index: 2;">
<?= $index + 1 ?>
</div>
<!-- Linia łącząca (dla wszystkich oprócz ostatniego) -->
<?php if ($index < count($collaboration) - 1) : ?>
<div class="step-connector" style="position: absolute; left: 30px; top: 60px; width: 2px; height: 40px; background: linear-gradient(to bottom, #88b14b, #e0e0e0); z-index: 1;"></div>
<?php endif; ?>
<!-- Treść kroku -->
<div class="step-content" style="flex: 1; background-color: #f8f9fa; padding: 20px 25px; border-radius: 8px; border-left: 4px solid #88b14b; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease;">
<h3 class="step-title" style="margin: 0; font-size: 18px; font-weight: 600; color: #333; line-height: 1.4;">
<?= $item; ?>
</h3>
</div>
</div>
<?php endforeach; ?>
@@ -149,6 +158,42 @@ $collaboration = [
</div>
</section>
<style>
.collaboration-step:hover .step-content {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(136, 177, 75, 0.15);
}
.collaboration-step:hover .step-number {
transform: scale(1.1);
}
@media (max-width: 768px) {
.collaboration-step {
gap: 15px !important;
}
.step-number {
width: 50px !important;
height: 50px !important;
font-size: 20px !important;
}
.step-connector {
left: 25px !important;
top: 50px !important;
}
.step-content {
padding: 15px 20px !important;
}
.step-title {
font-size: 16px !important;
}
}
</style>
<!-- <section id="galeria" class="section-gallery ">
<div class="wrapper wrapper--inner ">
<h2 class="section-heading heading--md text-center">
@@ -187,9 +232,8 @@ $collaboration = [
<section id="garden-page-seo" class="two-cols-with-bg bg-dark" style="background-image: url('https://ostal.pl/wp-content/uploads/2021/05/hero-about.jpg');">
<span class="bg-filter"></span>
<div class="wrapper wrapper--inner">
<h2>Realizacje całorocznych ogrodów zimowych rozpoczynają się od ok. 120 000 zł netto.</h2>
<!-- <p>Powiedz, do czego ma służyć przestrzeń i w jakich miesiącach ma być użytkowana. Dobierzemy technologię, przygotujemy koncepcję i harmonogram.</p> -->
<a href="#hero_box" class="btn btn-primary">Umów rozmowę</a>
<h2>👉 Realizacje całorocznych ogrodów zimowych rozpoczynają się od ok. 100 000 zł netto.</h2>
<a href="#hero_box" class="btn btn-primary">Umów rozmowę / Zapytaj o rozwiązanie dla swojej firmy</a>
</div>
</section>
<?php get_footer(); ?>