Technology partner for online streaming of Indonesian movies.
Technology Partner
Technology Partner
Bioskop Online
<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]">Visinema Pictures</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]">2021 - 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 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] sm:mb-3">Cinema at</span>
<span class="text-[30px] font-semibold leading-10 text-[#51C3F4] sm:text-[44px] lg:text-[54px]">Your Fingertips</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%]">Bioskop Online, a TVOD (Transactional Video On Demand) platform, is dedicated to offering Indonesian films made by local filmmakers to movie lovers across the country.</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%]">To bring this vision to life, we partnered to create smooth web and mobile apps, supported by reliable servers, for a seamless streaming 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/01/Introduction-1024x683.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">
<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%]">Bridging <span class="text-[#51C3F4]">Design and Performance</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-[45%] xl:w-[35%]">In their quest to transform Indonesian movie streaming, Bioskop Online needed a platform that could deliver seamless performance across mobile, web and Android TV devices, even during high-traffic periods.</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 challenge was to preserve their design across all devices while incorporating cutting-edge technology to ensure a flawless user experience, ensuring the platform stood out in a crowded and competitive market.</span>
</div>
</section><section class="relative mt-20 bg-[#262626]">
<div class="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-white">Smooth</span> <span class="text-[#51C3F4]">Streaming,</span> <span class="text-white">Reliable</span> <span class="text-[#51C3F4]">Safety</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 Bioskop Online vision, we built a platform with advanced technology, delivering smooth performance and a seamless experience while maintaining consistent design across 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%]">Optimized servers and strong security ensure uninterrupted streaming and protection from cyber threats, providing reliable access anytime, anywhere.</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/01/How-We-Solved-It-1024x576.png" class="z-10 object-cover w-[350px] sm:w-[660px] lg:w-[800px] h-full" />
</div>
</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">Web App Development</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">Optimized for</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">Today’s Demands</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 optimized Bioskop Online web app to meet today's digital demands with the latest technology. This integration not only improves performance and responsiveness, but also provides a secure solution to protect users while standing out in this competitive market.</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://bioskoponline.com/">
<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/01/bo.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">Mobile App Development</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]">Consistent Feel,</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10">Any Screen</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%]">Bioksop Online has a vision for how its apps can offer a consistent viewing experience on desktop, Android TV, tablets, and smartphones.</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%]">In order to guarantee a consistent interface and tailor interactions for every device, our process incorporates platform-specific rules. By using this method, we allow user to transition between devices with ease and have the same experience everywhere.</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/01/Carousel-2-1024x683.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/01/Carousel-4-1024x683.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/01/Carousel-3-Highlight-1024x576.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/01/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">Maintenance Server</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 sm:mb-3 lg:mb-6">Always Available,</span>
<span class="text-[30px] sm:text-[44px] lg:text-[54px] font-semibold leading-10 text-[#51C3F4]">Always Protected</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%]">The Bioskop Online platform operates with optimal efficiency through our proactive approach to server monitoring and maintenance. We maximize infrastructure reliability and maintain continuity of operations by resolving possible issues early.</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 use layered defenses to enhance security and protect the platform and user data. These measures enable seamless streaming and protect the platform from emerging threats.</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>
ADME
Monitoring and Evaluation
System for ASEAN Socio-
Cultural Community.