{"id":2549,"date":"2024-10-12T12:57:03","date_gmt":"2024-10-12T12:57:03","guid":{"rendered":"https:\/\/devwp02.visibleone.io\/vowp\/?page_id=2549"},"modified":"2024-12-07T11:13:05","modified_gmt":"2024-12-07T11:13:05","slug":"cityu-scope","status":"publish","type":"page","link":"https:\/\/devwp02.visibleone.io\/vowp\/projects\/cityu-scope\/","title":{"rendered":"CityU SCOPE"},"content":{"rendered":"\n<div class=\"project-banner font-primary text-light relative\">\n    <div class=\"\n          project-banner-container absolute w-full h-full\n          flex justify-center items-center z-10\n        \">\n        <div class=\"project-banner-text text-center px-2\">\n            <span class=\"fs-2xl mb-2 lg:mb-4 2xl:mb-5\">CityU SCOPE<\/span>\n            <div class=\"\n              font-semibold fs-6xl\n            \">\n                <h1>Drupal Development for Professional and Life-long Education Provider<\/h1>\n            <\/div>\n        <\/div>\n        <span aria-label=\"scroll down\" id=\"scrollDown\"\n            class=\"w-full text-center project-banner-scroll-section cursor-pointer hover:text-[#ffae00] duration-100 absolute -bottom-10 md:-bottom-12 lg:-bottom-16 2xl:-bottom-36 left-1\/2 -translate-x-1\/2 flex flex-col items-center justify-center\">\n            <span class=\"uppercase block fs-xl tracking-[0.37em] mb-2 xl:mb-4\">SCROLL DOWN<\/span>\n            <span class=\"block border-r border-solid border-light w-[1px] h-10 md:h-14 lg:h-24 2xl:h-40\"><\/span>\n            <span class=\"block border-r border-solid border-primary w-[1px] h-10 md:h-12 lg:h-16 2xl:h-36\"><\/span>\n        <\/span>\n    <\/div>\n    <div class=\"banner-bg before:absolute before:w-full before:h-full\n          before:bg-[#343B53CC] before:mix-blend-multiply before:z-0\">\n                <img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/CityU-scope-Banner-Background-visibleone.webp\" alt=\"cityU-scope-banner-background-visibleone\" loading=\"lazy\" title=\"\"\n            class=\"w-full h-[400px] sm:h-96 lg:h-[500px] xl:h-[650px] 4xl:h-[750px] 5xl:h-[850px] 6xl:h-[950px] align-middle object-cover object-center mix-blend-multiply\">\n            <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    let scrollDown = document.querySelector(\".project-banner #scrollDown\");\n    let bannercontainer = document.querySelector(\".project-banner\");\n    scrollDown && scrollDown.addEventListener(\"click\", function() {\n        if (bannercontainer) {\n            window.scrollTo({\n                top: bannercontainer.scrollHeight,\n                left: 0,\n                behavior: \"smooth\"\n            });\n        }\n    })\n});\n<\/script>\n\n\n<div id=\"ProjectBackground\" class=\"my-4 py-4 md:py-8 lg:py-16\">\n    <div><img decoding=\"async\" alt=\"24-hour responsive service icon in visible oneProject Background\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/SCOPE-1.jpg\" loading=\"lazy\" title=\"\" class=\"w-auto\"><\/div>\n    <div class=\"px-8 md:px-12 lg:px-20 2xl:px-48 md:flex \">\n        <div class=\"md:pr-8 lg:pr-10 xl:pr-16 2xl:pr-28 3xl:pr-[11.25rem] mb-6 md:mb-0\">\n            <div class=\"fs-5xl text-primary font-primary font-semibold xl:whitespace-nowrap\">\n                <h2>Project Background<\/h2>\n            <\/div>\n        <\/div>\n        <div class=\"fs-2xl text-secondary font-primary font-light\"><p>CityU SCOPE was established in 1991 and is a pioneer and provider of quality and life-long education in Hong Kong. A wide range of courses are offered in a variety of disciplines focused on professional education, retraining and self development in the community. SCOPE sought a Drupal development agency to perform a website audit and recommendations on how to revamp their website and deliver improved site architecture and design, workflow and content management. The project would entail working with the Visible One team to assist with migration from the current site to the new site and the ability to provide training, support and maintenance for implementation.<\/p>\n<\/div>\n    <\/div>\n<\/div>\n\n\n<div class=\"CaseStudyVideo relative \">\n    <div class=\"w-full h-[550px]  overflow-hidden overflow-x-hidden my-8 md:my-12 lg:my-16 2xl:my-20 relative group\"\n        style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px);\">\n                    <video autoPlay loop muted class=\"w-full h-full object-cover \">\n                <source src=\" https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/CityU-scope-Project-Presentation-Video-Visibleone.mp4\" type=\"video\/mp4\">\n                <track src=\"captions_en.vtt\" kind=\"captions\" srclang=\"en\" label=\"english_captions\">\n                <track src=\"captions_es.vtt\" kind=\"captions\" srclang=\"es\" label=\"spanish_captions\">\n                Your browser does not support the video tag.\n            <\/video>\n                <div class=\"video-playpause-btn pl-4 mt-4 flex justify-center absolute left-1\/2 bottom-10 -translate-x-1\/2  \n         z-[1]\">\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    <\/div>\n\n<\/div>\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const stop_video_animation = () => {\n            const button = document.querySelector(\".video-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(\".video-playpause-btn button.active\");\n            const video = document.querySelector('.CaseStudyVideo video');\n            if (!is_active) {\n                video.play();\n                button.querySelector('img')?.setAttribute('src', pause_btn);\n            } else {\n                video.pause();\n                button.querySelector('img')?.setAttribute('src', play_btn);\n            }\n        }\n        document.querySelector('.video-playpause-btn button')?.addEventListener('click', function () {\n            stop_video_animation();\n        })\n    })\n<\/script>\n\n\n<div class=\"md:py-12 py-6 lg:py-16 px-4 OurProcessV2\" style=\"background-color: rgb(255, 255, 255);\">\n    <div class=\"container-md\">\n        <div class=\"max-w-screen-2xl 3xl:max-w-screen-3xl mx-auto\">\n            <div class=\"text-center\">\n                <div class=\"fs-5xl font-semibold text-primary\">\n                    <h2>Our Challenges<\/h2>\n                <\/div>\n                <div class=\"fs-lg font-light text-secondary mt-7\"><\/div>\n            <\/div>\n            <div class=\"mt-7 flex flex-wrap items-stretch justify-center -ml-5 process-lists\">\n                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #BD2722 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 1<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>Migration<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Export and migrate existing website information including course information, news, etc to the newly developed site.<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #323232 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 2<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>Site Search<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Implement a search function with various filters for easy exploration of courses.<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #BD2722 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 3<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>Modern Design<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Align visual elements and storytelling with their branding while enhancing user navigation.<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #323232 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 4<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>Mobile Responsive<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Uniquely display the website on different devices to provide an optimal user experience<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #BD2722 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 5<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>Redirection<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Old pages will have new URL structure so redirection to new pages is crucial.<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n<div id=\"\"\n    class=\"CustomizedCMSSystem flex lg:flex-row flex-col justify-center items-center bg-[#FAFAFA] py-8 mb-4 md:my-4 lg:my-8\">\n    <div class=\"lg:w-1\/2 w-full xl:pr-20 xl:pl-20 lg:pr-8 lg:pl-12 px-4 md:px-8 self-center\">\n        <div class=\"text-primary fs-5xl font-primary font-semibold xl:leading-tight mb-4\">\n            <h2>A flexible and modern custom-made Drupal website<\/h2>\n        <\/div>\n        <div class=\"mb-4 lg:text-left font-light font-primary fs-lg text-secondary\">\n            <p>SCOPE&#8217;s visual identity is understandably set in stone after nearly 30 years of existence, but while the website&#8217;s visual branding left nothing to be desired, its layout and user-friendliness could still be improved.As a result, our web designers and UX specialists completely redesigned the website&#8217;s information architecture and user interaction flows, as well as the navigation between the various inner pages.These critical decisions about visual layout and hierarchy were aided by the use of wireframing, or the creation of a framework that allowed us to prioritize usability and thoroughly define the website&#8217;s structure. In addition, we designed and implemented a variety of CSS transitions that animate the website when the user hovers or clicks around the on-site content.<\/p>\n<\/div>\n        <div class=\"flex justify-end relative\">\n            <div class=\"relative flex items-center \"><span\n                    class=\"mr-6 flicking-arrow-prev relative top-[unset] left-[unset] custom_nav flicking-arrow-disabled\"><img decoding=\"async\"\n                        src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-previous-ltr_c547fddf.svg\"\n                        alt=\"\" aria-hidden=\"true\" loading=\"lazy\"><\/span><span\n                    class=\"mr-7 flicking-arrow-next relative top-[unset] left-[unset] custom_nav\"><img decoding=\"async\"\n                        src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-previous-rtl_a8582354.svg\"\n                        alt=\"\" aria-hidden=\"true\" loading=\"lazy\"><\/span>\n                <label class=\"custom_switch  relative\"><input type=\"checkbox\" checked><span\n                        class=\"custom_slider custom_round\"><\/span>\n                    <p\n                        class=\"absolute top-1\/2 pl-6 text-light -translate-y-1\/2 font-primary font-semibold lg:text-lg sm:text-base text-sm desktop\">\n                        <span>Desktop<\/span><\/p>\n                    <p\n                        class=\"absolute top-1\/2 pr-6 right-0 text-light -translate-y-1\/2 font-primary font-semibold lg:text-lg sm:text-base text-sm hidden mobile\">\n                        <span>Mobile<\/span><\/p>\n                <\/label>\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"lg:w-1\/2 w-full relative py-2 md:py-6 my-4 lg:my-0 lg:py-12 pl-4 pr-4 \">\n        <div><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/12\/Scope_bg.webp\" alt=\"slider background\" loading=\"lazy\" title=\"\" class=\"absolute w-full h-[100%] lg:w-full top-0 right-0\"><\/div>        <div class=\"relative py-8\">\n            <div id=\"desktopView\" class=\"relative xl:max-h-full  custom_padding\">\n                <div class=\"flicking-viewport flicking \" gap=\"0\" collectstatistics=\"false\"\n                    style=\"user-select: none; -webkit-user-drag: none; touch-action: pan-y;\">\n                    <div class=\"flicking-camera -translate-x-2 md:-translate-x-4 3xl:-translate-x-6\">\n                        <div class=\"m-2 md:m-4 3xl:m-6 w-full md:w-auto flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project desktop view-11\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Scope-homepage_8f10ba68-1.webp\" loading=\"lazy\" title=\"\" class=\"w-full md:w-[450px] lg:w-[470px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px]\"><\/div><div class=\"m-2 md:m-4 3xl:m-6 w-full md:w-auto flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project desktop view-22\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Scope-message_731c3204.webp\" loading=\"lazy\" title=\"\" class=\"w-full md:w-[450px] lg:w-[470px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px]\"><\/div><div class=\"m-2 md:m-4 3xl:m-6 w-full md:w-auto flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project desktop view-33\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Scope-mission_3f186188-3.webp\" loading=\"lazy\" title=\"\" class=\"w-full md:w-[450px] lg:w-[470px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px]\"><\/div>\n                    <\/div>\n                <\/div>\n                                <img decoding=\"async\"\n                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-desktop_3dff4b21.png\"\n                    alt=\"desktop frame\" loading=\"lazy\"\n                    class=\"absolute top-0 left-0 z-10 w-full md:w-[455px] lg:w-[485px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px] slide_img\">\n                            <\/div>\n            <div id=\"mobileView\" class=\"relative pl-7 xl:max-h-full hidden\">\n                <div class=\"flicking-viewport flicking \" gap=\"2\" collectstatistics=\"false\" style=\"user-select: none; -webkit-user-drag: none; touch-action: pan-y;\">\n                    <div class=\"flicking-camera -translate-x-4\" >\n                        <div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project mobile view-1\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Mobile-1.webp\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project mobile view-2\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Mobile-2.webp\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project mobile view-3\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Mobile-3.webp\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Frame-8777.png\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"CityU SCOPE project mobile view-4\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Mobile-4.webp\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div>\n                    <\/div>\n                <\/div>\n                                <img decoding=\"async\"\n                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-mobile-mockup_6c61c7ed.png\"\n                    alt=\"mobile view\" aria-hidden=\"true\" loading=\"lazy\"\n                    class=\"absolute w-[170px] md:w-[220px] lg:w-[205px] xl:w-[219px] 2xl:w-[240px] 3xl:w-[270px] top-0 left-0 z-10 ml-[16px] slide_img\">\n                                <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    let checkInput = document.querySelector(\".custom_switch input\");\n    let defaultTranslate = 16;\n    let translateXValue = -(defaultTranslate);\n\n    function handleDefaultTransalte() {\n        if (window.innerWidth >= 1910) {\n            defaultTranslate = 24;\n        } else if (window.innerWidth >= 768) {\n            defaultTranslate = 16;\n        } else {\n            defaultTranslate = 8;\n        }\n        translateXValue = -(defaultTranslate);\n    }\n    handleDefaultTransalte();\n\n    checkInput.addEventListener(\"change\", function() {\n        if (checkInput.checked) {\n            handleDefaultTransalte();\n            document.querySelector(\".custom_switch .desktop\").style.display = \"block\";\n            document.querySelector(\".custom_switch .mobile\").style.display = \"none\";\n\n            document.querySelector(\".CustomizedCMSSystem #desktopView\").style.display = \"block\";\n            document.querySelector(\".CustomizedCMSSystem #mobileView\").style.display = \"none\";\n\n        } else {\n            defaultTranslate = 16;\n            translateXValue = -(defaultTranslate);\n            document.querySelector(\".custom_switch .desktop\").style.display = \"none\";\n            document.querySelector(\".custom_switch .mobile\").style.display = \"block\";\n\n            document.querySelector(\".CustomizedCMSSystem #desktopView\").style.display = \"none\";\n            document.querySelector(\".CustomizedCMSSystem #mobileView\").style.display = \"block\";\n        }\n    })\n\n\n    \/\/ Select the buttons\n    let nextButton = document.querySelector(\".CustomizedCMSSystem .flicking-arrow-next\");\n    let prevButton = document.querySelector(\".CustomizedCMSSystem .flicking-arrow-prev\");\n\n    nextButton.addEventListener('click', () => {\n        let checkInput = document.querySelector(\".custom_switch input\");\n\n        if (checkInput.checked) { \/\/ desktop view\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #desktopView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #desktopView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #desktopView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #desktopView .slide_img')\n                .offsetWidth;\n\n            let maxTranslateX = -(itemWidth * totalItems - containerWidth);\n\n            if (translateXValue - itemWidth >= (maxTranslateX - 10)) {\n                translateXValue -= itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        } else {\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #mobileView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #mobileView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #mobileView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #mobileView .slide_img')\n                .offsetWidth;\n\n            let maxTranslateX = -(itemWidth * totalItems - containerWidth);\n            console.log(\"maxTranslateX \", maxTranslateX)\n\n            if (translateXValue - itemWidth >= (maxTranslateX - 10)) {\n                translateXValue -= itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        }\n    });\n\n\n    prevButton.addEventListener('click', () => {\n        let checkInput = document.querySelector(\".custom_switch input\");\n\n        if (checkInput.checked) { \/\/ desktop view\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #desktopView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #desktopView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #desktopView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #desktopView .slide_img')\n                .offsetWidth;\n\n            if (translateXValue + itemWidth <= 0) {\n                translateXValue += itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        } else {\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #mobileView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #mobileView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #mobileView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #mobileView .slide_img')\n                .offsetWidth;\n\n            if (translateXValue + itemWidth <= 0) {\n                translateXValue += itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        }\n    });\n\n    window.addEventListener('resize', function() {\n        handleDefaultTransalte();\n    });\n\n});\n<\/script>\n\n\n<div class=\"CaseStudyService\" style=\"opacity: 1; transform: none;\">\n    <div id=\"\" class=\"relative text-secondary\" style=\"background-color: rgb(255, 255, 255);\">\n        <div\n            class=\"max-w-screen-2xl 3xl:max-w-screen-3xl mx-auto py-16 dark:text-dark px-4 md:px-8 xl:px-16 2xl:px-20 3xl:px-28\">\n            <div class=\"text-center text-primary fs-5xl font-semibold\">\n                <h2>Our Solution & Tech Stack<\/h2>\n            <\/div>\n            <div\n                class=\"text-center font-light my-4 md:my-8 fs-lg w-full lg:w-[90%] xl:w-[80%] 2xl:w-[70%] mx-auto leading-relaxed\">\n                            <\/div>\n            <div class=\"flex flex-wrap  mt-24 md:mt-20 case-study-services\">\n                <div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"24-hour responsive service icon in visible one\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Drupal.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"Drupal over icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Drupal-icon-1.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>Drupal Development<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>We are a leading Drupal development firm that can take your project from concept to completion, including data migration, API integration, and module development.<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"Advanced search icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Advanced-search-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"Advanced search over icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Advanced-search-over-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>Advanced Search<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>We developed advanced search function for SCOPE&#8217;s Drupal website. It is a way to find the right courses by specifying a criteria including multiple parameters.<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"WYSIWYG icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/WYSIWYG-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"WYSIWYG over icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/WYSIWYG-over-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>WYSIWYG Editor<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>We use the HTML editor to insert articles for client. Client also can use it to design a post page without having any programming knowledge. It is often faster and easier to make changes to a page using a text editor.<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"Responsive-website-design\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Responsive-website-design.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"Responsive-website-design-over\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Responsive-website-design-over.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>Responsive Web Design<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>SCOPE website is created with multiple elements that respond separately when displayed on devices with various sizes. The website will rescale itself to adapt to the screen of the client and to preserve the user experience and look &amp; feel across all devices.<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"Search Engine Optimized icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Search-Engine-Optimized-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"24-hour responsive service icon in visible one\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Search-Engine-Optimized-over-icon-1.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>Search Engine Optimized<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>We ensure that the redesigned SCOPE site is SEO friendly and follows Google&#8217;s best practices to maximize rankings and visibility.<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"social sharing button icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/social-sharing-button-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"social sharing button over icon\" \n                                    src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/social-sharing-button-over-icon.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>Social Sharing Buttons<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>With a single click, SCOPE&#8217;s content can be shared easily to social medias reaching new audiences and increases brand awareness.<\/p>\n\n                              <\/div><\/div><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<style>\n  .approachSlider .swiper-button-prev::after {\n    background-image: url('https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/uiux-custom-prev-arrow_1fef814d.svg');\n    background-repeat: no-repeat;\n    background-size: contain;\n  }\n  .approachSlider .swiper-button-next::after {\n    background-image: url('https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/projects\/uiux-custom-arrow_01e08598.svg');\n    background-repeat: no-repeat;\n    background-size: contain;\n  }\n<\/style>\n\n<div id=\"\" class=\"relative approachSlider\" style=\"background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);\">\n  <div class=\"absolute top-0 bg-secondary\/80\" style=\"background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);\"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/uibg_aed22e8a.png\" alt=\"24-hour responsive service icon in visible one\" loading=\"lazy\" title=\"\" class=\"w-full object-contain bg-secondary min-h-[21.5rem] sm:min-h-full uiux_bgImg mix-blend-multiply\"><\/div>\n  <div class=\"relative px-5 md:px-12 lg:px-16 2xl:px-20 max-w-6xl 2xl:max-w-7xl 3xl:max-w-screen-2xl mx-auto py-4 md:pt-8 md:pb-16 xl:py-24 3xl:py-32\">\n    <div class=\"overflow-x-hidden uiuxApproachSliderSwiper\" >\n        <div class=\"swiper-wrapper\">\n          <div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><h2>UI\/UX Approaches<\/h2><\/div><h3 class=\"fs-2xl font-primary font-bold\">Distinct & Appealing Icons<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>We inserts suitable icons for important points in website. This is to let website visitor to understand the information clearly, well, and easily.<\/p>\n<\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">1<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"CityU scope UI\/UX Approaches-1\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/uiux3.webp\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><h2>UI\/UX Approaches<\/h2><\/div><h3 class=\"fs-2xl font-primary font-bold\">Attractive Design<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>An attractive website design is one that intrigues viewers to want to explore deeper into the whole website. Therefore, our professional designers design the webpages that initially be aesthetically pleasing to the eye.<\/p>\n<\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">2<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"CityU scope UI\/UX Approaches-2\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/uiux2.webp\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><h2>UI\/UX Approaches<\/h2><\/div><h3 class=\"fs-2xl font-primary font-bold\">Most Appealing Animations<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>Animation on the web is a great way to make a website delightful, attractive and feel alive. Our development team added smooth animation on website making the entire website engaging and vibrant.<\/p>\n<\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">3<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"CityU scope UI\/UX Approaches-3\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/uiux1.webp\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><h2>UI\/UX Approaches<\/h2><\/div><div class=\"pt-3 fs-lg font-primary font-light \"><\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">4<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Scope-4.jpg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><h2>UI\/UX Approaches<\/h2><\/div><div class=\"pt-3 fs-lg font-primary font-light \"><\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">5<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Scope-5.jpg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div>        <\/div>  \n        <div class=\"swiper-button-next custom-next-arrrow \"><\/div>\n        <div class=\"swiper-button-prev custom-prev-arrrow \"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    var uiuxSwiper = new Swiper('.uiuxApproachSliderSwiper', {\n            direction: 'horizontal',\n            navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n            },\n            pagination: false,\n            loop: true,\n            slidesPerView: 1,\n            freeMode: true,\n            effect: 'slide',\n            speed: 1000,\n            \/\/ autoplay: {\n            \/\/   delay: 4000,\n            \/\/   disableOnInteraction: false,\n            \/\/ },\n        });\n\n  });\n<\/script>\n\n\n<div class=\"DigitalMarketingBanner relative \" style=\"opacity: 1;    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);\">\n    <div id=\"\" class=\"w-full block\">\n        <div class=\"relative max-w-full\"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/Website-URL-Banner.webp\" alt=\"CityU scope website url-banner\" loading=\"lazy\" title=\"\"\n                class=\"min-h-[311px] object-cover w-full mix-blend-multiply\">            <!-- <div class=\"overlay absolute top-0 right-0 left-0 bottom-0 bg-primary\/40]\"\n                style=\"background-color: #A2AAB880;\"><\/div> -->\n            <div class=\"w-full px-8 absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 z-[1]\">\n                <div class=\"text-light text-center fs-5xl font-primary font-semibold leading-[1.25] mb-4\">\n                    <h3 class=\"opacity-100\"><span class=\"text-light opacity-100\">Visit the Webiste<\/span><\/h3>\n                <\/div>\n                                <div class=\"block mx-auto text-center lg:mt-7 mt-4\">\n                    <a target=\"_blank\" href=\"https:\/\/www.scope.edu\/\" class=\"hover:bg-light bg-transparent text-light hover:text-primary border-2 border-light inline-block px-8 py-2 fs-lg font-primary font-semibold text-center transition-colors duration-300 break-all\" rel=\"noopener\">https:\/\/www5.scope.edu\/<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<section id=\"\" class=\"colour-demo font-primary\">\n    <div\n        class=\"colour-demo-container px-5 py-6 mt-20 lg:mt-10 mx-auto max-w-7xl sm:flex justify-between items-center lg:py-10 xl:py-16 2xl:max-w-[88.75rem] 2xl:items-start 2xl:py-24 2xl:mt-48\">\n        <div class=\"colour-demo-col1 relative sm:flex-1 sm:basis-3\/4 sm:mr-5 lg:mr-0 xl:basis-3\/5\">\n            <div class=\"\n              text-7xl text-grey-600 font-semibold\n              absolute -top-14 -right-5 z-[-1]\n              sm:right-0\n              xl:text-9xl xl:-top-24\n              2xl:-top-[6.25rem] 2xl:right-11\n            \">\n        <h2>Colours <\/h2>\n      <\/div>\n      <div class=\"colour-demo-img\"><img decoding=\"async\" alt=\"cityu scope devices viewColours \" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/img-Case-study-CityU-SCOPE_78d04c44.webp\" loading=\"lazy\" title=\"\" class=\"\n                w-auto h-auto object-cover object-center align-middle mix-blend-multiply\n              \"><\/div>\n        <\/div>\n        <div class=\"colour-demo-col2 mt-8 text-primary sm:flex-1 sm:basis-[148px] sm:mt-0 xl:basis-[13.75rem]\">\n            <div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #BD2722;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#BD2722<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #FCAE2F;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#FCAE2F<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #323232;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#323232<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #F3F3F3;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#F3F3F3<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #ffffff;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#ffffff<\/div>\n                <\/div>        <\/div>\n    <\/div>\n<\/section>\n\n\n<section id=\"TypographyBanner\" class=\"typo font-primary\">\n    <div class=\"typo-container px-5 py-6 pr-0 mr-0 ml-auto max-w-7xl md:flex md:justify-between md:items-center lg:py-10 xl:py-16 2xl:items-start 2xl:max-w-[112.5rem]\">\n        <div class=\"typo-text pr-5 md:pr-0 md:flex-1 md:basis-1\/2 2xl:basis-auto\">\n            <div class=\"\n            text-5xl text-grey-600 font-semibold\n            sm:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl\n          \">\n                <h2>Typography<\/h2>\n            <\/div>\n            <div class=\"typo-sample flex items-center justify-between sm:justify-around mt-5 sm:mt-8 2xl:mt-12\">\n                <div class=\"typo-family font-bold sm:text-right \"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/scope-typo.png\" alt=\"24-hour responsive service icon in visible oneTypography\" loading=\"lazy\" class=\"w-40 h-auto sm:w-48 xl:w-64 2xl:w-80 3xl:w-auto mr-0 ml-auto block object-cover object-center\"><\/div>\n                <div class=\"typo-weight max-w-[11.25rem] xl:max-w-[18.25rem] text-base flex-1 mt-0 basis-44 2xl:basis-72\"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/scope-fontweight.png\" alt=\"24-hour responsive service icon in visible one\" loading=\"lazy\" class=\"mr-0 ml-auto object-cover object-center h-auto w-32 sm:w-40 xl:w-44 2xl:w-56 3xl:w-auto\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"typo-image mt-5 md:mt-0 md:flex-1 md:self-center md:basis-2\/5 md:max-w-[40%] 2xl:basis-auto\"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/10\/laptop-view.webp\" alt=\"cityu scope laptop viewtypoTypography\" loading=\"lazy\" title=\"\" class=\"\n              w-auto h-auto align-middle object-center object-cover mr-0 ml-auto    \n            \"><\/div>\n    <\/div>\n<\/section>\n\n\n<section class=\"SliderV2 py-8 amazing-works bg-light text-primary md:py-16 font-primary\">\n    <div class=\"text-center text-primary font-semibold mb-8 fs-5xl\">\n        <h2>Other Amazing Works<\/h2>\n    <\/div>\n    <div class=\"swiper amazing-works-slider sliderV2Swiper\">\n        <div class=\"swiper-wrapper mb-10\">\n            <div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/fulbright\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/FullBright_7cf5ab37.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Fulbright<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/tam-jai-international\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/tamjai-intl_a4ccbb87.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Tamjai Intl.<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/hkci\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/HKCI.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">HKCI<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/yamato-logistics-hk-ltd\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Yamato.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Yamato<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/ayp\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/AYP.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">AYP<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/sunnex\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Sunnex.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Sunnex<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/hom\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/HOM.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">HOM<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/cityu-scope\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/SCOPE.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">CityU SCOPE<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/longchamp\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/Longchamp.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Longchamp<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/healthy-seed\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/HealthySeed.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">HealthySeed<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/projects\/sau-tao\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/11\/SauTao.jpg\" \n                            alt=\"24-hour responsive service icon in visible one\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Sautao<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>        <\/div>\n        <div class=\"swiper-button-next\"><\/div>\n        <div class=\"swiper-button-prev\"><\/div>\n        <div class=\"swiper-pagination\"><\/div>\n    <\/div>\n<\/section>\n\n\n<script>\n    (function() {\n\n        const items = [{\"title\":\"Fulbright\",\"src\":{\"ID\":1783,\"id\":1783,\"title\":\"FullBright_7cf5ab37\",\"filename\":\"FullBright_7cf5ab37.jpg\",\"filesize\":234230,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/fullbright_7cf5ab37\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"fullbright_7cf5ab37\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-09-20 18:04:46\",\"modified\":\"2024-09-20 18:04:46\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":400,\"height\":440,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37-273x300.jpg\",\"medium-width\":273,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37.jpg\",\"medium_large-width\":400,\"medium_large-height\":440,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37.jpg\",\"large-width\":400,\"large-height\":440,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37.jpg\",\"1536x1536-width\":400,\"1536x1536-height\":440,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/FullBright_7cf5ab37.jpg\",\"2048x2048-width\":400,\"2048x2048-height\":440}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/\"},{\"title\":\"Tamjai Intl.\",\"src\":{\"ID\":1781,\"id\":1781,\"title\":\"tamjai-intl_a4ccbb87\",\"filename\":\"tamjai-intl_a4ccbb87.jpg\",\"filesize\":184925,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/tamjai-intl_a4ccbb87\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"tamjai-intl_a4ccbb87\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-09-20 18:03:04\",\"modified\":\"2024-09-20 18:03:04\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":400,\"height\":440,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87-273x300.jpg\",\"medium-width\":273,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87.jpg\",\"medium_large-width\":400,\"medium_large-height\":440,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87.jpg\",\"large-width\":400,\"large-height\":440,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87.jpg\",\"1536x1536-width\":400,\"1536x1536-height\":440,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/tamjai-intl_a4ccbb87.jpg\",\"2048x2048-width\":400,\"2048x2048-height\":440}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/tam-jai-international\\\/\"},{\"title\":\"HKCI\",\"src\":{\"ID\":10855,\"id\":10855,\"title\":\"HKCI\",\"filename\":\"HKCI.jpg\",\"filesize\":457770,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/hkci\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"hkci\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:00:00\",\"modified\":\"2024-11-22 04:00:00\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/hkci\\\/\"},{\"title\":\"Yamato\",\"src\":{\"ID\":10873,\"id\":10873,\"title\":\"Yamato\",\"filename\":\"Yamato.jpg\",\"filesize\":199668,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/yamato\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"yamato\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:07\",\"modified\":\"2024-11-22 04:01:07\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/yamato-logistics-hk-ltd\\\/\"},{\"title\":\"AYP\",\"src\":{\"ID\":10861,\"id\":10861,\"title\":\"AYP\",\"filename\":\"AYP.jpg\",\"filesize\":331026,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/ayp\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"ayp\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:00\",\"modified\":\"2024-11-22 04:01:00\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/ayp\\\/\"},{\"title\":\"Sunnex\",\"src\":{\"ID\":10909,\"id\":10909,\"title\":\"Sunnex\",\"filename\":\"Sunnex.jpg\",\"filesize\":421950,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/sunnex\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"sunnex\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:59\",\"modified\":\"2024-11-22 04:01:59\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/sunnex\\\/\"},{\"title\":\"HOM\",\"src\":{\"ID\":10885,\"id\":10885,\"title\":\"HOM\",\"filename\":\"HOM.jpg\",\"filesize\":185968,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/hom\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"hom\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:47\",\"modified\":\"2024-11-22 04:01:47\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/hom\\\/\"},{\"title\":\"CityU SCOPE\",\"src\":{\"ID\":10903,\"id\":10903,\"title\":\"SCOPE\",\"filename\":\"SCOPE.jpg\",\"filesize\":462345,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/scope\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"scope\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:55\",\"modified\":\"2024-11-22 04:01:55\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/cityu-scope\\\/\"},{\"title\":\"Longchamp\",\"src\":{\"ID\":10891,\"id\":10891,\"title\":\"Longchamp\",\"filename\":\"Longchamp.jpg\",\"filesize\":235915,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/longchamp\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"longchamp\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:50\",\"modified\":\"2024-11-22 04:01:50\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/longchamp\\\/\"},{\"title\":\"HealthySeed\",\"src\":{\"ID\":10879,\"id\":10879,\"title\":\"HealthySeed\",\"filename\":\"HealthySeed.jpg\",\"filesize\":407519,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/healthyseed\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"healthyseed\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:44\",\"modified\":\"2024-11-22 04:01:44\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/healthy-seed\\\/\"},{\"title\":\"Sautao\",\"src\":{\"ID\":10897,\"id\":10897,\"title\":\"SauTao\",\"filename\":\"SauTao.jpg\",\"filesize\":280742,\"url\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/fulbright\\\/sautao\\\/\",\"alt\":\"24-hour responsive service icon in visible one\",\"author\":\"1\",\"description\":\"\",\"caption\":\"\",\"name\":\"sautao\",\"status\":\"inherit\",\"uploaded_to\":1741,\"date\":\"2024-11-22 04:01:53\",\"modified\":\"2024-11-22 04:01:53\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/devwp02.visibleone.io\\\/vowp\\\/projects\\\/sau-tao\\\/\"}];\n\n        const sliderV2Swiper = new Swiper('.sliderV2Swiper', {\n            direction: 'horizontal',\n            loop: true,\n            scrollbar: {\n                el: \".swiper-scrollbar\",\n                hide: true\n            },\n            pagination: false,\n            navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n            },\n            effect: 'slide',\n            speed: 1000,\n            slidesPerView: 1,\n            spaceBetween: 20,\n            centeredSlides: true,\n            breakpoints: {\n                640: {\n                    slidesPerView: 2,\n                },\n                1024: {\n                    slidesPerView: 3.3,\n                },\n            },\n        });\n    })();\n<\/script>\n\n\n<section class=\"VOCapacityCaseCard\n        capacity-case relative z-0\n        bg-primary text-light font-primary\n      \">\n  <div class=\"\n          capacity-case-container mx-auto\n          py-6 px-5 lg:py-10 lg:px-10 2xl:py-[5.25rem]\n          lg:flex lg:items-center lg:justify-between\n          max-w-7xl 2xl:max-w-[101.75rem]\n        \">\n    <div class=\"capacity-case-main lg:flex-1\">\n      <div class=\"font-semibold fs-5xl\">\n        <h3>Let us call you back on your suitable time.<\/h3>\n      <\/div>\n      <div class=\"font-light fs-lg mt-4\"><p>Let us call you back on your suitable time.u0026lt;br\/u0026gt;rnrnWe&#8217;re ready to get you started on your next website project. Let us schedule a meeting suitable for you.<\/p>\n<\/div>\n    <\/div>\n    <a class=\"text-center font-semibold text-light fs-xl py-2 2xl:py-3 px-5 border-2 border-solid border-light inline-block transform hover:bg-light hover:text-primary transition-colors mt-6 lg:mt-0 cursor-pointer duration-300\" href=\"https:\/\/info.visibleone.com\/meetings\/visibees\/callback\" target=\"_blank\" rel=\"noopener noreferrer\">Schedule a Call Back<\/a>\n  <\/div>\n  <div class=\"\n          capacity-deco-left absolute left-0 bottom-0 z-[-1]\n        \"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/deco-1_e524951b.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-14 xl:w-16 2xl:w-auto h-auto align-middle object-cover object-center\n            absolute top-2 left-2 lg:-top-3 lg:left-4 2xl:top-0 2xl:left-11\n          \"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/circle-left_39c81b4a.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-16 lg:w-20 xl:w-28 2xl:w-44 h-auto align-middle object-cover object-center\n          \"><\/div>\n  <div class=\"\n          capacity-deco-right absolute right-0 -top-1 z-[-1]\n          lg:-top-4 2xl:-top-1\n        \"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/circle-right_b6383a1a.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-16 xl:w-20 2xl:w-auto h-auto align-middle object-cover object-center\n          \"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/deco-2_4d21f7cd.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-14 lg:w-16 2xl:w-auto h-auto align-middle object-cover object-center\n            absolute top-10 right-0 lg:top-16 2xl:top-44 2xl:right-5\n          \"><img decoding=\"async\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/deco-3_de5a71a3.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-10 xl:w-12 2xl:w-auto h-auto align-middle object-cover object-center\n            absolute top-0 right-10 lg:top-5 lg:right-24 2xl:top-9 2xl:right-52\n          \"><\/div>\n<\/section>\n\n\n\n\n<section id=\"d0c79d39-a235-4f83-b377-61d3853f1417\" 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 = \"d0c79d39-a235-4f83-b377-61d3853f1417\";\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":207,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2549","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/2549","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=2549"}],"version-history":[{"count":11,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/2549\/revisions"}],"predecessor-version":[{"id":59316,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/2549\/revisions\/59316"}],"up":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/pages\/207"}],"wp:attachment":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/wp-json\/wp\/v2\/media?parent=2549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}