Fix QC Kak Inno Tgl 11 Des

Fix QC Kak Ayu Tgl 11 Des
Fix font style {font size, color, line height} menu kesehatan

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
 import colors from '@/con/colors';
-import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -31,48 +31,55 @@ function DetailPenangananDaruratUser() {
     <Box py={20}>
       {/* Tombol Back */}
       <Box px={{ base: 'md', md: 100 }}>
-        <BackButton/>
+        <BackButton />
       </Box>
 
       {/* Wrapper Detail */}
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '70%', lg: '60%' }}
-        mx="auto"
-        bg={colors['white-1']}
-        p="xl"
-        radius="lg"
-        shadow="sm"
-      >
-        <Stack gap="md" align="center" ta="center">
-          <Text fz="xl" fw={700} c={colors['blue-button']}>
-            {data.name || 'Penanganan Darurat'}
-          </Text>
+      <Box pt={20} px={{ base: 'md', md: 100 }}>
+        <Paper
+          withBorder
+          w={'100%'}
+          bg={colors['white-1']}
+          p="xl"
+          radius="lg"
+          shadow="sm"
+        >
+          <Stack gap="md">
+            <Title
+              ta={"center"}
+              order={1}
+              fw={700}
+              c={colors['blue-button']}
+              style={{ wordBreak: 'break-word' }}
+            >
+              {data.name || 'Penanganan Darurat'}
+            </Title>
+            <Center>
+              {data.image?.link && (
+                <Image
+                  src={data.image.link}
+                  alt={data.name}
+                  radius="md"
+                  mah={300}
+                  fit="contain"
+                  loading="lazy"
+                  mb="md"
+                />
+              )}
+            </Center>
 
-          {data.image?.link && (
-            <Image
-              src={data.image.link}
-              alt={data.name}
-              radius="md"
-              mah={300}
-              fit="contain"
-              loading="lazy"
-              mb="md"
-            />
-          )}
-
-          <Box>
-            <Text
-              fz="md"
-              ta="justify"
-              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-            />
-          </Box>
-        </Stack>
-      </Paper>
+            <Box >
+              <Text
+                ta="justify"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+              />
+            </Box>
+          </Stack>
+        </Paper>
+      </Box>
     </Box>
   );
 }
 
-export default DetailPenangananDaruratUser;
+export default DetailPenangananDaruratUser;

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -15,6 +15,7 @@ import {
   Stack,
   Text,
   TextInput,
+  Title,
   Tooltip
 } from '@mantine/core'
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'
@@ -49,10 +50,19 @@ function Page() {
 
       <Grid align="center" px={{ base: 'md', md: 100 }} mb="lg">
         <GridCol span={{ base: 12, md: 9 }}>
-          <Text fz={{ base: 30, md: 40 }} c={colors['blue-button']} fw={800} lh={1.2}>
+          <Title 
+            order={1}
+            c={colors['blue-button']} 
+            fw={800} 
+            lh={{ base: 1.3, md: 1.2 }}
+          >
             Penanganan Darurat
-          </Text>
-          <Text fz="md" mt={4}>
+          </Title>
+          <Text 
+            fz={{ base: 'sm', md: 'md' }} 
+            mt={4}
+            lh={{ base: 1.5, md: 1.5 }}
+          >
             Informasi cepat dan jelas untuk situasi darurat kesehatan
           </Text>
         </GridCol>
@@ -74,10 +84,10 @@ function Page() {
         {data.length === 0 ? (
           <Center py={100}>
             <Stack align="center" gap="xs">
-              <Text fz="lg" fw={600} c={colors['blue-button']}>
+              <Title order={2} fw={600} c={colors['blue-button']}>
                 Tidak ada data ditemukan
-              </Text>
-              <Text fz="sm" c="dimmed">
+              </Title>
+              <Text fz={{ base: 'xs', md: 'sm' }}>
                 Coba gunakan kata kunci lain
               </Text>
             </Stack>
@@ -128,18 +138,21 @@ function Page() {
                   </Box>
 
                   <Stack gap={4} w="100%">
-                    <Text
-                      fz="lg"
+                    <Title
+                      order={3}
                       fw={700}
                       c={colors['blue-button']}
                       ta="center"
                       lineClamp={2}
+                      fz={{ base: 'sm', md: 'lg' }}
+                      lh={{ base: 1.4, md: 1.4 }}
                     >
                       {v.name}
-                    </Text>
+                    </Title>
                     <Box>
                       <Text
-                        fz="md"
+                        fz={{ base: 'xs', md: 'md' }}
+                        lh={{ base: 1.5, md: 1.5 }}
                         lineClamp={3}
                         dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                         style={{ wordBreak: "break-word", whiteSpace: "normal" }}
@@ -177,12 +190,10 @@ function Page() {
               '&:hover': { backgroundColor: colors['blue-button'], color: 'white' },
             },
           }}
-
         />
       </Center>
-
     </Stack>
   )
 }
 
-export default Page
+export default Page