{"id":60884,"date":"2024-09-01T15:11:28","date_gmt":"2024-09-01T15:11:28","guid":{"rendered":"https:\/\/devwp02.visibleone.io\/vowp\/services\/web-development\/"},"modified":"2024-09-01T15:11:28","modified_gmt":"2024-09-01T15:11:28","slug":"web-development","status":"publish","type":"page","link":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/web-development\/","title":{"rendered":"Web Development"},"content":{"rendered":"\n<div id=\"\" class=\"VOHeroV2 module_container  pt-[43px] md:pt-[61px] xl:pt-[65px] 2xl:pt-[74px] text-primary\">\n    <div class=\" relative overflow-hidden px-4 md:px-8 lg:px-24 2xl:px-36  py-16 pb-8 xl:py-20  \">\n        <div class=\"absolute right-0 top-0\">\n            <img decoding=\"async\" width=\"100\" height=\"100\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/aboutus\/visible-one_68fd8708.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"w-[100px] md:w-[150px] lg:w-[180px] xl:w-[200px]\"\/>\n        <\/div>\n        <div class=\"hidden xl:block absolute right-[180px] top-[160px]\">\n            <img decoding=\"async\" width=\"350\" height=\"100\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/aboutus\/line_4aa497fd.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"w-[350px]\"\/>\n        <\/div>\n        <div class=\"w-full\">\n            <div class=\"w-full lg:w-[70%] xl:w-[60%] \">\n            <span class=\"uppercase tracking-widest font-medium fs-2xl\">SERVICES<\/span>                <div class=\"font-semibold md:w-[80%] lg:w-[90%] mt-2 fs-6xl lg:leading-tight\">\n                    <h1>Web Development<\/h1>\n                                        \n                <\/div>\n                <div class=\"my-4 md:my-8 h-2 w-16 bg-themeSecondaryDark\"><\/div>\n                <div class=\"font-light text-secondary fs-lg\">\n                    <div class=\"mt-4 md:mt-8\"><p>Your website is the foundation of your business. It \u201csells\u201d your company 24\/7, 365 days a year. Having a website has turned out to be compulsory for every organization regardless of the size and nature of the business. A dynamic website uses a database to gather, manage and display information automatically, based on the criteria the user selects.<\/p>\n<\/div>\n                    <div class=\"mt-4\"><p>To help you stand amongst other competitors in the industry, we provide strategic web development solutions ideal for small to medium scale projects with complex and bespoke requirements, that enable their business to increase sales, build brand awareness and increase customer reliability.<\/p>\n<\/div>                <\/div>\n                            <\/div>\n            <button aria-label=\"go to bottom\" class=\"cursor-pointer relative z-10 float-right mt-4 arrow-button\">\n                <img decoding=\"async\" width=\"50\" height=\"66\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/aboutus\/downArrow_bc7cafe1.svg\" alt=\"go to below section\" loading=\"lazy\" class=\"w-[60%] md:w-[70%] xl:w-[80%] 2xl:w-[90%] mx-auto\"\/>\n            <\/button>\n        <\/div>\n    <\/div>\n    <\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const heroElement = document.querySelector('.VOHeroV2'); \n\n        function arrowHandler() {\n        if (heroElement) {\n            window.scrollTo(0, heroElement.scrollHeight);\n        }\n        }\n        document.querySelector('.VOHeroV2 .arrow-button').addEventListener('click', arrowHandler);\n    });\n<\/script>\n\n\n<div class=\"SkillAndTechno flex justify-center items-start\">\n  <div class=\"w-full px-4 md:px-8 lg:px-16 xl:px-20 2xl:px-24 py-16\">\n    <div class=\"max-w-[1920px] mx-auto flex flex-col justify-center lg:flex-row lg:justify-between items-center\">\n      <div class=\"text-primary w-full lg:w-5\/12 text-center lg:text-left mb-4 md:mb-0\">\n        <div class=\"fs-5xl 2xl:w-5\/6 mb-4 md:mb-8 font-semibold text-primary\">\n          <h2>Website Development Platforms<\/h2>\n        <\/div>\n        <div class=\"uppercase mb-2 text-themeSecondary font-semibold fs-3xl\">\n                  <\/div>\n        <div class=\"text-secondary md:w-11\/12 font-light fs-lg\">\n          <p>We create websites that benefit both your company and your users. Our online solutions work seamlessly and provide users with a uniform experience across all platforms, whether it&#8217;s a sophisticated corporate website, a responsive web app, or a marketing site.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"mt-4 md:mt-8 w-full lg:w-7\/12 lg:ml-4 md:px-8 lg:px-0 relative group\">\n                  <img decoding=\"async\" width=\"998\" height=\"561\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Logo-reveal-v2.1-compressed_74c30c72.gif\"\n            alt=\"UserFriendly Web Design Powered by Advanced Technology\" loading=\"lazy\"\n            class=\"mx-auto w-[90%] md:w-full skill-animation-image\">\n                        <div\n          class=\"skill-playpause-btn pl-4 mt-[.3rem] flex justify-center absolute left-1\/2 top-1\/2 -translate-x-1\/2 -translate-y-1\/2\">\n          <button class=\"cursor-pointer pause_btn\" tabindex=\"0\" aria-label=\"animation play pause\"\n            data-play=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n            data-pause=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"12\" height=\"12\" aria-label=\"pause icon\"\n              src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\" alt=\"pause icon\">\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    document.querySelector('.skill-playpause-btn button')?.addEventListener('click', function () {\n      do_skill_animation();\n    });\n\n    const do_skill_animation = () => {\n      const button = document.querySelector(\".skill-playpause-btn button\");\n      button.classList.toggle('active');\n      const play_btn = button?.getAttribute('data-play');\n      const pause_btn = button?.getAttribute('data-pause');\n      const is_active = document.querySelector(\".skill-playpause-btn button.active\");\n      if (!is_active) {\n        if (document.querySelector('.skill-no-animation-image')) {\n          document.querySelector('.skill-animation-image')?.classList.remove('hidden');\n          document.querySelector('.skill-no-animation-image')?.classList.add('hidden');\n        }\n        button.querySelector('img')?.setAttribute('src', pause_btn);\n      } else {\n        if (document.querySelector('.skill-no-animation-image')) {\n        document.querySelector('.skill-animation-image')?.classList.add('hidden');\n        document.querySelector('.skill-no-animation-image')?.classList.remove('hidden');\n      }\n        button.querySelector('img')?.setAttribute('src', play_btn);\n      }\n    }\n  })\n<\/script>\n\n\n<section class=\"GreenIconTechs green-icons-techs bg-[#FAFAFA] font-primary\">\n  <div class=\"green-icons-techs-container mx-auto max-w-7xl py-8 px-5 2xl:max-w-[90.5rem] sm:py-10 lg:py-16 2xl:py-24\">\n    <div class=\"text-center fs-4xl font-medium mb-8 md:mb-10 xl:mb-12 3xl:mb-14\">\n      <h2>Green Icon Technologies<\/h2>\n    <\/div>\n    <div class=\"green-icons flex flex-col md:flex-row justify-start md:flex-wrap gap-4 md:gap-6 xl:gap-8\">\n      <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/wordpress-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/icon-WordPress_f841e4d7.svg\" alt=\"WordPress icon in visible one\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>WORDPRESS<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>WordPress is considered to be one of the best, simple, powerful and popular CMS with user-friendly interface and tutorials. It supports various plug-ins and themes to make the website more attractive and punchier.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/joomla-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/icon-Joomla-2_e3c7b6b1.svg\" alt=\"Joomla icon in visible one\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>JOOMLA<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>Joomla is an award-winning open source CMS, enables the build of websites and online applications. It has become one of the world\u2019s most popular platforms due to its extensibility and ease-of-use.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/drupal-web-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/icon-Drupal_ca3ab10a.svg\" alt=\"Drupal Logo\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>DRUPAL<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>Drupal is an open-source platform that accelerates website development. It can easily incorporate complex functionality and requirements by taking advantage of the thousands of open-source modules and tools developed by contributors from all over the world.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/php-web-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/icon-PHP_a40d8d7a.svg\" alt=\"PHP icon\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>PHP<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>PHP is a robust, open source platform for developing agile web applications with multiple functionalities. The technology has matured greatly over the years and PHP supports many frameworks that can be used for development.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/laravel-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/icon-Laravel_e7f2d9c3.svg\" alt=\"Laravel icon\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>LARAVEL<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>Laravel is one of the best open-source PHP based web app frameworks that has been recognized as a leading platform that is preferred for the development of high quality websites and cutting-edge web applications.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/react-js-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Icon-react_5917dc20.svg\" alt=\"React icon green\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>REACT.JS<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>Websites built with React.js are extremely efficient. This makes it an excellent choice for web services that rely on delivering high-quality products to their customers. React.js has primarily been used by Facebook and Instagram, quickly gaining popularity among other web applications.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/aspnet-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/icon-ASP.Net_b555a40a.svg\" alt=\"\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>ASP.NET<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>Microsoft&#8217;s ASP.Net is an open-source development platform. It enables developers to create web and mobile apps, robust systems, cloud-based solutions, and cross-platform apps.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a><a href=\"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/services\/python-web-development\/\" class=\"\n        green-icon flex justify-start items-start\n        md:flex-1 md:basis-[48%] md:max-w-[48%]\n        false\n      \">\n        <div class=\"\n          green-icon-logo flex-1 basis-20 max-w-[5rem] mr-4 sm:mr-5\n          xl:basis-32 xl:max-w-[8rem] xl:mr-8\n          2xl:basis-auto 2xl:max-w-fit 2xl:mr-16\n        \"><img decoding=\"async\" width=\"184\" height=\"183\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Python_85c5583d.svg\" alt=\"Python icon green\" loading=\"lazy\" title=\"\" class=\"object-cover object-center w-auto h-auto align-middle \"><\/div>\n        <div class=\"green-icon-content text-primary flex-1\">\n          <div class=\"\n            font-medium fs-2xl\n            mb-1 xl:mb-4 2xl:mb-5\n          \">\n            <h3>PYTHON<\/h3>\n          <\/div>\n          <div class=\"\n            font-light fs-base\n          \">\n          <p>Python is the world&#8217;s fastest growing programming language. Because of its high-level, interpreted, and object-oriented architecture, it is suitable for all types of web solutions.<\/p>\n\n          <\/div>\n        <\/div>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<style>\n.MoreThanJustWebDesign .web_design_pc_container {\n    background-image: url('https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/web-design\/web_design_img_3acaa5b6.png'),\n        url('https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/web-design\/web_design_img2_a171d092.png');\n    background-repeat: no-repeat;\n    background-position: top left, bottom right;\n    padding: 7rem;\n}\n\n@media(max-width: 1023px) {\n    .MoreThanJustWebDesign .web_design_pc_container {\n        padding: 2rem;\n    }\n\n}\n<\/style>\n\n<section class=\"MoreThanJustWebDesign\">\n    <div\n        class=\"flex flex-col justify-center items-center py-28 my-4 mix-blend-multiply web_design_pc_container_padding web_design_pc_container\">\n        <div class=\"text-primary text-center fs-5xl font-primary font-semibold leading-[1.25] mb-8\">\n            <h2>MORE THAN JUST WEB DEVELOPMENT<\/h2>\n        <\/div>\n        <div class=\"max-w-[930px] lg:px-8 px-0 text-center mb-4 font-light font-primary fs-lg text-secondary\">\n            <p>We\u2019ve got a dedicated team of web developers ready to work with you to make your business accessible through an engaging and functional website. We build sites using the very best open source platforms keeping your business secure and at the cutting-edge of technology.<\/p>\n        <\/div>\n        <div class=\"relative flex justify-center w-full lg:mt-12 mt-4 card_container\">\n            <div class=\"absolute lg:bottom-8 lg:top-[unset] top-1\/2 xl:left-5 left-0 z-10 box_left\">\n                <div class=\"white_box_card lg:py-[3.125rem] py-8 lg:px-8 px-4\">\n        <div class=\"text-center font-primary font-normal fs-3xl leading-[1.3] text-primary lg:mt-7 sm:mt-4 mt-2\">\n          <h3>Working with a wide range of technologies<\/h3>\n        <\/div>\n        <div class=\"text-center font-primary font-light fs-lg text-secondary leading-[1.3] md:mt-4 mt-2\">\n        <p>We use different innovative web technologies to create fully customized, responsive website that focuses on achieving business objectives while delivering exceptional customer experiences.<\/p>\n<\/div>\n      <\/div>            <\/div>\n            <div class=\"relative\">\n                                <img decoding=\"async\" width=\"1107\" height=\"861\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/PC-asset_8a3b7f50.webp\" alt=\"PC asset Mockup\" loading=\"lazy\" title=\"\" class=\"object-contain block\">\n                                <div\n                    class=\"text-center fs-5xl absolute top-[45%] left-[47%] -translate-x-1\/2 -translate-y-1\/2 w-full\">\n                    <span class=\"opacity-100 text-light\">Get a Quote.<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"absolute top-1\/4 right-0 box_right\">\n                <div class=\"white_box_card lg:py-[3.125rem] py-8 lg:px-8 px-4\">\n        <div class=\"text-center font-primary font-normal fs-3xl leading-[1.3] text-primary lg:mt-7 sm:mt-4 mt-2\">\n          <h3>Result driven back-end web development<\/h3>\n        <\/div>\n        <div class=\"text-center font-primary font-light fs-lg text-secondary leading-[1.3] md:mt-4 mt-2\">\n        <p>To design a website that achieves your goals requires a results-driven, strategic investment of time and money, and business development mindset.<\/p>\n\n        <\/div>\n      <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<div style=\"opacity: 1; transform: none;\">\n    <div class=\" bg-[#f5f5f5] relative\" id=\"why_choose_us_vo\" style=\"background-color: #FAFAFA;\">\n        <div class=\"px-4 md:px-8 py-16 text-center mx-auto\">\n            <div class=\"fs-5xl mb-4 md:mb-8 font-semibold\" style=\"color: #000000;\">\n                <h2>Why Choose Us<\/h2>\n            <\/div>\n            <div class=\"w-full md:w-[95%] mx-auto fs-lg xl:max-w-[855px] text-secondary font-light\">\n                <p>Here at Visible One, we have extensive knowledge and professional web development skills that will be matching your project expectations. Our website development services include a vast array of services like e-commerce solutions and content management systems.<\/p>\n            <\/div>\n            <div class=\"flex justify-center flex-wrap mt-6 md:mt-12\">\n                <div class=\"flex-1 px-5 text-center py-8 m-4 md:m-6 min-w-[240px] max-w-[18.75rem] bg-[#fefefe]  rounded-[14%] shadow-xl hover:shadow-2xl duration-300 cursor-default xl:py-10 xl:px-7 3xl:mt-8 3xl:mx-10\">\n                    <div><img decoding=\"async\" width=\"65\" height=\"50\" alt=\"Business Focused icon\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/icon-Business-Focused_977c89da.svg\" loading=\"lazy\" title=\"\" class=\"max-w-[139px] aspect-[139\/63] w-full  mx-auto object-contain\"><\/div><div class=\"mt-4 font-medium text-primary uppercase fs-lg\">\n                        <h3>Business focused<\/h3>\n                    <\/div>\n                    <div class=\"mt-4 text-sm max-w-fit mx-auto text-secondary font-light\">\n                        <p>We don\u2019t just design a website for you. We align our web solutions\u2019 strategy and techniques by understanding your business goals and help it shine online.<\/p>\n\n                    <\/div>\n                <\/div><div class=\"flex-1 px-5 text-center py-8 m-4 md:m-6 min-w-[240px] max-w-[18.75rem] bg-[#fefefe]  rounded-[14%] shadow-xl hover:shadow-2xl duration-300 cursor-default xl:py-10 xl:px-7 3xl:mt-8 3xl:mx-10\">\n                    <div><img decoding=\"async\" width=\"65\" height=\"50\" alt=\"Qualified Teame icon\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/icon-Qualified-Team_2682726e.svg\" loading=\"lazy\" title=\"\" class=\"max-w-[139px] aspect-[139\/63] w-full  mx-auto object-contain\"><\/div><div class=\"mt-4 font-medium text-primary uppercase fs-lg\">\n                        <h3>QUALIFIED TEAM<\/h3>\n                    <\/div>\n                    <div class=\"mt-4 text-sm max-w-fit mx-auto text-secondary font-light\">\n                        <p>Our qualified team of experts helps to build excellent web solutions that perfectly suit your business requirements with the best quality assurance<\/p>\n\n                    <\/div>\n                <\/div><div class=\"flex-1 px-5 text-center py-8 m-4 md:m-6 min-w-[240px] max-w-[18.75rem] bg-[#fefefe]  rounded-[14%] shadow-xl hover:shadow-2xl duration-300 cursor-default xl:py-10 xl:px-7 3xl:mt-8 3xl:mx-10\">\n                    <div><img decoding=\"async\" width=\"65\" height=\"50\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/icon-Affordable-Fees_00b0f61c.svg\" loading=\"lazy\" title=\"\" class=\"max-w-[139px] aspect-[139\/63] w-full  mx-auto object-contain\"><\/div><div class=\"mt-4 font-medium text-primary uppercase fs-lg\">\n                        <h3>AFFORDABLE FEES<\/h3>\n                    <\/div>\n                    <div class=\"mt-4 text-sm max-w-fit mx-auto text-secondary font-light\">\n                        <p>Our mission is to deliver excellent and affordable website design packages that allow small to medium-sized businesses to build visibility online, increase sales, and improve productivity.<\/p>\n\n                    <\/div>\n                <\/div><div class=\"flex-1 px-5 text-center py-8 m-4 md:m-6 min-w-[240px] max-w-[18.75rem] bg-[#fefefe]  rounded-[14%] shadow-xl hover:shadow-2xl duration-300 cursor-default xl:py-10 xl:px-7 3xl:mt-8 3xl:mx-10\">\n                    <div><img decoding=\"async\" width=\"65\" height=\"50\" alt=\"icon-Long Term\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/icon-Long-Term_317363b0.svg\" loading=\"lazy\" title=\"\" class=\"max-w-[139px] aspect-[139\/63] w-full  mx-auto object-contain\"><\/div><div class=\"mt-4 font-medium text-primary uppercase fs-lg\">\n                        <h3>LONG TERM RELATIONSHIP<\/h3>\n                    <\/div>\n                    <div class=\"mt-4 text-sm max-w-fit mx-auto text-secondary font-light\">\n                        <p>At Visible One, we&#8217;re dedicated to create long-lasting relationships with all of our clients and to produce web solutions and digitally-driven results for all kinds of business.<\/p>\n\n                    <\/div>\n                <\/div>            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<div class=\"IconsSliderV2 w-full pt-12 pb-20 lg:pt-20 lg:pb-28 mx-auto IconsSliderContainer\"\n        style=\"background-color: rgb(250, 250, 250);\">\n        <div class=\"w-full mx-auto px-4 lg:px-4 xl:px-12 text-center mb-6 lg:mb-12 \">\n            <div class=\"fs-5xl font-semibold mb-2 text-primary\">\n                <h3>Technologies We Work<\/h3>\n            <\/div>\n            <div class=\"font-light my-6 w-full fs-lg md:w-[90%] lg:w-[80%] 2xl:w-[69%] mx-auto text-secondary\">\n                            <\/div>\n        <\/div>\n        <div class=\"overflow-x-hidden iconsSliderSwiper\">\n            <div class=\"swiper-wrapper\">\n                <div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/ASP.net-19_53619138.svg\" alt=\"microsoft ASP net logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Bigcommerce-8_c191cdc9.svg\" alt=\"Bigcommerce Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Bootstrap-12_e20bc47c.svg\" alt=\"Bootstrap Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Cloudflare-16_431017d1.svg\" alt=\"Cloudflare icon\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/cPanel_e2d3cdda.svg\" alt=\"Cpanel logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/crazyegg-22_54dc4dea.svg\" alt=\"crazyegg logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/drupal_603cdc99.svg\" alt=\"Drupal Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Google-Ads-20_1d8e8f20.svg\" alt=\"Google Ads Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Google-Analytics-21_4f805972.svg\" alt=\"Google Analytics logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Joomla-2_b62abc88.svg\" alt=\"Joomla icon\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/jQuery-10_2653d535.svg\" alt=\"jQuery Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/laravel-4_79c610d1.svg\" alt=\"laravel logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Magento-7_2eff295b.svg\" alt=\"Magento Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/MailChimp-17_462a6536.svg\" alt=\"MailChimpa Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/MongoDB-18_290f4777.svg\" alt=\"MongoDB Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/MySql-13_33e5c786.svg\" alt=\"My SQL Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/php-3_d1ea4131.svg\" alt=\"php Logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/React-9_7abaf476.svg\" alt=\"React Js logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/RESTApi-14_c6a8df5b.svg\" alt=\"Rest API icon\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Shopify-5_d993833a.svg\" alt=\"shopify logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/VueJs_5f2ff985.svg\" alt=\"VueJs logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Woo-6_fa56c07f.svg\" alt=\"woocommerce integration icon \" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/wordpress-24_cc7074de.svg\" alt=\"wordpress logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div><div class=\"swiper-slide\">\n                    <?php if($listItem): ?>\n                        <img decoding=\"async\" width=\"256\" height=\"61\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/Zapier-15_2e9b4dd2.svg\" alt=\"zaiper logo\" loading=\"lazy\" title=\"\" class=\"w-[90%] md:w-[85%] lg:w-[80%] mx-auto \">\n                    <?php endif; ?>\n                        <\/div>            <\/div>\n        <\/div>\n        <div class=\"slider-playpause-btn pl-4 mt-[.3rem] flex justify-center\">\n            <button class=\"cursor-pointer pause_btn\" tabindex=\"0\" aria-label=\"animation play pause\"\n                data-play=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n                data-pause=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"12\" height=\"12\" aria-label=\"pause icon\"\n                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\"\n                    alt=\"pause icon\">\n            <\/button>\n        <\/div>\n\n    <\/div>\n\n<script>\n    (function () {\n\n        var smoothSwiper = new Swiper('.iconsSliderSwiper', {\n            speed: 4000,\n            direction: 'horizontal',\n            navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n            },\n            pagination: false,\n            \/\/ zoom: true,\n            \/\/ keyboard: {\n            \/\/     enabled: true,\n            \/\/     onlyInViewport: false,\n            \/\/ },\n            \/\/ mousewheel: {\n            \/\/     invert: true,\n            \/\/ },\n            autoplay: {\n                delay: 0,\n            },\n            loop: true,\n            slidesPerView: 2,\n            freeMode: true,\n            breakpoints: {\n                640: {\n                    slidesPerView: 4,\n                    \/\/ spaceBetween: 20,\n                },\n                1024: {\n                    slidesPerView: 6,\n                },\n            },\n        });\n        const stop_slider_animation = () => {\n            const button = document.querySelector(\".slider-playpause-btn button\");\n            button.classList.toggle('active');\n            const play_btn = button?.getAttribute('data-play');\n            const pause_btn = button?.getAttribute('data-pause');\n            const is_active = document.querySelector(\".slider-playpause-btn button.active\");\n            if (!is_active) {\n                smoothSwiper?.autoplay.start();\n                button.querySelector('img')?.setAttribute('src', pause_btn);\n            } else {\n                smoothSwiper?.autoplay.stop();\n                button.querySelector('img')?.setAttribute('src', play_btn);\n            }\n            smoothSwiper?.autoplay.stop();\n        }\n        document.querySelector('.slider-playpause-btn button')?.addEventListener('click', function () {\n            stop_slider_animation();\n        })\n\n    })();\n<\/script>\n\n\n<section id=\"e33b5cfc-cf5c-455d-b312-c0df53f10845\" class=\"\n        contact-form bg-[color:var(--bg-color)] text-light relative overflow-hidden\n        StartContactForm contact_form\n      \" style=\"--bg-color: #4DD7A9;\">\n    <div class=\"sm:flex sm:items-center xl:justify-between \">\n        <div\n            class=\"absolute vertical-text text-5xl font-semibold hidden sm:block sm:flex-1 sm:basis-[15%] sm:max-w-[15%] md:basis-1\/5 xl:text-7xl 2xl:text-[7.5rem] vertical_text\">\n                            <div\n                    class=\"absolute top-0 bottom-0 left-5 h-max lg:left-20 xl:left-32 2xl:left-36 cursor-default aniBottomToTop text-custom-animation-bt\">\n                    Let\u2019s Work Together                <\/div>\n                                        <div\n                    class=\"absolute -top-3 left-[4.25rem] md:left-20 h-max lg:left-36 xl:left-52 2xl:-top-8 2xl:left-80 cursor-default aniTopToBottom text-custom-animation-tb\">\n                    <span class=\"opacity-30\">Talk to Us<\/span>&nbsp;\n                    <span class=\"opacity-60\">Contact Us<\/span>\n                <\/div>\n                    <\/div>\n        <div class=\"contact-form-playpause-btn  justify-start absolute left-[14%] bottom-5 sm:flex hidden\">\n                    <button class=\"cursor-pointer pause_btn\" tabindex=\"0\" aria-label=\"animation play pause\"\n                    data-play=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n                    data-pause=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\"\n                    >\n                    <img loading=\"lazy\" decoding=\"async\" width=\"12\" height=\"12\" aria-label=\"pause icon\"\n                        src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\"\n                        alt=\"pause icon\">\n                    <\/button>\n                <\/div>\n        <div\n            class=\"contact-form__container sm:flex-1 py-16 px-5 font-primary mx-auto sm:max-w-2xl xl:max-w-4xl xl:py-32 2xl:py-36 2xl:max-w-6xl\">\n            <div\n                class=\"mx-auto contact-form__main text-center sm:flex-1 sm:basis-[85%] sm:max-w-[85%]  md:max-w-xl md:basis-4\/5 xl:max-w-2xl 2xl:max-w-5xl\">\n                <div class=\"contact-form__header  mx-auto 2xl:max-w-xl\">\n                    <div class=\"font-semibold mb-5 2xl:mb-8 fs-5xl\">\n                        <div>LET\u2019S WORK TOGETHER<\/di>\n                        <\/div>\n                        <div class=\"font-normal fs-lg mb-6 2xl:mb-12\"><p>If you have a project and would like to discuss it with us, then please do call us or email us using the form below.<\/p>\n<\/div>\n                    <\/div>\n                    <div class=\"relative contact-form__body\">\n                        <div>\n                            <div id=\"hubspotForm\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"contact-form__bg absolute top-1\/2 right-0 -translate-y-1\/2\">\n            <img decoding=\"async\" width=\"257\" height=\"510\"\n                src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/StartContact-bgImg_c8261431.png\"\n                alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"h-auto w-24 lg:w-36 2xl:w-auto\" \/>\n        <\/div>\n<\/section>\n<style>\n\n<\/style>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        \/\/ Your HubSpot form details\n        const portalId = \"5194436\";\n        const formId = \"e33b5cfc-cf5c-455d-b312-c0df53f10845\";\n\n        \/\/ Function to load the HubSpot form dynamically\n        function loadHubSpotForm() {\n            const script = document.createElement('script');\n            script.src = 'https:\/\/js.hsforms.net\/forms\/v2.js'; \/\/ HubSpot's form script\n            script.onload = () => {\n                window.hbspt.forms.create({\n                    portalId: portalId,\n                    formId: formId,\n                    target: '#hubspotForm', \/\/ ID of the element where the form will be rendered\n                    css: \"\",\n\t\t\t\t\tonFormSubmitted: function ($form, data) {\n    var values = data.submissionValues || {};\n    var email = values.email || '';\n    var phone = values.phone || '';\n\n    console.log(\"HubSpot form submitted:\");\n    console.log(\"Email:\", email);\n    console.log(\"Phone:\", phone);\n\n    gtag('set', 'user_data', {\n        email: email,\n        phone_number: phone\n    });\n}\n,\n                    onFormReady: function ($form) {\n                        const targetElement = $form.find('.hs-form-field label');\n                        targetElement?.each(function (key, label) {\n                            const placeholder = label?.getAttribute('placeholder');\n                            const name = label?.closest('.hs-form-field').querySelector('select')?.getAttribute('name')?.replaceAll('_', ' ');\n                            const placeholder1 = label?.closest('.hs-form-field').querySelector('input')?.getAttribute('placeholder');\n                            label?.querySelector('span:first-child')?.setAttribute('arial-label', placeholder1)\n                            label?.setAttribute('arial-label', placeholder1);\n                            label?.closest('.hs-form-field').querySelector('input')?.setAttribute('arial-label', placeholder1?.replace('*', ''))\n                            label?.closest('.hs-form-field').querySelector('select')?.setAttribute('arial-label', name?.replaceAll('_', ' '))\n                        });\n                        const style = document.createElement('style');\n                        style.innerHTML = `\n                        .hs-error-msgs label {\n                            color: #fc010c;\n                        }\n                        .hbspt-form select,\n                        .hbspt-form select::placeholder{\n                            color: #33475b !important;\n  opacity: 1 !important;\n                        }\n                        .hbspt-form textarea::placeholder,\n.hbspt-form input::placeholder{\n  color: #33475b !important;\n  opacity: 1 !important;\n}\n.hbspt-form input{\n  background-color: #fff !important;\n}\n.hs_submit input[type=submit]{\n  background: #000 !important;\n  color:#fff !important;\n  border:1px solid #000 !important;\n}\n                        `;\n                        document.querySelector('#hubspotForm iframe').contentDocument.head.appendChild(style);\n                    }\n                });\n            };\n            document.body.appendChild(script);\n        }\n\n        loadHubSpotForm();\n        const remove_animation = () => {\n            document.querySelectorAll('.text-custom-animation-bt').forEach(function (ani) {\n                ani.classList.remove('aniBottomToTop');\n            });\n            document.querySelectorAll('.text-custom-animation-tb').forEach(function (ani) {\n                ani.classList.remove('aniTopToBottom');\n            });\n            document.querySelector('.contact-form-playpause-btn .pause_btn').classList?.remove('active');\n            document.querySelector('.contact-form-playpause-btn .play_btn').classList?.add('active');\n        }\n        const add_animation = () => {\n            const button = document.querySelector(\".contact-form-playpause-btn button\");\n            button.classList.toggle('active');\n            const play_btn = button?.getAttribute('data-play');\n            const pause_btn = button?.getAttribute('data-pause');\n            const is_active = document.querySelector(\".contact-form-playpause-btn button.active\");\n            if (!is_active) {\n                document.querySelectorAll('.text-custom-animation-bt').forEach(function (ani) {\n                    ani.classList.add('aniBottomToTop');\n                });\n                document.querySelectorAll('.text-custom-animation-tb').forEach(function (ani) {\n                    ani.classList.add('aniTopToBottom');\n                });\n                button.querySelector('img')?.setAttribute('src', pause_btn);\n            } else {\n                document.querySelectorAll('.text-custom-animation-bt').forEach(function (ani) {\n                    ani.classList.remove('aniBottomToTop');\n                });\n                document.querySelectorAll('.text-custom-animation-tb').forEach(function (ani) {\n                    ani.classList.remove('aniTopToBottom');\n                });\n                button.querySelector('img')?.setAttribute('src', play_btn);\n            }\n        }\n        document.querySelector('.contact-form-playpause-btn button')?.addEventListener('click', function () {\n            add_animation();\n\n        })\n        \n    });\n\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":60812,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-60884","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/pages\/60884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/comments?post=60884"}],"version-history":[{"count":0,"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/pages\/60884\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/pages\/60812"}],"wp:attachment":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/en-hk\/wp-json\/wp\/v2\/media?parent=60884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}