{"id":255,"date":"2026-07-20T16:17:52","date_gmt":"2026-07-20T16:17:52","guid":{"rendered":"https:\/\/kordeckiraj.pl\/?page_id=255"},"modified":"2026-07-20T16:39:06","modified_gmt":"2026-07-20T16:39:06","slug":"255-2","status":"publish","type":"page","link":"https:\/\/kordeckiraj.pl\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Kordecki-Raj | Architektura Ogrodowa i Konstrukcje Drewniane<\/title>\n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&amp;family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&amp;display=swap\" rel=\"stylesheet\">\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            green: '#2e5a36', \/\/ G\u0142\u0119boka ziele\u0144 z logo\n                            greenDark: '#1d3b23',\n                            greenLight: '#eef4ef',\n                            wood: '#c084fc', \/\/ fallback\n                            cream: '#fcfbf7', \/\/ Eleganckie t\u0142o off-white\n                            accentWood: '#c68a4c', \/\/ Kolor ciep\u0142ego d\u0119bu\/drewna\n                            accentWoodDark: '#a36d35',\n                        }\n                    },\n                    fontFamily: {\n                        sans: ['Inter', 'sans-serif'],\n                        serif: ['Playfair Display', 'serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    <!-- FontAwesome for Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <!-- AlpineJS for Interactive components (Gallery, Configurator, Menu) -->\n    <script defer=\"\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\"><\/script>\n    <style>\n        .wood-gradient {\n            background: linear-gradient(135deg, #c68a4c 0%, #a36d35 100%);\n        }\n        .green-gradient {\n            background: linear-gradient(135deg, #2e5a36 0%, #1d3b23 100%);\n        }\n    <\/style>\n\n\n\n    <header class=\"fixed top-0 left-0 w-full bg-brand-cream\/90 backdrop-blur-md z-50 border-b border-brand-green\/10 transition-all duration-300\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex items-center justify-between h-20 sm:h-24\">\n                <!-- Logo i Nazwa -->\n                <a href=\"#hero\" class=\"flex items-center gap-3 group\">\n                    <img decoding=\"async\" src=\"http:\/\/kordeckiraj.pl\/wp-content\/uploads\/2026\/02\/Logo.png\" alt=\"Kordecki-Raj Logo\" class=\"h-14 sm:h-16 w-auto object-contain transition-transform duration-300 group-hover:scale-105\">\n                    <div class=\"flex flex-col\">\n                        <span class=\"font-serif text-xl sm:text-2xl font-bold text-brand-green tracking-tight leading-none\">Kordecki-Raj<\/span>\n                        <span class=\"text-[10px] sm:text-xs uppercase tracking-[0.2em] text-brand-accentWood font-semibold mt-1\">Konstrukcje Drewniane<\/span>\n                    <\/div>\n                <\/a>\n\n                <!-- Nawigacja Desktop -->\n                <nav class=\"hidden md:flex items-center gap-8\">\n                    <a href=\"#o-nas\" class=\"text-sm font-medium text-brand-greenDark hover:text-brand-accentWood transition\">O nas<\/a>\n                    <a href=\"#oferta\" class=\"text-sm font-medium text-brand-greenDark hover:text-brand-accentWood transition\">Zakres us\u0142ug<\/a>\n                    <a href=\"#galeria\" class=\"text-sm font-medium text-brand-greenDark hover:text-brand-accentWood transition\">Nasze realizacje<\/a>\n                    <a href=\"#konfigurator\" class=\"text-sm font-medium text-brand-greenDark hover:text-brand-accentWood transition\">Wycena online<\/a>\n                    <a href=\"#kontakt\" class=\"text-sm font-medium text-brand-greenDark hover:text-brand-accentWood transition\">Kontakt<\/a>\n                <\/nav>\n\n                <!-- Przyciski Szybkiego Kontaktu - Zgodnie z wytycznymi: brak numeru u g\u00f3ry, \u0142adny przycisk Kontakt w d\u00f3\u0142 -->\n                <div class=\"hidden lg:flex items-center gap-4\">\n                    <a href=\"#kontakt\" class=\"bg-brand-green text-white text-xs uppercase tracking-wider font-semibold px-6 py-3 rounded-full hover:bg-brand-accentWood transition-all duration-300 shadow-md shadow-brand-green\/10 flex items-center gap-2\">\n                        Kontakt <i class=\"fa-solid fa-arrow-down\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <!-- Przycisk menu mobilnego -->\n                <button @click=\"mobileMenuOpen = !mobileMenuOpen\" class=\"md:hidden text-brand-green p-2 focus:outline-none\" aria-label=\"Toggle Menu\">\n                    <i class=\"fa-solid fa-bars text-2xl\" x-show=\"!mobileMenuOpen\"><\/i>\n                    <i class=\"fa-solid fa-xmark text-2xl\" x-show=\"mobileMenuOpen\" style=\"display: none;\"><\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Menu mobilne -->\n        <div x-show=\"mobileMenuOpen\" x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"opacity-0 -translate-y-4\" x-transition:enter-end=\"opacity-100 translate-y-0\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"opacity-100 translate-y-0\" x-transition:leave-end=\"opacity-0 -translate-y-4\" class=\"md:hidden bg-brand-cream border-b border-brand-green\/10 py-6 px-4 space-y-4\" style=\"display: none;\">\n            <a href=\"#o-nas\" @click=\"mobileMenuOpen = false\" class=\"block text-lg font-medium text-brand-greenDark py-2 hover:text-brand-accentWood\">O nas<\/a>\n            <a href=\"#oferta\" @click=\"mobileMenuOpen = false\" class=\"block text-lg font-medium text-brand-greenDark py-2 hover:text-brand-accentWood\">Zakres us\u0142ug<\/a>\n            <a href=\"#galeria\" @click=\"mobileMenuOpen = false\" class=\"block text-lg font-medium text-brand-greenDark py-2 hover:text-brand-accentWood\">Nasze realizacje<\/a>\n            <a href=\"#konfigurator\" @click=\"mobileMenuOpen = false\" class=\"block text-lg font-medium text-brand-greenDark py-2 hover:text-brand-accentWood\">Wycena online<\/a>\n            <a href=\"#kontakt\" @click=\"mobileMenuOpen = false\" class=\"block text-lg font-medium text-brand-greenDark py-2 hover:text-brand-accentWood text-brand-accentWood font-semibold\">Kontakt i Dane firmy<\/a>\n            \n            <div class=\"pt-4 border-t border-brand-green\/10 flex flex-col gap-3\">\n                <a href=\"tel:+48512893920\" class=\"flex items-center gap-3 text-brand-green font-medium py-1\">\n                    <i class=\"fa-solid fa-phone\"><\/i> 512 893 920\n                <\/a>\n                <a href=\"tel:+48519764387\" class=\"flex items-center gap-3 text-brand-green font-medium py-1\">\n                    <i class=\"fa-solid fa-phone\"><\/i> 519 764 387\n                <\/a>\n                <a href=\"mailto:biuro@kordeckiraj.pl\" class=\"flex items-center gap-3 text-brand-green font-medium py-1\">\n                    <i class=\"fa-solid fa-envelope\"><\/i> biuro@kordeckiraj.pl\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <section id=\"hero\" class=\"relative min-h-screen flex items-center pt-24 pb-16 overflow-hidden\">\n        <!-- T\u0142o dekoracyjne -->\n        <div class=\"absolute inset-0 z-0 bg-gradient-to-br from-brand-greenLight\/60 via-brand-cream to-brand-cream\"><\/div>\n        <div class=\"absolute -top-40 -right-40 w-96 h-96 rounded-full bg-brand-green\/5 blur-3xl\"><\/div>\n        <div class=\"absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-brand-accentWood\/5 blur-3xl\"><\/div>\n\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\n                <!-- Tre\u015b\u0107 po lewej -->\n                <div class=\"lg:col-span-7 space-y-8 text-center lg:text-left\">\n                    <div class=\"inline-flex items-center gap-2 bg-brand-green\/10 text-brand-green px-4 py-2 rounded-full text-xs sm:text-sm font-semibold tracking-wide\">\n                        <i class=\"fa-solid fa-tree\"><\/i> Profesjonalne Konstrukcje Drewniane z Ma\u0142opolski\n                    <\/div>\n                    \n                    <h1 class=\"font-serif text-4xl sm:text-5xl lg:text-6xl font-bold text-brand-greenDark leading-[1.15]\">\n                        Tw\u00f3j w\u0142asny zak\u0105tek spokoju w <span class=\"text-brand-accentWood italic\">ogrodowym raju<\/span>\n                    <\/h1>\n                    \n                    <p class=\"text-base sm:text-lg text-gray-600 max-w-2xl mx-auto lg:mx-0 leading-relaxed\">\n                        Tworzymy wyj\u0105tkowe, solidne i precyzyjnie wykonane konstrukcje z drewna. Specjalizujemy si\u0119 w nowoczesnych altanach, komfortowych wiatach, bezpiecznych domkach dla dzieci, eleganckich tarasach oraz urokliwej ma\u0142ej architekturze ogrodowej. Zobacz nasz\u0105 ofert\u0119 i popro\u015b o darmow\u0105 wycen\u0119 online!\n                    <\/p>\n\n                    <div class=\"flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2\">\n                        <a href=\"#kontakt\" class=\"w-full sm:w-auto text-center px-8 py-4 bg-brand-green text-white font-semibold rounded-xl hover:bg-brand-accentWood transition-all duration-300 shadow-lg shadow-brand-green\/20 hover:-translate-y-1\">\n                            Skontaktuj si\u0119 z nami\n                        <\/a>\n                        <a href=\"#konfigurator\" class=\"w-full sm:w-auto text-center px-8 py-4 bg-transparent border-2 border-brand-green text-brand-green font-semibold rounded-xl hover:bg-brand-green hover:text-white transition-all duration-300 hover:-translate-y-1\">\n                            <i class=\"fa-solid fa-sliders mr-2\"><\/i> Darmowa Wycena\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Wizualizacja po prawej (G\u0142\u00f3wne zdj\u0119cie altany z okladki) -->\n                <div class=\"lg:col-span-5 relative\">\n                    <div class=\"relative mx-auto max-w-md lg:max-w-none\">\n                        <!-- Dekoracyjne ramki -->\n                        <div class=\"absolute inset-0 border-2 border-brand-accentWood rounded-[2.5rem] translate-x-4 translate-y-4 -z-10 transition-transform duration-500 group-hover:translate-x-6\"><\/div>\n                        <div class=\"overflow-hidden rounded-[2rem] shadow-2xl aspect-[4\/3] sm:aspect-square md:aspect-[4\/3] lg:aspect-[5\/6]\">\n                            <img decoding=\"async\" src=\"http:\/\/kordeckiraj.pl\/wp-content\/uploads\/2026\/02\/Zdj-okladka.jpg\" alt=\"Nowoczesna altana ogrodowa Kordecki-Raj\" class=\"w-full h-full object-cover hover:scale-105 transition-transform duration-700\">\n                        <\/div>\n                        <!-- Etykieta zdj\u0119cia -->\n                        <div class=\"absolute bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-lg border border-brand-green\/5 flex items-center gap-3\">\n                            <div class=\"w-10 h-10 rounded-full bg-brand-greenLight flex items-center justify-center text-brand-green\">\n                                <i class=\"fa-solid fa-award\"><\/i>\n                            <\/div>\n                            <div>\n                                <p class=\"text-xs text-gray-400 leading-none\">Nasza realizacja<\/p>\n                                <p class=\"text-sm font-bold text-brand-greenDark\">Nowoczesna Altana z Aneksami<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"o-nas\" class=\"py-20 bg-white relative\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n                <!-- Zdj\u0119cie pokazuj\u0105ce detal \u0142\u0105czenia (ciesielstwo precyzyjne) -->\n                <div class=\"order-2 lg:order-1 relative\">\n                    <div class=\"grid grid-cols-2 gap-4\">\n                        <div class=\"space-y-4\">\n                            <div class=\"overflow-hidden rounded-2xl shadow-md aspect-[3\/4]\">\n                                <img decoding=\"async\" src=\"20260314_121314_2.jpeg\" alt=\"Detale precyzyjnego \u0142\u0105czenia belek\" class=\"w-full h-full object-cover hover:scale-105 transition-all duration-500\">\n                            <\/div>\n                            <div class=\"overflow-hidden rounded-2xl shadow-md aspect-square\">\n                                <img decoding=\"async\" src=\"671038391_122108929929279955_4899350479386480488_n_2.jpg\" alt=\"Elementy wiaty drewnianej\" class=\"w-full h-full object-cover hover:scale-105 transition-all duration-500\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"space-y-4 pt-8\">\n                            <div class=\"overflow-hidden rounded-2xl shadow-md aspect-square\">\n                                <img decoding=\"async\" src=\"zdj 2_2.jpg\" alt=\"Altana wewn\u0105trz\" class=\"w-full h-full object-cover hover:scale-105 transition-all duration-500\">\n                            <\/div>\n                            <div class=\"overflow-hidden rounded-2xl shadow-md aspect-[3\/4]\">\n                                <img decoding=\"async\" src=\"20251204_133600_2.jpg\" alt=\"Zadaszenie tarasu\" class=\"w-full h-full object-cover hover:scale-105 transition-all duration-500\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <!-- Ma\u0142y ozdobny detal \"Ciesielstwo rzemie\u015blnicze\" -->\n                    <div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 bg-brand-green text-white p-6 rounded-2xl shadow-xl text-center border-4 border-white max-w-[180px]\">\n                        <p class=\"font-serif text-2xl font-bold\">100%<\/p>\n                        <p class=\"text-xs uppercase tracking-wider font-semibold opacity-90\">Precyzja &amp; Pasja<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Tre\u015b\u0107 O nas -->\n                <div class=\"order-1 lg:order-2 space-y-6\">\n                    <div class=\"text-brand-accentWood font-bold text-sm uppercase tracking-widest flex items-center gap-2\">\n                        <span class=\"w-8 h-[2px] bg-brand-accentWood\"><\/span> O FIRMIE\n                    <\/div>\n                    <h2 class=\"font-serif text-3xl sm:text-4xl font-bold text-brand-greenDark\">\n                        Pasja do pracy w drewnie i rzemios\u0142o przek\u0142adane na lata\n                    <\/h2>\n                    <p class=\"text-gray-600 leading-relaxed text-base sm:text-lg\">\n                        W <strong>Kordecki-Raj<\/strong> \u0142\u0105czymy tradycyjne ciesielstwo z nowoczesnym designem ogrodowym. Nasz\u0105 misj\u0105 jest tworzenie przydomowych oaz komfortu, w kt\u00f3rych natura harmonizuje z funkcjonalno\u015bci\u0105. Ka\u017cdy projekt traktujemy ca\u0142kowicie indywidualnie \u2013 od szkicu, przez precyzyjny dob\u00f3r surowca, a\u017c po finalny monta\u017c na Twojej posesji.\n                    <\/p>\n                    <div class=\"space-y-4 pt-2\">\n                        <div class=\"flex items-start gap-4\">\n                            <span class=\"w-10 h-10 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0\">\n                                <i class=\"fa-solid fa-compass-drafting text-lg\"><\/i>\n                            <\/span>\n                            <div>\n                                <h4 class=\"font-semibold text-brand-greenDark\">Najlepsze, selekcjonowane drewno<\/h4>\n                                <p class=\"text-sm text-gray-500\">Dbamy o najwy\u017csz\u0105 jako\u015b\u0107 surowca, kt\u00f3ry odpowiednio impregnujemy na d\u0142ugie lata odporno\u015bci na warunki atmosferyczne.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"flex items-start gap-4\">\n                            <span class=\"w-10 h-10 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0\">\n                                <i class=\"fa-solid fa-hammer text-lg\"><\/i>\n                            <\/span>\n                            <div>\n                                <h4 class=\"font-semibold text-brand-greenDark\">Precyzja i bezpiecze\u0144stwo<\/h4>\n                                <p class=\"text-sm text-gray-500\">Nasze konstrukcje (szczeg\u00f3lnie domki dla dzieci oraz obszerne wiaty i tarasy) s\u0105 bezpieczne, stabilne i spe\u0142niaj\u0105 najwy\u017csze standardy in\u017cynierii drewnianej.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"flex items-start gap-4\">\n                            <span class=\"w-10 h-10 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0\">\n                                <i class=\"fa-solid fa-face-smile text-lg\"><\/i>\n                            <\/span>\n                            <div>\n                                <h4 class=\"font-semibold text-brand-greenDark\">Lokalny charakter (Rajsko, Ma\u0142opolska)<\/h4>\n                                <p class=\"text-sm text-gray-500\">Dzia\u0142amy na terenie Ma\u0142opolski i okolic, zapewniaj\u0105c bezpo\u015bredni kontakt, pomiar u klienta oraz bezproblemowy dow\u00f3z z monta\u017cem.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"oferta\" class=\"py-20 bg-brand-greenLight\/40 relative\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"text-center max-w-3xl mx-auto mb-16 space-y-4\">\n                <div class=\"text-brand-accentWood font-bold text-sm uppercase tracking-widest inline-flex items-center gap-2\">\n                    <span class=\"w-4 h-[2px] bg-brand-accentWood\"><\/span> OFERTA <span class=\"w-4 h-[2px] bg-brand-accentWood\"><\/span>\n                <\/div>\n                <h2 class=\"font-serif text-3xl sm:text-4xl font-bold text-brand-greenDark\">\n                    Tworzymy drewnian\u0105 architektur\u0119 Twoich marze\u0144\n                <\/h2>\n                <p class=\"text-gray-600\">\n                    Odkryj nasz\u0105 specjalizacj\u0119. Wszystkie nasze konstrukcje projektowane s\u0105 z naciskiem na nowoczesny styl, stabilno\u015b\u0107 oraz trwa\u0142o\u015b\u0107.\n                <\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6\">\n                <!-- Us\u0142uga 1: Altany Ogrodowe -->\n                <div class=\"bg-white rounded-3xl p-6 shadow-sm border border-brand-green\/5 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 flex flex-col justify-between group\">\n                    <div class=\"space-y-4\">\n                        <div class=\"w-14 h-14 rounded-2xl bg-brand-green text-white flex items-center justify-center text-2xl shadow-md shadow-brand-green\/20 group-hover:bg-brand-accentWood transition-colors duration-300\">\n                            <i class=\"fa-solid fa-person-shelter\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-serif text-lg font-bold text-brand-greenDark leading-tight\">Altany Ogrodowe<\/h3>\n                        <p class=\"text-gray-500 text-xs sm:text-sm leading-relaxed\">\n                            Nowoczesne oraz tradycyjne altany rekreacyjne. Idealne miejsce na rodzinny obiad, grill ze znajomymi lub chwile odpoczynku z ksi\u0105\u017ck\u0105.\n                        <\/p>\n                    <\/div>\n                    <a href=\"#konfigurator\" class=\"mt-6 inline-flex items-center gap-2 text-brand-green font-semibold text-xs sm:text-sm hover:text-brand-accentWood group-hover:translate-x-1 transition-all duration-300\">\n                        Skonfiguruj altan\u0119 <i class=\"fa-solid fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <!-- Us\u0142uga 2: Wiaty i Carporty -->\n                <div class=\"bg-white rounded-3xl p-6 shadow-sm border border-brand-green\/5 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 flex flex-col justify-between group\">\n                    <div class=\"space-y-4\">\n                        <div class=\"w-14 h-14 rounded-2xl bg-brand-green text-white flex items-center justify-center text-2xl shadow-md shadow-brand-green\/20 group-hover:bg-brand-accentWood transition-colors duration-300\">\n                            <i class=\"fa-solid fa-car-tunnel\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-serif text-lg font-bold text-brand-greenDark leading-tight\">Wiaty &amp; Carporty<\/h3>\n                        <p class=\"text-gray-500 text-xs sm:text-sm leading-relaxed\">\n                            Mocne i nowoczesne zadaszenia samochodowe (carporty), wiaty na drewno oraz schowki narz\u0119dziowe z designerskimi lamelami.\n                        <\/p>\n                    <\/div>\n                    <a href=\"#konfigurator\" class=\"mt-6 inline-flex items-center gap-2 text-brand-green font-semibold text-xs sm:text-sm hover:text-brand-accentWood group-hover:translate-x-1 transition-all duration-300\">\n                        Zapytaj o wiat\u0119 <i class=\"fa-solid fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <!-- NOWA Us\u0142uga 3: Drewniane Tarasy -->\n                <div class=\"bg-white rounded-3xl p-6 shadow-sm border border-brand-green\/5 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 flex flex-col justify-between group\">\n                    <div class=\"space-y-4\">\n                        <div class=\"w-14 h-14 rounded-2xl bg-brand-green text-white flex items-center justify-center text-2xl shadow-md shadow-brand-green\/20 group-hover:bg-brand-accentWood transition-colors duration-300\">\n                            <i class=\"fa-solid fa-layer-group\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-serif text-lg font-bold text-brand-greenDark leading-tight\">Drewniane Tarasy<\/h3>\n                        <p class=\"text-gray-500 text-xs sm:text-sm leading-relaxed\">\n                            Trwa\u0142e, stabilne i pi\u0119kne tarasy z drewna krajowego, egzotycznego oraz kompozytu. Tworzymy wymarzone pod\u0142o\u017ce dla Twoich mebli ogrodowych.\n                        <\/p>\n                    <\/div>\n                    <a href=\"#konfigurator\" class=\"mt-6 inline-flex items-center gap-2 text-brand-green font-semibold text-xs sm:text-sm hover:text-brand-accentWood group-hover:translate-x-1 transition-all duration-300\">\n                        Zaprojektuj taras <i class=\"fa-solid fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <!-- Us\u0142uga 4: Domki dla Dzieci -->\n                <div class=\"bg-white rounded-3xl p-6 shadow-sm border border-brand-green\/5 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 flex flex-col justify-between group\">\n                    <div class=\"space-y-4\">\n                        <div class=\"w-14 h-14 rounded-2xl bg-brand-green text-white flex items-center justify-center text-2xl shadow-md shadow-brand-green\/20 group-hover:bg-brand-accentWood transition-colors duration-300\">\n                            <i class=\"fa-solid fa-child-reaching\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-serif text-lg font-bold text-brand-greenDark leading-tight\">Domki dla Dzieci<\/h3>\n                        <p class=\"text-gray-500 text-xs sm:text-sm leading-relaxed\">\n                            Bezpieczne place zabaw, domki na s\u0142upkach ze zje\u017cd\u017calniami i hu\u015btawkami. Spe\u0142nienie marze\u0144 ka\u017cdego malucha we w\u0142asnym ogrodzie.\n                        <\/p>\n                    <\/div>\n                    <a href=\"#konfigurator\" class=\"mt-6 inline-flex items-center gap-2 text-brand-green font-semibold text-xs sm:text-sm hover:text-brand-accentWood group-hover:translate-x-1 transition-all duration-300\">\n                        Wyce\u0144 domek <i class=\"fa-solid fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <!-- Us\u0142uga 5: Architektura Ogrodowa -->\n                <div class=\"bg-white rounded-3xl p-6 shadow-sm border border-brand-green\/5 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 flex flex-col justify-between group\">\n                    <div class=\"space-y-4\">\n                        <div class=\"w-14 h-14 rounded-2xl bg-brand-green text-white flex items-center justify-center text-2xl shadow-md shadow-brand-green\/20 group-hover:bg-brand-accentWood transition-colors duration-300\">\n                            <i class=\"fa-solid fa-wheat-awn\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-serif text-lg font-bold text-brand-greenDark leading-tight\">Ma\u0142a Architektura<\/h3>\n                        <p class=\"text-gray-500 text-xs sm:text-sm leading-relaxed\">\n                            Zadaszenia taras\u00f3w, ozdobne studnie ogrodowe, drewniane donice, meble tarasowe oraz inne niestandardowe projekty ciesielskie na wymiar.\n                        <\/p>\n                    <\/div>\n                    <a href=\"#kontakt\" class=\"mt-6 inline-flex items-center gap-2 text-brand-green font-semibold text-xs sm:text-sm hover:text-brand-accentWood group-hover:translate-x-1 transition-all duration-300\">\n                        Inny pomys\u0142 <i class=\"fa-solid fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"galeria\" class=\"py-20 bg-white\" x-data=\"{ \n        isOpen: false, \n        currentImageIndex: 0,\n        images: [\n            { src: 'Zdj okladka_2.jpg', title: 'Nowoczesna altana ogrodowa z lamelami', category: 'altany' },\n            { src: 'zdj 2_2.jpg', title: 'Wn\u0119trze altany ogrodowej ze sto\u0142em biesiadnym', category: 'altany' },\n            { src: '671038391_122108929929279955_4899350479386480488_n_2.jpg', title: 'Zabudowana wiata ogrodowa \/ schowek narz\u0119dziowy', category: 'wiaty' },\n            { src: '20251204_133600_2.jpg', title: 'Elegancka konstrukcja drewnianego tarasu i zadaszenia', category: 'tarasy' },\n            { src: '656083893_122106579939279955_3649495151597782278_n_2.jpg', title: 'Domek dla dzieci ze zje\u017cd\u017calni\u0105, hu\u015btawk\u0105 i piaskownic\u0105', category: 'domki' },\n            { src: 'Zdj bibliotek1_2.jpg', title: 'Stylowy domek dla dzieci na s\u0142upkach w kolorystyce grafit-biel', category: 'domki' },\n            { src: '20260314_121314_2.jpeg', title: 'Precyzyjne, tradycyjne \u0142\u0105czenia ciesielskie (zbli\u017cenie)', category: 'inne' },\n            { src: '669781804_122108524551279955_6805165238584605599_n_2.jpg', title: 'Drewniana ozdobna studnia ogrodowa z daszkiem', category: 'inne' }\n        ],\n        openLightbox(index) {\n            this.currentImageIndex = index;\n            this.isOpen = true;\n        },\n        nextImage() {\n            this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;\n        },\n        prevImage() {\n            this.currentImageIndex = (this.currentImageIndex - 1 + this.images.length) % this.images.length;\n        }\n    }\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6\">\n                <div class=\"space-y-4\">\n                    <div class=\"text-brand-accentWood font-bold text-sm uppercase tracking-widest flex items-center gap-2\">\n                        <span class=\"w-8 h-[2px] bg-brand-accentWood\"><\/span> PORTFOLIO\n                    <\/div>\n                    <h2 class=\"font-serif text-3xl sm:text-4xl font-bold text-brand-greenDark\">Nasze ostatnie realizacje<\/h2>\n                    <p class=\"text-gray-500 max-w-xl\">\n                        Zobacz wybrane zdj\u0119cia naszych prac. Dbamy o detale konstrukcyjne, estetyk\u0119 oraz doskona\u0142e wyko\u0144czenie.\n                    <\/p>\n                <\/div>\n                \n                <!-- Filtry galerii z now\u0105 kategori\u0105 'Tarasy' -->\n                <div class=\"flex flex-wrap gap-2\">\n                    <button @click=\"activeTab = 'all'\" :class=\"activeTab === 'all' ? 'bg-brand-green text-white' : 'bg-brand-greenLight text-brand-green hover:bg-brand-green\/10'\" class=\"px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition duration-300\">\n                        Wszystkie ({images.length})\n                    <\/button>\n                    <button @click=\"activeTab = 'altany'\" :class=\"activeTab === 'altany' ? 'bg-brand-green text-white' : 'bg-brand-greenLight text-brand-green hover:bg-brand-green\/10'\" class=\"px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition duration-300\">\n                        Altany\n                    <\/button>\n                    <button @click=\"activeTab = 'wiaty'\" :class=\"activeTab === 'wiaty' ? 'bg-brand-green text-white' : 'bg-brand-greenLight text-brand-green hover:bg-brand-green\/10'\" class=\"px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition duration-300\">\n                        Wiaty\n                    <\/button>\n                    <button @click=\"activeTab = 'tarasy'\" :class=\"activeTab === 'tarasy' ? 'bg-brand-green text-white' : 'bg-brand-greenLight text-brand-green hover:bg-brand-green\/10'\" class=\"px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition duration-300\">\n                        Tarasy\n                    <\/button>\n                    <button @click=\"activeTab = 'domki'\" :class=\"activeTab === 'domki' ? 'bg-brand-green text-white' : 'bg-brand-greenLight text-brand-green hover:bg-brand-green\/10'\" class=\"px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition duration-300\">\n                        Domki dla dzieci\n                    <\/button>\n                    <button @click=\"activeTab = 'inne'\" :class=\"activeTab === 'inne' ? 'bg-brand-green text-white' : 'bg-brand-greenLight text-brand-green hover:bg-brand-green\/10'\" class=\"px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition duration-300\">\n                        Inne realizacje\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Grid ze zdj\u0119ciami -->\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n                <template x-for=\"(image, index) in images\" :key=\"index\">\n                    <div x-show=\"activeTab === 'all' || activeTab === image.category\" x-transition:enter=\"transition ease-out duration-300\" x-transition:enter-start=\"opacity-0 scale-95\" x-transition:enter-end=\"opacity-100 scale-100\" class=\"group relative overflow-hidden rounded-3xl shadow-md aspect-[4\/3] cursor-pointer bg-gray-100\" @click=\"openLightbox(index)\">\n                        <!-- Obrazek -->\n                        <img :src=\"image.src\" :alt=\"image.title\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out\">\n                        \n                        <!-- Overlay po najechaniu -->\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-brand-greenDark\/90 via-brand-greenDark\/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6\">\n                            <span class=\"text-brand-accentWood text-xs font-bold uppercase tracking-wider mb-1\" x-text=\"image.category === 'altany' ? 'Altana' : image.category === 'wiaty' ? 'Wiata' : image.category === 'tarasy' ? 'Taras' : image.category === 'domki' ? 'Domek dla dzieci' : 'Inna konstrukcja'\"><\/span>\n                            <h3 class=\"text-white font-serif text-lg font-bold leading-snug\" x-text=\"image.title\"><\/h3>\n                            <div class=\"mt-3 inline-flex items-center gap-2 text-white\/90 text-sm font-semibold\">\n                                <span>Powi\u0119ksz zdj\u0119cie<\/span>\n                                <i class=\"fa-solid fa-maximize text-xs\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/template>\n            <\/div>\n\n            <!-- LIGHTBOX MODAL -->\n            <div x-show=\"isOpen\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/95 px-4\" x-transition:enter=\"transition ease-out duration-300\" x-transition:enter-start=\"opacity-0\" x-transition:enter-end=\"opacity-100\" x-transition:leave=\"transition ease-in duration-200\" x-transition:leave-start=\"opacity-100\" x-transition:leave-end=\"opacity-0\" style=\"display: none;\" @keydown.escape.window=\"isOpen = false\" @keydown.arrow-right.window=\"nextImage()\" @keydown.arrow-left.window=\"prevImage()\">\n                \n                <!-- Przycisk zamkni\u0119cia -->\n                <button @click=\"isOpen = false\" class=\"absolute top-6 right-6 text-white hover:text-brand-accentWood text-3xl focus:outline-none transition z-50\">\n                    <i class=\"fa-solid fa-xmark\"><\/i>\n                <\/button>\n\n                <!-- Przycisk Poprzednie -->\n                <button @click=\"prevImage()\" class=\"absolute left-6 text-white hover:text-brand-accentWood text-4xl focus:outline-none transition p-4 hidden md:block\">\n                    <i class=\"fa-solid fa-chevron-left\"><\/i>\n                <\/button>\n\n                <!-- G\u0142\u00f3wny kontener obrazka -->\n                <div class=\"max-w-5xl w-full max-h-[85vh] flex flex-col items-center justify-center relative\">\n                    <img :src=\"images[currentImageIndex].src\" class=\"max-h-[75vh] max-w-full object-contain rounded-lg shadow-2xl\">\n                    <div class=\"text-center mt-4 px-4\">\n                        <p class=\"text-brand-accentWood text-sm font-semibold uppercase tracking-widest\" x-text=\"images[currentImageIndex].category\"><\/p>\n                        <h3 class=\"text-white font-serif text-lg sm:text-xl font-medium mt-1\" x-text=\"images[currentImageIndex].title\"><\/h3>\n                        <p class=\"text-gray-500 text-xs mt-1\" x-text=\"`${currentImageIndex + 1} \/ ${images.length}`\"><\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Przycisk Nast\u0119pne -->\n                <button @click=\"nextImage()\" class=\"absolute right-6 text-white hover:text-brand-accentWood text-4xl focus:outline-none transition p-4 hidden md:block\">\n                    <i class=\"fa-solid fa-chevron-right\"><\/i>\n                <\/button>\n\n                <!-- Swipe mobilny -->\n                <div class=\"absolute inset-x-0 bottom-0 top-20 md:hidden z-10\" x-data=\"{ xStart: 0, xEnd: 0 }\" @touchstart=\"xStart = $event.touches[0].clientX\" @touchend=\"xEnd = $event.changedTouches[0].clientX; if (xStart - xEnd &gt; 50) nextImage(); if (xEnd - xStart &gt; 50) prevImage();\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"konfigurator\" class=\"py-20 bg-brand-green text-white relative overflow-hidden\" x-data=\"{\n        step: 1,\n        selectedType: '',\n        customNotes: '',\n        dimensions: '',\n        email: '',\n        phone: '',\n        name: '',\n        formSubmitted: false,\n        validationError: '',\n        submitConfigurator() {\n            this.formSubmitted = true;\n            this.step = 3;\n        }\n    }\">\n        <!-- Element ozdobny z drewna -->\n        <div class=\"absolute inset-0 opacity-10 bg-[radial-gradient(#c68a4c_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n        \n        <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n            <div class=\"text-center space-y-4 mb-12\">\n                <span class=\"bg-brand-accentWood\/20 text-brand-accentWood border border-brand-accentWood\/30 text-xs uppercase tracking-widest font-semibold px-4 py-1.5 rounded-full inline-block\">\n                    Szybka Wycena Online\n                <\/span>\n                <h2 class=\"font-serif text-3xl sm:text-4xl font-bold\">Zaprojektuj swoj\u0105 idealn\u0105 konstrukcj\u0119<\/h2>\n                <p class=\"text-brand-greenLight\/80 max-w-lg mx-auto text-sm sm:text-base\">\n                    Wype\u0142nij proste kroki, aby przes\u0142a\u0107 nam podstawowe informacje. Skontaktujemy si\u0119 z gotow\u0105 propozycj\u0105 cenow\u0105.\n                <\/p>\n            <\/div>\n\n            <!-- Krokownik -->\n            <div class=\"flex items-center justify-center mb-8 gap-4 max-w-md mx-auto\">\n                <div class=\"flex items-center gap-2\">\n                    <span :class=\"step &gt;= 1 ? 'bg-brand-accentWood text-white' : 'bg-brand-greenDark text-brand-greenLight'\" class=\"w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition duration-300\">1<\/span>\n                    <span class=\"text-xs font-semibold hidden sm:inline\">Konstrukcja<\/span>\n                <\/div>\n                <div class=\"h-[2px] w-12 bg-brand-greenDark\"><\/div>\n                <div class=\"flex items-center gap-2\">\n                    <span :class=\"step &gt;= 2 ? 'bg-brand-accentWood text-white' : 'bg-brand-greenDark text-brand-greenLight'\" class=\"w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition duration-300\">2<\/span>\n                    <span class=\"text-xs font-semibold hidden sm:inline\">Szczeg\u00f3\u0142y &amp; Kontakt<\/span>\n                <\/div>\n                <div class=\"h-[2px] w-12 bg-brand-greenDark\"><\/div>\n                <div class=\"flex items-center gap-2\">\n                    <span :class=\"step &gt;= 3 ? 'bg-brand-accentWood text-white' : 'bg-brand-greenDark text-brand-greenLight'\" class=\"w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition duration-300\">3<\/span>\n                    <span class=\"text-xs font-semibold hidden sm:inline\">Gotowe<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Karta formularza -->\n            <div class=\"bg-brand-greenDark\/80 backdrop-blur-md rounded-[2.5rem] p-6 sm:p-10 border border-white\/10 shadow-2xl\">\n                \n                <!-- B\u0142\u0119dy Walidacji (Zamiast Alertu) -->\n                <div x-show=\"validationError\" x-transition=\"\" class=\"mb-6 p-4 bg-red-900\/60 border border-red-500\/30 text-red-200 rounded-2xl text-sm flex items-center gap-3\">\n                    <i class=\"fa-solid fa-triangle-exclamation text-lg text-brand-accentWood\"><\/i>\n                    <span x-text=\"validationError\"><\/span>\n                <\/div>\n\n                <!-- KROK 1: Wyb\u00f3r Typu Konstrukcji -->\n                <div x-show=\"step === 1\" class=\"space-y-6\">\n                    <h3 class=\"text-xl font-bold font-serif text-center sm:text-left\">Co chcesz wybudowa\u0107?<\/h3>\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n                        <!-- Opcja 1 -->\n                        <div @click=\"selectedType = 'Altana'; validationError = ''\" :class=\"selectedType === 'Altana' ? 'border-brand-accentWood bg-brand-accentWood\/10' : 'border-white\/10 hover:border-white\/30 bg-white\/5'\" class=\"border rounded-2xl p-5 cursor-pointer text-center transition-all duration-200 flex flex-col justify-between\">\n                            <div>\n                                <span class=\"text-3xl text-brand-accentWood block mb-3\"><i class=\"fa-solid fa-person-shelter\"><\/i><\/span>\n                                <span class=\"font-bold text-base block\">Altana Ogrodowa<\/span>\n                            <\/div>\n                            <span class=\"text-xs text-brand-greenLight\/60 mt-2 block\">Zabudowana, nowoczesna lub klasyczna<\/span>\n                        <\/div>\n                        <!-- Opcja 2 -->\n                        <div @click=\"selectedType = 'Wiata'; validationError = ''\" :class=\"selectedType === 'Wiata' ? 'border-brand-accentWood bg-brand-accentWood\/10' : 'border-white\/10 hover:border-white\/30 bg-white\/5'\" class=\"border rounded-2xl p-5 cursor-pointer text-center transition-all duration-200 flex flex-col justify-between\">\n                            <div>\n                                <span class=\"text-3xl text-brand-accentWood block mb-3\"><i class=\"fa-solid fa-car-tunnel\"><\/i><\/span>\n                                <span class=\"font-bold text-base block\">Wiata \/ Carport<\/span>\n                            <\/div>\n                            <span class=\"text-xs text-brand-greenLight\/60 mt-2 block\">Zadaszenia aut, drewutnie, lamele<\/span>\n                        <\/div>\n                        <!-- NOWA Opcja 3: Taras -->\n                        <div @click=\"selectedType = 'Taras'; validationError = ''\" :class=\"selectedType === 'Taras' ? 'border-brand-accentWood bg-brand-accentWood\/10' : 'border-white\/10 hover:border-white\/30 bg-white\/5'\" class=\"border rounded-2xl p-5 cursor-pointer text-center transition-all duration-200 flex flex-col justify-between\">\n                            <div>\n                                <span class=\"text-3xl text-brand-accentWood block mb-3\"><i class=\"fa-solid fa-layer-group\"><\/i><\/span>\n                                <span class=\"font-bold text-base block\">Drewniany Taras<\/span>\n                            <\/div>\n                            <span class=\"text-xs text-brand-greenLight\/60 mt-2 block\">Trwa\u0142e podesty z d\u0119bu, modrzewia, kompozytu<\/span>\n                        <\/div>\n                        <!-- Opcja 4 -->\n                        <div @click=\"selectedType = 'Domek'; validationError = ''\" :class=\"selectedType === 'Domek' ? 'border-brand-accentWood bg-brand-accentWood\/10' : 'border-white\/10 hover:border-white\/30 bg-white\/5'\" class=\"border rounded-2xl p-5 cursor-pointer text-center transition-all duration-200 flex flex-col justify-between\">\n                            <div>\n                                <span class=\"text-3xl text-brand-accentWood block mb-3\"><i class=\"fa-solid fa-child-reaching\"><\/i><\/span>\n                                <span class=\"font-bold text-base block\">Domek dla dzieci<\/span>\n                            <\/div>\n                            <span class=\"text-xs text-brand-greenLight\/60 mt-2 block\">Ze zje\u017cd\u017calni\u0105, hu\u015btawkami, k\u0142adkami<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Inny projekt -->\n                    <div class=\"pt-4 border-t border-white\/15\">\n                        <label class=\"block text-sm font-semibold mb-2\">Inna konstrukcja lub kr\u00f3tki opis zapotrzebowania:<\/label>\n                        <textarea x-model=\"customNotes\" @input=\"validationError = ''\" rows=\"3\" placeholder=\"Opisz swoje wymagania (np. taras z zadaszeniem, studnia ogrodowa, specyficzne wymiary...)\" class=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 text-white placeholder-brand-greenLight\/40 focus:outline-none focus:border-brand-accentWood transition\"><\/textarea>\n                    <\/div>\n\n                    <div class=\"flex justify-end pt-4\">\n                        <button @click=\"if(selectedType !== '' || customNotes !== '') { step = 2; validationError = ''; } else { validationError = 'Prosimy wybra\u0107 typ konstrukcji lub wpisa\u0107 kr\u00f3tki opis projektu!' }\" class=\"bg-brand-accentWood hover:bg-brand-accentWoodDark text-white font-bold px-8 py-3 rounded-xl transition duration-300 flex items-center gap-2\">\n                            Dalej <i class=\"fa-solid fa-chevron-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- KROK 2: Parametry & Kontakt -->\n                <div x-show=\"step === 2\" class=\"space-y-6\" style=\"display: none;\">\n                    <h3 class=\"text-xl font-bold font-serif\">Wymiary i dane kontaktowe<\/h3>\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                        <div>\n                            <label class=\"block text-sm font-semibold mb-2\">Orientacyjne wymiary (np. 4x5m):<\/label>\n                            <input type=\"text\" x-model=\"dimensions\" placeholder=\"Wpisz szacowany rozmiar\" class=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 text-white placeholder-brand-greenLight\/40 focus:outline-none focus:border-brand-accentWood transition\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-sm font-semibold mb-2\">Twoje Imi\u0119 i Nazwisko:<\/label>\n                            <input type=\"text\" x-model=\"name\" @input=\"validationError = ''\" placeholder=\"Np. Jan Kowalski\" class=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 text-white placeholder-brand-greenLight\/40 focus:outline-none focus:border-brand-accentWood transition\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-sm font-semibold mb-2\">Numer Telefonu:<\/label>\n                            <input type=\"tel\" x-model=\"phone\" @input=\"validationError = ''\" placeholder=\"Np. 512 893 920\" class=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 text-white placeholder-brand-greenLight\/40 focus:outline-none focus:border-brand-accentWood transition\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-sm font-semibold mb-2\">Adres E-mail:<\/label>\n                            <input type=\"email\" x-model=\"email\" @input=\"validationError = ''\" placeholder=\"Np. klient@gmail.com\" class=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 text-white placeholder-brand-greenLight\/40 focus:outline-none focus:border-brand-accentWood transition\">\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"flex justify-between items-center pt-6 border-t border-white\/15\">\n                        <button @click=\"step = 1; validationError = '';\" class=\"text-brand-greenLight hover:text-white font-semibold flex items-center gap-2\">\n                            <i class=\"fa-solid fa-chevron-left\"><\/i> Wr\u00f3\u0107\n                        <\/button>\n                        <button @click=\"if(name !== '' &amp;&amp; (phone !== '' || email !== '')) { submitConfigurator() } else { validationError = 'Prosimy poda\u0107 imi\u0119 oraz przynajmniej jeden spos\u00f3b kontaktu (telefon lub e-mail)!' }\" class=\"bg-brand-accentWood hover:bg-brand-accentWoodDark text-white font-bold px-10 py-3.5 rounded-xl transition duration-300\">\n                            Wy\u015blij Zapytanie o Wycen\u0119\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- KROK 3: Sukces \/ Podsumowanie -->\n                <div x-show=\"step === 3\" class=\"text-center py-8 space-y-6\" style=\"display: none;\">\n                    <div class=\"w-20 h-20 bg-brand-accentWood\/20 text-brand-accentWood rounded-full flex items-center justify-center text-4xl mx-auto border border-brand-accentWood\/40\">\n                        <i class=\"fa-solid fa-check\"><\/i>\n                    <\/div>\n                    <div class=\"space-y-2\">\n                        <h3 class=\"text-2xl font-serif font-bold text-white\">Zapytanie zosta\u0142o wys\u0142ane!<\/h3>\n                        <p class=\"text-brand-greenLight\/80 max-w-md mx-auto text-sm sm:text-base\">\n                            Dzi\u0119kujemy <span class=\"font-bold text-white\" x-text=\"name\"><\/span>. Tw\u00f3j formularz dla konstrukcji <span class=\"font-bold text-white\" x-text=\"selectedType || 'Indywidualna'\"><\/span> zosta\u0142 pomy\u015blnie przetworzony.\n                        <\/p>\n                        <p class=\"text-xs text-brand-accentWood\">\n                            Skontaktujemy si\u0119 z Tob\u0105 telefonicznie na numer <span class=\"font-semibold\" x-text=\"phone\"><\/span> lub mailowo na adres <span class=\"font-semibold\" x-text=\"email\"><\/span> w ci\u0105gu najbli\u017cszych 24h.\n                        <\/p>\n                    <\/div>\n                    <div class=\"pt-4\">\n                        <button @click=\"step = 1; selectedType = ''; customNotes = ''; dimensions = ''; name = ''; phone = ''; email = ''; validationError = '';\" class=\"bg-white\/10 hover:bg-white\/20 text-white text-xs uppercase tracking-wider font-semibold px-6 py-3 rounded-full transition\">\n                            Wyce\u0144 kolejn\u0105 konstrukcj\u0119\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"kontakt\" class=\"py-20 bg-brand-cream relative\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12\">\n                <!-- Informacje Kontaktowe -->\n                <div class=\"lg:col-span-5 space-y-8\">\n                    <div class=\"space-y-4\">\n                        <div class=\"text-brand-accentWood font-bold text-sm uppercase tracking-widest flex items-center gap-2\">\n                            <span class=\"w-8 h-[2px] bg-brand-accentWood\"><\/span> KONTAKT\n                        <\/div>\n                        <h2 class=\"font-serif text-3xl sm:text-4xl font-bold text-brand-greenDark\">Porozmawiajmy o Twoim projekcie<\/h2>\n                        <p class=\"text-gray-600\">\n                            Ch\u0119tnie doradzimy, dokonamy pomiar\u00f3w i zaproponujemy najlepsze rozwi\u0105zanie dla Twojego ogrodu. Wybierz dogodn\u0105 dla siebie form\u0119 kontaktu.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Lista Kontakt\u00f3w -->\n                    <div class=\"space-y-4\">\n                        <a href=\"tel:+48512893920\" class=\"flex items-center gap-4 p-4 bg-white rounded-2xl border border-brand-green\/5 hover:border-brand-green\/20 hover:shadow-md transition group\">\n                            <span class=\"w-12 h-12 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0 text-xl group-hover:bg-brand-green group-hover:text-white transition duration-300\">\n                                <i class=\"fa-solid fa-phone\"><\/i>\n                            <\/span>\n                            <div>\n                                <p class=\"text-xs text-gray-400\">Telefon G\u0142\u00f3wny<\/p>\n                                <p class=\"text-base font-bold text-brand-greenDark\">512 893 920<\/p>\n                            <\/div>\n                        <\/a>\n                        <a href=\"tel:+48519764387\" class=\"flex items-center gap-4 p-4 bg-white rounded-2xl border border-brand-green\/5 hover:border-brand-green\/20 hover:shadow-md transition group\">\n                            <span class=\"w-12 h-12 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0 text-xl group-hover:bg-brand-green group-hover:text-white transition duration-300\">\n                                <i class=\"fa-solid fa-phone\"><\/i>\n                            <\/span>\n                            <div>\n                                <p class=\"text-xs text-gray-400\">Telefon Dodatkowy<\/p>\n                                <p class=\"text-base font-bold text-brand-greenDark\">519 764 387<\/p>\n                            <\/div>\n                        <\/a>\n                        <a href=\"mailto:biuro@kordeckiraj.pl\" class=\"flex items-center gap-4 p-4 bg-white rounded-2xl border border-brand-green\/5 hover:border-brand-green\/20 hover:shadow-md transition group\">\n                            <span class=\"w-12 h-12 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0 text-xl group-hover:bg-brand-green group-hover:text-white transition duration-300\">\n                                <i class=\"fa-solid fa-envelope\"><\/i>\n                            <\/span>\n                            <div>\n                                <p class=\"text-xs text-gray-400\">Napisz Wiadomo\u015b\u0107<\/p>\n                                <p class=\"text-base font-bold text-brand-greenDark\">biuro@kordeckiraj.pl<\/p>\n                            <\/div>\n                        <\/a>\n                        <div class=\"flex items-center gap-4 p-4 bg-white rounded-2xl border border-brand-green\/5\">\n                            <span class=\"w-12 h-12 rounded-xl bg-brand-greenLight text-brand-green flex items-center justify-center flex-shrink-0 text-xl\">\n                                <i class=\"fa-solid fa-map-location-dot\"><\/i>\n                            <\/span>\n                            <div>\n                                <p class=\"text-xs text-gray-400\">Lokalizacja \/ Adres<\/p>\n                                <p class=\"text-sm font-bold text-brand-greenDark\">Rajsko, 32-822 Rajsko, woj. ma\u0142opolskie<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Dane Rejestrowe -->\n                    <div class=\"p-6 bg-brand-greenLight\/60 rounded-3xl space-y-3\">\n                        <p class=\"text-xs font-semibold text-brand-green uppercase tracking-wider\">Pe\u0142ne dane rejestrowe firmy:<\/p>\n                        <p class=\"text-sm font-serif font-bold text-brand-greenDark leading-tight\">Karol Kordecki &#8222;KORDECKI-RAJ&#8221;<\/p>\n                        <div class=\"grid grid-cols-2 gap-4 pt-2 text-xs\">\n                            <div>\n                                <p class=\"text-gray-400\">NIP<\/p>\n                                <p class=\"font-bold text-brand-greenDark flex items-center gap-1\">\n                                    8691965683 \n                                    <button onclick=\"document.execCommand('copy')\" class=\"hover:text-brand-accentWood text-[10px]\" title=\"Kopiuj NIP\" aria-label=\"Kopiuj NIP\">\n                                        <i class=\"fa-regular fa-copy\"><\/i>\n                                    <\/button>\n                                <\/p>\n                            <\/div>\n                            <div>\n                                <p class=\"text-gray-400\">REGON<\/p>\n                                <p class=\"font-bold text-brand-greenDark\">544728111<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Formularz Kontaktowy -->\n                <div class=\"lg:col-span-7 bg-white rounded-[2.5rem] p-6 sm:p-10 shadow-sm border border-brand-green\/5\" x-data=\"{\n                    sent: false,\n                    fName: '',\n                    fPhone: '',\n                    fEmail: '',\n                    fMsg: '',\n                    sendContact() {\n                        this.sent = true;\n                    }\n                }\">\n                    <h3 class=\"font-serif text-2xl font-bold text-brand-greenDark mb-2\">Wy\u015blij szybkie zapytanie<\/h3>\n                    <p class=\"text-gray-500 text-sm mb-8\">Wype\u0142nij formularz \u2013 odpowiemy najszybciej, jak to mo\u017cliwe.<\/p>\n\n                    <!-- Sukces wys\u0142ania -->\n                    <div x-show=\"sent\" class=\"space-y-6 text-center py-10\" style=\"display: none;\">\n                        <span class=\"w-16 h-16 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-3xl mx-auto\"><i class=\"fa-solid fa-envelope-circle-check\"><\/i><\/span>\n                        <div>\n                            <h4 class=\"text-xl font-bold text-brand-greenDark\">Wiadomo\u015b\u0107 zosta\u0142a wys\u0142ana!<\/h4>\n                            <p class=\"text-sm text-gray-500 mt-2\">Dzi\u0119kujemy za kontakt. Odpowiemy w ci\u0105gu najbli\u017cszych kilku godzin.<\/p>\n                        <\/div>\n                        <button @click=\"sent = false; fName=''; fPhone=''; fEmail=''; fMsg='';\" class=\"text-xs text-brand-green font-semibold hover:underline\">Wy\u015blij kolejn\u0105 wiadomo\u015b\u0107<\/button>\n                    <\/div>\n\n                    <form x-show=\"!sent\" @submit.prevent=\"sendContact()\" class=\"space-y-6\">\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n                            <div>\n                                <label class=\"block text-sm font-semibold text-gray-600 mb-2\">Twoje Imi\u0119<\/label>\n                                <input type=\"text\" x-model=\"fName\" required=\"\" placeholder=\"Imi\u0119\" class=\"w-full bg-brand-cream border border-brand-green\/10 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-accentWood transition\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-sm font-semibold text-gray-600 mb-2\">Numer Telefonu<\/label>\n                                <input type=\"tel\" x-model=\"fPhone\" required=\"\" placeholder=\"Np. 512 893 920\" class=\"w-full bg-brand-cream border border-brand-green\/10 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-accentWood transition\">\n                            <\/div>\n                        <\/div>\n\n                        <div>\n                            <label class=\"block text-sm font-semibold text-gray-600 mb-2\">Adres E-mail<\/label>\n                            <input type=\"email\" x-model=\"fEmail\" required=\"\" placeholder=\"Adres e-mail\" class=\"w-full bg-brand-cream border border-brand-green\/10 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-accentWood transition\">\n                        <\/div>\n\n                        <div>\n                            <label class=\"block text-sm font-semibold text-gray-600 mb-2\">Tre\u015b\u0107 Wiadomo\u015bci<\/label>\n                            <textarea x-model=\"fMsg\" required=\"\" rows=\"5\" placeholder=\"Opisz nam czego potrzebujesz, jakie s\u0105 orientacyjne wymiary lub podaj preferowany czas kontaktu...\" class=\"w-full bg-brand-cream border border-brand-green\/10 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:border-brand-accentWood transition\"><\/textarea>\n                        <\/div>\n\n                        <div class=\"flex items-start gap-3\">\n                            <input type=\"checkbox\" required=\"\" id=\"rodo\" class=\"mt-1 rounded border-gray-300 text-brand-green focus:ring-brand-green\">\n                            <label for=\"rodo\" class=\"text-xs text-gray-400 leading-tight\">\n                                Wyra\u017cam zgod\u0119 na przetwarzanie moich danych osobowych podanych w formularzu w celu obs\u0142ugi zapytania i przedstawienia oferty handlowej przez firm\u0119 Karol Kordecki &#8222;KORDECKI-RAJ&#8221;.\n                            <\/label>\n                        <\/div>\n\n                        <button type=\"submit\" class=\"w-full py-4 bg-brand-green text-white font-bold rounded-xl hover:bg-brand-accentWood transition duration-300 shadow-md\">\n                            Wy\u015blij wiadomo\u015b\u0107\n                        <\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"bg-brand-greenLight border-t border-b border-brand-green\/10 py-8 relative overflow-hidden\">\n        <div class=\"absolute inset-0 opacity-5 bg-[radial-gradient(#2e5a36_1px,transparent_1px)] [background-size:20px_20px]\"><\/div>\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center\">\n            <div class=\"inline-flex items-center justify-center gap-3 bg-white px-6 py-4 rounded-2xl shadow-sm border border-brand-green\/10 max-w-2xl mx-auto\">\n                <span class=\"flex-shrink-0 text-brand-accentWood animate-pulse\"><i class=\"fa-solid fa-circle-info text-2xl\"><\/i><\/span>\n                <p class=\"text-xs sm:text-sm text-gray-600 text-left\">\n                    <strong>Informacja:<\/strong> Obecna strona ma charakter tymczasowy (wizyt\u00f3wkowy). Trwaj\u0105 intensywne prace nad pe\u0142nym portalem z obszernym katalogiem i cennikiem. Ju\u017c teraz przyjmujemy zlecenia na bie\u017c\u0105cy sezon! Zadzwo\u0144 pod numer <span class=\"font-bold text-brand-green\">512 893 920<\/span> lub wype\u0142nij wycen\u0119 online.\n                <\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <footer class=\"bg-brand-greenDark text-brand-greenLight py-12\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex flex-col md:flex-row items-center justify-between gap-8 pb-10 border-b border-white\/10\">\n                <!-- Lewa: Logo & Nazwa -->\n                <div class=\"flex items-center gap-3\">\n                    <img decoding=\"async\" src=\"Gemini_Generated_Image_2jequr2jequr2jeq_2.png\" alt=\"Kordecki-Raj Logo\" class=\"h-12 w-auto brightness-0 invert\">\n                    <div class=\"flex flex-col\">\n                        <span class=\"font-serif text-lg font-bold text-white tracking-tight leading-none\">Kordecki-Raj<\/span>\n                        <span class=\"text-[10px] uppercase tracking-wider text-brand-accentWood font-semibold mt-1\">Architektura Ogrodowa<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- \u015arodek: Szybkie linki -->\n                <div class=\"flex flex-wrap items-center justify-center gap-6 text-sm text-brand-greenLight\/80\">\n                    <a href=\"#o-nas\" class=\"hover:text-white transition\">O nas<\/a>\n                    <a href=\"#oferta\" class=\"hover:text-white transition\">Oferta<\/a>\n                    <a href=\"#galeria\" class=\"hover:text-white transition\">Realizacje<\/a>\n                    <a href=\"#konfigurator\" class=\"hover:text-white transition\">Wycena online<\/a>\n                    <a href=\"#kontakt\" class=\"hover:text-white transition\">Kontakt<\/a>\n                <\/div>\n\n                <!-- Prawa: Social Media i Kontakt -->\n                <div class=\"flex items-center gap-4\">\n                    <a href=\"tel:+48512893920\" class=\"w-10 h-10 rounded-full bg-white\/5 hover:bg-brand-accentWood flex items-center justify-center text-white transition\" title=\"Zadzwo\u0144 do nas\">\n                        <i class=\"fa-solid fa-phone\"><\/i>\n                    <\/a>\n                    <a href=\"mailto:biuro@kordeckiraj.pl\" class=\"w-10 h-10 rounded-full bg-white\/5 hover:bg-brand-accentWood flex items-center justify-center text-white transition\" title=\"Napisz e-mail\">\n                        <i class=\"fa-solid fa-envelope\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Stopka informacyjna -->\n            <div class=\"flex flex-col md:flex-row items-center justify-between gap-4 pt-10 text-xs text-brand-greenLight\/50\">\n                <p>\u00a9 2026 KORDECKI-RAJ Karol Kordecki. Wszelkie prawa zastrze\u017cone.<\/p>\n                <div class=\"flex items-center gap-4\">\n                    <p>NIP: 8691965683<\/p>\n                    <p>REGON: 544728111<\/p>\n                    <p class=\"text-brand-accentWood font-semibold\">Projekt tymczasowy \/ Wizyt\u00f3wka<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Kordecki-Raj | Architektura Ogrodowa i Konstrukcje Drewniane Kordecki-Raj Konstrukcje Drewniane O nas Zakres us\u0142ug Nasze realizacje Wycena online Kontakt Kontakt O nas Zakres us\u0142ug Nasze realizacje Wycena online Kontakt i Dane firmy 512 893 920 519 764 387 biuro@kordeckiraj.pl Profesjonalne Konstrukcje Drewniane z Ma\u0142opolski Tw\u00f3j w\u0142asny zak\u0105tek spokoju w ogrodowym raju Tworzymy wyj\u0105tkowe, solidne i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-255","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=\/wp\/v2\/pages\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=255"}],"version-history":[{"count":2,"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=\/wp\/v2\/pages\/255\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=\/wp\/v2\/pages\/255\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/kordeckiraj.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}