{"id":2,"date":"2025-06-27T00:06:19","date_gmt":"2025-06-27T00:06:19","guid":{"rendered":"https:\/\/haipestudio.com\/?page_id=2"},"modified":"2026-03-28T22:42:25","modified_gmt":"2026-03-28T22:42:25","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/haipestudio.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"  <section class=\"main-cta main-cta--h1 \" aria-labelledby=\"main-cta-heading\" >\n          <header class=\"main-cta__header\">\n                          <h1            id=\"main-cta-heading\"\n            class=\"main-cta__title main-cta__title--h1\"\n            >\n            Automate Everything.<br \/> Scale Infinitely. <br \/>Profit Exponentially.          <\/h1>\n              <\/header>\n    \n    <div class=\"main-cta__content\">\n              <div class=\"main-cta__description \"><p>Join <strong>dozens of businesses<\/strong> saving <strong>25+ hours weekly<\/strong> and boosting revenue by <strong>3x<\/strong> with our <strong>AI-powered automation solutions.<\/strong><\/p>\n<\/div>\n      \n              <footer class=\"main-cta__footer main-cta__footer--button\">\n                      <a href=\"\/free-audit\/\"\n              class=\"main-cta__button btn-primary\"\n              data-ph-event=\"main_cta_click\"\n              data-ph-title=\"Free Audit\"\n                            >\n              Free Audit              <span class=\"btn-shine\"><\/span>\n            <\/a>\n                  <\/footer>\n          <\/div>\n  <\/section>\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      document.querySelectorAll('a[data-ph-event]').forEach(function(el) {\n        el.addEventListener('click', function() {\n          if (typeof posthog !== 'undefined') {\n            posthog.capture(el.dataset.phEvent, {\n              title: el.dataset.phTitle,\n              url: el.href,\n              section: 'main-cta'\n            });\n            console.log('PostHog event captured:', el.dataset.phEvent, el.dataset.phTitle);\n          }\n        });\n      });\n    });\n  <\/script>\n\n\n\n<section class=\"big-numbers big-numbers--default\" aria-label=\"Estat\u00edsticas e n\u00fameros importantes\">\n  \n  <div class=\"big-numbers__container\">\n          <div class=\"big-numbers__grid\">\n                  <article class=\"big-numbers__item\">\n            <div class=\"big-numbers__number-wrapper\">\n                              <!-- For default variant, use regex processing for animation -->\n                                <span class=\"big-numbers__number\"\n                  data-value=\"25\"\n                  data-prefix=\"\"\n                  data-suffix=\"hrs\"\n                  data-variant=\"default\">\n                <\/span>\n                          <\/div>\n            <div class=\"big-numbers__description\" role=\"text\" aria-label=\"Descri\u00e7\u00e3o: Saved Weekly\">\n              Saved Weekly            <\/div>\n                      <\/article>\n                  <article class=\"big-numbers__item\">\n            <div class=\"big-numbers__number-wrapper\">\n                              <!-- For default variant, use regex processing for animation -->\n                                <span class=\"big-numbers__number\"\n                  data-value=\"90\"\n                  data-prefix=\"\"\n                  data-suffix=\"%+\"\n                  data-variant=\"default\">\n                <\/span>\n                          <\/div>\n            <div class=\"big-numbers__description\" role=\"text\" aria-label=\"Descri\u00e7\u00e3o: Error Reduction\">\n              Error Reduction            <\/div>\n                      <\/article>\n                  <article class=\"big-numbers__item\">\n            <div class=\"big-numbers__number-wrapper\">\n                              <!-- For default variant, use regex processing for animation -->\n                                <span class=\"big-numbers__number\"\n                  data-value=\"65\"\n                  data-prefix=\"\"\n                  data-suffix=\"%\"\n                  data-variant=\"default\">\n                <\/span>\n                          <\/div>\n            <div class=\"big-numbers__description\" role=\"text\" aria-label=\"Descri\u00e7\u00e3o: Faster Response\">\n              Faster Response            <\/div>\n                      <\/article>\n                  <article class=\"big-numbers__item\">\n            <div class=\"big-numbers__number-wrapper\">\n                              <!-- For default variant, use regex processing for animation -->\n                                <span class=\"big-numbers__number\"\n                  data-value=\"30\"\n                  data-prefix=\"\"\n                  data-suffix=\" Days\"\n                  data-variant=\"default\">\n                <\/span>\n                          <\/div>\n            <div class=\"big-numbers__description\" role=\"text\" aria-label=\"Descri\u00e7\u00e3o: To Full ROI\">\n              To Full ROI            <\/div>\n                      <\/article>\n              <\/div>\n      <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Support multiple big-numbers blocks on the same page\n    const bigNumbersSections = document.querySelectorAll('.big-numbers');\n    \n    bigNumbersSections.forEach((section, sectionIndex) => {\n        const bigNumbers = section.querySelectorAll('.big-numbers__number');\n        let animationExecuted = false; \/\/ Flag per section to prevent repetition\n\n        \/\/ Easing function for smooth deceleration at the end\n        function easeOutQuart(t) {\n            return 1 - Math.pow(1 - t, 4);\n        }\n\n        function addDigit(element, digit, fresh) {\n            const spanList = Array(10)\n                .join(0)\n                .split(0)\n                .map((x, j) => `<span>${j}<\/span>`)\n                .join('');\n\n            element.insertAdjacentHTML(\n                \"beforeend\",\n                `<span style=\"transform: translateY(-1000%)\" data-value=\"${digit}\">\n                    ${spanList}\n                <\/span>`);\n\n            const firstDigit = element.lastElementChild;\n\n            setTimeout(() => {\n                firstDigit.className = \"visible\";\n            }, fresh ? 0 : 20);\n        }\n\n        function setupNumber(element, startNum) {\n        \/\/ If animation already executed, don't run again\n        if (animationExecuted) return;\n        \n        const variant = element.dataset.variant;\n        \n        \/\/ Only process default variant, skip with-bg variant\n        if (variant === 'with-bg') return;\n        \n        const wrapper = element.closest('.big-numbers__number-wrapper');\n        const prefix = element.dataset.prefix;\n        const suffix = element.dataset.suffix;\n        \n        \/\/ Clear wrapper\n        wrapper.innerHTML = '';\n        \n        \/\/ Add prefix if exists (including spaces)\n        if (prefix) {\n            if (prefix.trim() !== '') {\n                wrapper.insertAdjacentHTML('beforeend', \n                    `<span class=\"big-numbers__number-prefix\" style=\"opacity: 1\">${prefix}<\/span>`);\n            }\n        }\n        \n        \/\/ Extract digits and separators from the number\n        const numberStr = startNum.toString();\n        const digits = [];\n        const separators = [];\n        let currentDigit = '';\n        \n        for (let i = 0; i < numberStr.length; i++) {\n            const char = numberStr[i];\n            if (\/\\d\/.test(char)) {\n                if (currentDigit !== '') {\n                    digits.push(currentDigit);\n                    currentDigit = '';\n                }\n                digits.push(char);\n            } else if (\/[.,]\/.test(char)) {\n                if (currentDigit !== '') {\n                    digits.push(currentDigit);\n                    currentDigit = '';\n                }\n                separators.push(char);\n            } else {\n                currentDigit += char;\n            }\n        }\n        if (currentDigit !== '') {\n            digits.push(currentDigit);\n        }\n        \n        \/\/ Add number container with data\n        const numberElement = document.createElement('span');\n        numberElement.className = 'big-numbers__number';\n        numberElement.dataset.value = startNum;\n        numberElement.dataset.prefix = prefix || '';\n        numberElement.dataset.suffix = suffix || '';\n        numberElement.style.opacity = '0'; \n        \n        \/\/ Set stable width based on total characters (digits + separators)\n        const totalWidth = `${numberStr.length * 0.68}em`;\n        numberElement.style.width = totalWidth;\n        \n        wrapper.appendChild(numberElement);\n        \n        \/\/ Add suffix if exists (including spaces)\n        if (suffix) {\n            if (suffix.trim() !== '') {\n                wrapper.insertAdjacentHTML('beforeend', \n                    `<span class=\"big-numbers__number-suffix\" style=\"opacity: 1\">${suffix}<\/span>`);\n            }\n        }\n        \n        \/\/ Create the animated number structure\n        let digitIndex = 0;\n        let separatorIndex = 0;\n        \n        for (let i = 0; i < numberStr.length; i++) {\n            const char = numberStr[i];\n            if (\/\\d\/.test(char)) {\n                \/\/ Add digit with animation\n                addDigit(numberElement, char, true);\n                digitIndex++;\n            } else if (\/[.,]\/.test(char)) {\n                \/\/ Add separator as static element\n                const separatorSpan = document.createElement('span');\n                separatorSpan.textContent = char;\n                separatorSpan.style.opacity = '0';\n                separatorSpan.style.transition = 'opacity 0.3s';\n                separatorSpan.style.marginLeft = '0.05em';\n                separatorSpan.style.marginRight = '0.05em';\n                numberElement.appendChild(separatorSpan);\n                \n                \/\/ Show separator after animation\n                setTimeout(() => {\n                    separatorSpan.style.opacity = '1';\n                }, 2000 + (i * 100));\n                \n                separatorIndex++;\n            }\n        }\n\n        void numberElement.offsetWidth;\n\n        setTimeout(() => {\n            \/\/ Animate digits with easing for smooth deceleration\n            digits.forEach((digit, index) => {\n                const digitElement = numberElement.querySelectorAll('span[data-value]')[index];\n                if (digitElement) {\n                    \/\/ Apply easing function to create smooth deceleration\n                    digitElement.style.transition = 'transform 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n                    digitElement.style.transform = `translateY(-${100 * parseInt(digit)}%)`;\n                }\n            });\n            \n            numberElement.style.transition = 'opacity 0.3s';\n            numberElement.style.opacity = '1';\n        }, 100); \n        }\n\n        \/\/ Intersection Observer to trigger animation when element is visible\n        const observerOptions = {\n            threshold: 0.3,\n            rootMargin: '0px 0px -50px 0px'\n        };\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                const numbers = entry.target.querySelectorAll('.big-numbers__number');\n                if (entry.isIntersecting && !animationExecuted) {\n                    numbers.forEach(number => {\n                        \/\/ Only process numbers that have data-value (default variant)\n                        if (number.dataset.value) {\n                            setupNumber(number, number.dataset.value);\n                        }\n                    });\n                    \/\/ Mark animation as executed after first run\n                    animationExecuted = true;\n                }\n            });\n        }, observerOptions);\n\n        \/\/ Observe this specific big-numbers section\n        observer.observe(section);\n    });\n});\n<\/script>\n\n  <section class=\"main-cta main-cta--h2 \" aria-labelledby=\"main-cta-heading\" >\n          <header class=\"main-cta__header\">\n                          <h2            id=\"main-cta-heading\"\n            class=\"main-cta__title main-cta__title--h2\"\n            >\n            The Best Automation At the Right Price          <\/h2>\n              <\/header>\n    \n    <div class=\"main-cta__content\">\n              <div class=\"main-cta__description main-cta__description--h2\"><p>Whether you need <strong>quick wins<\/strong> or comprehensive transformation, we have the <strong>perfect solution<\/strong> for your business.<\/p>\n<\/div>\n      \n              <footer class=\"main-cta__footer main-cta__footer--text\">\n                      <a href=\"\/services\/\"\n              class=\"main-cta__link btn-tertiary btn-tertiary--purple\"\n              data-ph-event=\"main_cta_click\"\n              data-ph-title=\"See all plans\"\n                            >\n              See all plans              <span class=\"btn-shine\"><\/span>\n            <\/a>\n                  <\/footer>\n          <\/div>\n  <\/section>\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      document.querySelectorAll('a[data-ph-event]').forEach(function(el) {\n        el.addEventListener('click', function() {\n          if (typeof posthog !== 'undefined') {\n            posthog.capture(el.dataset.phEvent, {\n              title: el.dataset.phTitle,\n              url: el.href,\n              section: 'main-cta'\n            });\n            console.log('PostHog event captured:', el.dataset.phEvent, el.dataset.phTitle);\n          }\n        });\n      });\n    });\n  <\/script>\n\n\n\n  <section id=\"\" class=\"product-plans\" aria-label=\"Planos de produtos dispon\u00edveis\">\n    <div class=\"product-plans__container default-container\">\n      <div class=\"product-plans__grid\">\n                              <article class=\"product-plans__item \">\n              \n              <header class=\"product-plans__header\">\n                                  <div class=\"product-plans__icon\">\n                                        <figure class=\"product-plans__icon-figure\">\n                      <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/box.svg\" alt=\"box icon\" class=\"product-plans__icon-image\" loading=\"lazy\" title=\"\">\n                    <\/figure>\n                  <\/div>\n                \n                                  <h3 class=\"product-plans__title\">\n                    AI Customer Agents                  <\/h3>\n                              <\/header>\n\n                              <div class=\"product-plans__content\">\n                  <div class=\"product-plans__description\">\n                    Advanced AI agents that handle customer service, sales conversations, and even complex decision-making without human intervention.                  <\/div>\n                <\/div>\n              \n                              <footer class=\"product-plans__footer\">\n                  <a href=\"https:\/\/haipestudio.com\/services\/ai-customer-agents\/\"\n                    class=\"product-plans__link btn-primary\"\n                                        >\n                    Get Started Now                    <span class=\"btn-shine\"><\/span>\n                  <\/a>\n                <\/footer>\n                          <\/article>\n                                        <article class=\"product-plans__item \">\n              \n              <header class=\"product-plans__header\">\n                                  <div class=\"product-plans__icon\">\n                                        <figure class=\"product-plans__icon-figure\">\n                      <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/robot.svg\" alt=\"robot icon\" class=\"product-plans__icon-image\" loading=\"lazy\" title=\"\">\n                    <\/figure>\n                  <\/div>\n                \n                                  <h3 class=\"product-plans__title\">\n                    Streamline Your Operations                  <\/h3>\n                              <\/header>\n\n                              <div class=\"product-plans__content\">\n                  <div class=\"product-plans__description\">\n                    Ready-to-use automation packs that integrate seamlessly with your existing tools. Fast setup, zero coding, immediate impact.                  <\/div>\n                <\/div>\n              \n                              <footer class=\"product-plans__footer\">\n                  <a href=\"https:\/\/haipestudio.com\/services\/streamline-your-operations\/\"\n                    class=\"product-plans__link btn-primary\"\n                                        >\n                    Get Started Now                    <span class=\"btn-shine\"><\/span>\n                  <\/a>\n                <\/footer>\n                          <\/article>\n                                        <article class=\"product-plans__item product-plans__item--popular\">\n                              <div class=\"product-plans__badge\">\n                  <span class=\"product-plans__badge-text\" aria-label=\"Plano mais popular\">Most Popular<\/span>\n                <\/div>\n              \n              <header class=\"product-plans__header\">\n                                  <div class=\"product-plans__icon\">\n                                        <figure class=\"product-plans__icon-figure\">\n                      <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/puzzle-piece.svg\" alt=\"puzzle-piece icon\" class=\"product-plans__icon-image\" loading=\"lazy\" title=\"\">\n                    <\/figure>\n                  <\/div>\n                \n                                  <h3 class=\"product-plans__title\">\n                    Connect Everything                  <\/h3>\n                              <\/header>\n\n                              <div class=\"product-plans__content\">\n                  <div class=\"product-plans__description\">\n                    Custom integrations and workflow design that connect all your systems, eliminate silos, and give you full visibility.                  <\/div>\n                <\/div>\n              \n                              <footer class=\"product-plans__footer\">\n                  <a href=\"https:\/\/haipestudio.com\/services\/connect-everything\/\"\n                    class=\"product-plans__link btn-primary\"\n                                        >\n                    Get Started Now                    <span class=\"btn-shine\"><\/span>\n                  <\/a>\n                <\/footer>\n                          <\/article>\n                                        <article class=\"product-plans__item \">\n              \n              <header class=\"product-plans__header\">\n                                  <div class=\"product-plans__icon\">\n                                        <figure class=\"product-plans__icon-figure\">\n                      <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/arrows.svg\" alt=\"arrows icon\" class=\"product-plans__icon-image\" loading=\"lazy\" title=\"\">\n                    <\/figure>\n                  <\/div>\n                \n                                  <h3 class=\"product-plans__title\">\n                    Fully Managed Automation                  <\/h3>\n                              <\/header>\n\n                              <div class=\"product-plans__content\">\n                  <div class=\"product-plans__description\">\n                    Ongoing automation-as-a-service: we design, implement, monitor, and maintain all your workflows while you focus on growth.                  <\/div>\n                <\/div>\n              \n                              <footer class=\"product-plans__footer\">\n                  <a href=\"https:\/\/haipestudio.com\/services\/fully-managed-automation\/\"\n                    class=\"product-plans__link btn-primary\"\n                                        >\n                    Get Started Now                    <span class=\"btn-shine\"><\/span>\n                  <\/a>\n                <\/footer>\n                          <\/article>\n                        <\/div>\n    <\/div>\n  <\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const productPlansBlock = document.querySelector('.product-plans');\n    \n    if (productPlansBlock) {\n        const isMobile = window.innerWidth <= 768;\n        \n        const observerOptions = {\n            threshold: isMobile ? 0.1 : 0.2,\n            rootMargin: isMobile ? '0px 0px -20px 0px' : '0px 0px -50px 0px'\n        };\n        \n        const observerCallback = function(entries, observer) {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    productPlansBlock.classList.add('product-plans-entrance');\n                    \n                    observer.unobserve(entry.target);\n                }\n            });\n        };\n        \n        const observer = new IntersectionObserver(observerCallback, observerOptions);\n        \n        observer.observe(productPlansBlock);\n        \n        window.addEventListener('resize', function() {\n            const newIsMobile = window.innerWidth <= 768;\n            if (newIsMobile !== isMobile) {\n                observer.disconnect();\n                const newObserverOptions = {\n                    threshold: newIsMobile ? 0.1 : 0.2,\n                    rootMargin: newIsMobile ? '0px 0px -20px 0px' : '0px 0px -50px 0px'\n                };\n                const newObserver = new IntersectionObserver(observerCallback, newObserverOptions);\n                newObserver.observe(productPlansBlock);\n            }\n        });\n    }\n});\n<\/script>\n\n  <section class=\"cta-banner\"\n    aria-labelledby=\"cta-banner-heading\" >\n\n    <div class=\"cta-banner__container bg-haipe_purple-500 !text-white\">\n\n              <div class=\"cta-banner__bg-svg cta-banner__bg-svg--mobile\" aria-hidden=\"true\">\n          <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/a-backgrond\/a-backgrond.svg\" alt=\"\" class=\"cta-banner__bg-svg-image\" title=\"\">\n        <\/div>\n\n        <div class=\"cta-banner__bg-svg cta-banner__bg-svg--left\" aria-hidden=\"true\">\n          <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/a-backgrond\/a-backgrond-left.svg\" alt=\"\" class=\"cta-banner__bg-svg-image\" title=\"\">\n        <\/div>\n\n        <div class=\"cta-banner__bg-svg cta-banner__bg-svg--right\" aria-hidden=\"true\">\n          <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/a-backgrond\/a-backgrond.svg\" alt=\"\" class=\"cta-banner__bg-svg-image\" title=\"\">\n        <\/div>\n      \n              <header class=\"cta-banner__header\">\n          <h2 id=\"cta-banner-heading\" class=\"cta-banner__title\">\n            Ready to Transform Your Business?          <\/h2>\n        <\/header>\n      \n              <div class=\"cta-banner__content\">\n          <div class=\"cta-banner__description\">\n            <p>Get a free consultation and see exactly how automation can revolutionize your operations.<\/p>\n          <\/div>\n        <\/div>\n      \n              <footer class=\"cta-banner__footer\">\n          <div class=\"cta-banner__links\">\n                          <a href=\"\/free-audit\/\"\n                class=\"cta-banner__link cta-banner__link--primary btn-secondary\"\n                                >\n                Get Your Automation Audit                <span class=\"btn-shine\"><\/span>\n              <\/a>\n            \n                          <a href=\"\/contact\/\"\n                class=\"cta-banner__link cta-banner__link--secondary btn-tertiary btn-tertiary--white\"\n                                >\n                 Schedule Consultation                <span class=\"btn-shine\"><\/span>\n              <\/a>\n                      <\/div>\n        <\/footer>\n          <\/div>\n\n  <\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ CTA Banner Entrance Animation - works with multiple blocks\n    const ctaBanners = document.querySelectorAll('.cta-banner');\n    \n    ctaBanners.forEach((ctaBanner, index) => {\n        \/\/ Intersection Observer for scroll-triggered animation\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('cta-banner-entrance');\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, {\n            threshold: 0.1,\n            rootMargin: '0px 0px -50px 0px'\n        });\n        \n        observer.observe(ctaBanner);\n    });\n});\n<\/script>\n\n\n<section id=\"\" class=\"animated-video\" data-video-section=\"animated-video-69d044e3bd3b3\">\n    <div class=\"animated-video__cursor\">\n        <div class=\"animated-video__cursor-content\">\n            <svg class=\"animated-video__cursor-icon\" width=\"26\" height=\"32\" viewBox=\"0 0 26 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M0 29.4089V2.59109C0 1.85695 0.25679 1.24157 0.77037 0.744939C1.28395 0.248313 1.88313 0 2.5679 0C2.78189 0 3.00658 0.0323887 3.24198 0.097166C3.47737 0.161943 3.70206 0.259109 3.91605 0.388664L24.8444 13.7976C25.2296 14.0567 25.5185 14.3806 25.7111 14.7692C25.9037 15.1579 26 15.5682 26 16C26 16.4318 25.9037 16.8421 25.7111 17.2308C25.5185 17.6194 25.2296 17.9433 24.8444 18.2024L3.91605 31.6113C3.70206 31.7409 3.47737 31.8381 3.24198 31.9028C3.00658 31.9676 2.78189 32 2.5679 32C1.88313 32 1.28395 31.7517 0.77037 31.2551C0.25679 30.7584 0 30.1431 0 29.4089ZM5.1358 24.6802L18.6173 16L5.1358 7.31984V24.6802Z\" fill=\"white\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n            <!-- Self-hosted video trigger -->\n        <div class=\"animated-video__trigger\" data-video-type=\"self-hosted\" data-video-url=\"https:\/\/haipestudio.com\/wp-content\/uploads\/2025\/10\/Haipe_Curto_Opcao-2-_1_-_1_-_1_.webm\">\n            <div class=\"animated-video__container\">\n                <div class=\"animated-video__wrapper\">\n                    <video\n                        width=\"100%\"\n                        height=\"100%\"\n                        autoplay\n                        loop\n                        muted\n                        playsinline\n                        preload=\"metadata\"\n                        webkit-playsinline=\"true\"\n                        class=\"animated-video__video\"\n                        poster=\"\">\n                        <source src=\"https:\/\/haipestudio.com\/wp-content\/uploads\/2025\/10\/Haipe_Curto_Opcao-2-_1_-_1_-_1_.webm\" type=\"video\/mp4\">\n                        <source src=\"https:\/\/haipestudio.com\/wp-content\/uploads\/2025\/10\/Haipe_Curto_Opcao-2-_1_-_1_-_1_.webm\" type=\"video\/webm\">\n                        Your browser does not support the video tag.\n                    <\/video>\n                    <div class=\"animated-video__overlay\"><\/div>\n                <\/div>\n                <div class=\"animated-video__content\">\n                    <h2 class=\"animated-video__title\">\n                                                <span class=\"animated-video__separator\"><\/span>\n                                            <\/h2>\n                <\/div>\n                <!-- Play button overlay - mobile only -->\n                <div class=\"animated-video__play-button\">\n                    <div class=\"animated-video__play-button-content\">\n                        <svg class=\"animated-video__play-button-icon\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path d=\"M8 5v14l11-7z\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<!-- Video Modal -->\n<div id=\"video-modal-animated-video-69d044e3bd3b3\" class=\"animated-video__modal\">\n    <div class=\"animated-video__modal-container\">\n        <!-- Close button -->\n        <button class=\"animated-video__modal-close\">\n            <svg class=\"animated-video__modal-close-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n            <\/svg>\n        <\/button>\n\n        <!-- Video container -->\n        <div id=\"modal-video-container-animated-video-69d044e3bd3b3\" class=\"animated-video__modal-content\">\n            <!-- Video will be inserted here by JavaScript -->\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n  'use strict';\n\n  function initAnimatedVideo() {\n    \/\/ Check if mobile first - skip GSAP entirely on mobile\n    const isMobile = window.matchMedia('(max-width: 1023px)').matches;\n    \n    \/\/ Always get section and modal elements first\n    const section = document.querySelector('[data-video-section=\"animated-video-69d044e3bd3b3\"]');\n    if (!section) return;\n    \n    \/\/ Handle initial video autoplay issues for ARC browser\n    const initialVideo = section.querySelector('video');\n    const initialIframe = section.querySelector('iframe');\n    \n    if (initialVideo) {\n      \/\/ Ensure video autoplay works in ARC browser\n      const playInitialVideo = () => {\n        if (initialVideo.paused) {\n          const playPromise = initialVideo.play();\n          if (playPromise !== undefined) {\n            playPromise.catch((error) => {\n              console.warn('Initial video autoplay failed:', error);\n              \/\/ Fallback: Show controls for user interaction\n              initialVideo.controls = true;\n            });\n          }\n        }\n      };\n      \n      \/\/ Try to play immediately and on user interaction\n      playInitialVideo();\n      \n      \/\/ If autoplay fails, enable on first user interaction\n      const enableVideoOnInteraction = () => {\n        playInitialVideo();\n        document.removeEventListener('click', enableVideoOnInteraction);\n        document.removeEventListener('touchstart', enableVideoOnInteraction);\n      };\n      \n      document.addEventListener('click', enableVideoOnInteraction);\n      document.addEventListener('touchstart', enableVideoOnInteraction);\n    }\n    \n    if (initialIframe) {\n      \/\/ Ensure iframe loads properly in ARC browser\n      initialIframe.addEventListener('load', () => {\n        console.log('Initial YouTube iframe loaded successfully');\n      });\n      initialIframe.addEventListener('error', () => {\n        console.warn('Initial YouTube iframe failed to load');\n      });\n    }\n\n    const videoTrigger = section.querySelector('.animated-video__trigger') || section.querySelector('[data-video-type]');\n    const modal = document.getElementById('video-modal-animated-video-69d044e3bd3b3');\n    const modalContainer = document.getElementById('modal-video-container-animated-video-69d044e3bd3b3');\n    const closeButton = modal ? modal.querySelector('.animated-video__modal-close') : null;\n    \n    \/\/ Handle modal functionality (works on both mobile and desktop)\n    if (videoTrigger && modal && modalContainer) {\n      \/\/ Open modal\n      videoTrigger.addEventListener('click', function(e) {\n        e.preventDefault();\n        e.stopPropagation();\n        \n        const videoType = this.dataset.videoType;\n        const videoId = this.dataset.videoId;\n        const videoUrl = this.dataset.videoUrl;\n\n        let videoHTML = '';\n\n        if (videoType === 'youtube') {\n          videoHTML = `\n            <iframe\n              width=\"100%\"\n              height=\"100%\"\n              src=\"https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&#038;controls=1&#038;showinfo=1&#038;enablejsapi=1&#038;origin=${window.location.origin}\"\n              frameborder=\"0\"\n              allowfullscreen\n              allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture; web-share\"\n              title=\"Video content\">\n            <\/iframe>\n          `;\n        } else if (videoType === 'self-hosted') {\n          videoHTML = `\n            <video\n              class=\"w-full h-full\"\n              width=\"100%\"\n              height=\"100%\"\n              controls\n              autoplay\n              muted\n              playsinline\n              preload=\"metadata\">\n              <source src=\"${videoUrl}\" type=\"video\/mp4\">\n              <source src=\"${videoUrl}\" type=\"video\/webm\">\n              Your browser does not support the video tag.\n            <\/video>\n          `;\n        }\n\n        modalContainer.innerHTML = videoHTML;\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n        \n        \/\/ Handle autoplay issues in ARC browser and other strict browsers\n        setTimeout(() => {\n          const iframe = modalContainer.querySelector('iframe');\n          const video = modalContainer.querySelector('video');\n          \n          if (iframe) {\n            \/\/ Ensure iframe loads properly\n            iframe.addEventListener('load', () => {\n              console.log('YouTube iframe loaded successfully');\n            });\n            iframe.addEventListener('error', () => {\n              console.warn('YouTube iframe failed to load');\n            });\n          }\n          \n          if (video) {\n            \/\/ Handle video autoplay issues\n            const playPromise = video.play();\n            if (playPromise !== undefined) {\n              playPromise\n                .then(() => {\n                  console.log('Video autoplay started');\n                })\n                .catch((error) => {\n                  console.warn('Autoplay prevented, user interaction required:', error);\n                  \/\/ Show a play button overlay for user interaction\n                  video.controls = true;\n                });\n            }\n          }\n        }, 100);\n      });\n\n      \/\/ Close modal function\n      function closeModal() {\n        modal.style.display = 'none';\n        modalContainer.innerHTML = '';\n        document.body.style.overflow = '';\n      }\n\n      \/\/ Close button\n      if (closeButton) {\n        closeButton.addEventListener('click', closeModal);\n      }\n\n      \/\/ Close on backdrop click\n      modal.addEventListener('click', function(e) {\n        if (e.target === modal) {\n          closeModal();\n        }\n      });\n\n      \/\/ Close on escape key\n      document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape' && modal && modal.style.display === 'flex') {\n          closeModal();\n        }\n      });\n    }\n    \n    \/\/ If mobile, skip GSAP animations\n    if (isMobile) {\n      return;\n    }\n    \n    \/\/ Wait for GSAP to be loaded only on desktop\n    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n      setTimeout(initAnimatedVideo, 100);\n      return;\n    }\n\n    \/\/ Get elements for desktop animations\n    const videoWrapper = section.querySelector('.animated-video__wrapper');\n    const textSeparator = section.querySelector('.animated-video__separator');\n    const playCursor = section.querySelector('.animated-video__cursor');\n    const overlay = section.querySelector('.animated-video__overlay');\n    const iframe = section.querySelector('.animated-video__iframe');\n    const video = section.querySelector('.animated-video__video');\n\n    \/\/ Custom cursor animation (only on devices with mouse)\n    if (window.matchMedia('(pointer: fine)').matches && playCursor) {\n      section.addEventListener('mouseenter', () => {\n        gsap.to(playCursor, {\n          scale: 1,\n          duration: 0.3\n        });\n      });\n\n      section.addEventListener('mouseleave', () => {\n        gsap.to(playCursor, {\n          scale: 0,\n          duration: 0.3\n        });\n      });\n\n      gsap.set(playCursor, { xPercent: -80, yPercent: -80 });\n\n      let xTo = gsap.quickTo(playCursor, 'x', {\n        duration: 0.1,\n        ease: 'power1.out',\n      });\n\n      let yTo = gsap.quickTo(playCursor, 'y', {\n        duration: 0.1,\n        ease: 'power1.out',\n      });\n\n      window.addEventListener('mousemove', (e) => {\n        xTo(e.clientX);\n        yTo(e.clientY);\n      });\n    }\n\n    \/\/ Video wrapper scale animation\n    if (videoWrapper) {\n      gsap.to(videoWrapper, {\n        scrollTrigger: {\n          trigger: section,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: 1,\n          invalidateOnRefresh: true,\n        },\n        scale: 1,\n        borderRadius: '0px',\n        ease: 'none'\n      });\n    }\n\n    \/\/ Overlay border radius and opacity animation\n    if (overlay) {\n      gsap.to(overlay, {\n        scrollTrigger: {\n          trigger: section,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: 1,\n          invalidateOnRefresh: true,\n        },\n        borderRadius: '0px',\n        opacity: 0,\n        ease: 'none'\n      });\n    }\n\n    \/\/ Iframe and video border radius animation\n    const mediaElements = [iframe, video].filter(Boolean);\n    mediaElements.forEach(element => {\n      if (element) {\n        gsap.to(element, {\n          scrollTrigger: {\n            trigger: section,\n            start: 'top top',\n            end: 'bottom bottom',\n            scrub: 1,\n            invalidateOnRefresh: true,\n          },\n          borderRadius: '0px',\n          ease: 'none'\n        });\n      }\n    });\n\n    \/\/ Text separator animation\n    if (textSeparator) {\n      gsap.fromTo(\n        textSeparator,\n        {\n          width: '35vw',\n          height: '35vh',\n        },\n        {\n          width: '2.5vw',\n          height: '2.5vh',\n          scrollTrigger: {\n            trigger: section,\n            start: 'top center',\n            end: 'bottom bottom',\n            scrub: 1,\n            invalidateOnRefresh: true,\n          },\n        }\n      );\n    }\n\n\n    \/\/ Refresh ScrollTrigger on window resize\n    window.addEventListener('resize', () => {\n      if (typeof ScrollTrigger !== 'undefined') {\n        ScrollTrigger.refresh();\n      }\n    });\n  }\n\n  \/\/ Initialize when DOM is ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initAnimatedVideo);\n  } else {\n    initAnimatedVideo();\n  }\n})();\n<\/script>\n\n  <section class=\"main-cta main-cta--h2 \" aria-labelledby=\"main-cta-heading\" >\n          <header class=\"main-cta__header\">\n                          <h2            id=\"main-cta-heading\"\n            class=\"main-cta__title main-cta__title--h2\"\n            >\n            Our Golden Circle          <\/h2>\n              <\/header>\n    \n    <div class=\"main-cta__content\">\n              <div class=\"main-cta__description main-cta__description--h2\"><p>We&#8217;re an independent powerhouse that transforms how businesses operate by eliminating repetitive tasks and creating intelligent workflows that grow with your organization.<\/p>\n<\/div>\n      \n          <\/div>\n  <\/section>\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      document.querySelectorAll('a[data-ph-event]').forEach(function(el) {\n        el.addEventListener('click', function() {\n          if (typeof posthog !== 'undefined') {\n            posthog.capture(el.dataset.phEvent, {\n              title: el.dataset.phTitle,\n              url: el.href,\n              section: 'main-cta'\n            });\n            console.log('PostHog event captured:', el.dataset.phEvent, el.dataset.phTitle);\n          }\n        });\n      });\n    });\n  <\/script>\n\n\n\n  <section id=\"\" class=\"reasons-block\" aria-label=\"Raz\u00f5es e benef\u00edcios\">\n    <div class=\"reasons-block__container\">\n      <div class=\"reasons-block__grid\">\n                              <article class=\"reasons-block__item bg-haipe_purple-500 text-white \" aria-labelledby=\"reason-title-0\">\n                              <div class=\"reasons-block__icon\">\n                  <figure class=\"reasons-block__icon-figure\">\n                    <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/interrogation.svg\" alt=\"interrogation icon\" class=\"reasons-block__icon-image\" loading=\"lazy\" title=\"\">\n                  <\/figure>\n                <\/div>\n              \n                              <header class=\"reasons-block__header\">\n                  <h3 id=\"reason-title-0\" class=\"reasons-block__title\">\n                    Why                  <\/h3>\n                <\/header>\n              \n                              <div class=\"reasons-block__content\">\n                  <div class=\"reasons-block__description\">\n                    We believe businesses should focus on strategic growth rather than repetitive tasks. We envision a world where intelligent automation liberates human potential by eliminating mundane work.                  <\/div>\n                <\/div>\n              \n              <!-- Line SVG based on card position -->\n                              <!-- Left card line -->\n                <div class=\"reasons-block__line reasons-block__line--left hidden xl:block\">\n                  <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/blocks\/reasons\/img\/line-card-left.svg\" alt=\"\" class=\"reasons-block__line-image\" loading=\"lazy\" title=\"\">\n                <\/div>\n                          <\/article>\n                                        <article class=\"reasons-block__item bg-haipe_purple-500 text-white reasons-block__item--second\" aria-labelledby=\"reason-title-1\">\n                              <div class=\"reasons-block__icon\">\n                  <figure class=\"reasons-block__icon-figure\">\n                    <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/list.svg\" alt=\"list icon\" class=\"reasons-block__icon-image\" loading=\"lazy\" title=\"\">\n                  <\/figure>\n                <\/div>\n              \n                              <header class=\"reasons-block__header\">\n                  <h3 id=\"reason-title-1\" class=\"reasons-block__title\">\n                    How                  <\/h3>\n                <\/header>\n              \n                              <div class=\"reasons-block__content\">\n                  <div class=\"reasons-block__description\">\n                    By combining creative problem-solving with technical expertise, we transform complex business processes into seamless automated workflows. We blend no-code platforms, custom code, and AI to create holistic systems that anticipate edge cases and grow with your business.                  <\/div>\n                <\/div>\n              \n              <!-- Line SVG based on card position -->\n                              <!-- Middle card lines -->\n                <div class=\"reasons-block__line reasons-block__line--middle-left hidden xl:block\">\n                  <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/blocks\/reasons\/img\/line-card-middle-left.svg\" alt=\"\" class=\"reasons-block__line-image\" loading=\"lazy\" title=\"\">\n                <\/div>\n                <div class=\"reasons-block__line reasons-block__line--middle-right hidden xl:block\">\n                  <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/blocks\/reasons\/img\/line-card-middle-right.svg\" alt=\"\" class=\"reasons-block__line-image\" loading=\"lazy\" title=\"\">\n                <\/div>\n                          <\/article>\n                                        <article class=\"reasons-block__item bg-haipe_purple-500 text-white \" aria-labelledby=\"reason-title-2\">\n                              <div class=\"reasons-block__icon\">\n                  <figure class=\"reasons-block__icon-figure\">\n                    <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/lightbulb.svg\" alt=\"lightbulb icon\" class=\"reasons-block__icon-image\" loading=\"lazy\" title=\"\">\n                  <\/figure>\n                <\/div>\n              \n                              <header class=\"reasons-block__header\">\n                  <h3 id=\"reason-title-2\" class=\"reasons-block__title\">\n                    What                  <\/h3>\n                <\/header>\n              \n                              <div class=\"reasons-block__content\">\n                  <div class=\"reasons-block__description\">\n                    We deliver ready-to-deploy automation packs and intelligent agents that eliminate repetitive work across lead management, client communication, financial operations, and reporting. Our solutions create immediate impact without requiring clients to become automation experts.                  <\/div>\n                <\/div>\n              \n              <!-- Line SVG based on card position -->\n                              <!-- Right card line -->\n                <div class=\"reasons-block__line reasons-block__line--right hidden xl:block\">\n                  <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/blocks\/reasons\/img\/line-card-right.svg\" alt=\"\" class=\"reasons-block__line-image\" loading=\"lazy\" title=\"\">\n                <\/div>\n                          <\/article>\n                        <\/div>\n    <\/div>\n  <\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const reasonsBlock = document.querySelector('.reasons-block');\n  \n  if (!reasonsBlock) return;\n  \n  const isMobile = window.innerWidth <= 768;\n  \n  const reasonsObserver = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('reasons-block-entrance');\n        \n        reasonsObserver.unobserve(entry.target);\n      }\n    });\n  }, {\n    threshold: isMobile ? 0.1 : 0.2,\n    rootMargin: isMobile ? '0px 0px -20px 0px' : '0px 0px -50px 0px'\n  });\n  \n  reasonsObserver.observe(reasonsBlock);\n  \n  window.addEventListener('resize', function() {\n    const newIsMobile = window.innerWidth <= 768;\n    if (newIsMobile !== isMobile) {\n      reasonsObserver.disconnect();\n      const newObserver = new IntersectionObserver((entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            entry.target.classList.add('reasons-block-entrance');\n            \n            newObserver.unobserve(entry.target);\n          }\n        });\n      }, {\n        threshold: newIsMobile ? 0.1 : 0.2,\n        rootMargin: newIsMobile ? '0px 0px -20px 0px' : '0px 0px -50px 0px'\n      });\n      newObserver.observe(reasonsBlock);\n    }\n  });\n  \n  const reasonItems = reasonsBlock.querySelectorAll('.reasons-block__item');\n  \n  reasonItems.forEach((item, index) => {\n    item.setAttribute('data-animation-index', index);\n  });\n  \n  const reasonLines = reasonsBlock.querySelectorAll('.reasons-block__line');\n  \n  reasonLines.forEach((line, index) => {\n    line.setAttribute('data-line-index', index);\n  });\n});\n<\/script>\n\n  <section class=\"main-cta main-cta--h2 \" aria-labelledby=\"main-cta-heading\" >\n          <header class=\"main-cta__header\">\n                          <h2            id=\"main-cta-heading\"\n            class=\"main-cta__title main-cta__title--h2\"\n            >\n            Client Success Stories          <\/h2>\n              <\/header>\n    \n    <div class=\"main-cta__content\">\n              <div class=\"main-cta__description main-cta__description--h2\"><p>Real results from real businesses. See how our automation solutions have transformed operations and delivered measurable impact across different industries.<\/p>\n<\/div>\n      \n              <footer class=\"main-cta__footer main-cta__footer--text\">\n                      <a href=\"https:\/\/haipestudio.com\/case-studies\/\"\n              class=\"main-cta__link btn-tertiary btn-tertiary--purple\"\n              data-ph-event=\"main_cta_click\"\n              data-ph-title=\"See all stories\"\n                            >\n              See all stories              <span class=\"btn-shine\"><\/span>\n            <\/a>\n                  <\/footer>\n          <\/div>\n  <\/section>\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      document.querySelectorAll('a[data-ph-event]').forEach(function(el) {\n        el.addEventListener('click', function() {\n          if (typeof posthog !== 'undefined') {\n            posthog.capture(el.dataset.phEvent, {\n              title: el.dataset.phTitle,\n              url: el.href,\n              section: 'main-cta'\n            });\n            console.log('PostHog event captured:', el.dataset.phEvent, el.dataset.phTitle);\n          }\n        });\n      });\n    });\n  <\/script>\n\n\n\n  <section id=\"\" class=\"client-stories-highlight-block\" aria-label=\"Client Stories\">\n    <div class=\"client-stories-highlight-block__container\">\n      <!-- Desktop\/Mobile Grid Layout -->\n      <div class=\"client-stories-highlight-block__grid\">\n                              <article class=\"client-stories-highlight-block__item\" aria-labelledby=\"story-title-0\">\n              <a href=\"https:\/\/haipestudio.com\/en\/case-studies\/woocommerce-automation-kilford\/\"\n                class=\"client-stories-highlight-block__card-link\"\n                aria-describedby=\"story-title-0\">\n\n\n                <div class=\"client-stories-highlight-block__content\">\n                  <header class=\"client-stories-highlight-block__header\">\n                                          <div class=\"client-stories-highlight-block__company-name\">\n                        Fine Art Printing                      <\/div>\n                    \n                                          <h3 id=\"story-title-0\" class=\"client-stories-highlight-block__title\">\n                        How Kilford Studios Scaled WooCommerce with Integrated Automation                      <\/h3>\n                    \n                                          <div class=\"client-stories-highlight-block__excerpt\">\n                        Automatizar as opera\u00e7\u00f5es, reduzir erros e duplicar a capacidade sem contratar mais colaboradores.                      <\/div>\n                                      <\/header>\n\n                  <footer class=\"client-stories-highlight-block__footer\">\n                    <span class=\"client-stories-highlight-block__link-text btn-primary\">\n                      <span class=\"btn-shine\"><\/span>\n                      Read More\n                      <svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M12.5 4.9248C12.6643 4.9248 12.7663 4.97331 12.8467 5.05371L19.4463 11.6533L19.4629 11.6689L19.4795 11.6836C19.4937 11.6955 19.5059 11.7083 19.5156 11.7227L19.5391 11.7715C19.5629 11.8448 19.5752 11.9204 19.5752 12C19.5752 12.0795 19.5633 12.1467 19.543 12.2051C19.5292 12.2434 19.5016 12.2914 19.4463 12.3467L12.8467 18.9463C12.7663 19.0267 12.6643 19.0752 12.5 19.0752C12.3357 19.0752 12.2337 19.0267 12.1533 18.9463C12.0899 18.8829 12.0452 18.8059 12.0244 18.7002L12.0117 18.585C12.0074 18.4253 12.0526 18.3293 12.1289 18.2529L17.8818 12.5H5.5C5.34291 12.5 5.23438 12.4521 5.14062 12.3584C5.0479 12.2657 5.00004 12.1576 5 12C5 11.8423 5.04827 11.7333 5.1416 11.6396L5.14062 11.6387C5.23395 11.5463 5.34314 11.5 5.5 11.5H17.8818L17.0283 10.6465L12.1289 5.74609C12.0526 5.6698 12.0074 5.57448 12.0117 5.41504C12.0169 5.24624 12.069 5.13821 12.1533 5.05371C12.2337 4.97331 12.3357 4.9248 12.5 4.9248Z\"\n                          fill=\"white\" stroke=\"white\" \/>\n                      <\/svg>\n                    <\/span>\n                  <\/footer>\n                <\/div>\n              <\/a>\n            <\/article>\n                                        <article class=\"client-stories-highlight-block__item\" aria-labelledby=\"story-title-1\">\n              <a href=\"https:\/\/haipestudio.com\/en\/case-studies\/recruitment-automation\/\"\n                class=\"client-stories-highlight-block__card-link\"\n                aria-describedby=\"story-title-1\">\n\n\n                <div class=\"client-stories-highlight-block__content\">\n                  <header class=\"client-stories-highlight-block__header\">\n                                          <div class=\"client-stories-highlight-block__company-name\">\n                        Technology                      <\/div>\n                    \n                                          <h3 id=\"story-title-1\" class=\"client-stories-highlight-block__title\">\n                        How a Growing Tech Studio Scaled Recruitment with End-to-End Automation                      <\/h3>\n                    \n                                          <div class=\"client-stories-highlight-block__excerpt\">\n                        Redu\u00e7\u00e3o do tempo de contrata\u00e7\u00e3o em 89% e aumento da capacidade em 5 vezes sem contrata\u00e7\u00e3o de pessoal adicional de RH.                      <\/div>\n                                      <\/header>\n\n                  <footer class=\"client-stories-highlight-block__footer\">\n                    <span class=\"client-stories-highlight-block__link-text btn-primary\">\n                      <span class=\"btn-shine\"><\/span>\n                      Read More\n                      <svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M12.5 4.9248C12.6643 4.9248 12.7663 4.97331 12.8467 5.05371L19.4463 11.6533L19.4629 11.6689L19.4795 11.6836C19.4937 11.6955 19.5059 11.7083 19.5156 11.7227L19.5391 11.7715C19.5629 11.8448 19.5752 11.9204 19.5752 12C19.5752 12.0795 19.5633 12.1467 19.543 12.2051C19.5292 12.2434 19.5016 12.2914 19.4463 12.3467L12.8467 18.9463C12.7663 19.0267 12.6643 19.0752 12.5 19.0752C12.3357 19.0752 12.2337 19.0267 12.1533 18.9463C12.0899 18.8829 12.0452 18.8059 12.0244 18.7002L12.0117 18.585C12.0074 18.4253 12.0526 18.3293 12.1289 18.2529L17.8818 12.5H5.5C5.34291 12.5 5.23438 12.4521 5.14062 12.3584C5.0479 12.2657 5.00004 12.1576 5 12C5 11.8423 5.04827 11.7333 5.1416 11.6396L5.14062 11.6387C5.23395 11.5463 5.34314 11.5 5.5 11.5H17.8818L17.0283 10.6465L12.1289 5.74609C12.0526 5.6698 12.0074 5.57448 12.0117 5.41504C12.0169 5.24624 12.069 5.13821 12.1533 5.05371C12.2337 4.97331 12.3357 4.9248 12.5 4.9248Z\"\n                          fill=\"white\" stroke=\"white\" \/>\n                      <\/svg>\n                    <\/span>\n                  <\/footer>\n                <\/div>\n              <\/a>\n            <\/article>\n                                        <article class=\"client-stories-highlight-block__item\" aria-labelledby=\"story-title-2\">\n              <a href=\"https:\/\/haipestudio.com\/en\/case-studies\/client-onboarding-automation-2\/\"\n                class=\"client-stories-highlight-block__card-link\"\n                aria-describedby=\"story-title-2\">\n\n\n                <div class=\"client-stories-highlight-block__content\">\n                  <header class=\"client-stories-highlight-block__header\">\n                                          <div class=\"client-stories-highlight-block__company-name\">\n                        Creative and Digital Services                      <\/div>\n                    \n                                          <h3 id=\"story-title-2\" class=\"client-stories-highlight-block__title\">\n                        How a Digital Agency Transformed Client Onboarding                      <\/h3>\n                    \n                                          <div class=\"client-stories-highlight-block__excerpt\">\n                        Reduzir o processo de integra\u00e7\u00e3o de 2 horas para menos de 3 minutos, ao mesmo tempo que se melhora a satisfa\u00e7\u00e3o do cliente.                      <\/div>\n                                      <\/header>\n\n                  <footer class=\"client-stories-highlight-block__footer\">\n                    <span class=\"client-stories-highlight-block__link-text btn-primary\">\n                      <span class=\"btn-shine\"><\/span>\n                      Read More\n                      <svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M12.5 4.9248C12.6643 4.9248 12.7663 4.97331 12.8467 5.05371L19.4463 11.6533L19.4629 11.6689L19.4795 11.6836C19.4937 11.6955 19.5059 11.7083 19.5156 11.7227L19.5391 11.7715C19.5629 11.8448 19.5752 11.9204 19.5752 12C19.5752 12.0795 19.5633 12.1467 19.543 12.2051C19.5292 12.2434 19.5016 12.2914 19.4463 12.3467L12.8467 18.9463C12.7663 19.0267 12.6643 19.0752 12.5 19.0752C12.3357 19.0752 12.2337 19.0267 12.1533 18.9463C12.0899 18.8829 12.0452 18.8059 12.0244 18.7002L12.0117 18.585C12.0074 18.4253 12.0526 18.3293 12.1289 18.2529L17.8818 12.5H5.5C5.34291 12.5 5.23438 12.4521 5.14062 12.3584C5.0479 12.2657 5.00004 12.1576 5 12C5 11.8423 5.04827 11.7333 5.1416 11.6396L5.14062 11.6387C5.23395 11.5463 5.34314 11.5 5.5 11.5H17.8818L17.0283 10.6465L12.1289 5.74609C12.0526 5.6698 12.0074 5.57448 12.0117 5.41504C12.0169 5.24624 12.069 5.13821 12.1533 5.05371C12.2337 4.97331 12.3357 4.9248 12.5 4.9248Z\"\n                          fill=\"white\" stroke=\"white\" \/>\n                      <\/svg>\n                    <\/span>\n                  <\/footer>\n                <\/div>\n              <\/a>\n            <\/article>\n                        <\/div>\n\n      <!-- Tablet Swiper Layout -->\n      <div class=\"client-stories-highlight-block__swiper-container\">\n        <div class=\"swiper client-stories-highlight-swiper\">\n          <div class=\"swiper-wrapper\">\n                                          <div class=\"swiper-slide\">\n                  <article class=\"client-stories-highlight-block__item\" aria-labelledby=\"story-title-swiper-0\">\n                    <a href=\"https:\/\/haipestudio.com\/en\/case-studies\/woocommerce-automation-kilford\/\"\n                      class=\"client-stories-highlight-block__card-link\"\n                      aria-describedby=\"story-title-swiper-0\">\n\n\n                      <div class=\"client-stories-highlight-block__content\">\n                                                  <div class=\"client-stories-highlight-block__company-name\">\n                            Fine Art Printing                          <\/div>\n                        \n                                                  <h3 id=\"story-title-swiper-0\" class=\"client-stories-highlight-block__title\">\n                            How Kilford Studios Scaled WooCommerce with Integrated Automation                          <\/h3>\n                        \n                                                  <div class=\"client-stories-highlight-block__excerpt\">\n                            Automatizar as opera\u00e7\u00f5es, reduzir erros e duplicar a capacidade sem contratar mais colaboradores.                          <\/div>\n                        \n                        <div class=\"client-stories-highlight-block__footer\">\n                          <span class=\"client-stories-highlight-block__link-text btn-primary\">\n                            <span class=\"btn-shine\"><\/span>\n                            Read More\n                            <svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.5 4.9248C12.6643 4.9248 12.7663 4.97331 12.8467 5.05371L19.4463 11.6533L19.4629 11.6689L19.4795 11.6836C19.4937 11.6955 19.5059 11.7083 19.5156 11.7227L19.5391 11.7715C19.5629 11.8448 19.5752 11.9204 19.5752 12C19.5752 12.0795 19.5633 12.1467 19.543 12.2051C19.5292 12.2434 19.5016 12.2914 19.4463 12.3467L12.8467 18.9463C12.7663 19.0267 12.6643 19.0752 12.5 19.0752C12.3357 19.0752 12.2337 19.0267 12.1533 18.9463C12.0899 18.8829 12.0452 18.8059 12.0244 18.7002L12.0117 18.585C12.0074 18.4253 12.0526 18.3293 12.1289 18.2529L17.8818 12.5H5.5C5.34291 12.5 5.23438 12.4521 5.14062 12.3584C5.0479 12.2657 5.00004 12.1576 5 12C5 11.8423 5.04827 11.7333 5.1416 11.6396L5.14062 11.6387C5.23395 11.5463 5.34314 11.5 5.5 11.5H17.8818L17.0283 10.6465L12.1289 5.74609C12.0526 5.6698 12.0074 5.57448 12.0117 5.41504C12.0169 5.24624 12.069 5.13821 12.1533 5.05371C12.2337 4.97331 12.3357 4.9248 12.5 4.9248Z\" fill=\"#010A10\" stroke=\"white\" \/>\n                            <\/svg>\n                          <\/span>\n                        <\/div>\n                      <\/div>\n                    <\/a>\n                  <\/article>\n                <\/div>\n                                                        <div class=\"swiper-slide\">\n                  <article class=\"client-stories-highlight-block__item\" aria-labelledby=\"story-title-swiper-1\">\n                    <a href=\"https:\/\/haipestudio.com\/en\/case-studies\/recruitment-automation\/\"\n                      class=\"client-stories-highlight-block__card-link\"\n                      aria-describedby=\"story-title-swiper-1\">\n\n\n                      <div class=\"client-stories-highlight-block__content\">\n                                                  <div class=\"client-stories-highlight-block__company-name\">\n                            Technology                          <\/div>\n                        \n                                                  <h3 id=\"story-title-swiper-1\" class=\"client-stories-highlight-block__title\">\n                            How a Growing Tech Studio Scaled Recruitment with End-to-End Automation                          <\/h3>\n                        \n                                                  <div class=\"client-stories-highlight-block__excerpt\">\n                            Redu\u00e7\u00e3o do tempo de contrata\u00e7\u00e3o em 89% e aumento da capacidade em 5 vezes sem contrata\u00e7\u00e3o de pessoal adicional de RH.                          <\/div>\n                        \n                        <div class=\"client-stories-highlight-block__footer\">\n                          <span class=\"client-stories-highlight-block__link-text btn-primary\">\n                            <span class=\"btn-shine\"><\/span>\n                            Read More\n                            <svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.5 4.9248C12.6643 4.9248 12.7663 4.97331 12.8467 5.05371L19.4463 11.6533L19.4629 11.6689L19.4795 11.6836C19.4937 11.6955 19.5059 11.7083 19.5156 11.7227L19.5391 11.7715C19.5629 11.8448 19.5752 11.9204 19.5752 12C19.5752 12.0795 19.5633 12.1467 19.543 12.2051C19.5292 12.2434 19.5016 12.2914 19.4463 12.3467L12.8467 18.9463C12.7663 19.0267 12.6643 19.0752 12.5 19.0752C12.3357 19.0752 12.2337 19.0267 12.1533 18.9463C12.0899 18.8829 12.0452 18.8059 12.0244 18.7002L12.0117 18.585C12.0074 18.4253 12.0526 18.3293 12.1289 18.2529L17.8818 12.5H5.5C5.34291 12.5 5.23438 12.4521 5.14062 12.3584C5.0479 12.2657 5.00004 12.1576 5 12C5 11.8423 5.04827 11.7333 5.1416 11.6396L5.14062 11.6387C5.23395 11.5463 5.34314 11.5 5.5 11.5H17.8818L17.0283 10.6465L12.1289 5.74609C12.0526 5.6698 12.0074 5.57448 12.0117 5.41504C12.0169 5.24624 12.069 5.13821 12.1533 5.05371C12.2337 4.97331 12.3357 4.9248 12.5 4.9248Z\" fill=\"#010A10\" stroke=\"white\" \/>\n                            <\/svg>\n                          <\/span>\n                        <\/div>\n                      <\/div>\n                    <\/a>\n                  <\/article>\n                <\/div>\n                                                        <div class=\"swiper-slide\">\n                  <article class=\"client-stories-highlight-block__item\" aria-labelledby=\"story-title-swiper-2\">\n                    <a href=\"https:\/\/haipestudio.com\/en\/case-studies\/client-onboarding-automation-2\/\"\n                      class=\"client-stories-highlight-block__card-link\"\n                      aria-describedby=\"story-title-swiper-2\">\n\n\n                      <div class=\"client-stories-highlight-block__content\">\n                                                  <div class=\"client-stories-highlight-block__company-name\">\n                            Creative and Digital Services                          <\/div>\n                        \n                                                  <h3 id=\"story-title-swiper-2\" class=\"client-stories-highlight-block__title\">\n                            How a Digital Agency Transformed Client Onboarding                          <\/h3>\n                        \n                                                  <div class=\"client-stories-highlight-block__excerpt\">\n                            Reduzir o processo de integra\u00e7\u00e3o de 2 horas para menos de 3 minutos, ao mesmo tempo que se melhora a satisfa\u00e7\u00e3o do cliente.                          <\/div>\n                        \n                        <div class=\"client-stories-highlight-block__footer\">\n                          <span class=\"client-stories-highlight-block__link-text btn-primary\">\n                            <span class=\"btn-shine\"><\/span>\n                            Read More\n                            <svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.5 4.9248C12.6643 4.9248 12.7663 4.97331 12.8467 5.05371L19.4463 11.6533L19.4629 11.6689L19.4795 11.6836C19.4937 11.6955 19.5059 11.7083 19.5156 11.7227L19.5391 11.7715C19.5629 11.8448 19.5752 11.9204 19.5752 12C19.5752 12.0795 19.5633 12.1467 19.543 12.2051C19.5292 12.2434 19.5016 12.2914 19.4463 12.3467L12.8467 18.9463C12.7663 19.0267 12.6643 19.0752 12.5 19.0752C12.3357 19.0752 12.2337 19.0267 12.1533 18.9463C12.0899 18.8829 12.0452 18.8059 12.0244 18.7002L12.0117 18.585C12.0074 18.4253 12.0526 18.3293 12.1289 18.2529L17.8818 12.5H5.5C5.34291 12.5 5.23438 12.4521 5.14062 12.3584C5.0479 12.2657 5.00004 12.1576 5 12C5 11.8423 5.04827 11.7333 5.1416 11.6396L5.14062 11.6387C5.23395 11.5463 5.34314 11.5 5.5 11.5H17.8818L17.0283 10.6465L12.1289 5.74609C12.0526 5.6698 12.0074 5.57448 12.0117 5.41504C12.0169 5.24624 12.069 5.13821 12.1533 5.05371C12.2337 4.97331 12.3357 4.9248 12.5 4.9248Z\" fill=\"#010A10\" stroke=\"white\" \/>\n                            <\/svg>\n                          <\/span>\n                        <\/div>\n                      <\/div>\n                    <\/a>\n                  <\/article>\n                <\/div>\n                                    <\/div>\n          <!-- Swiper Pagination -->\n          <div class=\"swiper-pagination\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Check if Swiper is available and if we're on tablet\n  if (typeof Swiper !== 'undefined') {\n    \/\/ Initialize Swiper for tablet view\n    const clientStoriesSwiper = new Swiper('.client-stories-highlight-swiper', {\n      slidesPerView: 2,\n      spaceBetween: 24,\n      loop: false,\n      autoplay: false,\n      pagination: {\n        el: '.client-stories-highlight-swiper .swiper-pagination',\n        clickable: true,\n        dynamicBullets: true,\n      },\n      breakpoints: {\n        \/\/ Tablet only - sm: (640px) to lg: (1024px)\n        640: {\n          slidesPerView: 2,\n          spaceBetween: 24,\n        },\n        768: {\n          slidesPerView: 2,\n          spaceBetween: 24,\n        },\n        \/\/ Desktop - hide swiper and show grid\n        1024: {\n          slidesPerView: 1,\n          spaceBetween: 0,\n          allowTouchMove: false,\n        }\n      }\n    });\n  }\n\n  \/\/ Client Stories Highlight Entrance Animation - works with multiple blocks\n  const clientStoriesBlocks = document.querySelectorAll('.client-stories-highlight-block');\n  \n  clientStoriesBlocks.forEach((block, index) => {\n    \/\/ Intersection Observer for scroll-triggered animation\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('client-stories-highlight-entrance');\n          observer.unobserve(entry.target);\n        }\n      });\n    }, {\n      threshold: 0.1,\n      rootMargin: '0px 0px -50px 0px'\n    });\n    \n    observer.observe(block);\n  });\n});\n<\/script> \n\n\n<section class=\"full-width-cta\" aria-labelledby=\"full-width-cta-heading\" >\n\n  <div class=\"full-width-cta__container\">\n    <!-- Background SVG for mobile and desktop -->\n    <div class=\"full-width-cta__background\" aria-hidden=\"true\">\n      <svg width=\"312\" height=\"471\" viewBox=\"0 0 312 471\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M37.939 386.955L53.2172 470.488L224.082 371.839L157.968 317.657L37.939 386.955Z\" fill=\"#FFFFFF\"\/>\n<path d=\"M0.0971518 182.814L25.7494 320.186L106.945 273.308L0.0971518 182.814Z\" fill=\"#FFFFFF\"\/>\n<path d=\"M179.476 93.214L311.261 321.472L10.7543 67.2631L126.059 0.692169L154.48 49.9189L231.889 5.22669L256.885 48.5217L179.476 93.214Z\" \nfill=\"#FFFFFF\"\/>\n<\/svg>\n    <\/div>\n\n    <div class=\"full-width-cta__bg-svg full-width-cta__bg-svg--left\" aria-hidden=\"true\">\n      <svg width=\"312\" height=\"471\" viewBox=\"0 0 312 471\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M37.939 386.955L53.2172 470.488L224.082 371.839L157.968 317.657L37.939 386.955Z\" fill=\"#FFFFFF\"\/>\n<path d=\"M0.0971518 182.814L25.7494 320.186L106.945 273.308L0.0971518 182.814Z\" fill=\"#FFFFFF\"\/>\n<path d=\"M179.476 93.214L311.261 321.472L10.7543 67.2631L126.059 0.692169L154.48 49.9189L231.889 5.22669L256.885 48.5217L179.476 93.214Z\" \nfill=\"#FFFFFF\"\/>\n<\/svg>\n    <\/div>\n\n    <div class=\"full-width-cta__bg-svg full-width-cta__bg-svg--right\" aria-hidden=\"true\">\n      <svg width=\"312\" height=\"471\" viewBox=\"0 0 312 471\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M37.939 386.955L53.2172 470.488L224.082 371.839L157.968 317.657L37.939 386.955Z\" fill=\"#FFFFFF\"\/>\n<path d=\"M0.0971518 182.814L25.7494 320.186L106.945 273.308L0.0971518 182.814Z\" fill=\"#FFFFFF\"\/>\n<path d=\"M179.476 93.214L311.261 321.472L10.7543 67.2631L126.059 0.692169L154.48 49.9189L231.889 5.22669L256.885 48.5217L179.476 93.214Z\" \nfill=\"#FFFFFF\"\/>\n<\/svg>\n    <\/div>\n\n    <div class=\"full-width-cta__content-wrapper\">\n              <header class=\"full-width-cta__header\">\n          <h2 id=\"full-width-cta-heading\" class=\"full-width-cta__title\">\n            Discover Your  Automation Potential          <\/h2>\n        <\/header>\n      \n              <div class=\"full-width-cta__content\">\n          <div class=\"full-width-cta__description\">\n            <p>Real results from real businesses. See how our automation solutions have transformed  operations and delivered measurable impact across different industries.<\/p>\n          <\/div>\n        <\/div>\n      \n              <footer class=\"full-width-cta__footer\">\n          <div class=\"full-width-cta__links\">\n                          <a href=\"\/free-audit\/\"\n                class=\"full-width-cta__button btn-secondary\"\n                                >\n                Free Audit                <span class=\"btn-shine\"><\/span>\n              <\/a>\n            \n                      <\/div>\n        <\/footer>\n          <\/div>\n\n  <\/div>\n\n<\/section>\n\n<section class=\"testimonial-slider\" aria-labelledby=\"testimonial-slider-heading\">\n  <div class=\"testimonial-slider__container\">\n    <header class=\"testimonial-slider__header\">\n      <div class=\"testimonial-slider__content\">\n                  <h2 id=\"testimonial-slider-heading\" class=\"testimonial-slider__title\">\n            Client Success           <\/h2>\n                          <p class=\"testimonial-slider__description\">\n            See how our automation solutions have transformed operations \r\nand delivered measurable impact across different industries.          <\/p>\n              <\/div>\n\n      <!-- Navigation buttons - positioned at top right on desktop -->\n      <nav class=\"testimonial-slider__navigation\" aria-label=\"Testimonial navigation\">\n        <div class=\"testimonial-slider__nav-buttons\">\n          <button\n            class=\"testimonial-slider__nav-button testimonial-slider__nav-button--prev\"\n            aria-label=\"Previous testimonial\"\n            type=\"button\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M7.57715 0.911621C7.71047 0.907883 7.81642 0.94777 7.92188 1.05322L7.92871 1.06104L7.9375 1.06885C8.03659 1.15979 8.08341 1.26097 8.08789 1.40283C8.0915 1.53588 8.05159 1.64128 7.94629 1.74658L3.04688 6.64697L2.19336 7.50049H14.5752C14.7318 7.50053 14.8404 7.54703 14.9336 7.63916V7.64014C15.0269 7.7338 15.0752 7.84279 15.0752 8.00049C15.0751 8.15795 15.0272 8.26621 14.9346 8.35889C14.8409 8.45255 14.7322 8.50045 14.5752 8.50049H2.19336L7.94629 14.2534C8.00973 14.3169 8.0554 14.3937 8.07617 14.4995L8.08789 14.6157C8.09167 14.7605 8.04929 14.851 7.96191 14.9312L7.94629 14.9458L7.93164 14.9624C7.84765 15.054 7.74981 15.1001 7.59961 15.1001C7.44887 15.1 7.33444 15.0527 7.22852 14.9468L0.628906 8.34619C0.57363 8.29091 0.546011 8.24386 0.532227 8.20557C0.511895 8.14722 0.500041 8.07998 0.5 8.00049C0.5 7.92075 0.511829 7.85291 0.532227 7.79443C0.546011 7.75614 0.573631 7.70908 0.628906 7.65381L7.22852 1.05322C7.31604 0.965783 7.42165 0.916648 7.57715 0.911621Z\"\n                fill=\"white\" stroke=\"white\" \/>\n            <\/svg>\n          <\/button>\n          <button\n            class=\"testimonial-slider__nav-button testimonial-slider__nav-button--next\"\n            aria-label=\"Next testimonial\"\n            type=\"button\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M8 0.924805C8.16427 0.924805 8.26628 0.973309 8.34668 1.05371L14.9463 7.65332L14.9629 7.66895L14.9795 7.68359C14.9937 7.69547 15.0059 7.70828 15.0156 7.72266L15.0391 7.77148C15.0629 7.84481 15.0752 7.92042 15.0752 8C15.0752 8.07947 15.0633 8.14674 15.043 8.20508C15.0292 8.24337 15.0016 8.2914 14.9463 8.34668L8.34668 14.9463C8.26628 15.0267 8.16427 15.0752 8 15.0752C7.83573 15.0752 7.73372 15.0267 7.65332 14.9463C7.58992 14.8829 7.54517 14.8059 7.52441 14.7002L7.51172 14.585C7.50736 14.4253 7.55255 14.3293 7.62891 14.2529L13.3818 8.5H1C0.842909 8.5 0.734383 8.45211 0.640625 8.3584C0.547905 8.26568 0.500039 8.15758 0.5 8C0.5 7.8423 0.548267 7.73331 0.641602 7.63965L0.640625 7.63867C0.733947 7.54631 0.843139 7.5 1 7.5H13.3818L12.5283 6.64648L7.62891 1.74609C7.55261 1.6698 7.50744 1.57448 7.51172 1.41504C7.51689 1.24624 7.56896 1.13821 7.65332 1.05371C7.73372 0.973309 7.83573 0.924805 8 0.924805Z\"\n                fill=\"white\" stroke=\"white\" \/>\n            <\/svg>\n          <\/button>\n        <\/div>\n      <\/nav>\n    <\/header>\n\n          <div class=\"testimonial-slider-69d044e3c5458 testimonial-slider__swiper swiper\" role=\"region\" aria-label=\"Testimonials carousel\">\n        <div class=\"testimonial-slider__swiper-wrapper swiper-wrapper\">\n                      <div class=\"testimonial-slider__slide swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"Testimonial 1 of 6\">\n              <article class=\"testimonial-slider__item\">\n                <!-- Purple quote icon -->\n                <div class=\"testimonial-slider__quote\" aria-hidden=\"true\">\n                  <svg width=\"24\" height=\"19\" viewBox=\"0 0 24 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M8.6935 0L7.05882 8.86122H10.031V18.6667H0V8.71595L2.67492 0H8.6935ZM22.6625 0L21.0279 8.86122H24V18.6667H13.969V8.71595L16.644 0H22.6625Z\"\n                      fill=\"#663BB7\" \/>\n                  <\/svg>\n                <\/div>\n\n                <blockquote class=\"testimonial-slider__text\">\n                  \u201cHaipe transformed our hiring process from a major bottleneck into a strategic advantage. The automation system they built doesn&#039;t just save time\u2014it&#039;s actually improved our candidate experience and allowed us to be more responsive. The process went from 45 minutes per candidate to under 5. Now we can scale hiring without more HR overhead.\u201d                <\/blockquote>\n\n                <footer class=\"testimonial-slider__author\">\n                                    <div class=\"testimonial-slider__author-info\">\n                    <cite class=\"testimonial-slider__author-name\">\n                      Sofia M.                    <\/cite>\n                    <p class=\"testimonial-slider__author-role\">\n                      Operations Director                    <\/p>\n                  <\/div>\n                <\/footer>\n              <\/article>\n            <\/div>\n                      <div class=\"testimonial-slider__slide swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"Testimonial 2 of 6\">\n              <article class=\"testimonial-slider__item\">\n                <!-- Purple quote icon -->\n                <div class=\"testimonial-slider__quote\" aria-hidden=\"true\">\n                  <svg width=\"24\" height=\"19\" viewBox=\"0 0 24 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M8.6935 0L7.05882 8.86122H10.031V18.6667H0V8.71595L2.67492 0H8.6935ZM22.6625 0L21.0279 8.86122H24V18.6667H13.969V8.71595L16.644 0H22.6625Z\"\n                      fill=\"#663BB7\" \/>\n                  <\/svg>\n                <\/div>\n\n                <blockquote class=\"testimonial-slider__text\">\n                  \u201cBefore Haipe, our onboarding was frankly chaotic. Now it&#039;s a well-oiled machine, even with 8-10 new clients each month. The consistency has dramatically improved our clients&#039; first impressions, and my team has reclaimed dozens of hours previously spent on tedious setup. The system paid for itself within the first month.\u201d                <\/blockquote>\n\n                <footer class=\"testimonial-slider__author\">\n                                    <div class=\"testimonial-slider__author-info\">\n                    <cite class=\"testimonial-slider__author-name\">\n                      Marco T.                    <\/cite>\n                    <p class=\"testimonial-slider__author-role\">\n                      Managing Director                    <\/p>\n                  <\/div>\n                <\/footer>\n              <\/article>\n            <\/div>\n                      <div class=\"testimonial-slider__slide swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"Testimonial 3 of 6\">\n              <article class=\"testimonial-slider__item\">\n                <!-- Purple quote icon -->\n                <div class=\"testimonial-slider__quote\" aria-hidden=\"true\">\n                  <svg width=\"24\" height=\"19\" viewBox=\"0 0 24 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M8.6935 0L7.05882 8.86122H10.031V18.6667H0V8.71595L2.67492 0H8.6935ZM22.6625 0L21.0279 8.86122H24V18.6667H13.969V8.71595L16.644 0H22.6625Z\"\n                      fill=\"#663BB7\" \/>\n                  <\/svg>\n                <\/div>\n\n                <blockquote class=\"testimonial-slider__text\">\n                  \u201cThe profitability system HAIPE built has transformed how we run our business. Before, we&#039;d only discover project profitability issues after it was too late to correct course. Now we have crystal-clear visibility into every project&#039;s financial health in real-time. This gave us financial clarity without the weekly spreadsheet pain, and has directly improved our bottom line by allowing us to make smarter resourcing decisions.\u201d                <\/blockquote>\n\n                <footer class=\"testimonial-slider__author\">\n                                    <div class=\"testimonial-slider__author-info\">\n                    <cite class=\"testimonial-slider__author-name\">\n                      Carolina L.                    <\/cite>\n                    <p class=\"testimonial-slider__author-role\">\n                      Finance Director                    <\/p>\n                  <\/div>\n                <\/footer>\n              <\/article>\n            <\/div>\n                      <div class=\"testimonial-slider__slide swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"Testimonial 4 of 6\">\n              <article class=\"testimonial-slider__item\">\n                <!-- Purple quote icon -->\n                <div class=\"testimonial-slider__quote\" aria-hidden=\"true\">\n                  <svg width=\"24\" height=\"19\" viewBox=\"0 0 24 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M8.6935 0L7.05882 8.86122H10.031V18.6667H0V8.71595L2.67492 0H8.6935ZM22.6625 0L21.0279 8.86122H24V18.6667H13.969V8.71595L16.644 0H22.6625Z\"\n                      fill=\"#663BB7\" \/>\n                  <\/svg>\n                <\/div>\n\n                <blockquote class=\"testimonial-slider__text\">\n                  \u201cOur team was drowning in manual updates and reporting. Haipe built a system that now handles everything in the background\u2014reports arrive automatically, error-free, and on time. We\u2019ve saved 20+ hours every week, and the peace of mind is priceless.\u201d\r\n                <\/blockquote>\n\n                <footer class=\"testimonial-slider__author\">\n                                    <div class=\"testimonial-slider__author-info\">\n                    <cite class=\"testimonial-slider__author-name\">\n                      Luis R.                    <\/cite>\n                    <p class=\"testimonial-slider__author-role\">\n                      Operations Manager                    <\/p>\n                  <\/div>\n                <\/footer>\n              <\/article>\n            <\/div>\n                      <div class=\"testimonial-slider__slide swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"Testimonial 5 of 6\">\n              <article class=\"testimonial-slider__item\">\n                <!-- Purple quote icon -->\n                <div class=\"testimonial-slider__quote\" aria-hidden=\"true\">\n                  <svg width=\"24\" height=\"19\" viewBox=\"0 0 24 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M8.6935 0L7.05882 8.86122H10.031V18.6667H0V8.71595L2.67492 0H8.6935ZM22.6625 0L21.0279 8.86122H24V18.6667H13.969V8.71595L16.644 0H22.6625Z\"\n                      fill=\"#663BB7\" \/>\n                  <\/svg>\n                <\/div>\n\n                <blockquote class=\"testimonial-slider__text\">\n                  \u201dScaling fast meant we couldn\u2019t afford bottlenecks. Haipe\u2019s automations turned what used to be chaotic lead management into a seamless flow. The best part? We saw ROI in less than a month\u2014our team can now focus fully on customers instead of admin\u201d                <\/blockquote>\n\n                <footer class=\"testimonial-slider__author\">\n                                    <div class=\"testimonial-slider__author-info\">\n                    <cite class=\"testimonial-slider__author-name\">\n                      Alex P.                    <\/cite>\n                    <p class=\"testimonial-slider__author-role\">\n                      SaaS Founder                    <\/p>\n                  <\/div>\n                <\/footer>\n              <\/article>\n            <\/div>\n                      <div class=\"testimonial-slider__slide swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"Testimonial 6 of 6\">\n              <article class=\"testimonial-slider__item\">\n                <!-- Purple quote icon -->\n                <div class=\"testimonial-slider__quote\" aria-hidden=\"true\">\n                  <svg width=\"24\" height=\"19\" viewBox=\"0 0 24 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M8.6935 0L7.05882 8.86122H10.031V18.6667H0V8.71595L2.67492 0H8.6935ZM22.6625 0L21.0279 8.86122H24V18.6667H13.969V8.71595L16.644 0H22.6625Z\"\n                      fill=\"#663BB7\" \/>\n                  <\/svg>\n                <\/div>\n\n                <blockquote class=\"testimonial-slider__text\">\n                  \u201cCompliance and security were non-negotiable for us. Haipe not only delivered robust automations that integrate with our ERP, but also gave us the documentation and governance we needed. It\u2019s rare to find a partner that combines speed, creativity, and enterprise-level discipline.\u201d\r\n                <\/blockquote>\n\n                <footer class=\"testimonial-slider__author\">\n                                    <div class=\"testimonial-slider__author-info\">\n                    <cite class=\"testimonial-slider__author-name\">\n                      Richard S.                    <\/cite>\n                    <p class=\"testimonial-slider__author-role\">\n                      Digital Transformation Director                    <\/p>\n                  <\/div>\n                <\/footer>\n              <\/article>\n            <\/div>\n                  <\/div>\n\n        <!-- Hidden default swiper elements - we'll use custom ones -->\n        <div class=\"testimonial-slider__pagination swiper-pagination\" aria-hidden=\"true\"><\/div>\n        <div class=\"testimonial-slider__button-next swiper-button-next\" aria-hidden=\"true\"><\/div>\n        <div class=\"testimonial-slider__button-prev swiper-button-prev\" aria-hidden=\"true\"><\/div>\n      <\/div>\n\n      <script>\n(function() {\n\n  function initTestimonialSlider() {\n\n    if (typeof Swiper === 'undefined') {\n      setTimeout(initTestimonialSlider, 100);\n      return;\n    }\n    \n    \/\/ Initialize Swiper\n    const swiper = new Swiper('.testimonial-slider-69d044e3c5458', {\n      slidesPerView: 1,\n      spaceBetween: 24,\n      loop: false, \n      allowTouchMove: true,\n      grabCursor: true,\n      watchSlidesProgress: true,\n      shortSwipes: true,\n      longSwipes: true,\n      longSwipesRatio: 0.25,\n      longSwipesMs: 300,\n      resistance: true,\n      resistanceRatio: 0.85,\n      followFinger: true,\n      touchReleaseOnEdges: true,\n      preventInteractionOnTransition: false,\n      touchStartPreventDefault: false,\n      touchMoveStopPropagation: false,\n      simulateTouch: true,\n      touchRatio: 1,\n      touchAngle: 45,\n      threshold: 5,\n      pagination: {\n        el: '.testimonial-slider-69d044e3c5458 .testimonial-slider__pagination',\n        clickable: true,\n        dynamicBullets: true,\n      },\n      navigation: {\n        nextEl: '.testimonial-slider-69d044e3c5458 .testimonial-slider__button-next',\n        prevEl: '.testimonial-slider-69d044e3c5458 .testimonial-slider__button-prev',\n      },\n      breakpoints: {\n        640: {\n          slidesPerView: 2.2, \n          spaceBetween: 24,\n        },\n        1024: {\n          slidesPerView: 3.1, \n          spaceBetween: 32,\n        },\n        1536: {\n          slidesPerView: 3.5, \n          spaceBetween: 32,\n        },\n      },\n    });\n\n    \/\/ Wait for elements to be fully rendered\n    setTimeout(function() {\n      \/\/ Find navigation buttons\n      let prevButton = document.querySelector('.testimonial-slider__nav-button--prev');\n      let nextButton = document.querySelector('.testimonial-slider__nav-button--next');\n      \n      \/\/ Find the green separator line\n      const separatorLine = document.querySelector('.testimonial-slider__separator');\n      \n      \/\/ If not found, try to find by parent container\n      if (!prevButton || !nextButton) {\n        const testimonialSection = document.querySelector('.testimonial-slider');\n        if (testimonialSection) {\n          prevButton = testimonialSection.querySelector('.testimonial-slider__nav-button--prev');\n          nextButton = testimonialSection.querySelector('.testimonial-slider__nav-button--next');\n        }\n      }\n      \n      \/\/ Add click events to custom buttons\n      if (prevButton) {\n        prevButton.addEventListener('click', function(e) {\n          e.preventDefault();\n          swiper.slidePrev();\n        });\n      }\n\n      if (nextButton) {\n        nextButton.addEventListener('click', function(e) {\n          e.preventDefault();\n          swiper.slideNext();\n        });\n      }\n      \n      \/\/ Update button states based on Swiper's native properties\n      function updateButtonStates() {\n        if (prevButton) {\n          const isBeginning = swiper.isBeginning;\n          prevButton.disabled = isBeginning;\n          prevButton.classList.toggle('opacity-50', isBeginning);\n          prevButton.classList.toggle('cursor-not-allowed', isBeginning);\n        }\n        \n        if (nextButton) {\n          const isEnd = swiper.isEnd;\n          nextButton.disabled = isEnd;\n          nextButton.classList.toggle('opacity-50', isEnd);\n          nextButton.classList.toggle('cursor-not-allowed', isEnd);\n        }\n      }\n      \n      \/\/ Function removed - replaced by moveSeparatorToSlide\n      \n      \/\/ Simple and reliable separator movement based on slide position\n      function moveSeparatorToSlide(slideIndex) {\n        if (separatorLine) {\n          const totalSlides = swiper.slides.length;\n          \n          \/\/ Calculate progress considering multiple slides visible on larger screens\n          let progress;\n          if (window.innerWidth >= 1024) {\n            \/\/ Desktop: 3.5 slides visible, need to account for partial visibility\n            progress = Math.min(1, slideIndex \/ (totalSlides - 3.5));\n          } else if (window.innerWidth >= 640) {\n            \/\/ Tablet: 2.2 slides visible\n            progress = Math.min(1, slideIndex \/ (totalSlides - 2.2));\n          } else {\n            \/\/ Mobile: 1 slide visible\n            progress = slideIndex \/ (totalSlides - 1);\n          }\n          \n          const separatorContainer = separatorLine.closest('.testimonial-slider__separator-container');\n          if (!separatorContainer) return;\n          \n          const containerWidth = separatorContainer.offsetWidth;\n          \n          \/\/ Get line width based on responsive breakpoints (same as CSS)\n          let lineWidth;\n          if (window.innerWidth >= 1024) {\n            lineWidth = 640; \/\/ Desktop\n          } else if (window.innerWidth >= 640) {\n            lineWidth = 320; \/\/ Tablet\n          } else {\n            lineWidth = 215; \/\/ Mobile\n          }\n          \n          \/\/ Calculate available space for movement\n          const availableSpace = Math.max(0, containerWidth - lineWidth);\n          \n          \/\/ Calculate left position with proper centering\n          let leftPosition;\n          if (availableSpace > 0) {\n            leftPosition = progress * availableSpace;\n          } else {\n            \/\/ If container is smaller than line, center the line\n            leftPosition = (containerWidth - lineWidth) \/ 2;\n          }\n          \n          \/\/ Apply position\n          separatorLine.style.left = `${leftPosition}px`;\n        }\n      }\n      \n      \/\/ Update separator only on actual slide changes\n      swiper.on('slideChange', function() {\n        updateButtonStates();\n        \/\/ Ensure we're using the correct active index\n        const currentIndex = swiper.activeIndex;\n        moveSeparatorToSlide(currentIndex);\n      });\n      \n      \/\/ Use Swiper's native events for button states\n      swiper.on('reachBeginning', function() {\n        updateButtonStates();\n        \/\/ Force separator to first position when reaching beginning\n        moveSeparatorToSlide(0);\n      });\n      \n      swiper.on('reachEnd', function() {\n        updateButtonStates();\n        \/\/ Force separator to last position when reaching end\n        moveSeparatorToSlide(swiper.slides.length - 1);\n      });\n      \n      \/\/ Initial position\n      moveSeparatorToSlide(0);\n      \n      \/\/ Update position on window resize with debounce\n      let resizeTimeout;\n      window.addEventListener('resize', function() {\n        clearTimeout(resizeTimeout);\n        resizeTimeout = setTimeout(() => {\n          moveSeparatorToSlide(swiper.activeIndex);\n          updateButtonStates();\n        }, 150);\n      });\n      \n      \/\/ Initial updates\n      updateButtonStates();\n      \n      \/\/ Force button states update after a delay to ensure Swiper is ready\n      setTimeout(() => {\n        updateButtonStates();\n      }, 100);\n    }, 200);\n  }\n\n  \/\/ Initialize when DOM is ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initTestimonialSlider);\n  } else {\n    initTestimonialSlider();\n  }\n\n  \/\/ Fallback initialization\n  setTimeout(initTestimonialSlider, 1000);\n})();\n\n\n(function() {\n  function initTestimonialAnimations() {\n    const testimonialSection = document.querySelector('.testimonial-slider');\n    \n    if (!testimonialSection) return;\n    \n    \/\/ Set CSS custom properties for slides beyond 10\n    const slides = testimonialSection.querySelectorAll('.testimonial-slider__slide');\n    slides.forEach((slide, index) => {\n      if (index >= 10) {\n        slide.style.setProperty('--slide-index', index - 10);\n      }\n    });\n    \n    \/\/ Simple intersection observer\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          \/\/ Add animation class to trigger CSS animations\n          entry.target.classList.add('testimonial-slider--animate');\n          \n          \/\/ Stop observing after animation is triggered\n          observer.unobserve(entry.target);\n        }\n      });\n    }, {\n      threshold: 0.2,\n      rootMargin: '0px 0px -50px 0px'\n    });\n    \n    observer.observe(testimonialSection);\n  }\n  \n  \/\/ Initialize animations\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initTestimonialAnimations);\n  } else {\n    initTestimonialAnimations();\n  }\n})();\n<\/script>     \n    <!-- Green line separator with container for movement -->\n    <div class=\"testimonial-slider__separator-container\">\n      <hr class=\"testimonial-slider__separator\" aria-hidden=\"true\">\n    <\/div>\n  <\/div>\n<\/section>\n\n  <section id=\"\"\n    class=\"newsletter-banner-block\"\n    aria-labelledby=\"newsletter-banner-heading\" >\n\n    <div class=\"newsletter-banner-block__container\">\n\n      <!-- Left SVG Line (Desktop only) -->\n      <div class=\"newsletter-banner-block__svg-left\" aria-hidden=\"true\">\n        <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/blocks\/newsletter-banner\/image\/green-line-left.svg\" alt=\"green-line-left\" title=\"\">\n      <\/div>\n\n      <!-- Right SVG Line (Desktop only) -->\n      <div class=\"newsletter-banner-block__svg-right\" aria-hidden=\"true\">\n        <img decoding=\"async\" src=\"https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/blocks\/newsletter-banner\/image\/green-line-right.svg\" alt=\"green-line-right\" title=\"\">\n      <\/div>\n\n      <div class=\"newsletter-banner-block__content\">\n                  <header class=\"newsletter-banner-block__header\">\n            <h2 id=\"newsletter-banner-heading\" class=\"newsletter-banner-block__title\">\n              Stay Ahead of the  Automation Curve            <\/h2>\n          <\/header>\n        \n                  <div class=\"newsletter-banner-block__description\">\n            Recieve weekly automation insights &amp; case studies, exclusive tips from industry experts and automation templates &amp; guides          <\/div>\n              <\/div>\n\n      <div class=\"newsletter-banner-block__form\">\n                  <div class=\"newsletter-banner-block__form-container\">\n            <div class='fluentform ff-default fluentform_wrapper_5 ffs_default_wrap'><form data-form_id=\"5\" id=\"fluentform_5\" class=\"frm-fluent-form fluent_form_5 ff-el-form-top ff_form_instance_5_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_5_1\" method=\"POST\" data-turnstile_key=\"0x4AAAAAAClzAtPyv0uj_MqM\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Newsletter Form<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='2' \/><input type=\"hidden\" id=\"_fluentform_5_fluentformnonce\" name=\"_fluentform_5_fluentformnonce\" value=\"a0de7c6547\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/2\" \/><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_5_email' id='label_ff_5_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_5_email\" class=\"ff-el-form-control\" placeholder=\"your@email.com\" data-name=\"email\" autocomplete=\"email\" inputmode=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group    ff-el-input--content'><div class='ff-el-form-check ff-el-tc'><label aria-label='Terms and Conditions: By proceeding, you agree to Haipe\u2019s Privacy Policy and Terms of Service Contains 2 links. Use tab navigation to review.' class='ff-el-form-check-label ff_tc_label' for=terms-n-condition_824c5e79de9484b4227651adb8614e44><span class='ff_tc_checkbox'><input type=\"checkbox\" name=\"terms-n-condition\" class=\"ff-el-form-check-input\" data-name=\"terms-n-condition\" id=\"terms-n-condition_824c5e79de9484b4227651adb8614e44\"  value='on' aria-invalid='false' aria-required=true><\/span> <div class='ff_t_c'><p>By proceeding, you agree to Haipe\u2019s <a href=\"https:\/\/haipestudio.com\/privacy-policy\/\">Privacy Policy<\/a> and <a href=\"https:\/\/haipestudio.com\/terms-of-service\/\">Terms of Service<\/a><\/p><\/div><\/label><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper ff_submit_btn_wrapper_custom'><button class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style wpf_has_custom_css\" type=\"submit\" name=\"custom_submit_button-5_1\" data-name=\"custom_submit_button-5_1\"  aria-label=\"Subscribe\">Subscribe<\/button><style>form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit { background-color:#1a7efb;border-color:#1a7efb;color:#ffffff;min-width:100%; }form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit:hover { background-color:#ffffff;border-color:#1a7efb;color:#1a7efb;min-width:100%; } <\/style><\/div><div class='ff-el-group ' style='margin-bottom: 0;'><div class='ff-el-input--content'><div data-fluent_id='5' name='cf-turnstile-response'><div\n\t\tdata-sitekey='0x4AAAAAAClzAtPyv0uj_MqM'\n\t\tdata-theme='auto'\n\t\tid='fluentform-turnstile-5-1'\n\t\tclass='ff-el-turnstile cf-turnstile'\n\t\tdata-appearance='interaction-only'><\/div><\/div><\/div><\/div><\/fieldset><\/form><div id='fluentform_5_errors' class='ff-errors-in-stack ff_form_instance_5_1 ff-form-loading_errors ff_form_instance_5_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_5_1 = {\"id\":\"5\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"asteriskPlacement\":\"asterisk-right\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_5_1\",\"form_id_selector\":\"fluentform_5\",\"rules\":{\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\",\"global_message\":\"This field must contain a valid email\",\"global\":true}},\"terms-n-condition\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"cf-turnstile-response\":[]},\"debounce_time\":300};\n                            <\/script>\n                      <\/div>\n              <\/div>\n\n    <\/div>\n  <\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const newsletterBanners = document.querySelectorAll('.newsletter-banner-block');\n    \n    newsletterBanners.forEach((newsletterBanner, index) => {\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    \n                    \/\/ Add entrance animation class to trigger animations\n                    entry.target.classList.add('newsletter-banner-entrance');\n                    \n                    \/\/ Add animation classes to child elements with staggered delays\n                    const content = entry.target.querySelector('.newsletter-banner-block__content');\n                    const form = entry.target.querySelector('.newsletter-banner-block__form');\n                    const svgLeft = entry.target.querySelector('.newsletter-banner-block__svg-left');\n                    const svgRight = entry.target.querySelector('.newsletter-banner-block__svg-right');\n                    \n                    if (content) {\n                        content.classList.add('newsletter-banner-content-entrance');\n                    }\n                    if (form) {\n                        form.classList.add('newsletter-banner-form-entrance');\n                    }\n                    if (svgLeft) {\n                        svgLeft.classList.add('newsletter-banner-svg-left-entrance');\n                    }\n                    if (svgRight) {\n                        svgRight.classList.add('newsletter-banner-svg-right-entrance');\n                    }\n                    \n                    \/\/ Stop observing after animation is triggered\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, {\n            threshold: 0.1,\n            rootMargin: '0px 0px -50px 0px'\n        });\n        \n        observer.observe(newsletterBanner);\n    });\n\n    function replaceSuccessIcon() {\n        document.querySelectorAll('.newsletter-banner-block__success-icon').forEach(icon => {\n            if (!icon.innerHTML.includes('svg')) {\n                fetch('https:\/\/haipestudio.com\/wp-content\/themes\/haipe_studio\/assets\/img\/icons\/check-in-circle-green.svg')\n                    .then(r => r.text())\n                    .then(svg => icon.innerHTML = svg);\n            }\n        });\n    }\n\n    setInterval(replaceSuccessIcon, 500);\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":""},"folder":[],"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":1,"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1622,"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/pages\/2\/revisions\/1622"}],"wp:attachment":[{"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/media?parent=2"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/haipestudio.com\/en\/wp-json\/wp\/v2\/folder?post=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}