Fix QC Kak Inno 17 Okt 25, Fix QC Kak Ayu 17 Okt 25, & Fix Qc Pak Jun 17 Okt 25

src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx

@@ -29,42 +29,42 @@ function ModuleItem({ data }: { data: ProgramInovasiItem }) {
 
   return (
     <motion.div whileHover={{ scale: 1.03 }}>
-        <Paper
-          onClick={() => router.push(`/darmasaba/program-inovasi/${data.id}`)}
-          p="lg"
-          radius="xl"
-          shadow="sm"
-          role="button"
-          tabIndex={0}
-          className="cursor-pointer transition-all"
-          bg={isDark ? "dark.6" : "white"}
-        >
-          <Center h={160}>
-            {data.image?.link ? (
-              <Image
-                src={data.image.link}
-                alt={data.name}
-                radius="md"
-                fit="cover"
-                h={140}
-                w="100%"
-                loading="lazy"
-              />
-            ) : (
-              <Stack align="center" gap="xs">
-                <IconPhotoOff size={38} stroke={1.5} />
-                <Text size="sm" c="dimmed">
-                  Belum ada gambar
-                </Text>
-              </Stack>
-            )}
-          </Center>
-          <Box mt="md">
-            <Text fw={600} ta="center" size="md">
-              {data.name}
-            </Text>
-          </Box>
-        </Paper>
+      <Paper
+        onClick={() => router.push(`/darmasaba/program-inovasi/${data.id}`)}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        role="button"
+        tabIndex={0}
+        className="cursor-pointer transition-all"
+        bg={isDark ? "dark.6" : "white"}
+      >
+        <Center h={160}>
+          {data.image?.link ? (
+            <Image
+              src={data.image.link}
+              alt={data.name}
+              radius="md"
+              fit="contain"
+              h={140}
+              w="100%"
+              style={{ objectPosition: "center" }}
+            />
+          ) : (
+            <Stack align="center" gap="xs">
+              <IconPhotoOff size={38} stroke={1.5} />
+              <Text size="sm" c="dimmed">
+                Belum ada gambar
+              </Text>
+            </Stack>
+          )}
+        </Center>
+        <Box mt="md">
+          <Text fw={600} ta="center" size="md">
+            {data.name}
+          </Text>
+        </Box>
+      </Paper>
     </motion.div>
   );
 }
@@ -110,11 +110,11 @@ function ModuleView() {
         viewport: { paddingRight: 8 }, // kasih jarak biar scroll nggak dempet
       }}
     >
-    <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mt="lg">
-      {listImageState.findMany.data?.map((item) => (
-        <ModuleItem key={item.id} data={item} />
-      ))}
-    </SimpleGrid>
+      <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mt="lg">
+        {listImageState.findMany.data?.map((item) => (
+          <ModuleItem key={item.id} data={item} />
+        ))}
+      </SimpleGrid>
     </ScrollArea>
   );
 }

src/app/darmasaba/_com/main-page/landing-page/ProfileView.tsx

