{"id":57,"date":"2025-12-03T08:40:25","date_gmt":"2025-12-03T08:40:25","guid":{"rendered":"https:\/\/dev.royalstreu.thecodefoxes.com\/?page_id=57"},"modified":"2026-02-03T21:35:44","modified_gmt":"2026-02-03T21:35:44","slug":"produkty","status":"publish","type":"page","link":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/produkty\/","title":{"rendered":"Produkty"},"content":{"rendered":"<section class=\"container mx-auto w-full px-4 sm:px-6 lg:px-8 py-12 lg:py-20\">\n        <div class=\"max-w-3xl\">\n\n                            <h2 class=\"text-3xl lg:text-4xl font-light text-primary-950 mb-8 lg:mb-10 leading-tight tracking-tight\">\n                    Lorem Impsum                <\/h2>\n            \n                            <div class=\"text-primary-900 text-base lg:text-lg leading-relaxed opacity-80\">\n                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque semper magna vitae accumsan. Sed eleifend eget elit luctus egestas. Vivamus vitae dapibus quam. Cras vehicula sem sit amet neque convallis convallis vel sed magna. Fusce vitae malesuada odio. Nulla sodales posuere leo, sit amet mollis diam molestie ac. Pellentesque facilisis pellentesque lacus non imperdiet. Maecenas at ligula vulputate, congue sapien id, lacinia felis. Curabitur faucibus molestie urna, nec consequat lacus bibendum non<\/p>\n                <\/div>\n            \n        <\/div>\n    <\/section>\n\n\n\n<div class=\"bg-white py-10 lg:py-16 border-y border-secondary-200 overflow-hidden\"\n    id=\"marquee-float-1\" data-range=\"60\">\n\n    <div class=\"marquee-float-track whitespace-nowrap will-change-transform\">\n        <span\n            class=\"text-4xl lg:text-6xl text-primary-950 font-medium font-poppins tracking-tight inline-block\">\n            COMFORT, LIVE WITH ARVANE        <\/span>\n    <\/div>\n<\/div>\n\n<script>\n    (function () {\n        const container = document.getElementById('marquee-float-1');\n        if (!container) return;\n\n        const track = container.querySelector('.marquee-float-track');\n        const range = parseFloat(container.dataset.range) || 60;\n\n        let currentX = 0;\n        let targetX = 0;\n        let isVisible = false;\n        let rafId = null;\n        let lastScrollY = window.scrollY;\n\n        function lerp(start, end, factor) {\n            return start + (end - start) * factor;\n        }\n\n        function animate() {\n            currentX = lerp(currentX, targetX, 0.06);\n            track.style.transform = `translateX(${currentX}px)`;\n            rafId = requestAnimationFrame(animate);\n        }\n\n        function onScroll() {\n            if (!isVisible) return;\n\n            const scrollY = window.scrollY;\n            const delta = scrollY - lastScrollY;\n\n            targetX += delta * 0.5;\n            targetX = Math.max(-range, Math.min(range, targetX));\n\n            lastScrollY = scrollY;\n        }\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                isVisible = entry.isIntersecting;\n            });\n        }, { threshold: 0.1 });\n\n        observer.observe(container);\n        window.addEventListener('scroll', onScroll, { passive: true });\n        animate();\n\n        window.addEventListener('beforeunload', () => {\n            if (rafId) cancelAnimationFrame(rafId);\n        });\n    })();\n<\/script>\n\n<style>\n    #marquee-float-1.marquee-float-track {\n        backface-visibility: hidden;\n        perspective: 1000px;\n    }\n<\/style>\n\n\n    <section class=\"container mx-auto w-full px-4 sm:px-6 lg:px-8 py-12 lg:py-20\">\n\n        <div\n            class=\"flex flex-col md:flex-row justify-between items-start md:items-center md:space-x-12 border-t border-secondary-500\/50 pt-20\">\n\n                            \n                    \n                    <div class=\"text-left py-6 md:py-0\">\n                                                    <p class=\"text-5xl lg:text-6xl font-light text-primary-950 tracking-wider mb-3\">\n                                200+                            <\/p>\n                                                                            <p class=\"text-base lg:text-lg text-primary-900 leading-relaxed max-w-xs opacity-80\">\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque semper magna.                            <\/p>\n                                            <\/div>\n\n                                            \n                                            <div class=\"hidden md:block h-32 w-[1px] bg-secondary-500\/50\"><\/div>\n                    \n                    <div class=\"text-left py-6 md:py-0\">\n                                                    <p class=\"text-5xl lg:text-6xl font-light text-primary-950 tracking-wider mb-3\">\n                                231+                            <\/p>\n                                                                            <p class=\"text-base lg:text-lg text-primary-900 leading-relaxed max-w-xs opacity-80\">\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque semper magna.                            <\/p>\n                                            <\/div>\n\n                                            \n                                            <div class=\"hidden md:block h-32 w-[1px] bg-secondary-500\/50\"><\/div>\n                    \n                    <div class=\"text-left py-6 md:py-0\">\n                                                    <p class=\"text-5xl lg:text-6xl font-light text-primary-950 tracking-wider mb-3\">\n                                123+                            <\/p>\n                                                                            <p class=\"text-base lg:text-lg text-primary-900 leading-relaxed max-w-xs opacity-80\">\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque semper magna.                            <\/p>\n                                            <\/div>\n\n                            \n        <\/div>\n\n    <\/section>\n\n\n\n<div class=\"bg-secondary-100 overflow-hidden py-6 lg:py-10\" id=\"marquee-2\"\n    data-speed=\"0.3\"\n    data-direction=\"-1\">\n\n    <div class=\"marquee-wrapper flex whitespace-nowrap will-change-transform\">\n                    <div class=\"marquee-track flex items-center gap-8 lg:gap-16 shrink-0 px-4 lg:px-8\">\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                            <\/div>\n                    <div class=\"marquee-track flex items-center gap-8 lg:gap-16 shrink-0 px-4 lg:px-8\">\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                            <\/div>\n                    <div class=\"marquee-track flex items-center gap-8 lg:gap-16 shrink-0 px-4 lg:px-8\">\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                                    <span\n                        class=\"text-7xl lg:text-9xl font-extrabold font-poppins text-secondary-300 select-none uppercase tracking-wide shrink-0\">\n                        ROYALSTREU                    <\/span>\n                            <\/div>\n            <\/div>\n<\/div>\n\n<script>\n    (function () {\n        const container = document.getElementById('marquee-2');\n        if (!container) return;\n\n        const wrapper = container.querySelector('.marquee-wrapper');\n        const tracks = container.querySelectorAll('.marquee-track');\n        const speed = parseFloat(container.dataset.speed) || 0.6;\n        const direction = parseInt(container.dataset.direction) || -1;\n\n        let currentX = 0;\n        let targetX = 0;\n        let trackWidth = 0;\n        let isVisible = false;\n        let rafId = null;\n\n        function calculateWidth() {\n            if (tracks.length > 0) {\n                trackWidth = tracks[0].offsetWidth;\n            }\n        }\n\n        function lerp(start, end, factor) {\n            return start + (end - start) * factor;\n        }\n\n        function animate() {\n            if (!isVisible) {\n                rafId = requestAnimationFrame(animate);\n                return;\n            }\n\n            currentX = lerp(currentX, targetX, 0.08);\n\n            if (Math.abs(currentX) >= trackWidth) {\n                currentX = currentX % trackWidth;\n                targetX = targetX % trackWidth;\n            }\n\n            wrapper.style.transform = `translateX(${currentX}px)`;\n\n            rafId = requestAnimationFrame(animate);\n        }\n\n        let lastScrollY = window.scrollY;\n\n        function onScroll() {\n            const scrollY = window.scrollY;\n            const delta = scrollY - lastScrollY;\n\n            targetX += delta * speed * direction;\n\n            lastScrollY = scrollY;\n        }\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                isVisible = entry.isIntersecting;\n            });\n        }, { threshold: 0, rootMargin: '50px' });\n\n        calculateWidth();\n        observer.observe(container);\n\n        window.addEventListener('scroll', onScroll, { passive: true });\n\n        window.addEventListener('resize', calculateWidth);\n\n        animate();\n\n        window.addEventListener('beforeunload', () => {\n            if (rafId) cancelAnimationFrame(rafId);\n        });\n    })();\n<\/script>\n\n<style>\n    #marquee-2 .marquee-wrapper {\n        will-change: transform;\n        backface-visibility: hidden;\n        perspective: 1000px;\n    }\n<\/style>\n\n\n    <section class=\"container mx-auto w-full px-4 sm:px-6 lg:px-8 py-12 lg:py-32\">\n        <div class=\"flex flex-col lg:flex-row gap-8 items-stretch\">\n\n                            \n                                    <div\n                        class=\"w-full lg:w-1\/3 min-h-[550px] bg-cod-gray-950 text-primary-50 rounded-[2.5rem] p-10 sm:p-12 flex flex-col justify-between transition-all duration-300 relative overflow-hidden group\">\n\n                                                    <div\n                                class=\"absolute right-0 top-0 text-cod-gray-400 opacity-10 transform rotate-12\">\n                                <i data-lucide=\"wheat\" width=\"200\" height=\"200\"><\/i>\n                            <\/div>\n                        \n                        <div class=\"relative z-10 space-y-6\">\n                            \n                                                            <h2 class=\"text-3xl sm:text-4xl font-light leading-tight\">\n                                    casd                                <\/h2>\n                            \n                                                            <p class=\"text-primary-200 text-base sm:text-lg leading-relaxed max-w-xs font-light opacity-80\">\n                                    casd                                <\/p>\n                                                    <\/div>\n\n                                                    <div class=\"relative z-10 mt-8\">\n                                <div class=\"flex flex-col gap-3\">\n                                                                                                                                                                <div class=\"flex items-center gap-3 text-sm font-normal tracking-wide text-primary-300 uppercase\">\n                                                                                                    <i data-lucide=\"recycle\" class=\"w-4 h-4 text-primary-400\"><\/i>\n                                                                                                <span>dsaccads<\/span>\n                                            <\/div>\n                                                                                                                                                                <div class=\"h-px w-full bg-primary-800\/30\"><\/div>\n                                                                                                                            <div class=\"flex items-center gap-3 text-sm font-normal tracking-wide text-primary-300 uppercase\">\n                                                                                                    <i data-lucide=\"recycle\" class=\"w-4 h-4 text-primary-400\"><\/i>\n                                                                                                <span>recycle<\/span>\n                                            <\/div>\n                                                                                                                                                                <div class=\"h-px w-full bg-primary-800\/30\"><\/div>\n                                                                                                                            <div class=\"flex items-center gap-3 text-sm font-normal tracking-wide text-primary-300 uppercase\">\n                                                                                                    <i data-lucide=\"recycle\" class=\"w-4 h-4 text-primary-400\"><\/i>\n                                                                                                <span>recycle<\/span>\n                                            <\/div>\n                                                                                                            <\/div>\n                            <\/div>\n                                            <\/div>\n\n                \n                            \n                                    <div\n                        class=\"w-full lg:w-1\/3 min-h-[550px] bg-white border border-secondary-200\/50 rounded-[2.5rem] p-10 sm:p-12 flex flex-col justify-between transition-all duration-300 hover:border-primary-950\/20 group relative overflow-hidden\">\n\n                                                <div\n                            class=\"absolute top-0 right-0 w-32 h-32 bg-primary-500\/30 rounded-bl-[4rem] -mr-8 -mt-8 z-0\">\n                        <\/div>\n\n                                                    <div class=\"absolute top-0 right-0 p-6 sm:p-8 text-right z-20\">\n                                <span class=\"block text-2xl sm:text-3xl font-semibold text-stone-900\">\n                                    22                                <\/span>\n                                                                    <span class=\"text-xs text-stone-400 uppercase tracking-wide\">\n                                        cqewecw                                    <\/span>\n                                                            <\/div>\n                        \n                        <div class=\"relative z-10\">\n                                                            <div class=\"mt-4 mb-8\">\n                                                                            <h3 class=\"text-xl sm:text-2xl font-normal text-primary-950 mb-2\">\n                                            acds                                        <\/h3>\n                                                                                                                <p class=\"text-secondary-600 font-light text-sm opacity-80\">\n                                            casd                                        <\/p>\n                                                                    <\/div>\n                            \n                                                            <ul class=\"space-y-4\">\n                                                                                                                        <li class=\"flex items-start text-secondary-700 font-normal group\/item\">\n                                                <span\n                                                    class=\"w-2 h-2 mt-2 rounded-full bg-primary-400 group-hover\/item:bg-primary-600 mr-3 transition-colors\"><\/span>\n                                                <span>asddas<\/span>\n                                            <\/li>\n                                                                                                                                                                <li class=\"flex items-start text-secondary-700 font-normal group\/item\">\n                                                <span\n                                                    class=\"w-2 h-2 mt-2 rounded-full bg-primary-400 group-hover\/item:bg-primary-600 mr-3 transition-colors\"><\/span>\n                                                <span>asdasd<\/span>\n                                            <\/li>\n                                                                                                                                                                <li class=\"flex items-start text-secondary-700 font-normal group\/item\">\n                                                <span\n                                                    class=\"w-2 h-2 mt-2 rounded-full bg-primary-400 group-hover\/item:bg-primary-600 mr-3 transition-colors\"><\/span>\n                                                <span>asddas<\/span>\n                                            <\/li>\n                                                                                                            <\/ul>\n                                                    <\/div>\n\n                                                    <a href=\"http:\/\/cdsacads\"\n                                class=\"mt-8 w-full group\/btn flex items-center justify-between px-6 py-4 rounded-2xl border border-secondary-200 bg-white text-primary-950 hover:bg-primary-950 hover:text-white hover:border-primary-950 transition-all duration-300 relative z-10\">\n                                <span class=\"font-normal tracking-wide\">\n                                    Zam\u00f3w palet\u0119                                <\/span>\n                                <i data-lucide=\"arrow-up-right\"\n                                    class=\"w-5 h-5 transition-transform duration-300 group-hover\/btn:translate-x-1 group-hover\/btn:-translate-y-1\"><\/i>\n                            <\/a>\n                                            <\/div>\n                \n                            \n                                    <div\n                        class=\"w-full lg:w-1\/3 min-h-[550px] bg-white border border-secondary-200\/50 rounded-[2.5rem] p-10 sm:p-12 flex flex-col justify-between transition-all duration-300 hover:border-primary-950\/20 group relative overflow-hidden\">\n\n                                                <div\n                            class=\"absolute top-0 right-0 w-32 h-32 bg-stone-100 rounded-bl-[4rem] -mr-8 -mt-8 z-0\">\n                        <\/div>\n\n                                                    <div class=\"absolute top-0 right-0 p-6 sm:p-8 text-right z-20\">\n                                <span class=\"block text-2xl sm:text-3xl font-semibold text-stone-900\">\n                                    22 zl                                <\/span>\n                                                                    <span class=\"text-xs text-stone-400 uppercase tracking-wide\">\n                                        cascdas                                    <\/span>\n                                                            <\/div>\n                        \n                        <div class=\"relative z-10\">\n                                                            <div class=\"mt-4 mb-8\">\n                                                                            <h3 class=\"text-xl sm:text-2xl font-normal text-primary-950 mb-2\">\n                                            cqwe                                        <\/h3>\n                                                                                                                <p class=\"text-secondary-600 font-light text-sm opacity-80\">\n                                            cqwe                                        <\/p>\n                                                                    <\/div>\n                            \n                                                            <ul class=\"space-y-4\">\n                                                                                                                        <li class=\"flex items-start text-secondary-700 font-normal group\/item\">\n                                                <span\n                                                    class=\"w-2 h-2 mt-2 rounded-full bg-stone-300 group-hover\/item:bg-stone-500 mr-3 transition-colors\"><\/span>\n                                                <span>ceqwcewq<\/span>\n                                            <\/li>\n                                                                                                                                                                <li class=\"flex items-start text-secondary-700 font-normal group\/item\">\n                                                <span\n                                                    class=\"w-2 h-2 mt-2 rounded-full bg-stone-300 group-hover\/item:bg-stone-500 mr-3 transition-colors\"><\/span>\n                                                <span>cqwecewq<\/span>\n                                            <\/li>\n                                                                                                            <\/ul>\n                                                    <\/div>\n\n                                                    <a href=\"http:\/\/cwqcqwe\"\n                                class=\"mt-8 w-full group\/btn flex items-center justify-between px-6 py-4 rounded-2xl border border-secondary-200 bg-white text-primary-950 hover:bg-primary-950 hover:text-white hover:border-primary-950 transition-all duration-300 relative z-10\">\n                                <span class=\"font-normal tracking-wide\">\n                                    Zam\u00f3w palet\u0119                                <\/span>\n                                <i data-lucide=\"arrow-up-right\"\n                                    class=\"w-5 h-5 transition-transform duration-300 group-hover\/btn:translate-x-1 group-hover\/btn:-translate-y-1\"><\/i>\n                            <\/a>\n                                            <\/div>\n                \n            \n        <\/div>\n    <\/section>\n\n\n\n\n\n\n<section class=\"container mx-auto w-full px-4 sm:px-6 lg:px-8 py-12 lg:py-20  border-b border-secondary-100\">\n\n    <div class=\"overflow-hidden\">\n\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n\n                            <div\n                    class=\"relative w-full h-48 sm:h-64 lg:h-96 overflow-hidden order-1 lg:order-1 flex justify-center items-center\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/Sciolka-lniana-dla-koni-Gallop-Zone.png\" alt=\"\"\n                        class=\"w-full h-full object-contain\" loading=\"lazy\">\n                <\/div>\n            \n            <div class=\"flex flex-col justify-center order-2 lg:order-2\">\n\n                                    <h2\n                        class=\"text-3xl sm:text-4xl lg:text-5xl font-light text-primary-950 mb-6 tracking-tight leading-tight\">\n                        \u015aCI\u00d3\u0141KA                    <\/h2>\n                \n                                    <p\n                        class=\"text-secondary-700 text-base sm:text-lg leading-relaxed mb-10 pb-10 border-b border-secondary-200 opacity-80\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque semper magna vitae accumsan. Sed eleifend eget elit luctus egestas. Vivamus vitae dapibus quam. Cras vehicula sem sit amet neque convallis convallis vel sed magna.                     <\/p>\n                \n                                    <div class=\"flex flex-col sm:flex-row gap-4\">\n                                                    <a href=\"http:\/\/casd\"\n                                class=\"inline-flex items-center font-normal text-white hover:text-primary-950 transition-all group py-3 px-8 rounded-full border border-primary-950 bg-primary-950 hover:bg-transparent\">\n                                Czytaj wi\u0119cej                                <i data-lucide=\"arrow-up-right\"\n                                    class=\"ml-2 w-5 h-5 transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform\"><\/i>\n                            <\/a>\n                        \n                                                    <a href=\"http:\/\/casd\"\n                                class=\"inline-flex items-center font-normal text-cod-gray-950 hover:text-white transition-all group py-3 px-8 rounded-full border border-cod-gray-950 hover:bg-cod-gray-950\">\n                                Zam\u00f3w                                <i data-lucide=\"arrow-up-right\"\n                                    class=\"ml-2 w-5 h-5 transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform\"><\/i>\n                            <\/a>\n                                            <\/div>\n                            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<section class=\"container mx-auto w-full px-4 sm:px-6 lg:px-8 py-12 lg:py-20  border-b border-secondary-100\">\n\n    <div class=\"overflow-hidden\">\n\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n\n                            <div\n                    class=\"relative w-full h-48 sm:h-64 lg:h-96 overflow-hidden order-1 lg:order-2 flex justify-center items-center\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/Sciolka-lniana-dla-koni-Gallop-Zone.png\" alt=\"\"\n                        class=\"w-full h-full object-contain\" loading=\"lazy\">\n                <\/div>\n            \n            <div class=\"flex flex-col justify-center order-2 lg:order-1\">\n\n                                    <h2\n                        class=\"text-3xl sm:text-4xl lg:text-5xl font-light text-primary-950 mb-6 tracking-tight leading-tight\">\n                        \u015aCI\u00d3\u0141KA                    <\/h2>\n                \n                                    <p\n                        class=\"text-secondary-700 text-base sm:text-lg leading-relaxed mb-10 pb-10 border-b border-secondary-200 opacity-80\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque semper magna vitae accumsan. Sed eleifend eget elit luctus egestas. Vivamus vitae dapibus quam. Cras vehicula sem sit amet neque convallis convallis vel sed magna.                     <\/p>\n                \n                                    <div class=\"flex flex-col sm:flex-row gap-4\">\n                                                    <a href=\"http:\/\/casd\"\n                                class=\"inline-flex items-center font-normal text-white hover:text-primary-950 transition-all group py-3 px-8 rounded-full border border-primary-950 bg-primary-950 hover:bg-transparent\">\n                                Czytaj wi\u0119cej                                <i data-lucide=\"arrow-up-right\"\n                                    class=\"ml-2 w-5 h-5 transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform\"><\/i>\n                            <\/a>\n                        \n                                                    <a href=\"http:\/\/casd\"\n                                class=\"inline-flex items-center font-normal text-cod-gray-950 hover:text-white transition-all group py-3 px-8 rounded-full border border-cod-gray-950 hover:bg-cod-gray-950\">\n                                Zam\u00f3w                                <i data-lucide=\"arrow-up-right\"\n                                    class=\"ml-2 w-5 h-5 transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform\"><\/i>\n                            <\/a>\n                                            <\/div>\n                            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 overflow-hidden\">\n\n            <p class=\"text-center text-xl uppercase tracking-widest text-primary-900 opacity-40 mb-10 font-normal\">\n            Zaufali nam        <\/p>\n    \n            <div\n            class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 lg:gap-16 items-center justify-items-center max-w-6xl mx-auto\">\n                            <div\n                    class=\"flex items-center justify-center w-full h-20 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/Sciolka-lniana-dla-koni-Gallop-Zone.png\" alt=\"\"\n                        class=\"h-full w-auto object-contain max-h-12 lg:max-h-24 group-hover:scale-110 transition-transform duration-300\">\n                <\/div>\n                            <div\n                    class=\"flex items-center justify-center w-full h-20 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/aaa.png\" alt=\"\"\n                        class=\"h-full w-auto object-contain max-h-12 lg:max-h-24 group-hover:scale-110 transition-transform duration-300\">\n                <\/div>\n                    <\/div>\n    \n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20\">\n    <div class=\"relative bg-cod-gray-950 rounded-3xl overflow-hidden px-8 py-16 lg:py-24 lg:px-20 text-center\">\n\n\n        <div class=\"absolute inset-0 opacity-20 pointer-events-none\">\n            <div\n                class=\"absolute top-0 left-0 w-96 h-96 bg-secondary-900 rounded-full blur-[100px] -translate-x-1\/2 -translate-y-1\/2\">\n            <\/div>\n            <div\n                class=\"absolute bottom-0 right-0 w-96 h-96 bg-primary-800 rounded-full blur-[100px] translate-x-1\/2 translate-y-1\/2\">\n            <\/div>\n        <\/div>\n\n        <div class=\"relative z-10 max-w-2xl mx-auto\">\n                            <h2 class=\"text-3xl lg:text-4xl font-light text-white mb-6 tracking-wide\">\n                    Do\u0142\u0105cz do \u015bwiata Royal Streu                <\/h2>\n            \n                            <p class=\"text-secondary-300 text-lg lg:text-xl font-light mb-10 leading-relaxed opacity-90\">\n                    B\u0105d\u017a na bie\u017c\u0105co z nowo\u015bciami i ekskluzywnymi ofertami.                <\/p>\n            \n            <div class=\"newsletter-form-wrapper max-w-lg mx-auto\">\n                <form class=\"flex flex-col sm:flex-row gap-3\" action=\"\">\n                    <input type=\"email\" placeholder=\"Tw\u00f3j adres email\"\n                        class=\"w-full px-6 py-4 rounded-full bg-white\/5 border border-white\/10 text-white placeholder-white\/40 focus:outline-none focus:border-white\/30 focus:bg-white\/10 transition-all font-light backdrop-blur-sm\"\n                        required>\n                    <button type=\"submit\"\n                        class=\"px-8 py-4 rounded-full bg-white text-black font-normal hover:bg-gray-200 transition-colors whitespace-nowrap\">\n                        Do\u0142\u0105cz\n                    <\/button>\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"de\"\/><\/form>\n            <\/div>\n\n            <p class=\"text-secondary-500\/50 text-xs mt-6 font-light\">\n                Szanujemy Twoj\u0105 prywatno\u015b\u0107. \u017badnego spamu.\n            <\/p>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20\">\n\n    <div class=\"mb-16 lg:mb-24 mx-auto\">\n                    <h2 class=\"text-3xl lg:text-5xl font-light text-primary-950 mb-6 tracking-tight leading-tight\">\n                Nasz Proces            <\/h2>\n                            <p class=\"text-lg lg:text-xl text-secondary-700 font-light leading-relaxed opacity-80\">\n                cqewcqwecwqeeq cqwe wqce qwecqcas             <\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4 relative\">\n\n            <div class=\"hidden md:block absolute top-[28px] left-0 w-full h-[1px] bg-secondary-200 z-0\"><\/div>\n\n                            <div class=\"relative z-10 flex flex-col items-center text-center group\">\n\n                    <div\n                        class=\"w-14 h-14 rounded-full bg-white border border-secondary-300 flex items-center justify-center text-primary-950 font-normal text-lg mb-8 shadow-sm group-hover:bg-primary-950 group-hover:text-white group-hover:border-primary-950 transition-all duration-300\">\n                        01                    <\/div>\n\n                    <div class=\"max-w-xs px-4\">\n                        <h3 class=\"text-xl font-normal text-primary-950 mb-4\">\n                            Krok 1                        <\/h3>\n                        <p class=\"text-secondary-600 text-base leading-relaxed opacity-80\">\n                            cqwecwqe                        <\/p>\n                    <\/div>\n\n                <\/div>\n                            <div class=\"relative z-10 flex flex-col items-center text-center group\">\n\n                    <div\n                        class=\"w-14 h-14 rounded-full bg-white border border-secondary-300 flex items-center justify-center text-primary-950 font-normal text-lg mb-8 shadow-sm group-hover:bg-primary-950 group-hover:text-white group-hover:border-primary-950 transition-all duration-300\">\n                        02                    <\/div>\n\n                    <div class=\"max-w-xs px-4\">\n                        <h3 class=\"text-xl font-normal text-primary-950 mb-4\">\n                            Krok 2                        <\/h3>\n                        <p class=\"text-secondary-600 text-base leading-relaxed opacity-80\">\n                            cqweewqcecwq                        <\/p>\n                    <\/div>\n\n                <\/div>\n                            <div class=\"relative z-10 flex flex-col items-center text-center group\">\n\n                    <div\n                        class=\"w-14 h-14 rounded-full bg-white border border-secondary-300 flex items-center justify-center text-primary-950 font-normal text-lg mb-8 shadow-sm group-hover:bg-primary-950 group-hover:text-white group-hover:border-primary-950 transition-all duration-300\">\n                        03                    <\/div>\n\n                    <div class=\"max-w-xs px-4\">\n                        <h3 class=\"text-xl font-normal text-primary-950 mb-4\">\n                            Krok 3                        <\/h3>\n                        <p class=\"text-secondary-600 text-base leading-relaxed opacity-80\">\n                            cqwecewq                        <\/p>\n                    <\/div>\n\n                <\/div>\n                            <div class=\"relative z-10 flex flex-col items-center text-center group\">\n\n                    <div\n                        class=\"w-14 h-14 rounded-full bg-white border border-secondary-300 flex items-center justify-center text-primary-950 font-normal text-lg mb-8 shadow-sm group-hover:bg-primary-950 group-hover:text-white group-hover:border-primary-950 transition-all duration-300\">\n                        04                    <\/div>\n\n                    <div class=\"max-w-xs px-4\">\n                        <h3 class=\"text-xl font-normal text-primary-950 mb-4\">\n                            Krok 4                        <\/h3>\n                        <p class=\"text-secondary-600 text-base leading-relaxed opacity-80\">\n                            cqwecewq                        <\/p>\n                    <\/div>\n\n                <\/div>\n            \n        <\/div>\n    \n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20\">\n    <div class=\"bg-white rounded-3xl overflow-hidden border border-secondary-200\/50 flex flex-col lg:flex-row\">\n\n        <div\n            class=\"lg:w-1\/2 relative min-h-[400px] lg:min-h-auto flex flex-col justify-center p-8 lg:p-16 bg-cod-gray-950 overflow-hidden\">\n\n                            <div class=\"absolute inset-0 z-0\">\n                    <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\" alt=\"\"\n                        class=\"w-full h-full object-cover\">\n                <\/div>\n            \n            <div class=\"absolute inset-0 bg-primary-950\/40 mix-blend-multiply z-0\"><\/div>\n\n            <div class=\"relative z-10 text-white\">\n                                    <h2 class=\"text-3xl lg:text-4xl font-light mb-6\">Oblicz ile potrzebujesz<\/h2>\n                \n                                    <p class=\"text-lg font-light mb-6 opacity-90 max-w-md\">\n                        Wybierz wielko\u015b\u0107 boksu i liczb\u0119 koni.                    <\/p>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"lg:w-1\/2 p-8 lg:p-16 bg-white flex flex-col justify-center\"\n            id=\"calculator-block_2b0f2243f034b6873f677e0e63633082\">\n\n            <div class=\"max-w-md mx-auto w-full space-y-10\">\n\n                <div>\n                    <div class=\"flex justify-between items-end mb-4\">\n                        <label class=\"text-sm uppercase tracking-widest text-primary-900 opacity-60 font-semibold\">\n                            Wielko\u015b\u0107 boksu\n                        <\/label>\n                        <div class=\"text-right\">\n                            <span class=\"text-3xl font-light text-primary-950 block leading-none\">\n                                <span id=\"size-val\">12<\/span>\n                                <span class=\"text-lg text-secondary-600\">m\u00b2<\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n                    <input type=\"range\" min=\"6\" max=\"30\" value=\"12\" step=\"1\" id=\"size-input\"\n                        class=\"w-full h-2 bg-secondary-100 rounded-lg appearance-none cursor-pointer accent-primary-900 hover:accent-primary-500 transition-all\">\n                    <div class=\"flex justify-between text-xs text-secondary-600 mt-2 font-mono\">\n                        <span>6 m\u00b2<\/span>\n                        <span>30 m\u00b2<\/span>\n                    <\/div>\n                <\/div>\n\n                <div>\n                    <div class=\"flex justify-between items-end mb-4\">\n                        <label class=\"text-sm uppercase tracking-widest text-primary-900 opacity-60 font-semibold\">\n                            Liczba koni\n                        <\/label>\n                        <div class=\"text-right\">\n                            <span class=\"text-3xl font-light text-primary-950 block leading-none\">\n                                <span id=\"horses-val\">1<\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n                    <input type=\"range\" min=\"1\" max=\"10\" value=\"1\" step=\"1\" id=\"horses-input\"\n                        class=\"w-full h-2 bg-secondary-100 rounded-lg appearance-none cursor-pointer accent-primary-900 hover:accent-primary-500 transition-all\">\n                    <div class=\"flex justify-between text-xs text-secondary-600 mt-2 font-mono\">\n                        <span>1<\/span>\n                        <span>10<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mt-8 bg-cod-gray-950 rounded-2xl p-8 text-center text-white relative overflow-hidden\">\n                    <div class=\"relative z-10\">\n                        <p class=\"text-secondary-400 text-xs uppercase tracking-widest mb-2 font-medium\">Wynik<\/p>\n                        <div class=\"flex items-center justify-center gap-3\">\n                            <span id=\"result-val\"\n                                class=\"text-5xl lg:text-6xl font-light tracking-tight text-white\">24<\/span>\n                        <\/div>\n                        <p class=\"text-secondary-400\/80 text-sm mt-2 font-light\">\n                            work\u00f3w miesi\u0119cznie\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                                    <div class=\"text-center mt-8\">\n                        <a href=\"http:\/\/cqwcwqe\"\n                            class=\"inline-flex items-center justify-center px-10 py-4 border border-primary-950 text-primary-950 rounded-full text-sm uppercase tracking-widest hover:bg-primary-950 hover:text-white transition-all duration-300 w-full group\">\n                            Zam\u00f3w teraz                        <\/a>\n                    <\/div>\n                \n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <script>\n        (function () {\n            const container = document.getElementById('calculator-block_2b0f2243f034b6873f677e0e63633082');\n            if (!container) return;\n\n            const sizeInput = container.querySelector('#size-input');\n            const horsesInput = container.querySelector('#horses-input');\n            const sizeVal = container.querySelector('#size-val');\n            const horsesVal = container.querySelector('#horses-val');\n            const resultVal = container.querySelector('#result-val');\n\n            const factor = 2;\n\n            function calculate() {\n                const size = parseInt(sizeInput.value);\n                const horses = parseInt(horsesInput.value);\n\n                sizeVal.textContent = size;\n                horsesVal.textContent = horses;\n\n                const result = Math.ceil(size * horses * factor);\n\n                resultVal.textContent = result;\n            }\n\n            sizeInput.addEventListener('input', calculate);\n            horsesInput.addEventListener('input', calculate);\n\n            calculate();\n        })();\n    <\/script>\n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20\">\n    <div class=\"flex flex-col lg:flex-row justify-between items-start mb-20 gap-12\">\n                    <h1 class=\"text-4xl lg:text-5xl font-light tracking-tight max-w-lg leading-tight text-primary-950\">\n                Dlaczego Royal Streu?            <\/h1>\n        \n                    <p class=\"text-secondary-700 max-w-xl text-lg leading-relaxed opacity-80\">\n                vqwevweq            <\/p>\n            <\/div>\n\n            <div class=\"overflow-x-auto\">\n            <div class=\"max-w-6xl mx-auto\">\n                <div\n                    class=\"grid grid-cols-3 gap-0 border border-secondary-300 rounded-3xl overflow-hidden\">\n\n                    <div class=\"col-span-1 p-6 lg:p-8 bg-white border-b border-r border-secondary-300 flex items-center\">\n                        <span class=\"text-sm uppercase tracking-widest text-secondary-600 font-semibold\">Por\u00f3wnanie<\/span>\n                    <\/div>\n                    <div\n                        class=\"col-span-1 p-6 lg:p-8 bg-primary-950\/5 border-b border-r border-secondary-300 text-center flex flex-col justify-center items-center relative overflow-hidden\">\n                        <div class=\"absolute inset-x-0 top-0 h-1 bg-primary-950\"><\/div>\n                        <h3 class=\"text-lg font-semibold text-primary-950\">\n                            Royal Streu                        <\/h3>\n                    <\/div>\n                    <div\n                        class=\"col-span-1 p-6 lg:p-8 bg-white border-b border-secondary-300 text-center flex items-center justify-center\">\n                        <h3 class=\"text-lg font-normal text-secondary-700 opacity-80\">\n                            Tradycyjna S\u0142oma                        <\/h3>\n                    <\/div>\n\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center\">\n                            <span class=\"font-normal text-primary-950\">\n                                wqce                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center\">\n                            <span class=\"font-normal text-primary-950\">\n                                cweq                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center\">\n                            <span class=\"font-normal text-primary-950\">\n                                cwqe                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center\">\n                            <span class=\"font-normal text-primary-950\">\n                                cewq                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center\">\n                            <span class=\"font-normal text-primary-950\">\n                                cqwe                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center\">\n                            <span class=\"font-normal text-primary-950\">\n                                cqwe                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                                            <div\n                            class=\"col-span-1 p-5 px-6 lg:px-8 bg-white border-r border-b border-secondary-300 flex items-center border-b-0\">\n                            <span class=\"font-normal text-primary-950\">\n                                vqwe                            <\/span>\n                        <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-primary-950\/5 border-r border-b border-secondary-300 flex items-center justify-center border-b-0\">\n                                                            <div class=\"w-8 h-8 rounded-full bg-primary-200 flex items-center justify-center text-primary-500\">\n                                    <i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n\n                        <div\n                            class=\"col-span-1 p-5 bg-white border-b border-secondary-300 flex items-center justify-center border-b-0\">\n                                                            <div\n                                    class=\"w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-600 opacity-60\">\n                                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n                                <\/div>\n                                                    <\/div>\n                    \n                <\/div>\n            <\/div>\n        <\/div>\n    \n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-24\">\n\n            <div class=\"mb-12 lg:mb-16\">\n                            <h2 class=\"text-3xl lg:text-5xl font-light text-primary-950 mb-4 tracking-tight\">\n                    Co m\u00f3wi\u0105 nasi klienci                <\/h2>\n                                        <p class=\"text-secondary-700 text-sm uppercase tracking-widest font-normal opacity-80\">\n                    Poznaj opinie u\u017cytkownik\u00f3w Royal Streu                <\/p>\n                    <\/div>\n    \n    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr\">\n\n        <div class=\"lg:col-span-2 relative group overflow-hidden rounded-3xl min-h-[300px] lg:min-h-[400px]\"\n            id=\"\">\n\n            <div class=\"absolute inset-0 z-20 transition-opacity duration-500\"\n                id=\"-cover\">\n                                    <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\" alt=\"\"\n                        class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\">\n                \n                <div class=\"absolute inset-0 bg-gradient-to-t from-primary-950\/80 via-primary-950\/20 to-transparent\">\n                <\/div>\n\n                <div class=\"absolute inset-0 bg-gradient-to-t from-primary-950\/80 via-primary-950\/20 to-transparent\">\n                <\/div>\n\n                <div class=\"relative z-10 h-full flex flex-col justify-between p-8 lg:p-10 text-white\">\n                                            <p class=\"text-xl lg:text-xl font-light leading-relaxed mb-6 max-w-4xl text-shadow-sm\">\n                            &#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sit amet diam maximus sollicitudin. Cras cursus bibendum accumsan. Cras a auctor erat. Aenean tempus mauris eget ipsum luctus, et ullamcorper ante consectetur. Morbi hendrerit eros ut tempor tincidunt. Nam pretium justo non ligula suscipit, non ultrices mi blandit. Vivamus eleifend id est sed tincidunt. Nam sit amet ipsum sed purus hendrerit ullamcorper id non lectus.&#8221;\n                        <\/p>\n                    \n                                            <div class=\"flex items-center justify-between\">\n                                                            <div\n                                    class=\"flex items-center gap-3 text-secondary-200 text-sm uppercase tracking-widest font-medium transition-colors cursor-pointer w-fit\">\n                                    Zobacz Wideo                                <\/div>\n                            \n                                                    <\/div>\n                                    <\/div>\n            <\/div>\n\n        <\/div>\n\n        <div\n            class=\"bg-cod-gray-950 rounded-3xl p-8 lg:p-10 flex flex-col justify-between text-white relative overflow-hidden group\">\n            <div\n                class=\"absolute top-0 right-0 w-32 h-32 bg-secondary-500 rounded-full blur-[80px] opacity-20 -translate-y-1\/2 translate-x-1\/3\">\n            <\/div>\n\n            <div>\n                                    <span class=\"text-secondary-400\/80 text-xs uppercase tracking-widest font-medium mb-2 block\">\n                        Jako\u015b\u0107 &amp; Zaufanie                    <\/span>\n                            <\/div>\n\n            <div class=\"mt-auto\">\n                                    <div class=\"text-6xl lg:text-7xl font-light mb-4 text-white tracking-tighter\">\n                        98%                    <\/div>\n                                                    <p class=\"text-secondary-200 text-lg lg:text-xl font-light leading-normal opacity-90\">\n                        Klient\u00f3w poleca Royal Streu                    <\/p>\n                            <\/div>\n        <\/div>\n\n        <div            class=\"bg-cod-gray-950 rounded-3xl p-8 lg:p-10 flex flex-col justify-between text-white relative            overflow-hidden group min-h-[30vh]\">\n                            <span class=\"text-secondary-300\/80 text-xs uppercase tracking-widest font-medium mb-6 block relative z-10\">\n                    Historie Klient\u00f3w                <\/span>\n            \n            <div class=\"relative z-10\">\n                                    <h3 class=\"text-xl lg:text-2xl font-light leading-tight mb-8\">\n                        Jak zmienili\u015bmy komfort w stajni                    <\/h3>\n                \n                                    <div\n                        class=\"rounded-xl overflow-hidden aspect-video relative shadow-lg transform transition-transform duration-300\">\n                        <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/custom_resized_1cc2e5e7-0533-4a07-8405-ea0fb000cb86-scaled.webp\" alt=\"\"\n                            class=\"w-full h-full object-cover\">\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div\n            class=\"lg:col-span-2 bg-secondary-50\/50 rounded-3xl p-8 lg:p-10 flex flex-col justify-between group hover:bg-secondary-50 transition-colors duration-300\">\n                            <p class=\"text-xl font-light text-primary-950 leading-relaxed max-w-3xl\">\n                    &#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sit amet diam maximus sollicitudin. Cras cursus bibendum accumsan. Cras a auctor erat. Aenean tempus mauris eget ipsum luctus, et ullamcorper ante consectetur. Morbi hendrerit eros ut tempor tincidunt. Nam pretium justo non ligula suscipit, non ultrices mi blandit. Vivamus eleifend id est sed tincidunt. Nam sit amet ipsum sed purus hendrerit ullamcorper id non lectus.&#8221;\n                <\/p>\n            \n                            <div class=\"mt-8 pt-6 border-t border-primary-950\/10\">\n                    <p class=\"text-xs uppercase tracking-widest text-primary-900 opacity-50 font-medium\">\n                        Dlaczego Royal Streu?                    <\/p>\n                <\/div>\n                    <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<section class=\"bg-white py-20 lg:py-32\">\n    <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n\n                    <div class=\"mb-16 lg:mb-24\">\n                <h2 class=\"text-4xl lg:text-5xl font-light text-primary-950 tracking-tight flex items-center gap-2\">\n                    Testimonial                <\/h2>\n            <\/div>\n        \n                    <div id=\"testimonials-slider-3\" class=\"testimonials-slider\"\n                data-total=\"2\">\n\n                <div class=\"relative overflow-hidden\">\n                                            <div class=\"testimonial-slide\"\n                            data-slide=\"0\">\n\n                            <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-start\">\n\n                                <div class=\"lg:col-span-4\">\n                                    <div class=\"flex items-center gap-5\">\n                                                                                    <div\n                                                class=\"w-14 h-14 lg:w-16 lg:h-16 rounded-full overflow-hidden flex-shrink-0 ring-2 ring-secondary-100\">\n                                                <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\"\n                                                    alt=\"asdasd\" class=\"w-full h-full object-cover\">\n                                            <\/div>\n                                        \n                                        <div>\n                                                                                            <h3 class=\"text-lg font-medium text-primary-950 leading-tight\">\n                                                    asdasd                                                <\/h3>\n                                                                                                                                        <p class=\"text-sm text-secondary-500 mt-1\">\n                                                    asdasd                                                <\/p>\n                                                                                    <\/div>\n                                    <\/div>\n                                <\/div>\n\n                                <div class=\"lg:col-span-8\">\n                                                                            <div class=\"text-primary-800 text-base lg:text-lg leading-relaxed opacity-80 font-light\">\n                                                                                                <p class=\"mb-6 last:mb-0\">\n                                                        \u201eOd kiedy korzystamy z produkt\u00f3w tej marki, utrzymanie czysto\u015bci w stajni sta\u0142o si\u0119 znacznie prostsze. \u015aci\u00f3\u0142ka jest wyj\u0105tkowo ch\u0142onna, a konie czuj\u0105 si\u0119 w niej \u015bwietnie. Wid\u0142y GabelMaxx to z kolei absolutny hit \u2014 lekkie, a jednocze\u015bnie niesamowicie solidne. Wida\u0107, \u017ce kto\u015b naprawd\u0119 rozumie potrzeby hodowc\u00f3w.\u201d                                                    <\/p>\n                                                                                        <\/div>\n                                                                    <\/div>\n\n                            <\/div>\n                        <\/div>\n                                            <div class=\"testimonial-slide hidden\"\n                            data-slide=\"1\">\n\n                            <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-start\">\n\n                                <div class=\"lg:col-span-4\">\n                                    <div class=\"flex items-center gap-5\">\n                                                                                    <div\n                                                class=\"w-14 h-14 lg:w-16 lg:h-16 rounded-full bg-secondary-200 flex-shrink-0 flex items-center justify-center\">\n                                                <svg class=\"w-8 h-8 text-secondary-400\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" \/>\n                                                <\/svg>\n                                            <\/div>\n                                        \n                                        <div>\n                                                                                            <h3 class=\"text-lg font-medium text-primary-950 leading-tight\">\n                                                    cqwecewq                                                <\/h3>\n                                                                                                                                        <p class=\"text-sm text-secondary-500 mt-1\">\n                                                    cqwe                                                <\/p>\n                                                                                    <\/div>\n                                    <\/div>\n                                <\/div>\n\n                                <div class=\"lg:col-span-8\">\n                                                                            <div class=\"text-primary-800 text-base lg:text-lg leading-relaxed opacity-80 font-light\">\n                                                                                                <p class=\"mb-6 last:mb-0\">\n                                                        \u201eOd kiedy korzystamy z produkt\u00f3w tej marki, utrzymanie czysto\u015bci w stajni sta\u0142o si\u0119 znacznie prostsze. \u015aci\u00f3\u0142ka jest wyj\u0105tkowo ch\u0142onna, a konie czuj\u0105 si\u0119 w niej \u015bwietnie. Wid\u0142y GabelMaxx to z kolei absolutny hit \u2014 lekkie, a jednocze\u015bnie niesamowicie solidne. Wida\u0107, \u017ce kto\u015b naprawd\u0119 rozumie potrzeby hodowc\u00f3w.\u201d                                                    <\/p>\n                                                                                        <\/div>\n                                                                    <\/div>\n\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"mt-16 lg:mt-20 flex items-center justify-end gap-6\">\n                        <button type=\"button\"\n                            class=\"testimonial-prev w-12 h-12 rounded-full border border-secondary-300 flex items-center justify-center text-primary-900 hover:border-primary-900 hover:bg-primary-950 hover:text-white transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed\"\n                            aria-label=\"Poprzednia opinia\">\n                            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" stroke-width=\"2\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" \/>\n                            <\/svg>\n                        <\/button>\n\n                        <div class=\"flex items-center gap-4 min-w-[200px]\">\n                            <span class=\"testimonial-current text-sm font-medium text-primary-950 tabular-nums\">01<\/span>\n\n                            <div class=\"flex-1 h-px bg-secondary-200 relative\">\n                                <div class=\"testimonial-progress absolute left-0 top-0 h-full bg-primary-950 transition-all duration-500\"\n                                    style=\"width: 50%\"><\/div>\n                            <\/div>\n\n                            <span class=\"text-sm text-secondary-400 tabular-nums\">\n                                02                            <\/span>\n                        <\/div>\n\n                        <button type=\"button\"\n                            class=\"testimonial-next w-12 h-12 rounded-full border border-secondary-300 flex items-center justify-center text-primary-900 hover:border-primary-900 hover:bg-primary-950 hover:text-white transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed\"\n                            aria-label=\"Nast\u0119pna opinia\">\n                            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" stroke-width=\"2\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                \n            <\/div>\n        \n    <\/div>\n<\/section>\n\n    <script>\n        (function () {\n            const container = document.getElementById('testimonials-slider-3');\n            if (!container) return;\n\n            const slides = container.querySelectorAll('.testimonial-slide');\n            const prevBtn = container.querySelector('.testimonial-prev');\n            const nextBtn = container.querySelector('.testimonial-next');\n            const currentEl = container.querySelector('.testimonial-current');\n            const progressEl = container.querySelector('.testimonial-progress');\n            const total = parseInt(container.dataset.total) || 1;\n\n            let current = 0;\n\n            function updateSlider() {\n                slides.forEach((slide, i) => {\n                    if (i === current) {\n                        slide.classList.remove('hidden');\n                        slide.style.animation = 'fadeIn 0.5s ease-out';\n                    } else {\n                        slide.classList.add('hidden');\n                    }\n                });\n\n                currentEl.textContent = String(current + 1).padStart(2, '0');\n\n                progressEl.style.width = ((current + 1) \/ total) * 100 + '%';\n\n                prevBtn.disabled = current === 0;\n                nextBtn.disabled = current === total - 1;\n            }\n\n            prevBtn.addEventListener('click', () => {\n                if (current > 0) {\n                    current--;\n                    updateSlider();\n                }\n            });\n\n            nextBtn.addEventListener('click', () => {\n                if (current < total - 1) {\n                    current++;\n                    updateSlider();\n                }\n            });\n\n            container.addEventListener('keydown', (e) => {\n                if (e.key === 'ArrowLeft' && current > 0) {\n                    current--;\n                    updateSlider();\n                } else if (e.key === 'ArrowRight' && current < total - 1) {\n                    current++;\n                    updateSlider();\n                }\n            });\n\n            updateSlider();\n        })();\n    <\/script>\n\n    <style>\n        @keyframes fadeIn {\n            from {\n                opacity: 0;\n                transform: translateY(10px);\n            }\n\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n    <\/style>\n\n\n\n<section class=\"bg-white\">\n    <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-28\">\n\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n\n\n            <div class=\"lg:order-1\">\n                                    <p\n                        class=\"text-xs uppercase tracking-widest text-secondary-600 opacity-70 mb-4 font-medium\">\n                        cqwe                    <\/p>\n                \n                                    <h2\n                        class=\"text-3xl lg:text-4xl font-light text-primary-950 mb-6 tracking-tight leading-tight\">\n                        qwecwqv                    <\/h2>\n                \n                                    <div\n                        class=\"text-base lg:text-lg text-secondary-700 leading-relaxed opacity-80 font-light space-y-4 mb-8\">\n                        <p>qwevcwqcwqce<\/p>\n                    <\/div>\n                \n                                    <a href=\"http:\/\/qcwe\"\n                        class=\"inline-flex items-center gap-2 font-normal py-3 px-6 rounded-full border transition-all group text-base border-primary-950 bg-transparent text-primary-950 hover:bg-primary-950 hover:text-white\">\n                        Testowy                        <i data-lucide=\"arrow-right\"\n                            class=\"w-4 h-4 transform group-hover:translate-x-1 transition-transform\"><\/i>\n                    <\/a>\n                            <\/div>\n\n\n                            <div class=\"lg:order-2\">\n                    <div class=\"relative rounded-3xl overflow-hidden bg-secondary-100 max-h-[60vh]\">\n                        <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\" alt=\"\"\n                            class=\"w-full h-full object-cover\">\n                    <\/div>\n                <\/div>\n            \n        <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n    <section class=\"relative w-full min-h-[50vh] lg:min-h-[60vh] overflow-hidden group\">\n\n        <div class=\"absolute inset-0 z-0\">\n            <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\" alt=\"1c2c312\"\n                class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\">\n            <div class=\"absolute inset-0 bg-gradient-to-t from-primary-950\/90 via-primary-950\/40 to-primary-950\/20\"><\/div>\n        <\/div>\n\n        <a href=\"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/2026\/01\/25\/1c2c312\/\"\n            class=\"relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 h-full min-h-[60vh] lg:min-h-[70vh] flex flex-col justify-end pb-16 lg:pb-24 block\">\n\n            <div class=\"max-w-3xl\">\n\n                <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n                                            <span class=\"text-xs uppercase tracking-widest text-white\/60 font-medium\">\n                            Wyr\u00f3\u017cniony artyku\u0142                        <\/span>\n                    \n                                            <span\n                            class=\"px-3 py-1 rounded-full text-xs uppercase tracking-wider bg-white\/10 text-white\/80 border border-white\/20\">\n                            Uncategorized                        <\/span>\n                                    <\/div>\n\n                <h2\n                    class=\"text-3xl lg:text-5xl font-light text-white mb-6 leading-tight tracking-tight group-hover:text-white\/90 transition-colors\">\n                    1c2c312                <\/h2>\n\n                                    <p class=\"text-lg lg:text-xl text-white\/70 font-light leading-relaxed mb-8 max-w-2xl\">\n                        cqwecqwceqw                    <\/p>\n                \n                <div class=\"flex flex-wrap items-center gap-6 text-white\/50 text-sm font-light\">\n                    <span>\n                        25.01.2026                    <\/span>\n\n                    <span\n                        class=\"inline-flex items-center gap-2 text-white\/80 ml-auto group-hover:text-white transition-colors\">\n                        Czytaj wi\u0119cej\n                        <i data-lucide=\"arrow-right\"\n                            class=\"w-4 h-4 transform group-hover:translate-x-1 transition-transform\"><\/i>\n                    <\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/a>\n\n    <\/section>\n\n\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-24\">\n    <!-- Full Width Split Layout -->\n    <div class=\"flex flex-col lg:flex-row bg-primary-950 rounded-3xl overflow-hidden shadow-2xl shadow-primary-900\/20\">\n        \n        <!-- Image Column (Left) -->\n        <div class=\"lg:w-1\/2 relative min-h-[400px] lg:min-h-[600px] group overflow-hidden\">\n                            <div class=\"w-full h-full bg-secondary-900 flex items-center justify-center text-white\/20\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n                <\/div>\n                    <\/div>\n\n        <!-- Content Column (Right) -->\n        <div class=\"lg:w-1\/2 p-10 lg:p-20 flex flex-col justify-center relative bg-primary-950 text-white\">\n            \n            <!-- Decorative Accent -->\n            <div class=\"absolute top-0 right-0 p-10 opacity-10 pointer-events-none\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"120\" height=\"120\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"\/><\/svg>\n            <\/div>\n\n            <div class=\"relative z-10 max-w-xl\">\n                                    <div class=\"flex items-center gap-4 mb-10\">\n                        <span class=\"h-px w-12 bg-secondary-400\"><\/span>\n                        <span class=\"text-xs font-bold uppercase tracking-[0.25em] text-secondary-400\">\n                            Nasza Misja                        <\/span>\n                    <\/div>\n                \n                \n                <div class=\"flex items-center justify-between pt-8 border-t border-white\/10\">\n                    <div>\n                                                \n                                            <\/div>\n                    \n                    <!-- Signature Icon\/Element -->\n                    <div class=\"text-secondary-400 opacity-80\">\n                         <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z\"\/><line x1=\"16\" y1=\"8\" x2=\"2\" y2=\"22\"\/><line x1=\"17.5\" y1=\"15\" x2=\"9\" y2=\"15\"\/><\/svg>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n\n<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 bg-white\">\n\n            <div class=\"max-w-3xl mx-auto text-center mb-16 lg:mb-20\">\n                            <p class=\"text-secondary-500 text-xs uppercase tracking-[0.2em] font-medium mb-4\">\n                    O firmie                <\/p>\n                                        <h2 class=\"text-3xl lg:text-5xl font-light text-primary-950 mb-6 tracking-tight\">\n                    Poznaj nas                <\/h2>\n                                <\/div>\n    \n    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-16 mx-auto\">\n\n        \n            <div class=\"group flex flex-col items-center text-center\">\n\n                                    <div class=\"relative w-full max-w-sm aspect-[4\/5] mb-8 overflow-hidden rounded-t-[40px] rounded-b-[4px]\">\n                        <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\"\n                            alt=\"Grzegorz michalewicz\"\n                            class=\"w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 transition-all duration-700 ease-out group-hover:scale-105\">\n                    <\/div>\n                \n                <div class=\"max-w-sm\">\n                                            <p class=\"text-xs uppercase tracking-widest text-primary-500 font-medium mb-3\">\n                            Wsp\u00f3\u0142w\u0142a\u015bciciel                        <\/p>\n                    \n                    <h3 class=\"text-2xl lg:text-3xl font-normal text-primary-950 mb-4 tracking-tight\">\n                        Grzegorz michalewicz                    <\/h3>\n\n                                            <div class=\"text-base text-secondary-600 font-light leading-relaxed mb-6 opacity-80\">\n                            <p>cqwe wqecqwcewq <\/p>\n                        <\/div>\n                    \n                                    <\/div>\n            <\/div>\n        \n            <div class=\"group flex flex-col items-center text-center\">\n\n                                    <div class=\"relative w-full max-w-sm aspect-[4\/5] mb-8 overflow-hidden rounded-t-[40px] rounded-b-[4px]\">\n                        <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/custom_resized_1cc2e5e7-0533-4a07-8405-ea0fb000cb86-scaled.webp\"\n                            alt=\"Tomasz wdowiak\"\n                            class=\"w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 transition-all duration-700 ease-out group-hover:scale-105\">\n                    <\/div>\n                \n                <div class=\"max-w-sm\">\n                                            <p class=\"text-xs uppercase tracking-widest text-primary-500 font-medium mb-3\">\n                            Wsp\u00f3\u0142w\u0142a\u015bciciel                        <\/p>\n                    \n                    <h3 class=\"text-2xl lg:text-3xl font-normal text-primary-950 mb-4 tracking-tight\">\n                        Tomasz wdowiak                    <\/h3>\n\n                                            <div class=\"text-base text-secondary-600 font-light leading-relaxed mb-6 opacity-80\">\n                            <p>qcewcewq wqecqw wqecwqe<\/p>\n                        <\/div>\n                    \n                                    <\/div>\n            <\/div>\n        \n    <\/div>\n\n<\/section>\n\n\n    <section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-24\" id=\"gallery-4\">\n\n                    <div class=\"mb-12 lg:mb-16\">\n                                    <h2 class=\"text-3xl lg:text-5xl font-light text-primary-950 mb-4 tracking-tight\">\n                        wec                    <\/h2>\n                                                    <p class=\"text-secondary-700 text-sm uppercase tracking-widest font-normal opacity-80\">\n                        qwcecwqe                    <\/p>\n                            <\/div>\n        \n        <div class=\"columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6\">\n                            <div class=\"break-inside-avoid group cursor-pointer gallery-item\" data-index=\"0\"\n                    data-src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/custom_resized_1cc2e5e7-0533-4a07-8405-ea0fb000cb86-scaled.webp\" data-alt=\"\">\n                    <div class=\"relative overflow-hidden rounded-2xl bg-secondary-100\">\n                        <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/custom_resized_1cc2e5e7-0533-4a07-8405-ea0fb000cb86-1024x683.webp\"\n                            alt=\"\"\n                            class=\"w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105\">\n\n                        <div\n                            class=\"absolute inset-0 bg-primary-950\/0 group-hover:bg-primary-950\/20 transition-all duration-300 flex items-center justify-center\">\n                            <div\n                                class=\"w-12 h-12 rounded-full bg-white\/0 group-hover:bg-white\/90 flex items-center justify-center transition-all duration-300 transform scale-0 group-hover:scale-100\">\n                                <i data-lucide=\"zoom-in\" class=\"w-5 h-5 text-primary-950\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                                    <\/div>\n                            <div class=\"break-inside-avoid group cursor-pointer gallery-item\" data-index=\"1\"\n                    data-src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1.jpg\" data-alt=\"\">\n                    <div class=\"relative overflow-hidden rounded-2xl bg-secondary-100\">\n                        <img decoding=\"async\" src=\"https:\/\/dev.royalstreu.thecodefoxes.com\/wp-content\/uploads\/2025\/12\/slodki-kon-w-alpach-jedzacy-trawe-1-1-1-1024x683.jpg\"\n                            alt=\"\"\n                            class=\"w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105\">\n\n                        <div\n                            class=\"absolute inset-0 bg-primary-950\/0 group-hover:bg-primary-950\/20 transition-all duration-300 flex items-center justify-center\">\n                            <div\n                                class=\"w-12 h-12 rounded-full bg-white\/0 group-hover:bg-white\/90 flex items-center justify-center transition-all duration-300 transform scale-0 group-hover:scale-100\">\n                                <i data-lucide=\"zoom-in\" class=\"w-5 h-5 text-primary-950\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                                    <\/div>\n                    <\/div>\n\n        <!-- Lightbox -->\n        <div id=\"gallery-4-lightbox\"\n            class=\"fixed inset-0 z-50 bg-primary-950\/95 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 flex items-center justify-center\"\n            aria-hidden=\"true\">\n\n            <button\n                class=\"absolute top-6 right-6 w-12 h-12 rounded-full border border-white\/20 bg-white\/10 text-white hover:bg-white\/20 transition-all flex items-center justify-center lightbox-close\"\n                aria-label=\"Zamknij\">\n                <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n            <\/button>\n\n            <button\n                class=\"absolute left-6 top-1\/2 -translate-y-1\/2 w-12 h-12 rounded-full border border-white\/20 bg-white\/10 text-white hover:bg-white\/20 transition-all flex items-center justify-center lightbox-prev\"\n                aria-label=\"Poprzednie\">\n                <i data-lucide=\"chevron-left\" class=\"w-6 h-6\"><\/i>\n            <\/button>\n\n            <button\n                class=\"absolute right-6 top-1\/2 -translate-y-1\/2 w-12 h-12 rounded-full border border-white\/20 bg-white\/10 text-white hover:bg-white\/20 transition-all flex items-center justify-center lightbox-next\"\n                aria-label=\"Nast\u0119pne\">\n                <i data-lucide=\"chevron-right\" class=\"w-6 h-6\"><\/i>\n            <\/button>\n\n            <div class=\"max-w-5xl max-h-[85vh] mx-4\">\n                <img decoding=\"async\" src=\"\" alt=\"\" class=\"lightbox-image max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl\">\n            <\/div>\n\n            <div class=\"absolute bottom-6 left-1\/2 -translate-x-1\/2 text-white\/60 text-sm font-light lightbox-counter\">\n            <\/div>\n        <\/div>\n\n    <\/section>\n\n    <script>\n        (function () {\n            const container = document.getElementById('gallery-4');\n            const lightbox = document.getElementById('gallery-4-lightbox');\n            if (!container || !lightbox) return;\n\n            const items = container.querySelectorAll('.gallery-item');\n            const lightboxImg = lightbox.querySelector('.lightbox-image');\n            const counter = lightbox.querySelector('.lightbox-counter');\n            let currentIndex = 0;\n            const totalImages = items.length;\n\n            function openLightbox(index) {\n                currentIndex = index;\n                const item = items[index];\n                lightboxImg.src = item.dataset.src;\n                lightboxImg.alt = item.dataset.alt;\n                counter.textContent = `${index + 1} \/ ${totalImages}`;\n                lightbox.classList.remove('opacity-0', 'pointer-events-none');\n                lightbox.setAttribute('aria-hidden', 'false');\n                document.body.style.overflow = 'hidden';\n            }\n\n            function closeLightbox() {\n                lightbox.classList.add('opacity-0', 'pointer-events-none');\n                lightbox.setAttribute('aria-hidden', 'true');\n                document.body.style.overflow = '';\n            }\n\n            function navigate(direction) {\n                currentIndex = (currentIndex + direction + totalImages) % totalImages;\n                openLightbox(currentIndex);\n            }\n\n            items.forEach((item, index) => {\n                item.addEventListener('click', () => openLightbox(index));\n            });\n\n            lightbox.querySelector('.lightbox-close').addEventListener('click', closeLightbox);\n            lightbox.querySelector('.lightbox-prev').addEventListener('click', () => navigate(-1));\n            lightbox.querySelector('.lightbox-next').addEventListener('click', () => navigate(1));\n\n            lightbox.addEventListener('click', (e) => {\n                if (e.target === lightbox) closeLightbox();\n            });\n\n            document.addEventListener('keydown', (e) => {\n                if (lightbox.classList.contains('pointer-events-none')) return;\n                if (e.key === 'Escape') closeLightbox();\n                if (e.key === 'ArrowLeft') navigate(-1);\n                if (e.key === 'ArrowRight') navigate(1);\n            });\n        })();\n    <\/script>","protected":false},"excerpt":{"rendered":"","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-57","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":36,"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/pages\/57\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/dev.royalstreu.thecodefoxes.com\/de\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}