src/app/darmasaba/_com/main-page/penghargaan/index.tsx

@@ -6,11 +6,13 @@ import { IconAward, IconArrowRight } from "@tabler/icons-react";
 import { useTransitionRouter } from 'next-view-transitions';
 import { useEffect, useState } from "react";
 import { useProxy } from "valtio/utils";
+import { useMediaQuery } from "@mantine/hooks";
 
 function Penghargaan() {
   const router = useTransitionRouter();
   const state = useProxy(penghargaanState);
   const [loading, setLoading] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   useEffect(() => {
     const loadData = async () => {
@@ -24,13 +26,12 @@ function Penghargaan() {
     loadData();
   }, []);
 
-  const data = state.findMany.data?.slice(0, 3);
+  // kalau mobile ambil 1 data aja, kalau desktop ambil 3
+  const data = state.findMany.data?.slice(0, isMobile ? 1 : 3);
 
   return (
-    <Stack pos="relative" h={720}>
+    <Stack pos="relative" h="auto" mih={{ base: 500, md: 720 }}>
       <video
-        width="320"
-        height="240"
         loop
         autoPlay
         muted
@@ -38,11 +39,15 @@ function Penghargaan() {
           width: "100%",
           height: "100%",
           objectFit: "cover",
-          overflow: "hidden",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: 0,
         }}
       >
         <source src="/assets/videos/award.mp4" type="video/mp4" />
       </video>
+
       <Box
         style={{
           width: "100%",
@@ -51,9 +56,10 @@ function Penghargaan() {
           top: 0,
           left: 0,
           background: "linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.85))",
+          zIndex: 1,
         }}
       >
-        <Container w={{ base: "100%", md: "80%" }} h={720} p="xl">
+        <Container w={{ base: "100%", md: "80%" }} mih={{ base: 500, md: 720 }} p="xl">
           <Stack justify="center" align="center" gap="xl" h="100%">
             <Text
               fw={900}