@@ -30,20 +30,41 @@ export default function ProfileView({ data }: ProfileViewProps) {
       justify="end"
       align="end"
       pos="relative"
-      w={{ base: '100%', md: '40%' }}
-      px="xl"
+      w={{
+        base: '100%',    // mobile: full width
+        xs: '100%',      // small mobile
+        sm: '85%',       // tablet: 85%
+        md: '60%',       // laptop: 60%
+        lg: '55%',       // laptop large: 55%
+        xl: '50%'        // extra large (4K): 50%
+      }}
+      px={{ base: 'md', sm: 'lg', md: 'xl', xl: '2xl' }}
+      h={{ base: 'auto', sm: '500px', md: '600px', lg: '650px', xl: '700px' }}
     >
       {data.image?.link ? (
-        <Image
-          src={data.image.link}
-          alt={data.name || 'Foto profil'}
-          fit="contain"
-          radius="lg"
-          loading="lazy"
+        <Box
+          pos="relative"
+          w="100%"
+          h="100%"
           style={{
-            objectPosition: 'bottom center',
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'center',
           }}
-        />
+        >
+          <Image
+            src={data.image.link}
+            alt={data.name || 'Foto profil'}
+            fit="contain"
+            radius="lg"
+            loading="lazy"
+            w="100%"
+            h="100%"
+            style={{
+              objectPosition: 'center bottom',
+            }}
+          />
+        </Box>
       ) : (
         <Stack align="center" gap="xs" w="100%" py="xl">
           <IconUserCircle size={96} stroke={1.5} />
@@ -53,36 +74,47 @@ export default function ProfileView({ data }: ProfileViewProps) {
         </Stack>
       )}
 
-      {/* Box nama dan jabatan - sedikit overlap dengan gambar */}
+      {/* Box nama dan jabatan - responsive positioning */}
       <Box
         pos="absolute"
-        bottom={-20} // bikin naik sedikit ke gambar
+        bottom={{ base: -30, sm: -25, md: -20 }}
         right={0}
-        w="100%"
-        p={{ base: 'xs', md: 'md' }}
-        style={{ pointerEvents: 'none' }} // biar ga ganggu klik di gambar
+        w={{ base: '95%', sm: '100%' }}
+        px={{ base: 'xs', sm: 'sm', md: 'md' }}
+        style={{ pointerEvents: 'none' }}
       >
         <Card
-          px="lg"
-          py="sm"
+          px={{ base: 'md', sm: 'lg' }}
+          py={{ base: 'xs', sm: 'sm' }}
           radius="lg"
           withBorder
           style={{
             boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
             backdropFilter: 'blur(6px)',
             pointerEvents: 'auto',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
           }}
         >
           <Tooltip label="Jabatan Resmi" withArrow>
-            <Text fz="sm" c="dimmed">
+            <Text
+              fz={{ base: 'xs', sm: 'sm' }}
+              c="dimmed"
+              lineClamp={1}
+            >
               {data.position || 'Tidak ada jabatan'}
             </Text>
           </Tooltip>
-          <Text c={colors['blue-button']} fw={700} fz="xl" mt={4}>
+          <Text
+            c={colors['blue-button']}
+            fw={700}
+            fz={{ base: 'lg', sm: 'xl' }}
+            mt={4}
+            lineClamp={2}
+          >
             {data.name}
           </Text>
         </Card>
       </Box>
     </Stack>
   );
-}
+}

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

@@ -1,26 +1,27 @@
 "use client";
 import colors from "@/con/colors";
-import { Prisma } from "@prisma/client";
 import {
+  Badge,
   Box,
   Card,
-  Skeleton,
+  Center,
   Flex,
   Grid,
   GridCol,
+  Group,
   Image,
   Paper,
+  Skeleton,
   Stack,
   Text,
-  Center,
   Tooltip,
-  Badge,
 } from "@mantine/core";
+import { Prisma } from "@prisma/client";
 import { IconCalendarTime, IconInfoCircle } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import ModuleView from "./ModuleView";
-import SosmedView from "./SosmedView";
 import ProfileView from "./ProfileView";
+import SosmedView from "./SosmedView";
 
 const getDayOfWeek = () => {
   const days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
@@ -126,17 +127,15 @@ function LandingPage() {
           <Card radius="xl" bg={colors.grey[1]} p="lg" shadow="xl">
             <Stack gap="xl">
               <Flex gap="md" wrap="wrap">
+                <Group>
+                  <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
+                    <Image loading="lazy" src="/darmasaba-icon.png" alt="Logo Darmasaba" fit="contain" />
+                  </Box>
+                  <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
+                    <Image loading="lazy" src="/pudak-icon.png" alt="Logo Pudak" fit="contain" />
+                  </Box>
+                </Group>
                 <Grid w="100%">
-                  <Grid.Col span={{ base: 3, sm: 2 }}>
-                    <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
-                      <Image loading="lazy" src="/darmasaba-icon.png" alt="Logo Darmasaba" fit="contain" />
-                    </Box>
-                  </Grid.Col>
-                  <Grid.Col span={{ base: 9, sm: 10 }}>
-                    <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
-                      <Image loading="lazy" src="/pudak-icon.png" alt="Logo Pudak" fit="contain" />
-                    </Box>
-                  </Grid.Col>
                   <Grid.Col span={12}>
                     <Paper
                       bg={colors["blue-button"]}
@@ -199,7 +198,7 @@ function LandingPage() {
               )}
 
               <Text ta="center" c={colors.trans.dark[2]}>
-                Bagikan ide, kritik, atau saran Anda untuk mendukung pembangunan desa. 
+                Bagikan ide, kritik, atau saran Anda untuk mendukung pembangunan desa.
                 Semua lebih mudah dengan fitur interaktif yang kami sediakan.
               </Text>
             </Stack>