Fix UI User Menu PPID & Kesehatan

src/app/darmasaba/(pages)/ppid/visi-misi-ppid/page.tsx

@@ -1,58 +1,100 @@
 'use client'
 import stateVisiMisiPPID from '@/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID';
 import colors from '@/con/colors';
-import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Image, Paper, Skeleton, Stack, Text, Divider, Transition } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
+import { IconSparkles } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
-  const allList = useProxy(stateVisiMisiPPID)
+  const allList = useProxy(stateVisiMisiPPID);
   useShallowEffect(() => {
-    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
-  }, [])
+    allList.findById.load("1");
+  }, []);
 
-  if (!allList.findById.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  if (!allList.findById.data) {
+    return (
+      <Stack p="xl" gap="sm">
+        {Array.from({ length: 6 }).map((_, k) => (
+          <Skeleton key={k} h={60} radius="lg" />
+        ))}
+      </Stack>
+    );
+  }
 
   const dataArray = Array.isArray(allList.findById.data)
     ? allList.findById.data
     : [allList.findById.data];
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack bg={colors.Bg} py="xl" gap={40}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
+
       {dataArray.map((item) => (
-        <Box key={item.id} px={{ base: "md", md: 100 }}>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['white-trans-1']}>
-              <Box pb={30}>
-                <Center>
-                  <Image src={"/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
-                </Center>
-                <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
-                  MOTO PPID DESA DARMASABA
-                </Text>
-                <Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
-                  MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
-                </Text>
-              </Box>
-              <Box px={{ base: 20, md: 50 }} pb={30}>
-                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
-                  VISI PPID
-                </Text>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.visi }} />
-              </Box>
-              <Box px={{ base: 20, md: 50 }}>
-                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
-                  MISI PPID
-                </Text>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.misi }} />
-              </Box>
-            </Paper>
-          </Stack>
+        <Box key={item.id} px={{ base: 'md', md: 100 }}>
+          <Transition mounted={true} transition="fade" duration={500} timingFunction="ease">
+            {(styles) => (
+              <Paper
+                style={styles}
+                p={{ base: 'lg', md: 'xl' }}
+                radius="2xl"
+                shadow="xl"
+                bg={colors['white-trans-1']}
+                withBorder
+              >
+                <Stack gap="xl">
+                  <Box>
+                    <Center mb="md">
+                      <Image src="/darmasaba-icon.png" w={{ base: 80, md: 130 }} alt="Logo Desa Darmasaba" />
+                    </Center>
+                    <Text
+                      ta="center"
+                      fz={{ base: 28, md: 36 }}
+                      fw={800}
+                      variant="gradient"
+                      gradient={{ from: colors['blue-button'], to: 'cyan', deg: 45 }}
+                    >
+                      Moto PPID Desa Darmasaba
+                    </Text>
+                    <Text ta="center" fz={{ base: 16, md: 20 }} mt="xs" c="dimmed">
+                      Memberikan informasi yang cepat, mudah, tepat, dan transparan
+                    </Text>
+                  </Box>
+
+                  <Divider my="sm" labelPosition="center" label={<IconSparkles size={18} />} />
+
+                  <Box>
+                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={700} mb="sm">
+                      Visi PPID
+                    </Text>
+                    <Text
+                      fz={{ base: 'md', md: 'lg' }}
+                      lh={1.7}
+                      ta="justify"
+                      dangerouslySetInnerHTML={{ __html: item.visi }}
+                    />
+                  </Box>
+
+                  <Divider my="sm" />
+
+                  <Box>
+                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={700} mb="sm">
+                      Misi PPID
+                    </Text>
+                    <Text
+                      fz={{ base: 'md', md: 'lg' }}
+                      lh={1.7}
+                      ta="justify"
+                      dangerouslySetInnerHTML={{ __html: item.misi }}
+                    />
+                  </Box>
+                </Stack>
+              </Paper>
+            )}
+          </Transition>
         </Box>
       ))}
     </Stack>