With justice reform as a priority, we partnered with K-Hub Justice to develop an integrated hub that connects government
Technology Partner
Technology Partner
K-HUB Justice
<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">
<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%]">News <span class="text-[#51C3F4]">Without Barriers</span></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 Knowledge Hub is an offline and online platform for civil society organizations and government agencies to share
their knowledge, expertise, and experiences in support
of Indonesia's justice sector reform.</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%]">In order to support this, we designed a website that is both
safe and responsive to prevent cyberattacks and has an
easy-to-use layout that makes reading distraction-free.</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-1024x768.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">Designing with</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">Safety in Mind</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%]">Knowledge Hub needed a platform with a simple and distraction-free design to keep readers focused on the news, as complex navigation can be overwhelming, especially for elderly readers.</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%]">Security was a major concern, as legal and political platforms are often the target of cyberattacks; therefore, the website needed a secure server to maintain credibility and content protection.</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]">Easy</span> <span class="text-white">to Use and</span> <span class="text-[#51C3F4]">Safe</span> <span class="text-white">to Trust</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 meet Knowledge Hub's needs, we designed a simple website
that focuses on content, making it easy to read and easy
to find, while running smoothly on all devices.</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%]">Also, we ensured security by setting up a reliable server and conducting regular monitoring to keep the website safe and running well, ensuring users a good service and experience.</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-1-1024x768.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">Smart Design</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]">Clarity</span> Over</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10">Complexity</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 decided to take a simple approach by categorizing news content. Each category includes features such as blogs, galleries, webinars, and member-only forums to help users select accurate and relevant information.</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%]">Furthermore, this step improved the accessibility and performance of the website, giving users a nice reading experience. Here is a list of the technologies we used to create this website.</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://khubforjustice.org/en">
<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 px-10">
<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">Perfectly Optimized for All 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">News, <span class="text-[#51C3F4]">Anytime</span></span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">Anywhere</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%]">As is well known, responsive design is crucial to modern websites since it improves user experience and usability. Because of this,
the Knowledge Hub website is designed to fluidly adjust on
desktop, tablet, and mobile devices. </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%]">Additionally, this improves readability while facilitating users
access to the most recent news at any time and from any
location. Developers can easily maintain a responsive
layout by following the principles.</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">Server Safety and Data Integrity</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 text-[#51C3F4] sm:mb-3 lg:mb-5">Guarded Servers,</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10">Trusted Information</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%]">To address the challenges and essential needs of legal and political information websites, we utilize a dependable server protection system and regular monitoring to handle attacks from cybercriminals.</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%]">By focusing on server and data security, we ensured the accuracy and transparency of the information website, which users can access with confidence and as a reliable source.</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>
Website App Development