{"id":207,"date":"2024-08-13T19:04:16","date_gmt":"2024-08-13T19:04:16","guid":{"rendered":"https:\/\/devwp02.visibleone.io\/vowp\/?page_id=207"},"modified":"2024-12-06T02:02:43","modified_gmt":"2024-12-06T02:02:43","slug":"projects","status":"publish","type":"page","link":"https:\/\/devwp02.visibleone.io\/vowp\/projects\/","title":{"rendered":"Projects"},"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                            <div class=\"font-semibold md:w-[80%] lg:w-[90%] mt-2 fs-6xl lg:leading-tight\">\n                    <h1>Projects<\/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>Whatever service you require \u2014 web design, hosting, SEO, PPC, social media, email marketing, or anything else \u2014 we have you covered. Check out our portfolio to see how our digital marketing solutions help our clients achieve their goals!<\/p>\n<\/div>\n                                    <\/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=\"min-h-screen flex justify-center items-start text-primary WorkShowCaseEvne\">\n    <div class=\"w-full max-w-screen-2xl px-4 py-8 md:px-8 lg:px-16 xl:px-32 md:py-16\">\n        <div class=\" flex justify-start items-center w-full\">\n            <div class=\"w-full flex justify-center items-start \">\n                <div class=\"w-full relative\">\n                    <div class=\"w-full md:w-1\/2 py-2 md:py-4 font-semibold shadow-lg mb-2 flex justify-between items-center lg:hidden px-2 mobileFilter\">\n                        <p class=\"capitalize\">ALL<\/p><svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\" height=\"14\" width=\"14\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M18.707 12.707L17.293 11.293 13 15.586 13 6 11 6 11 15.586 6.707 11.293 5.293 12.707 12 19.414z\"><\/path>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"hidden lg:flex justify-center items-center text-center py-4 filterButton\">\n                        <button ds-category=\"All\" class=\"uppercase fs-xl active\">All<\/button>\n                        <button ds-category=\"Wordpress\" class=\"uppercase\">WordPress<\/button><button ds-category=\"Laravel\" class=\"uppercase\">Laravel<\/button><button ds-category=\"Shopify \" class=\"uppercase\">Shopify <\/button><button ds-category=\"Drupal\" class=\"uppercase\">Drupal<\/button><button ds-category=\"ASP.net \" class=\"uppercase\">ASP.net <\/button><button ds-category=\"WooCommerce \" class=\"uppercase\">WooCommerce <\/button><button ds-category=\"PHP\" class=\"uppercase\">PHP<\/button>                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"flex flex-wrap w-full mt-0.5 filterContent active\" ds-category=\"All\" style=\"transform: none; transform-origin: 50% 50% 0px;\"><a aria-label=\"go to Fulbright\" name=\"Fulbright\" href=\"projects\/fulbright\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Fulbright-SQ_287e3b1f.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Fulbright<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to Tamjai Intl.\" name=\"Tamjai Intl.\" href=\"projects\/tam-jai-international\/\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Tamjai-SQ_dd1b4256.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Tamjai Intl.<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to HKCI\" name=\"HKCI\" href=\"projects\/hkci\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HKCI-SQ_fa77eee3.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>HKCI<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to Yamato\" name=\"Yamato\" href=\"projects\/yamato-logistics-hk-ltd\/\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Yamato-SQ_00e4f85b.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Yamato<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to CityU SCOPE\" name=\"CityU SCOPE\" href=\"projects\/cityu-scope\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/SCOPE-SQ_f0842791.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>CityU SCOPE<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to Sunnex\" name=\"Sunnex\" href=\"projects\/sunnex\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Sunnex-SQ_ca43b7a8.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Sunnex<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to HOM\" name=\"HOM\" href=\"projects\/hom\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HOM-SQ_5b281111.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>HOM<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to AYP\" name=\"AYP\" href=\"projects\/ayp\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/AYP-SQ_0869222c.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>AYP<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to Longchamp\" name=\"Longchamp\" href=\"projects\/longchamp\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Longchamp-SQ_0ff91540.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Longchamp<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to HealthySeed\" name=\"HealthySeed\" href=\"projects\/healthy-seed\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HealthySeed-SQ_c04a2354.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>HealthySeed<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to Sautao\" name=\"Sautao\" href=\"projects\/sau-tao\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Sautao-SQ_794b8a8c.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Sautao<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to TMHDC\" name=\"TMHDC\" href=\"projects\/tmdhc\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/TMDHC-thumbnailcover_532823eb.jpg&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>TMHDC<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to HashKey\" name=\"HashKey\" href=\"projects\/hashkey-group\/\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HashKey-thumbnailcover_1a4a9c99.jpg&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>HashKey<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><a aria-label=\"go to Mori\" name=\"Mori\" href=\"projects\/mori\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" data-projection-id=\"1\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Mori-thumbnailcover_40cf706c.jpg&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                        <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText hidden\">\n                            <div class=\"fs-xl font-semibold z-10\">\n                                <h2 class=\"opacity-100\"><span>Mori<\/span><\/h2>\n                            <\/div>\n                        <\/div>\n                    <\/a><\/div>        <div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"Wordpress\" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><a href=\"projects\/tam-jai-international\/\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Tamjai-SQ_dd1b4256.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Tamjai Intl.<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/yamato-logistics-hk-ltd\/\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Yamato-SQ_00e4f85b.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Yamato<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/sunnex\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Sunnex-SQ_ca43b7a8.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Sunnex<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/hom\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HOM-SQ_5b281111.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>HOM<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/ayp\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/AYP-SQ_0869222c.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>AYP<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/longchamp\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Longchamp-SQ_0ff91540.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Longchamp<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><\/div><div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"Laravel\" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><a href=\"projects\/healthy-seed\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HealthySeed-SQ_c04a2354.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>HealthySeed<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/sau-tao\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Sautao-SQ_794b8a8c.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Sautao<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/tmdhc\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/TMDHC-thumbnailcover_532823eb.jpg&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>TMHDC<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/hashkey-group\/\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HashKey-thumbnailcover_1a4a9c99.jpg&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>HashKey<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><\/div><div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"Shopify \" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><\/div><div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"Drupal\" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><a href=\"projects\/hkci\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/HKCI-SQ_fa77eee3.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>HKCI<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><a href=\"projects\/cityu-scope\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/SCOPE-SQ_f0842791.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>CityU SCOPE<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><\/div><div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"ASP.net \" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><a href=\"projects\/fulbright\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Fulbright-SQ_287e3b1f.webp&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Fulbright<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><\/div><div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"WooCommerce \" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><\/div><div class=\"flex flex-wrap w-full mt-0.5 filterContent\" ds-category=\"PHP\" style=\"transform: none; transform-origin: 50% 50% 0px; display: none;\"><a href=\"projects\/mori\" target=\"_blank\" class=\"workcase relative z-10 block w-full md:w-1\/2 xl:w-1\/3\" style=\"background-image: url(&quot;https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Mori-thumbnailcover_40cf706c.jpg&quot;); opacity: 1; transform-origin: 50% 50% 0px; transform: none;\">\n                                <div class=\"absolute bottom-0 left-0 w-full px-4 pb-4 pt-12 z-0  bottomText\">\n                                    <div class=\"fs-xl font-semibold z-10\">\n                                        <h2>Mori<\/h2>\n                                    <\/div>\n                                <\/div>\n                            <\/a><\/div>    <\/div>\n<\/div>\n\n<script>\n    (function() {\n\n        const filterButtons = document.querySelectorAll(\".WorkShowCaseEvne .filterButton button\");\n        const filterContents = document.querySelectorAll(\".WorkShowCaseEvne .filterContent\");\n        const filterBtnContainer = document.querySelector(\".WorkShowCaseEvne .filterButton\");\n        const mobileFilter = document.querySelector(\".mobileFilter\");\n\n        filterButtons && filterButtons.forEach((button) => {\n            button.addEventListener(\"click\", function() {\n                const selectedCategory = this.getAttribute(\"ds-category\");\n                showFilterContent(selectedCategory);\n\n                filterButtons.forEach(btn => btn.classList.remove('active'));\n                filterBtnContainer.classList.remove(\"show\");\n                document.querySelector(\".mobileFilter p\").innerText = this.innerText;\n                this.classList.add('active');\n            });\n        });\n\n        function showFilterContent(selectedCategory) {\n            filterContents && filterContents.forEach((content) => {\n                const contentCategory = content.getAttribute(\"ds-category\");\n                \n                if (contentCategory.toLowerCase() === selectedCategory.toLowerCase()) {\n                    content.style.display = \"flex\";\n                } else {\n                    content.style.display = \"none\";\n                }\n            });\n        }\n\n        if (filterButtons.length > 0) {\n            filterButtons[0].click();\n        }\n\n        mobileFilter && mobileFilter.addEventListener(\"click\", function() {\n            if(filterBtnContainer.classList.contains(\"show\")) {\n                filterBtnContainer.classList.remove(\"show\");\n            } else {\n                filterBtnContainer.classList.add(\"show\");\n            }\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>We need Your Suggestion<\/di>\n                        <\/div>\n                        <div class=\"font-normal fs-lg mb-6 2xl:mb-12\"><div>\n<div>If you have a project and would like to share it with us, then please do tell us by using the form below.<\/div>\n<\/div>\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":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-207","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":11,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":47463,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/207\/revisions\/47463"}],"wp:attachment":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}