Monitoring and Evaluation
System for ASEAN Socio-
Cultural Community.
Technology Partner
Technology Partner
ADME
<section class="bg-[#262626] text-white font-funnel-display items-center justify-center flex flex-col space-y-20 w-full h-[400px] z-50 p-10">
<div class="flex justify-between items-center px-10 lg:px-32 md:my-auto w-full">
<div class="flex flex-col space-y-2">
<span class="text-lg font-light leading-6 text-center">Client</span>
<span class="text-[20px] font-medium leading-[30px]">AIPJ2</span>
</div>
<div class="flex flex-col space-y-2">
<span class="text-lg font-light leading-6 text-center">Timeline</span>
<span class="text-[20px] font-medium leading-[30px]">2017 - Present</span>
</div>
<div class="flex-col justify-center items-center hidden w-[50%] md:flex">
<span class="text-lg font-light leading-6 text-center">What We Delivered</span>
<span class="text-[20px] font-medium leading-[30px] text-center">Web App Development,Mobile App Development, & Maintenance Server.</span>
</div>
</div>
<div class="flex flex-col justify-center items-center md:hidden">
<span class="text-lg font-light leading-6 text-center">What We Delivered</span>
<span class="text-[20px] font-medium leading-[30px] text-center">Web App Development,Mobile App Development, & Maintenance Server.</span>
</div>
</section><section class="relative mt-20">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0.5C8.00293 4.64092 11.3591 7.99707 15.5 8C11.3591 8.00293 8.00293 11.3591 8 15.5C7.99707 11.3591 4.64092 8.00293 0.5 8C4.64092 7.99707 7.99707 4.64092 8 0.5Z" fill="#595959"/>
</svg>
<span class="text-[15px] font-light text-black leading-6">Introduction</span>
</div>
<div class="flex flex-col space-y-2 justify-center items-center font-funnel-display mt-6 whitespace-nowrap">
<span class="text-[30px] font-semibold leading-10 text-black sm:text-[44px] lg:text-[54px]">Data Drives</span>
<span class="text-[30px] font-semibold leading-10 text-[#51C3F4] sm:text-[44px] lg:text-[54px]">Better Decisions</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[40%] xl:w-[30%]">The ASEAN Socio-Cultural Database (ADME) is a platform that facilitates evidence-based policies, addressing important issues while maintaining accuracy and transparency. The platform provides sections for members and the public (ASCC
Declaration and socio-cultural indicators).</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[40%] xl:w-[30%]">Together, we establish a digital center where decision-makers and the general public can easily locate the information they require. Effective governance begins with clarity, which is why every component—from the user-centric interface to the cloud management—is designed to make things simple.</span>
</div>
<div class="container-frame-selected-slider flex flex-col justify-center items-center mt-14" >
<div class="cover-frame-slider">
<img src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/2.-Introduction-3-300x225.png" class="z-10 object-cover w-[350px] sm:w-[660px] lg:w-[800px] h-full" />
</div>
</div>
</section><section class="relative mt-32">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0.5C8.00293 4.64092 11.3591 7.99707 15.5 8C11.3591 8.00293 8.00293 11.3591 8 15.5C7.99707 11.3591 4.64092 8.00293 0.5 8C4.64092 7.99707 7.99707 4.64092 8 0.5Z" fill="#595959"/>
</svg>
<span class="text-[15px] font-light text-black leading-6">The Challenge</span>
</div>
<div class="flex flex-col space-y-2 justify-center items-center font-funnel-display mt-6 whitespace-nowrap">
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10">Turning Chaos</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">into Clarity</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">Our biggest challenge was to turn the massive and complex socio-cultural data into an easy-to-read resource that anyone can use. In addition, we also need to have a user-centered design that can work well across all screen sizes.</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">At the same time, we needed to provide proper security to avoid cyberattacks, which can undermine public trust and compromise data accuracy and transparency. Therefore, a server system that can handle a large amount of traffic without lag is needed.</span>
</div>
</section><section class="relative mt-20 bg-[#262626] py-14">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 0.5C8.50332 5.19304 12.307 8.99668 17 9C12.307 9.00332 8.50332 12.807 8.5 17.5C8.49668 12.807 4.69304 9.00332 0 9C4.69304 8.99668 8.49668 5.19304 8.5 0.5Z" fill="white"/>
</svg>
<span class="text-[15px] font-light text-black leading-6 text-white">How We Solved It</span>
</div>
<div class="flex flex-col space-y-2 justify-center items-center font-funnel-display mt-6">
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 sm:leading-[50px] lg:leading-[60px] text-center sm:w-[65%] lg:w-[55%] xl:w-[45%]"><span class="text-[#51C3F4]">Reliable</span> <span class="text-white">Security and</span> <span class="text-[#51C3F4]">Dynamic</span> <span class="text-white">Insight</span> </span>
</div>
<div class="flex justify-center items-center mt-6 px-8 text-white">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">To address these issues, we developed a platform that can block threats, render dynamic visuals (interactive dashboards and diagrams), and respond quickly to heavy traffic—all without overwhelming users.</span>
</div>
<div class="flex justify-center items-center mt-6 px-8 text-white">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">In keeping with ADME commitment to information accessibility, where complexity is reduced to simplicity and risk is reduced to reliability, our approach combines appropriate design with strong security to provide a reliable yet trusted platform for policy and decision making.</span>
</div>
<div class="container-frame-selected-slider flex flex-col justify-center items-center mt-14" >
<div class="cover-frame-slider">
<img src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/3.-How-We-Solved-It-2-300x225.png" class="z-10 object-cover w-[350px] sm:w-[660px] lg:w-[800px] h-full" />
</div>
</div>
</section><section class="relative mt-14">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0.5C8.00293 4.64092 11.3591 7.99707 15.5 8C11.3591 8.00293 8.00293 11.3591 8 15.5C7.99707 11.3591 4.64092 8.00293 0.5 8C4.64092 7.99707 7.99707 4.64092 8 0.5Z" fill="#595959"/>
</svg>
<span class="text-[15px] font-light text-black leading-6">Visual Data Presentation</span>
</div>
<div class="flex flex-col space-y-2 justify-center items-center font-funnel-display mt-6 whitespace-nowrap">
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">Visual Insights,</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10">Easy Access</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">We prioritize easy-to-read data presentation, such as color coding and easy navigation on interactive charts and dashboards to help users easily understand in-depth information, from forum meeting results, 10-year ASEAN KPI achievements, and declarations.</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">Since users of all ages use the platform to easily obtain what they need, we test each visual for readability and clarity. This enables users to enjoy visually stimulating information and an intuitive experience while concentrating more on the data.</span>
</div>
<div class="flex flex-col space-y-3 mt-10">
<span class="font-funnel-display text-lg leading-6 font-semibold text-center">Technology Stack:</span>
<div class="grid grid-cols-2 gap-4 place-content-center px-4 xs:px-10 sm:px-32 mt-10">
<div class="flex flex-col space-y-3 text-center font-lexend-deca">
<span class="text-[20px] leading-[30px] sm:text-[25px] sm:leading-[40px] lg:text-[36px] lg:leading-[65px] font-semibold">Nuxt.js</span>
<span class="text-[16px] leading-6 sm:text-[20px] sm:leading-[30px] lg:text-[30px] lg:leading-[50px] font-light text-black/80">Javascript Frameworks</span>
</div>
<div class="flex flex-col space-y-3 text-center font-lexend-deca">
<span class="text-[20px] leading-[30px] sm:text-[25px] sm:leading-[40px] lg:text-[36px] lg:leading-[65px] font-semibold">Nuxt.js</span>
<span class="text-[16px] leading-6 sm:text-[20px] sm:leading-[30px] lg:text-[30px] lg:leading-[50px] font-light text-black/80">Web Frameworks</span>
</div>
<div class="flex flex-col space-y-3 text-center font-lexend-deca">
<span class="text-[20px] leading-[30px] sm:text-[25px] sm:leading-[40px] lg:text-[36px] lg:leading-[65px] font-semibold">Tailwind Css</span>
<span class="text-[16px] leading-6 sm:text-[20px] sm:leading-[30px] lg:text-[30px] lg:leading-[50px] font-light text-black/80">UI Frameworks</span>
</div>
<div class="flex flex-col space-y-3 text-center font-lexend-deca">
<span class="text-[20px] leading-[30px] sm:text-[25px] sm:leading-[40px] lg:text-[36px] lg:leading-[65px] font-semibold">Swiper</span>
<span class="text-[16px] leading-6 sm:text-[20px] sm:leading-[30px] lg:text-[30px] lg:leading-[50px] font-light text-black/80">Javascript libraries</span>
</div>
<div class="flex flex-col space-y-3 text-center font-lexend-deca">
<span class="text-[20px] leading-[30px] sm:text-[25px] sm:leading-[40px] lg:text-[36px] lg:leading-[65px] font-semibold">Zendesk</span>
<span class="text-[16px] leading-6 sm:text-[20px] sm:leading-[30px] lg:text-[30px] lg:leading-[50px] font-light text-black/80">Documentation tools</span>
</div>
<div class="flex flex-col space-y-3 text-center font-lexend-deca">
<span class="text-[20px] leading-[30px] sm:text-[25px] sm:leading-[40px] lg:text-[36px] lg:leading-[65px] font-semibold">AWS</span>
<span class="text-[16px] leading-6 sm:text-[20px] sm:leading-[30px] lg:text-[30px] lg:leading-[50px] font-light text-black/80">Cloud Servers</span>
</div>
</div>
</div>
<div class="flex justify-center items-center mt-10">
<a href="https://adme.asean.org/">
<button class="relative h-[46px] border border-[#51C3F4] text-[#51C3F4] bg-white rounded w-[290px] ">
<div class="w-14 h-px bg-white absolute top-0 left-4"></div>
<div class="flex justify-between px-3 w-full">
<span class="font-semibold">Visit Website</span>
<svg width="24" height="24" class="my-auto mr-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 16.5L16.5 7.5" stroke="#51C3F4" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.1875 7.5H16.5V14.8125" stroke="#51C3F4" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</button>
</a>
</div>
</section><section class="relative mt-14" style="clip-path: polygon(
0 20%,
10% 0,
90% 0,
100% 20%,
100% 80%,
90% 100%,
10% 100%,
0% 80%">
<div class="bg-[#262626] h-[500px] sm:h-[700px] lg:h-[1000px] flex flex-col justify-center items-center">
<video autoplay muted class="my-auto">
<source src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/4.-Video-Loop-After-How-We-Solved-It.mp4" type="video/mp4">
</video>
</div>
</section><section class="relative mt-20">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0.5C8.00293 4.64092 11.3591 7.99707 15.5 8C11.3591 8.00293 8.00293 11.3591 8 15.5C7.99707 11.3591 4.64092 8.00293 0.5 8C4.64092 7.99707 7.99707 4.64092 8 0.5Z" fill="#595959"/>
</svg>
<span class="text-[15px] font-light text-black leading-6">Seamless Access Across Devices</span>
</div>
<div class="flex flex-col space-y-2 justify-center items-center font-funnel-display mt-6 whitespace-nowrap">
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10"><span class="text-[#51C3F4]">Fast</span> Loads</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10"><span class="text-[#51C3F4]">Flexible</span> Views</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">We created a responsive platform to offer a consistent user experience by adapting to all screen sizes—desktop, tablet, and mobile—while keeping data and graphics suitable for user navigation. To reach a wider user base, this strategy is required. </span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">Apart from its adaptable layout, the platform is designed to load quickly and perform flawlessly even when used extensively. Regardless of the user's location or time of access, this ensures that important information is always accessible.</span>
</div>
<div class="js-flickity main-carousel mt-10">
<div class="gallery-cell">
<div class="container-frame-selected flex flex-col justify-center items-center" >
<div class="cover-frame">
<img src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/5.-Carousel-1-1024x768.png" class="z-10 object-cover w-[400px] sm:w-[450px] lg:w-[600px] h-full" />
</div>
<div class="flex flex-col justify-center items-center text-white w-[400px] mt-4">
<span class="underline-offset-1 underline font-semibold font-funnel-display"><?php echo $item['title']; ?></span>
<span class="px-16 mb-5 text-center text-sm font-funnel-display text-white/80"><?php echo $item['description']; ?></span>
</div>
</div>
</div>
<div class="gallery-cell">
<div class="container-frame-selected flex flex-col justify-center items-center" >
<div class="cover-frame">
<img src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/6.-Carousel-2-1024x768.png" class="z-10 object-cover w-[400px] sm:w-[450px] lg:w-[600px] h-full" />
</div>
<div class="flex flex-col justify-center items-center text-white w-[400px] mt-4">
<span class="underline-offset-1 underline font-semibold font-funnel-display"><?php echo $item['title']; ?></span>
<span class="px-16 mb-5 text-center text-sm font-funnel-display text-white/80"><?php echo $item['description']; ?></span>
</div>
</div>
</div>
<div class="gallery-cell">
<div class="container-frame-selected flex flex-col justify-center items-center" >
<div class="cover-frame">
<img src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/7.-Carousel-3-Center-1024x768.png" class="z-10 object-cover w-[400px] sm:w-[450px] lg:w-[600px] h-full" />
</div>
<div class="flex flex-col justify-center items-center text-white w-[400px] mt-4">
<span class="underline-offset-1 underline font-semibold font-funnel-display"><?php echo $item['title']; ?></span>
<span class="px-16 mb-5 text-center text-sm font-funnel-display text-white/80"><?php echo $item['description']; ?></span>
</div>
</div>
</div>
<div class="gallery-cell">
<div class="container-frame-selected flex flex-col justify-center items-center" >
<div class="cover-frame">
<img src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/8.-Carousel-4-1024x768.png" class="z-10 object-cover w-[400px] sm:w-[450px] lg:w-[600px] h-full" />
</div>
<div class="flex flex-col justify-center items-center text-white w-[400px] mt-4">
<span class="underline-offset-1 underline font-semibold font-funnel-display"><?php echo $item['title']; ?></span>
<span class="px-16 mb-5 text-center text-sm font-funnel-display text-white/80"><?php echo $item['description']; ?></span>
</div>
</div>
</div>
<div class="gallery-cell">
<div class="container-frame-selected flex flex-col justify-center items-center" >
<div class="cover-frame">
<video class="z-10 object-cover w-[400px] sm:w-[450px] lg:w-[600px] h-full" muted autoplay>
<source src="https://ordent-wordpress.kilat01.ordent.co/wp-content/uploads/2025/02/9.-Carousel-5.mp4" type="video/mp4">
</video>
</div>
<div class="flex flex-col justify-center items-center text-white w-[400px] mt-4">
<span class="underline-offset-1 underline font-semibold font-funnel-display"><?php echo $item['title']; ?></span>
<span class="px-16 mb-5 text-center text-sm font-funnel-display text-white/80"><?php echo $item['description']; ?></span>
</div>
</div>
</div>
</div>
</section><section class="relative mt-20">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0.5C8.00293 4.64092 11.3591 7.99707 15.5 8C11.3591 8.00293 8.00293 11.3591 8 15.5C7.99707 11.3591 4.64092 8.00293 0.5 8C4.64092 7.99707 7.99707 4.64092 8 0.5Z" fill="#595959"/>
</svg>
<span class="text-[15px] font-light text-black leading-6">Security and Transparent Access</span>
</div>
<div class="flex flex-col justify-center items-center font-funnel-display mt-6 whitespace-nowrap">
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10"><span class="text-[#51C3F4]">Secure</span> Platform</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10"><span class="text-[#51C3F4]">Trusted</span> Data</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">Reliable servers and maintenance is our top priority to manage heavy traffic and cyber threats. This ensures ADME data is secure and issues are identified early and resolved before they affect users. We also perform regular monitoring on the system to ensure the platform is secure and operational.</span>
</div>
<div class="flex justify-center items-center mt-6 px-8">
<span class="font-lexend-deca text-[16px] text-center font-light leading-6 sm:w-[60%] lg:w-[45%] xl:w-[35%]">With the support of these security measures, ADME maintains the accuracy and integrity of its data given the importance of transparency. As a result, the platform becomes a valuable tool for future decision-making and trust in the data increases.</span>
</div>
</section><section class="relative mt-14 bg-[#262626] py-14" style="clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);">
<div class="flex space-x-2 text-white/80 justify-center items-center">
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 0.5C8.50332 5.19304 12.307 8.99668 17 9C12.307 9.00332 8.50332 12.807 8.5 17.5C8.49668 12.807 4.69304 9.00332 0 9C4.69304 8.99668 8.49668 5.19304 8.5 0.5Z" fill="white"/>
</svg>
<span class="text-[15px] font-light leading-6 text-white">The Team</span>
</div>
<div class="flex flex-col space-y-2 justify-center items-center font-funnel-display mt-6 whitespace-nowrap">
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-white">Who Brings This</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">Vision to Life</span>
</div>
<div class="flex flex-col justify-center items-center space-y-3 font-lexend-deca mt-10 text-white">
<div class="flex flex-col space-y-3 text-center">
<span class="text-lg leading-6 font-light ">Project Manager</span>
<ul>
<li class="sm:text-[18px] leading-[30px] font-medium">Ina Herlina</li>
</ul>
</div>
<div class="flex flex-col space-y-3 text-center">
<span class="text-lg leading-6 font-light ">Front End Developer</span>
<ul>
<li class="sm:text-[18px] leading-[30px] font-medium">M. Fakhri</li>
</ul>
</div>
<div class="flex flex-col space-y-3 text-center">
<span class="text-lg leading-6 font-light ">Back End Developer</span>
<ul>
<li class="sm:text-[18px] leading-[30px] font-medium">Dean</li>
</ul>
</div>
<div class="flex flex-col space-y-3 text-center">
<span class="text-lg leading-6 font-light ">Mobile Developer</span>
<ul>
<li class="sm:text-[18px] leading-[30px] font-medium">Obi</li>
<li class="sm:text-[18px] leading-[30px] font-medium">IOS Dev</li>
</ul>
</div>
<div class="flex flex-col space-y-3 text-center">
<span class="text-lg leading-6 font-light ">UI/UX Designer</span>
<ul>
<li class="sm:text-[18px] leading-[30px] font-medium">Obi</li>
<li class="sm:text-[18px] leading-[30px] font-medium">IOS Dev</li>
</ul>
</div>
</div>
</section>
K-HUB Justice
With justice reform as a priority, we partnered with K-Hub Justice to develop an integrated hub that connects government