{"id":27116,"date":"2024-10-24T11:12:08","date_gmt":"2024-10-24T03:12:08","guid":{"rendered":"https:\/\/visibleone.com\/mori\/"},"modified":"2025-08-12T16:08:23","modified_gmt":"2025-08-12T08:08:23","slug":"mori","status":"publish","type":"page","link":"https:\/\/visibleone.com\/my\/projects\/mori\/","title":{"rendered":"Mori"},"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\">Mori<\/span>\n            <div class=\"\n              font-semibold fs-6xl\n            \">\n                <h1>Custom PHP E-commerce Website Development<\/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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Mori-Banner-scaled.png\" alt=\"24-hour responsive service icon in visible one\" 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=\"mori laptop mockup as case study in visible oneProject Background\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Mori_Laptop-Mockup.png\" 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>Mori Jewellery began its journey online in 2017, initially connecting with customers through social media. Since the 2020s, They&#8217;ve expanded into various retail locations in Hong Kong. Eager to harness the latest in digital sophistication, Mori partnered with Visible One to elevate their online presence. Their website will provide comprehensive insights into the client&#8217;s operations and offer convenient customer interaction and functionalities for social media integration.<\/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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/AYP-project-presentationi-video-1.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:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n                data-pause=\"https:\/\/visibleone.com\/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:\/\/visibleone.com\/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>Custom PHP Website Development<\/h2>\n                <\/div>\n                <div class=\"fs-lg font-light text-secondary mt-7\"><p>We created a customized PHP e-commerce website for Mori Jewelry Shop to enhance its online presence and adapt to the expanding market demands. Key features of this website include social media integration, a dynamic point system where customers can earn and redeem points, and a referral program to boost user engagement. We utilized the Laravel framework for its robustness and flexibility, and integrated Instagram to keep the site&#8217;s content fresh and engaging.<\/p>\n<\/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: #800000 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>Point System Integration<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Our team has enhanced the customer points system by creating a comprehensive feature that lets customers earn and spend points across the website, increasing engagement and loyalty. We&#8217;ve implemented a seamless point redemption process available during checkout, ensuring a smooth shopping 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: #006400 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>Instagram Data Integration<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>Integrating Instagram was crucial for syncing social media content directly to the website. This allowed for real-time updates and social proofing, boosting trust and user interaction.<\/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: #800000 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>Custom Product Purchases<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>We created a robust platform where users can effortlessly customize and purchase their desired products, with options to view and modify their creations before checkout.<\/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: #006400 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>Referral Program Implementation<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>We&#8217;ve introduced a referral program to foster a sense of community and reward our users. Users can share a referral code with others, granting both the sharer and the receiver discounts on future purchases.<\/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: #800000 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>Shipping Integration with Easyship<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>To streamline the logistics, we integrated Easyship to offer various shipping options, making it easy for customers to receive their custom products wherever they are.<\/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>Custom PHP Website Development<\/h2>\n        <\/div>\n        <div class=\"mb-4 lg:text-left font-light font-primary fs-lg text-secondary\">\n            <p>We created a customized PHP e-commerce website for Mori Jewelry Shop to enhance its online presence and adapt to the expanding market demands. Key features of this website include social media integration, a dynamic point system where customers can earn and redeem points, and a referral program to boost user engagement. We utilized the Laravel framework for its robustness and flexibility, and integrated Instagram to keep the site&#8217;s content fresh and engaging.<\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/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 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=\"website desktop view in visible one1\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-Desktop-view-2.png\" 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=\"website desktop view in visible one2\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-Desktop-view-3.png\" 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=\"website desktop view in visible one3\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-Desktop-view-4.png\" 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=\"website desktop view in visible one4\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-Desktop-view.png\" 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:\/\/visibleone.com\/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=\"website mobile view in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-mobile-view-1.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=\"website mobile view in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-mobile-view-2.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=\"website mobile view in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-mobile-view-3.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=\"website mobile view in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-mobile-view.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>\n                    <\/div>\n                <\/div>\n                                <img decoding=\"async\"\n                    src=\"https:\/\/visibleone.com\/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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Laravel-Development-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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Laravel-Development-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>Laravel Development<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>Laravel was chosen for its exceptional robustness and flexibility, making it well-suited for developing dynamic websites with complex functionalities. Its comprehensive tools allow developers to efficiently build scalable, high-performance web applications that meet modern requirements.<\/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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Social-media-over-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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Social-media-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>API Integrations<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>The Instagram social API was integrated to keep the website&#8217;s content fresh and connected with the latest social trends. This feature automatically updates the site with new Instagram posts, enhancing user engagement and ensuring the content remains current and relevant.<\/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=\"\" \n                                    src=\"https:\/\/visibleone.com\/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=\"\" \n                                    src=\"https:\/\/visibleone.com\/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>User Interface Design<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>Our UI design prioritizes responsiveness and ease of navigation, making the website accessible and user-friendly across all devices. This focus enhances customer satisfaction and retention by ensuring a smooth, adaptable experience for every user, regardless of their device.<\/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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/invoice-pdf_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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/invoice-pdf-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>Flexible Payment Integration<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>Our platform is designed to accommodate any payment type, enhancing accessibility and convenience for our members. This flexibility ensures members can use their preferred payment methods, from credit cards to digital wallets, fostering a seamless and inclusive shopping experience. This system is built to support diverse financial preferences, ensuring that every transaction is smooth and user-friendly.<\/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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/ecommance-analytics-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=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/ecommance-analytics-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>Highly Challenged Features<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>It has integrated advanced features like social API connections, Easyship for shipping functionalities, and a comprehensive reward system that uses earning and redeeming points across the website.<\/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=\"bar chart with an upward-pointing arrow and a magnifying glass\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/SEO_570645bc.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"bar chart with an upward-pointing arrow and a magnifying glass green color\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/SEO_1155924a.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>GA Ecommerce Tracking Integration<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>We implemented GA4 Ecommerce Tracking to enhance the monitoring and optimization of online shopping activities. This feature allows us to capture detailed data on transactions and customer behavior, enabling precise adjustments to marketing and product strategies. It&#8217;s designed to support diverse analytical requirements, ensuring that we utilize insights for maximum impact, and fostering a data-driven shopping environment that caters to the needs of all users.<\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Mori-Banner-1-scaled.png\" alt=\"Mori website homepage banner image\" 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\">Mesmerizing Display<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>Elevating user experience with captivating visuals, vibrant colors, and engaging interactive animations.<\/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=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/mesmerizing-display-1-scaled.png\" 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\">User-Controlled Content Sorting<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>Let users sort and filter content based on their preferences<\/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=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/user-controlled-2-scaled.png\" 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\">Collapsible and Expandable Sections<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>Allow users to customize the display of content sections. This design strategy is particularly valuable when dealing with a substantial amount of information, as it provides a more organized and customizable user experience.<\/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=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/collapasible-and-expandable-scaled.png\" 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\">Chatbots and Conversational UI<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>This design approach leverages artificial intelligence (AI) and natural language processing to create a more engaging and user-friendly interaction between the user and the system.<\/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\">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=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/chatbots-4-scaled.png\" 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\">Lazy Loading<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>Load assets only when needed to improve page loading speed. It prioritizes essential elements, contributing to increased user engagement and potential sales.<\/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\">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=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-background-1.png\" 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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-background-2.png\" alt=\"Mori Banner image in Visible One\" 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 Website<\/span><\/h3>\n                <\/div>\n                                <div class=\"block mx-auto text-center lg:mt-7 mt-4\">\n                    <a target=\"_blank\" href=\"https:\/\/www.mymori.co\/\" 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=\"nofollow noopener\">https:\/\/www.mymori.co\/<\/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=\"Colours \" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Mori_c4508104.png\" 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: #018935;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#018935<\/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: #0A6F80;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#0A6F80<\/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: #696158;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#696158<\/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:  #F0EFEE;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\"> #F0EFEE<\/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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/AYP-font-image.webp\" 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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/AYP-font-size-image.webp\" 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:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/desktop-view.png\" alt=\"typoTypography\" 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:\/\/visibleone.com\/my\/projects\/sautao\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2025\/08\/thumbnail-ctfs.jpg\" \n                            alt=\"High-angle view of the Tomei Expressway in Japan, featuring traffic and a green directional sign against a backdrop of forested mountains\" \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\">CTF Services Limited<\/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:\/\/visibleone.com\/my\/projects\/tmdhc\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2025\/08\/thumbnail-tmdhc.jpg\" \n                            alt=\"Reception area of the Tuen Mun District Health Centre (TMDHC) in Hong Kong, featuring a curved white desk, a wooden backdrop, and a 'Health Counts' digital sign\" \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\">TMDHC<\/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:\/\/visibleone.com\/projects\/sats-hk-limited\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2025\/08\/thumbnail-sats-hk.jpg\" \n                            alt=\"Cargo pallets on a transport trailer being positioned for loading into a large white freighter aircraft at sunset\" \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\">SATS HK<\/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:\/\/visibleone.com\/projects\/loeb-smith\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2025\/08\/thumbnail-loeb-smith.jpg\" \n                            alt=\"Top-down view of people collaborating on financial data using a tablet, smartphone with a dollar sign icon, and a laptop over a desk covered in hand-drawn charts\" \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\">Loeb Smith<\/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:\/\/visibleone.com\/projects\/remfly\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2025\/08\/thumbnail-remfly.jpg\" \n                            alt=\"\" \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\">Remfly<\/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:\/\/visibleone.com\/projects\/lyhealthy\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2025\/08\/thumbnail-life-young.jpg\" \n                            alt=\"A smiling father, mother, and young daughter stacked vertically with a glowing blue DNA double helix graphic on either side\" \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\">Life Young Health<\/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\":\"CTF Services Limited\",\"src\":{\"ID\":65947,\"id\":65947,\"title\":\"thumbnail-ctfs\",\"filename\":\"thumbnail-ctfs.jpg\",\"filesize\":415809,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/ayp\\\/attachment\\\/thumbnail-ctfs-2\\\/\",\"alt\":\"High-angle view of the Tomei Expressway in Japan, featuring traffic and a green directional sign against a backdrop of forested mountains\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"thumbnail-ctfs-2\",\"status\":\"inherit\",\"uploaded_to\":26848,\"date\":\"2025-08-11 09:32:58\",\"modified\":\"2026-03-05 11:30:20\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-ctfs.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/sautao\\\/\"},{\"title\":\"TMDHC\",\"src\":{\"ID\":65977,\"id\":65977,\"title\":\"thumbnail-tmdhc\",\"filename\":\"thumbnail-tmdhc.jpg\",\"filesize\":284157,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/ayp\\\/attachment\\\/thumbnail-tmdhc-2\\\/\",\"alt\":\"Reception area of the Tuen Mun District Health Centre (TMDHC) in Hong Kong, featuring a curved white desk, a wooden backdrop, and a 'Health Counts' digital sign\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"thumbnail-tmdhc-2\",\"status\":\"inherit\",\"uploaded_to\":26848,\"date\":\"2025-08-11 09:33:03\",\"modified\":\"2026-03-05 11:30:53\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-tmdhc.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/tmdhc\\\/\"},{\"title\":\"SATS HK\",\"src\":{\"ID\":65971,\"id\":65971,\"title\":\"thumbnail-sats-hk\",\"filename\":\"thumbnail-sats-hk.jpg\",\"filesize\":217289,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/ayp\\\/attachment\\\/thumbnail-sats-hk-2\\\/\",\"alt\":\"Cargo pallets on a transport trailer being positioned for loading into a large white freighter aircraft at sunset\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"thumbnail-sats-hk-2\",\"status\":\"inherit\",\"uploaded_to\":26848,\"date\":\"2025-08-11 09:33:02\",\"modified\":\"2026-03-05 11:31:19\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-sats-hk.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/projects\\\/sats-hk-limited\\\/\"},{\"title\":\"Loeb Smith\",\"src\":{\"ID\":65959,\"id\":65959,\"title\":\"thumbnail-loeb-smith\",\"filename\":\"thumbnail-loeb-smith.jpg\",\"filesize\":296906,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/ayp\\\/attachment\\\/thumbnail-loeb-smith-2\\\/\",\"alt\":\"Top-down view of people collaborating on financial data using a tablet, smartphone with a dollar sign icon, and a laptop over a desk covered in hand-drawn charts\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"thumbnail-loeb-smith-2\",\"status\":\"inherit\",\"uploaded_to\":26848,\"date\":\"2025-08-11 09:33:00\",\"modified\":\"2026-03-05 11:31:55\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-loeb-smith.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/projects\\\/loeb-smith\\\/\"},{\"title\":\"Remfly\",\"src\":{\"ID\":65965,\"id\":65965,\"title\":\"thumbnail-remfly\",\"filename\":\"thumbnail-remfly.jpg\",\"filesize\":565696,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/ayp\\\/attachment\\\/thumbnail-remfly-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"thumbnail-remfly-2\",\"status\":\"inherit\",\"uploaded_to\":26848,\"date\":\"2025-08-11 09:33:01\",\"modified\":\"2025-08-11 09:33:01\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-remfly.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/projects\\\/remfly\\\/\"},{\"title\":\"Life Young Health\",\"src\":{\"ID\":65953,\"id\":65953,\"title\":\"thumbnail-life-young\",\"filename\":\"thumbnail-life-young.jpg\",\"filesize\":354462,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/my\\\/projects\\\/ayp\\\/attachment\\\/thumbnail-life-young-2\\\/\",\"alt\":\"A smiling father, mother, and young daughter stacked vertically with a glowing blue DNA double helix graphic on either side\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"thumbnail-life-young-2\",\"status\":\"inherit\",\"uploaded_to\":26848,\"date\":\"2025-08-11 09:32:59\",\"modified\":\"2026-03-05 11:32:26\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/thumbnail-life-young.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/projects\\\/lyhealthy\\\/\"}];\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. We&#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:\/\/visibleone.com\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n                    data-pause=\"https:\/\/visibleone.com\/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:\/\/visibleone.com\/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:\/\/visibleone.com\/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":4,"featured_media":0,"parent":27226,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-27116","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/pages\/27116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/comments?post=27116"}],"version-history":[{"count":2,"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/pages\/27116\/revisions"}],"predecessor-version":[{"id":66101,"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/pages\/27116\/revisions\/66101"}],"up":[{"embeddable":true,"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/pages\/27226"}],"wp:attachment":[{"href":"https:\/\/visibleone.com\/my\/wp-json\/wp\/v2\/media?parent=27116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}