Fix QC Kak Ayu Tgl 12

Fix QC Kak Ino Tgl 12 Fix UI Mobile Menu Keamanan Fix UI Mobile Admin Menu Landing Page
2025-12-16 10:19:15 +08:00
parent f6f77d9e35
commit 342e9bbc65
43 changed files with 1715 additions and 1344 deletions
--- a/src/app/darmasaba/(pages)/ekonomi/sektor-unggulan-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/ekonomi/sektor-unggulan-desa/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, Paper, Skeleton } from '@mantine/core';
+import { Stack, Box, Text, Paper, Skeleton, Center } from '@mantine/core';
 import React from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { BarChart } from '@mantine/charts';
@@ -80,26 +80,28 @@ function Page() {
            <Paper p="xl">
              <Text pb={10} fw="bold" fz="h4">Statistik Sektor Unggulan Darmasaba</Text>
              <Box style={{ width: '100%', overflowX: 'auto', maxWidth: `${chartWidth}px` }}>
-                <BarChart
-                  p={10}
-                  h={300}
-                  data={chartData}
-                  dataKey="sektor"
-                  series={[
-                    { name: 'Ton', color: colors['blue-button'] },
-                  ]}
-                  tickLine="y"
-                  tooltipAnimationDuration={200}
-                  withTooltip
-                  withXAxis
-                  withYAxis
-                  xAxisLabel="Sektor"
-                  yAxisLabel="Ton"
-                  style={{
-                    fontFamily: 'inherit',
-                    fontSize: '12px', // ukuran font lebih kecil di mobile
-                  }}
-                />
+                <Center>
+                  <BarChart
+                    p={10}
+                    h={300}
+                    data={chartData}
+                    dataKey="sektor"
+                    series={[
+                      { name: 'Ton', color: colors['blue-button'] },
+                    ]}
+                    tickLine="y"
+                    tooltipAnimationDuration={200}
+                    withTooltip
+                    withXAxis
+                    withYAxis
+                    xAxisLabel="Sektor"
+                    yAxisLabel="Ton"
+                    style={{
+                      fontFamily: 'inherit',
+                      fontSize: '12px', // ukuran font lebih kecil di mobile
+                    }}
+                  />
+                </Center>
              </Box>
            </Paper>
          </Box>
--- a/src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx
+++ b/src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx
@@ -54,7 +54,7 @@ function Page() {
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              leftSection={<IconSearch size={20} />}
-              w={{ base: "50%", md: "100%" }}
+              w={"100%"}
            />
          </GridCol>
        </Grid>
--- a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { Box, Center, 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,59 +31,62 @@ function DetailKeamananLingkunganUser() {

  return (
    <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
-    <Box px={{ base: 'md', md: 100 }}>
-     <BackButton />
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />

-      {/* Wrapper Detail */}
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '80%' }}
-        mx="auto"
-        bg={colors['white-1']}
-        p="xl"
-        radius="lg"
-        shadow="md"
-      >
-        <Stack gap="lg">
-          {/* Judul */}
-          <Text
-            ta="center"
-            fz={{ base: 'xl', md: '2xl' }}
-            fw={700}
-            c={colors['blue-button']}
-          >
-            {data?.name || 'Tanpa Judul'}
-          </Text>
+        {/* Wrapper Detail */}
+        <Paper
+          withBorder
+          w={{ base: '100%', md: '80%' }}
+          mx="auto"
+          bg={colors['white-1']}
+          p="xl"
+          radius="lg"
+          shadow="md"
+        >
+          <Stack gap="lg">
+            {/* Judul */}
+            <Title
+              order={1}
+              ta="center"
+              c={colors['blue-button']}
+              style={{ lineHeight: 1.15 }}
+            >
+              {data?.name || 'Tanpa Judul'}
+            </Title>

-          {/* Gambar */}
-          <Center>
-            <Image
-              w={{ base: 250, sm: 400, md: 550 }}
-              src={data?.image?.link}
-              alt={data?.name || 'gambar keamanan lingkungan'}
-              radius="md"
-              loading="lazy"
-              fit="cover"
-            />
-          </Center>
+            {/* Gambar */}
+            <Center>
+              <Image
+                w={{ base: 250, sm: 400, md: 550 }}
+                src={data?.image?.link}
+                alt={data?.name || 'gambar keamanan lingkungan'}
+                radius="md"
+                loading="lazy"
+                fit="cover"
+              />
+            </Center>

-          {/* Deskripsi */}
-          <Box>
-            <Text fz="lg" fw="bold" mb={5}>
-              Deskripsi
-            </Text>
-            <Text
-              fz="md"
-              c="dimmed"
-              dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }}
-              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-            />
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
+            {/* Deskripsi */}
+            <Box>
+              <Title order={3} mb={5} style={{ lineHeight: 1.2 }}>
+                Deskripsi
+              </Title>
+              <Box pl={20}>
+                <Text
+                  fz={{ base: 'sm', md: 'md' }}
+                  lh={{ base: 1.5, md: 1.55 }}
+                  c={data?.deskripsi ? 'text' : 'dimmed'}
+                  dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }}
+                  style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Paper>
+      </Box>
    </Stack>
  )
 }

-export default DetailKeamananLingkunganUser
+export default DetailKeamananLingkunganUser
--- a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan';
 import colors from '@/con/colors';
-import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
@@ -14,7 +14,7 @@ function Page() {
  const state = useProxy(keamananLingkunganState)
  const router = useRouter()  
  const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
  const {
    data,
    page,
@@ -43,9 +43,9 @@ function Page() {
      <Box>
        <Grid align='center' px={{ base: 'md', md: 100 }}>
          <GridCol span={{ base: 12, md: 9 }}>
-            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            <Title order={1} c={colors["blue-button"]} lh={1.15}>
              Keamanan Lingkungan (Pecalang / Patwal)
-            </Text>
+            </Title>
          </GridCol>
          <GridCol span={{ base: 12, md: 3 }}>
            <TextInput
@@ -54,18 +54,29 @@ function Page() {
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              leftSection={<IconSearch size={20} />}
-              w={{ base: "50%", md: "100%" }}
+              w={"100%"}
            />
          </GridCol>
        </Grid>
-        <Text px={{ base: 'md', md: 100 }} pt={20} ta={"justify"} fz="md" mt={4} >
+        <Text
+          px={{ base: 'md', md: 100 }}
+          pt={20}
+          ta={"justify"}
+          fz={{ base: 'sm', md: 'md' }}
+          lh={1.55}
+          mt={4}
+          c={'black'}
+        >
          Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
        </Text>
      </Box>
      <Box px={{ base: "md", md: 100 }}>
        <Stack gap={'lg'}>
          <SimpleGrid
-            cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg">
+            cols={{ base: 1, sm: 2, md: 3 }}
+            spacing="xl"
+            mt="lg"
+          >
            {data.map((v, k) => (
              <Paper
                key={k}
@@ -107,17 +118,18 @@ function Page() {
                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
                    />
                  </Box>
-                  <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
+                  <Title order={2} ta="center" c={colors['blue-button']} lh={1.2}>
                    {v.name}
-                  </Text>
+                  </Title>
                  <Text
-                    fz="sm"
+                    fz={{ base: 'xs', md: 'sm' }}
                    ta="justify"
                    lineClamp={3}
-                    lh={1.6}
+                    lh={1.55}
                    style={{
                      minHeight: '4.8em',
                    }}
+                    c={'black'}
                  >
                    <span
                      style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
@@ -159,4 +171,4 @@ function Page() {
  );
 }

-export default Page;
+export default Page;
--- a/src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
 import colors from '@/con/colors';
-import { Avatar, Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconPhoneCall, IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
@@ -42,10 +42,10 @@ function Page() {
        </Box>
        <Group px={{ base: 'md', md: 100 }} justify={'space-between'} align='center'>
          <Box>
-            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            <Title order={1} c={colors["blue-button"]} style={{ lineHeight: 1.15 }}>
              Kontak Darurat
-            </Text>
-            <Text fz="md" >
+            </Title>
+            <Text fz={{ base: 'sm', md: 'md' }} lh={1.5} c={colors['blue-button-2']} style={{ color: colors['blue-button-2'] }}>
              Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
            </Text>
          </Box>
@@ -66,17 +66,21 @@ function Page() {
                  <IconPhoneCall size={30} color={colors["blue-button"]} />
                </Avatar>
                <Box>
-                  <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "md", md: "h4" }} fw={"bold"} >
+                  <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "sm", md: "md" }} fw={"bold"} lh={1.3} >
                    Nomor Darurat Utama
                  </Text>
-                  <Text ta={'center'} fw={"bold"} fz={'h2'} c={colors["blue-button"]}>112</Text>
+                  <Title order={2} ta={'center'} c={colors["blue-button"]} style={{ lineHeight: 1.15 }}>
+                    112
+                  </Title>
                </Box>
              </Flex>
            </Paper>
          </Stack>
        </Box>
        <Center>
-          <Text fz={"h1"} c={colors["blue-button"]} fw={"bold"}>Tidak ada kontak darurat yang ditemukan</Text>
+          <Title order={2} c={colors["blue-button"]} style={{ lineHeight: 1.15 }}>
+            Tidak ada kontak darurat yang ditemukan
+          </Title>
        </Center>
      </Stack>
    );
@@ -89,10 +93,10 @@ function Page() {
      </Box>
      <Group px={{ base: 'md', md: 100 }} justify={'space-between'} align='center'>
        <Box>
-          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          <Title order={1} c={colors["blue-button"]} style={{ lineHeight: 1.15 }}>
            Kontak Darurat
-          </Text>
-          <Text fz={{ base: "h4", md: "h3" }} >
+          </Title>
+          <Text fz={{ base: 'sm', md: 'md' }} lh={1.5} c={colors['blue-button-2']}>
            Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
          </Text>
        </Box>
@@ -113,10 +117,12 @@ function Page() {
                <IconPhoneCall size={30} color={colors["blue-button"]} />
              </Avatar>
              <Box>
-                <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "md", md: "h4" }} fw={"bold"} >
+                <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "sm", md: "md" }} fw={"bold"} lh={1.3} >
                  Nomor Darurat Utama
                </Text>
-                <Text ta={'center'} fw={"bold"} fz={'h2'} c={colors["blue-button"]}>112</Text>
+                <Title order={2} ta={'center'} c={colors["blue-button"]} style={{ lineHeight: 1.15 }}>
+                  112
+                </Title>
              </Box>
            </Flex>
          </Paper>
@@ -124,19 +130,13 @@ function Page() {
      </Box>
      <Box px={{ base: "md", md: 100 }}>
        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
-          {/* Layanan Darurat */}
          {data.map((item) => (
            <a
              key={item.id}
              href={`tel:${item.kontakItems[0]?.kontakItem?.nomorTelepon || '112'}`}
              style={{ textDecoration: 'none' }}
            >
-              <Paper
-
-                p="lg"
-                radius="md"
-                bg={colors['white-trans-1']}
-              >
+              <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
                <Group pb="md" align="center">
                  <Avatar radius="xl" size="lg" bg={colors['BG-trans']}>
                    {item.icon && (
@@ -147,12 +147,11 @@ function Page() {
                      />
                    )}
                  </Avatar>
-                  <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                  <Title order={3} c={colors["blue-button"]} style={{ lineHeight: 1.2 }}>
                    {item.nama}
-                  </Text>
+                  </Title>
                </Group>

-                {/* Kontak Items */}
                {item.kontakItems?.map((kontak) => (
                  <Paper
                    key={kontak.id}
@@ -171,11 +170,11 @@ function Page() {
                            color={colors['blue-button']}
                          />
                        )}
-                        <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
+                        <Text fw="bold" fz={{ base: "xs", md: "sm" }} c={colors["blue-button"]} lh={1.45}>
                          {kontak.kontakItem?.nama}
                        </Text>
                      </Group>
-                      <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
+                      <Text fw="bold" fz={{ base: "xs", md: "sm" }} c={colors["blue-button"]} lh={1.45}>
                        {kontak.kontakItem?.nomorTelepon}
                      </Text>
                    </Group>
@@ -204,4 +203,4 @@ function Page() {
  );
 }

-export default Page;
+export default Page;
--- a/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx
@@ -2,7 +2,7 @@
 'use client'
 import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas';
 import colors from '@/con/colors';
-import { Box, Button, Center, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Center, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowRight } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
@@ -26,7 +26,7 @@ function Page() {
    if (!findFirst.data && !findFirst.loading) {
      kriminalitasState.findFirst.load();
    }
-  }, [findFirst.data, findFirst.loading]);
+  }, []);

  useShallowEffect(() => {
    const LIMIT = 3;
@@ -45,10 +45,10 @@ function Page() {
    return (
      <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
        <Box px={{ base: 'md', md: 100 }}>
-          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+          <Title order={1} c={colors['blue-button']} fw="bold" lh={1.2}>
            Pencegahan Kriminalitas
-          </Text>
-          <Text fz='md'>
+          </Title>
+          <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
            Keamanan Komunitas & Pencegahan Kriminal
          </Text>
        </Box>
@@ -58,11 +58,11 @@ function Page() {
          spacing="xl"
        >
          <Paper p="xl" radius="xl" shadow="lg" >
-            <Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
+            <Title order={2} c={colors['blue-button']} fw="bold" lh={1.2}>
              Program Keamanan Berjalan
-            </Text>
+            </Title>
            <Stack pt={30} gap="lg">
-              <Text c="dimmed">
+              <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.5}>
                Tidak ada data pencegahan kriminalitas yang cocok
              </Text>
            </Stack>
@@ -75,10 +75,10 @@ function Page() {
  return (
    <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
      <Box px={{ base: 'md', md: 100 }}>
-        <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+        <Title order={1} c={colors['blue-button']} fw="bold" lh={1.2}>
          Pencegahan Kriminalitas
-        </Text>
-        <Text fz='md'>
+        </Title>
+        <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
          Keamanan Komunitas & Pencegahan Kriminal
        </Text>
      </Box>
@@ -88,13 +88,13 @@ function Page() {
        spacing="xl"
      >
        <Paper p="xl" radius="xl" shadow="lg" >
-          <Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
+          <Title order={2} c={colors['blue-button']} fw="bold" lh={1.2}>
            Program Keamanan Berjalan
-          </Text>
+          </Title>
          <Stack pt={30} gap="lg">
            <Box
              style={{
-                minHeight: 300, // sesuaikan: tinggi area yg muat 3 item
+                minHeight: 300,
              }}
            >
              {data.length > 0 ? (
@@ -120,14 +120,16 @@ function Page() {
                    }
                  >
                    <Stack gap="xs">
-                      <Text fz="h3" c={colors['white-1']}>
+                      <Title order={3} c={colors['white-1']} lh={1.2}>
                        {item.judul}
-                      </Text>
+                      </Title>
                    </Stack>
                  </Paper>
                ))
              ) : (
-                <Text c="dimmed">Tidak ada data pencegahan kriminalitas yang cocok</Text>
+                <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.5}>
+                  Tidak ada data pencegahan kriminalitas yang cocok
+                </Text>
              )}
            </Box>
            <Button
@@ -169,12 +171,18 @@ function Page() {
                  style={{ borderRadius: 8 }}
                />
              ) : (
-                <Text fz="sm" c="dimmed">Tidak ada video</Text>
+                <Text fz={{ base: 'xs', md: 'sm' }} c="dimmed" lh={1.4}>
+                  Tidak ada video
+                </Text>
              )}
-              <Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
+              <Title order={2} py={10} fw="bold" c={colors['blue-button']} lh={1.2}>
                {findFirst.data?.judul}
-              </Text>
-              <Text fz="h4" dangerouslySetInnerHTML={{ __html: findFirst.data?.deskripsiSingkat }} />
+              </Title>
+              <Text
+                fz={{ base: 'sm', md: 'md' }}
+                lh={1.5}
+                dangerouslySetInnerHTML={{ __html: findFirst.data?.deskripsiSingkat }}
+              />
            </Paper>
          ) : null}
        </Box>
@@ -195,4 +203,4 @@ function Page() {
  }
 }

-export default Page;
+export default Page;
--- a/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import polsekTerdekatState from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
 import colors from '@/con/colors';
-import { Badge, Box, Button, Center, Flex, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Center, Flex, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { IconArrowDown, IconClock, IconNavigation, IconPhone, IconPin } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -35,15 +35,15 @@ function Page() {
          <BackButton />
        </Box>
        <Box pb={10} px={{ base: 20, md: 100 }}>
-          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+          <Title order={1} c={colors['blue-button']}>
            Kantor Polisi Terdekat
-          </Text>
-          <Text pb={15} fz="md">
+          </Title>
+          <Text pb={15} fz={{ base: 'sm', md: 'md' }} lh={1.5}>
            Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
          </Text>
        </Box>
        <Center py="xl">
-          <Text fz="lg" fw="bold" c="red">
+          <Text fz={{ base: 'md', md: 'lg' }} fw="bold" c="red" lh={1.4}>
            Data Polsek tidak ada
          </Text>
        </Center>
@@ -58,10 +58,10 @@ function Page() {
      </Box>

      <Box pb={10} px={{ base: 20, md: 100 }}>
-        <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+        <Title order={1} c={colors['blue-button']}>
          Kantor Polisi Terdekat
-        </Text>
-        <Text pb={15} fz="h4">
+        </Title>
+        <Text pb={15} fz={{ base: 'sm', md: 'md' }} lh={1.5}>
          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
        </Text>
      </Box>
@@ -79,10 +79,10 @@ function Page() {
                  <>
                    {/* === KIRI === */}
                    <Box>
-                      <Text c={colors['blue-button']} fw="bold" fz="h2">
+                      <Title order={2} c={colors['blue-button']} lh={1.2}>
                        {data.nama}
-                      </Text>
-                      <Text c={colors['blue-button']} fz="sm">
+                      </Title>
+                      <Text c={colors['blue-button']} fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
                        {data.jarakKeDesa}
                      </Text>

@@ -98,11 +98,11 @@ function Page() {
                          <IconPin size={22} />
                        </Box>
                        <Text
-                          fz="lg"
+                          fz={{ base: 'sm', md: 'md' }}
                          style={{
                            flex: 1,
                            wordBreak: 'break-word',
-                            lineHeight: 1.4,
+                            lineHeight: 1.5,
                          }}
                        >
                          {data.alamat}
@@ -119,7 +119,7 @@ function Page() {
                        <Box w={25} mt={3}>
                          <IconPhone size={22} />
                        </Box>
-                        <Text fz="lg">
+                        <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
                          {data.nomorTelepon}
                        </Text>
                      </Flex>
@@ -133,26 +133,26 @@ function Page() {
                        style={{ wordBreak: 'break-word' }}
                      >
                        <Box w={25} mt={3}>
-                          <IconClock size={22}  />
+                          <IconClock size={22} />
                        </Box>
-                        <Text fz="lg">
+                        <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
                          {data.jamOperasional}
                        </Text>
                      </Flex>

                      {/* Layanan */}
-                      <Box>
-                        <Text c={colors['blue-button']} fw="bold" fz="h2">
-                          Layanan Yang Tersedia :
-                        </Text>
+                      <Box pt={15}>
+                        <Title order={2} c={colors['blue-button']} lh={1.2}>
+                          Layanan Yang Tersedia:
+                        </Title>
                        <SimpleGrid py={10} cols={{ base: 1, md: 2 }}>
-                          <Text fz="lg">
+                          <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
                            {data.layananPolsek.nama}
                          </Text>
                        </SimpleGrid>
                      </Box>

-                      <Box>
+                      <Box pt={15}>
                        <Button
                          bg={colors['blue-button']}
                          onClick={() =>
@@ -205,4 +205,4 @@ function Page() {
  );
 }

-export default Page;
+export default Page;
--- a/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import polsekTerdekatState from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
 import colors from '@/con/colors';
-import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconNavigation, IconSearch } from '@tabler/icons-react';
 import React, { useState } from 'react';
@@ -13,8 +13,8 @@ import { useDebouncedValue } from '@mantine/hooks';
 function Page() {
  const state = useProxy(polsekTerdekatState);
  const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
-  const router = useRouter()
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
+  const router = useRouter();

  const {
    data,
@@ -25,71 +25,98 @@ function Page() {
  } = state.findMany;

  useShallowEffect(() => {
-    load(page, 3, debouncedSearch)
-  }, [page, debouncedSearch])
+    load(page, 3, debouncedSearch);
+  }, [page, debouncedSearch]);

  if (loading || !data) {
    return (
      <Box py={10}>
        <Skeleton h={500} />
      </Box>
-    )
+    );
  }

  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
-      <Grid align='center' px={{ base: 'md', md: 100 }}>
+
+      <Grid align="center" px={{ base: 'md', md: 100 }}>
        <GridCol span={{ base: 12, md: 9 }}>
-          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          <Title
+            order={1}
+            c={colors['blue-button']}
+            lh={1.2}
+          >
            Semua Polsek Terdekat
-          </Text>
+          </Title>
        </GridCol>
        <GridCol span={{ base: 12, md: 3 }}>
          <TextInput
-            radius={"lg"}
-            placeholder='Cari Polsek'
+            radius="lg"
+            placeholder="Cari Polsek"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            leftSection={<IconSearch size={20} />}
-            w={{ base: "50%", md: "100%" }}
+            w={{ base: '50%', md: '100%' }}
          />
        </GridCol>
      </Grid>
-      <Box px={{ base: "md", md: 100 }}>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3,
-          }}
-        >
-          {data.map((v, k) => {
-            return (
-              <Paper p={"xl"} bg={colors['white-trans-1']} key={k}>
-                <Stack gap={"xs"}>
-                  <Text fw={"bold"} fz={"h3"}>{v.nama}</Text>
-                  <Text>Alamat: {v.alamat}</Text>
-                  <Text>Jarak: {v.jarakKeDesa}</Text>
-                  <Text>Telepon: {v.nomorTelepon}</Text>
-                  <Text>Jam Operasional: {v.jamOperasional}</Text>
-                  <Box pt={20}>
-                    <iframe style={{ border: 2, width: "100%" }} src={v.embedMapUrl} width="550" height="300" ></iframe>
-                  </Box>
-                  <Box pt={20}>
-                    <Button onClick={() => router.push(v.linkPetunjukArah)} fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20} />}>Petunjuk Arah</Button>
-                  </Box>
-                </Stack>
-              </Paper>
-            )
-          })}
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {data.map((v, k) => (
+            <Paper p="xl" bg={colors['white-trans-1']} key={k}>
+              <Stack gap="xs">
+                <Title
+                  order={3}
+                  fw="bold"
+                  lh={1.2}
+                >
+                  {v.nama}
+                </Title>
+                <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
+                  Alamat: {v.alamat}
+                </Text>
+                <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
+                  Jarak: {v.jarakKeDesa}
+                </Text>
+                <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
+                  Telepon: {v.nomorTelepon}
+                </Text>
+                <Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
+                  Jam Operasional: {v.jamOperasional}
+                </Text>
+                <Box pt={20}>
+                  <iframe
+                    style={{ border: 2, width: '100%' }}
+                    src={v.embedMapUrl}
+                    width="550"
+                    height="300"
+                  ></iframe>
+                </Box>
+                <Box pt={20}>
+                  <Button
+                    onClick={() => router.push(v.linkPetunjukArah)}
+                    fullWidth
+                    bg={colors['blue-button']}
+                    radius={10}
+                    leftSection={<IconNavigation size={20} />}
+                  >
+                    Petunjuk Arah
+                  </Button>
+                </Box>
+              </Stack>
+            </Paper>
+          ))}
        </SimpleGrid>
      </Box>
+
      <Center>
        <Pagination
          value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => load(newPage)}
          total={totalPages}
          mt="md"
          mb="md"
@@ -99,4 +126,4 @@ function Page() {
  );
 }

-export default Page;
+export default Page;
--- a/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx
+++ b/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx
@@ -1,7 +1,7 @@
-// Create a new component: components/EdukasiCard.tsx
+// components/EdukasiCard.tsx
 'use client';

-import { Box, Paper, Stack, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text, Title } from '@mantine/core';
 import { ReactNode } from 'react';

 interface EdukasiCardProps {
@@ -18,7 +18,7 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
      radius="md"
      shadow="sm"
      withBorder
-      style={{ 
+      style={{
        height: '100%',
        transition: 'transform 0.2s, box-shadow 0.2s',
        '&:hover': {
@@ -31,32 +31,35 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
        <Box>
          <Stack align="center" gap="xs" mb="md">
            <Box style={{ color }}>{icon}</Box>
-              <Text 
-                fz={{ base: 'h5', md: 'h4' }} 
-                fw={700} 
-                c={color}
-                ta="center"
-                lineClamp={2}
-                style={{ 
-                  wordBreak: 'break-word',
-                  minHeight: '3.5rem',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center'
-                }}
-                dangerouslySetInnerHTML={{ __html: title }}
-              />
+            <Title
+              order={3}
+              fz={{ base: 'sm', md: 'md' }}
+              c={color}
+              ta="center"
+              lineClamp={2}
+              style={{
+                wordBreak: 'break-word',
+                minHeight: '3.5rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                lineHeight: 1.2
+              }}
+              dangerouslySetInnerHTML={{ __html: title }}
+            />
          </Stack>
-          <Text
-            size="sm"
-            pl={20}
-            style={{
-              wordBreak: 'break-word',
-              lineHeight: 1.6,
-              color: 'var(--mantine-color-gray-7)'
-            }}
-            dangerouslySetInnerHTML={{ __html: description }}
-          />
+          <Box pl={20}>
+            <Text
+              fz={{ base: 'sm', md: 'md' }}
+              lh={1.5}
+              c="gray.7"
+              ta="justify"
+              style={{
+                wordBreak: 'break-word'
+              }}
+              dangerouslySetInnerHTML={{ __html: description }}
+            />
+          </Box>
        </Box>
      </Stack>
    </Paper>
--- a/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx
+++ b/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Box, Container, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Container, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconLeaf, IconPlant2, IconRecycle } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
@@ -51,19 +51,21 @@ export default function EdukasiLingkunganPage() {
      </Box>

      <Container size="lg" ta="center">
-        <Text
-          component="h1"
-          fz={{ base: 'h2', md: '2.5rem' }}
+        <Title
+          order={1}
          c={colors['blue-button']}
          fw={700}
          mb="md"
+          lh={1.15}
        >
          Edukasi Lingkungan
-        </Text>
+        </Title>
        <Text
-          fz={{ base: 'md', md: 'lg' }}
+          fz={{ base: 'sm', md: 'md' }}
+          lh={1.5}
          maw={800}
          mx="auto"
+          c="dark.9"
        >
          Program edukasi ini membimbing masyarakat untuk peduli dan bertanggung jawab terhadap alam,
          meningkatkan kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
--- a/src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/[id]/page.tsx
@@ -41,23 +41,23 @@ function DetailKegiatanDesaUser() {
        shadow="sm"
        maw={900}
        mx="auto"
-        >
+      >
        <Stack gap="md">
-        {data.image?.link && (
-          <Image
-            src={data.image.link}
-            alt={data.judul || 'Kegiatan Desa'}
-            radius="md"
-            fit="cover"
-            h={300}
-            mb="xl"
-            style={{ objectPosition: 'center', width: '100%' }}
-          />
-        )}
          {/* Judul */}
-          <Title order={2} c={colors['blue-button']}>
+          <Title order={1} ta={"center"} c={colors['blue-button']}>
            {data.judul || 'Kegiatan Desa'}
          </Title>
+          {data.image?.link && (
+            <Image
+              src={data.image.link}
+              alt={data.judul || 'Kegiatan Desa'}
+              radius="md"
+              fit="cover"
+              h={300}
+              mb="xl"
+              style={{ objectPosition: 'center', width: '100%' }}
+            />
+          )}

          {/* Meta Info */}
          <Group gap="xl" c="dimmed">
--- a/src/app/darmasaba/(pages)/lingkungan/gotong-royong/layout.tsx
+++ b/src/app/darmasaba/(pages)/lingkungan/gotong-royong/layout.tsx
@@ -1,6 +1,10 @@
 // app/desa/berita/BeritaLayoutClient.tsx
 'use client'
+import colors from '@/con/colors';
+import { Box } from '@mantine/core';
 import dynamic from 'next/dynamic';
+import { usePathname } from 'next/navigation';
+import BackButton from '../../desa/layanan/_com/BackButto';

 const LayoutTabsGotongRoyong = dynamic(
  () => import('./_lib/layoutTabs'),
@@ -8,5 +12,21 @@ const LayoutTabsGotongRoyong = dynamic(
 );

 export default function GotongRoyongLayoutClient({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const segments = pathname.split('/').filter(Boolean)
+  const isDetailPage = segments.length === 5;
+
+  if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box bg={colors.Bg}>
+          <Box pt={33} px={{ base: 'md', md: 100 }}>
+            <BackButton />
+          </Box>
+          {children}
+        </Box>
+      );
+    }
+  
  return <LayoutTabsGotongRoyong>{children}</LayoutTabsGotongRoyong>;
 }
--- a/src/app/darmasaba/(pages)/lingkungan/gotong-royong/semua/page.tsx
+++ b/src/app/darmasaba/(pages)/lingkungan/gotong-royong/semua/page.tsx
@@ -11,7 +11,6 @@ import {
  Center,
  Container,
  Divider,
-  Flex,
  Grid,
  GridCol,
  Group,
@@ -23,7 +22,7 @@ import {
  Stack,
  Text,
  Title,
-  Transition,
+  Transition
 } from '@mantine/core';
 import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
@@ -46,7 +45,7 @@ export default function Page() {
  // Load featured data once on component mount
  useEffect(() => {
    let mounted = true;
-    
+
    const loadFeatured = async () => {
      try {
        if (!featured.data && !loadingFeatured) {
@@ -68,7 +67,7 @@ export default function Page() {

  useEffect(() => {
    let mounted = true;
-    
+
    const loadData = async () => {
      try {
        const limit = 3;
@@ -92,7 +91,7 @@ export default function Page() {
    if (search) url.set('search', search);
    if (newPage > 1) url.set('page', newPage.toString());
    else url.delete('page');
-    
+
    // Use push instead of replace to keep browser history
    router.push(`?${url.toString()}`, { scroll: false });
  };
@@ -139,7 +138,6 @@ export default function Page() {
                        height={400}
                        fit="cover"
                        radius="md"
-                        style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
                        loading="lazy"
                      />
                    </GridCol>
@@ -222,6 +220,7 @@ export default function Page() {
                            alt={item.judul}
                            fit="cover"
                            loading="lazy"
+                            radius={"md"}
                          />
                        </Card.Section>

@@ -241,14 +240,17 @@ export default function Page() {
                          dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }}
                        />

-                        <Flex align="center" justify="apart" mt="md" gap="xs">
-                          <Text size="xs" c="dimmed">
-                            {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                              day: 'numeric',
-                              month: 'short',
-                              year: 'numeric',
-                            })}
-                          </Text>
+                        <Group justify="apart" mt="auto">
+                          <Group gap="xs">
+                            <IconCalendar size={18} />
+                            <Text size="xs" c="dimmed">
+                              {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                                day: 'numeric',
+                                month: 'short',
+                                year: 'numeric',
+                              })}
+                            </Text>
+                          </Group>

                          <Button
                            p="xs"
@@ -262,7 +264,7 @@ export default function Page() {
                          >
                            Baca Selengkapnya
                          </Button>
-                        </Flex>
+                        </Group>
                      </Card>
                    ))}
                  </SimpleGrid>
--- a/src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx
+++ b/src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx
@@ -1,11 +1,12 @@
 'use client'
 import stateKonservasiAdatBali from '@/app/admin/(dashboard)/_state/lingkungan/konservasi-adat-bali';
 import colors from '@/con/colors';
-import { Box, Center, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';

+
 function Page() {
  const filosofi = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita.findById)
  const nilai = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat.findById)
@@ -30,11 +31,24 @@ function Page() {
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
-      <Box px={{ base: 'md', md: 100 }} pb={30}>
-        <Text ta="center" fz={{ base: '2xl', md: '3rem' }} c={colors['blue-button']} fw="bold">
+      <Box px={{ base: 'md', md: 100 }} >
+        <Title
+          order={1}
+          ta="center"
+          c={colors['blue-button']}
+          fw="bold"
+          style={{ lineHeight: 1.15 }}
+          
+        >
          Konservasi Adat Bali
-        </Text>
-        <Text px={20} ta="center" fz="lg" c="black">
+        </Title>
+        <Text
+          px={20}
+          ta="center"
+          fz={{ base: 'sm', md: 'lg' }}
+          c="black"
+          style={{ lineHeight: 1.55 }}
+        >
          Pelestarian lingkungan di Bali yang berpijak pada kearifan lokal, menjaga harmoni antara alam, budaya, dan manusia.
        </Text>
      </Box>
@@ -54,53 +68,31 @@ function Page() {
            >
              <Stack gap="md" px={20} style={{ height: '100%' }}>
                <Center>
-                  <Text fz="xl" fw="bold" c="black">
+                  <Title
+                    order={3}
+                    c="black"
+                    fw="bold"
+                    style={{ lineHeight: 1.15 }}
+                  >
                    {filosofi.data?.judul}
-                  </Text> 
-                </Center>
-                <div 
-                  style={{ 
-                    wordBreak: "break-word", 
-                    whiteSpace: "normal",
-                    flexGrow: 1
-                  }} 
-                  dangerouslySetInnerHTML={{ __html: filosofi.data?.deskripsi || '' }} 
-                />
-              </Stack>
-            </Paper>
-         </Box>
-         {/* Nilai */}
-         <Box style={{ display: 'flex', height: '100%' }}>
-         <Paper
-              p="lg"
-              style={{ 
-                borderRadius: 16, 
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
-              }}
-            >
-              <Stack gap="md" px={20} style={{ height: '100%' }}>
-                <Center>
-                  <Text fz="xl" fw="bold" c="black">
-                    {nilai.data?.judul}
-                  </Text> 
+                  </Title>
                </Center>
                <div 
                  style={{ 
                    wordBreak: "break-word", 
                    whiteSpace: "normal",
                    flexGrow: 1,
-                    minHeight: 0
+                    fontSize: '14px',
+                    lineHeight: 1.55,
+                    color: 'black'
                  }} 
-                  dangerouslySetInnerHTML={{ __html: nilai.data?.deskripsi || '' }} 
+                  dangerouslySetInnerHTML={{ __html: filosofi.data?.deskripsi || '' }} 
                />
              </Stack>
            </Paper>
-         </Box>
-         {/* Bentuk */}
-         <Box>
+          </Box>
+          {/* Nilai */}
+          <Box style={{ display: 'flex', height: '100%' }}>
            <Paper
              p="lg"
              style={{ 
@@ -113,26 +105,72 @@ function Page() {
            >
              <Stack gap="md" px={20} style={{ height: '100%' }}>
                <Center>
-                  <Text fz="xl" fw="bold" c="black">
-                    {bentuk.data?.judul}
-                  </Text> 
+                  <Title
+                    order={3}
+                    c="black"
+                    fw="bold"
+                    style={{ lineHeight: 1.15 }}
+                  >
+                    {nilai.data?.judul}
+                  </Title>
                </Center>
                <div 
                  style={{ 
                    wordBreak: "break-word", 
                    whiteSpace: "normal",
                    flexGrow: 1,
-                    minHeight: 0
+                    minHeight: 0,
+                    fontSize: '14px',
+                    lineHeight: 1.55,
+                    color: 'black'
+                  }} 
+                  dangerouslySetInnerHTML={{ __html: nilai.data?.deskripsi || '' }} 
+                />
+              </Stack>
+            </Paper>
+          </Box>
+          {/* Bentuk */}
+          <Box>
+            <Paper
+              p="lg"
+              style={{ 
+                borderRadius: 16, 
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+              }}
+            >
+              <Stack gap="md" px={20} style={{ height: '100%' }}>
+                <Center>
+                  <Title
+                    order={3}
+                    c="black"
+                    fw="bold"
+                    style={{ lineHeight: 1.15 }}
+                  >
+                    {bentuk.data?.judul}
+                  </Title>
+                </Center>
+                <div 
+                  style={{ 
+                    wordBreak: "break-word", 
+                    whiteSpace: "normal",
+                    flexGrow: 1,
+                    minHeight: 0,
+                    fontSize: '14px',
+                    lineHeight: 1.55,
+                    color: 'black'
                  }} 
                  dangerouslySetInnerHTML={{ __html: bentuk.data?.deskripsi || '' }} 
                />
              </Stack>
            </Paper>
-         </Box>
+          </Box>
        </SimpleGrid>
      </Box>
    </Stack>
  );
 }

-export default Page;
+export default Page;
--- a/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx
@@ -5,6 +5,7 @@ import {
  Button,
  Container,
  Divider,
+  Flex,
  Group,
  Modal,
  Paper,
@@ -23,11 +24,11 @@ import { useProxy } from 'valtio/utils';
 import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
 import colors from '@/con/colors';

-
 export default function BeasiswaPage() {
  const router = useRouter();
-  const beasiswaDesa = useProxy(beasiswaDesaState.beasiswaPendaftar)
+  const beasiswaDesa = useProxy(beasiswaDesaState.beasiswaPendaftar);
  const [opened, { open, close }] = useDisclosure(false);
+
  const resetForm = () => {
    beasiswaDesa.create.form = {
      namaLengkap: "",
@@ -61,6 +62,7 @@ export default function BeasiswaPage() {
          leftSection={<IconArrowLeft size={18} />}
          onClick={() => router.back()}
          mb="lg"
+          style={{ fontSize: '1rem', fontWeight: 500 }}
        >
          Kembali
        </Button>
@@ -69,11 +71,18 @@ export default function BeasiswaPage() {
      {/* Hero Section */}
      <Container size="lg" py="xl">
        <Stack gap="md" maw={600}>
-          <Group>
+          <Flex gap={"md"} justify={"flex-start"} align={"center"}>
            <IconSchool size={30} color={colors["blue-button"]} />
-            <Title order={2} c={colors["blue-button"]}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
-          </Group>
-          <Text>
+            <Title
+              order={1}
+              fz={{ base: '1.125rem', md: '1.375rem' }}
+              lh={1.15}
+              c={colors["blue-button"]}
+            >
+              Program Beasiswa Pendidikan Desa Darmasaba
+            </Title>
+          </Flex>
+          <Text fz={{ base: '0.875rem', md: '1rem' }} lh={1.55}>
            Program ini bertujuan untuk mendukung pendidikan generasi muda di Desa Darmasaba
            agar dapat melanjutkan studi ke jenjang lebih tinggi dengan dukungan finansial dan pendampingan.
          </Text>
@@ -84,20 +93,22 @@ export default function BeasiswaPage() {
      <Container size="lg" py="xl">
        <Group mb="sm">
          <IconInfoCircle size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Tentang Program</Title>
+          <Title order={3} fz={{ base: '1.125rem', md: '1.375rem' }} lh={1.15} c={colors["blue-button"]}>
+            Tentang Program
+          </Title>
        </Group>
-        <Text>
+        <Text fz={{ base: '0.875rem', md: '1rem' }} lh={1.55}>
          Program Beasiswa Desa Darmasaba adalah inisiatif pemerintah desa untuk meningkatkan akses
          pendidikan bagi siswa berprestasi dan kurang mampu. Melalui program ini, desa memberikan bantuan
          biaya sekolah, bimbingan akademik, serta pelatihan soft skill bagi peserta terpilih.
        </Text>

-        {/* Tambahkan info tahun berjalan di sini */}
+        {/* Periode Beasiswa */}
        <Paper mt="md" p="md" radius="lg" shadow="xs" bg="#f8fbff" withBorder>
-          <Text fw={500}>
+          <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
            Periode Beasiswa Tahun 2025
          </Text>
-          <Text fz="sm" c="dimmed">
+          <Text fz={{ base: '0.8125rem', md: '0.875rem' }} c="dimmed" lh={1.5}>
            Pendaftaran beasiswa dibuka mulai <strong>1 Januari 2025</strong> dan ditutup pada <strong>31 Mei 2025</strong>.
            Pengumuman hasil seleksi akan diumumkan pada pertengahan Juni 2025 melalui website resmi Desa Darmasaba.
          </Text>
@@ -108,27 +119,35 @@ export default function BeasiswaPage() {
      <Container size="lg" py="xl">
        <Group mb="sm">
          <IconChecklist size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Syarat Pendaftaran</Title>
+          <Title order={3} fz={{ base: '1.125rem', md: '1.375rem' }} lh={1.15} c={colors["blue-button"]}>
+            Syarat Pendaftaran
+          </Title>
        </Group>

        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
          <Paper shadow="sm" p="md" radius="lg" withBorder>
-            <Text fw={500}>Domisili Desa Darmasaba</Text>
-            <Text c="dimmed" fz="sm">
+            <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+              Domisili Desa Darmasaba
+            </Text>
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Peserta harus merupakan warga desa yang berdomisili minimal 2 tahun.
            </Text>
          </Paper>

          <Paper shadow="sm" p="md" radius="lg" withBorder>
-            <Text fw={500}>Nilai Akademik</Text>
-            <Text c="dimmed" fz="sm">
+            <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+              Nilai Akademik
+            </Text>
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Rata-rata nilai raport minimal 80 atau setara.
            </Text>
          </Paper>

          <Paper shadow="sm" p="md" radius="lg" withBorder>
-            <Text fw={500}>Surat Rekomendasi</Text>
-            <Text c="dimmed" fz="sm">
+            <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+              Surat Rekomendasi
+            </Text>
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Diperlukan surat rekomendasi dari sekolah atau guru wali kelas.
            </Text>
          </Paper>
@@ -139,75 +158,102 @@ export default function BeasiswaPage() {
      <Container size="lg" py="xl">
        <Group mb="sm">
          <IconTimeline size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Proses Seleksi</Title>
+          <Title order={3} fz={{ base: '1.125rem', md: '1.375rem' }} lh={1.15} c={colors["blue-button"]}>
+            Proses Seleksi
+          </Title>
        </Group>

        <Timeline active={4} bulletSize={24} lineWidth={2}>
-          <Timeline.Item title="Pendaftaran Online">
-            <Text c="dimmed" size="sm">
+          <Timeline.Item
+            title={
+              <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+                Pendaftaran Online
+              </Text>
+            }
+          >
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Calon peserta mengisi formulir pendaftaran dan mengunggah dokumen pendukung.
            </Text>
-            <Text size="sm" fw={500} mt={4}>
+            <Text fz={{ base: '0.8125rem', md: '0.875rem' }} fw={600} mt={4} lh={1.4}>
              Estimasi waktu: 1 Februari – 31 Mei 2025
            </Text>
          </Timeline.Item>

-          <Timeline.Item title="Seleksi Administrasi">
-            <Text c="dimmed" size="sm">
+          <Timeline.Item
+            title={
+              <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+                Seleksi Administrasi
+              </Text>
+            }
+          >
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Panitia memverifikasi kelengkapan dan validitas berkas.
            </Text>
-            <Text size="sm" fw={500} mt={4}>
+            <Text fz={{ base: '0.8125rem', md: '0.875rem' }} fw={600} mt={4} lh={1.4}>
              Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
            </Text>
          </Timeline.Item>

-          <Timeline.Item title="Wawancara dan Penilaian">
-            <Text c="dimmed" size="sm">
+          <Timeline.Item
+            title={
+              <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+                Wawancara dan Penilaian
+              </Text>
+            }
+          >
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Peserta yang lolos administrasi akan diundang untuk wawancara langsung dengan tim seleksi.
            </Text>
-            <Text size="sm" fw={500} mt={4}>
+            <Text fz={{ base: '0.8125rem', md: '0.875rem' }} fw={600} mt={4} lh={1.4}>
              Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
            </Text>
          </Timeline.Item>

-          <Timeline.Item title="Pengumuman Penerima">
-            <Text c="dimmed" size="sm">
+          <Timeline.Item
+            title={
+              <Text fz={{ base: '1rem', md: '1.125rem' }} fw={600} lh={1.4}>
+                Pengumuman Penerima
+              </Text>
+            }
+          >
+            <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5}>
              Daftar penerima beasiswa diumumkan melalui website resmi Desa Darmasaba.
            </Text>
-            <Text size="sm" fw={500} mt={4}>
+            <Text fz={{ base: '0.8125rem', md: '0.875rem' }} fw={600} mt={4} lh={1.4}>
              Estimasi waktu: 5 hari kerja setelah tahap wawancara selesai
            </Text>
          </Timeline.Item>
        </Timeline>

-        <Text c="dimmed" size="sm" mt="lg" ta="center">
+        <Text c="dimmed" fz={{ base: '0.8125rem', md: '0.875rem' }} lh={1.5} mt="lg" ta="center">
          Total estimasi keseluruhan proses: sekitar 3–4 minggu setelah penutupan pendaftaran
        </Text>
      </Container>

-
      {/* Testimoni */}
      <Container size="lg" py="xl">
        <Group mb="sm">
          <IconQuote size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Cerita Sukses Penerima Beasiswa</Title>
+          <Title order={3} fz={{ base: '1.125rem', md: '1.375rem' }} lh={1.15} c={colors["blue-button"]}>
+            Cerita Sukses Penerima Beasiswa
+          </Title>
        </Group>

        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
          <Paper shadow="md" p="lg" radius="lg">
-            <Text fs={'italic'}>
+            <Text fs="italic" fz={{ base: '0.9375rem', md: '1rem' }} lh={1.5}>
              “Program ini sangat membantu saya melanjutkan kuliah di Universitas Udayana. Terima kasih Desa Darmasaba!”
            </Text>
-            <Text mt="sm" fw={600}>
+            <Text mt="sm" fw={600} fz={{ base: '0.9375rem', md: '1rem' }} lh={1.4}>
              – Ni Kadek Ayu S., Penerima Beasiswa 2024
            </Text>
          </Paper>

          <Paper shadow="md" p="lg" radius="lg">
-            <Text fs={'italic'}>
+            <Text fs="italic" fz={{ base: '0.9375rem', md: '1rem' }} lh={1.5}>
              “Selain bantuan dana, kami juga mendapatkan pelatihan komputer dan bahasa Inggris.”
            </Text>
-            <Text mt="sm" fw={600}>
+            <Text mt="sm" fw={600} fz={{ base: '0.9375rem', md: '1rem' }} lh={1.4}>
              – I Made Gede A., Penerima Beasiswa 2023
            </Text>
          </Paper>
@@ -218,16 +264,25 @@ export default function BeasiswaPage() {
      <Container size="lg" py="xl" ta="center">
        <Group justify="center" mb="sm">
          <IconUserPlus size={28} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Siap Bergabung dengan Program Ini?</Title>
+          <Title order={3} fz={{ base: '1.375rem', md: '1.5rem' }} lh={1.15} c={colors["blue-button"]}>
+            Siap Bergabung dengan Program Ini?
+          </Title>
        </Group>
-        <Text c="dimmed" mb="md">
+        <Text c="dimmed" fz={{ base: '0.875rem', md: '1rem' }} lh={1.5} mb="md">
          Segera daftar dan wujudkan mimpimu bersama Desa Darmasaba.
        </Text>
-        <Button onClick={open} size="lg" radius="xl" bg={colors["blue-button"]}>
+        <Button
+          onClick={open}
+          size="lg"
+          radius="xl"
+          bg={colors["blue-button"]}
+          style={{ fontSize: '1.125rem', fontWeight: 600, lineHeight: 1.4 }}
+        >
          Daftar Sekarang
        </Button>
      </Container>

+      {/* Modal Formulir */}
      <Modal
        opened={opened}
        onClose={close}
@@ -235,7 +290,7 @@ export default function BeasiswaPage() {
        size="lg"
        transitionProps={{ transition: 'fade', duration: 200 }}
        title={
-          <Text fz="xl" fw={800} c={colors['blue-button']}>
+          <Text fz={{ base: '1.375rem', md: '1.5rem' }} fw={800} c={colors['blue-button']} lh={1.2}>
            Formulir Beasiswa
          </Text>
        }
@@ -245,64 +300,105 @@ export default function BeasiswaPage() {
            <TextInput
              label="Nama Lengkap"
              placeholder="Masukkan nama lengkap"
-              onChange={(val) => { beasiswaDesa.create.form.namaLengkap = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.namaLengkap = val.target.value }}
+            />
            <TextInput
              type="number"
              label="NIS"
              placeholder="Masukkan NIS"
-              onChange={(val) => { beasiswaDesa.create.form.nis = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.nis = val.target.value }}
+            />
            <TextInput
              label="Kelas"
              placeholder="Masukkan kelas"
-              onChange={(val) => { beasiswaDesa.create.form.kelas = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.kelas = val.target.value }}
+            />
            <Select
              label="Jenis Kelamin"
              placeholder="Pilih jenis kelamin"
-              data={[{ value: "LAKI_LAKI", label: "Laki-laki" }, { value: "PEREMPUAN", label: "Perempuan" }]}
-              onChange={(val) => { if (val) beasiswaDesa.create.form.jenisKelamin = val }} />
+              data={[
+                { value: "LAKI_LAKI", label: "Laki-laki" },
+                { value: "PEREMPUAN", label: "Perempuan" }
+              ]}
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { if (val) beasiswaDesa.create.form.jenisKelamin = val }}
+            />
            <TextInput
              label="Alamat Domisili"
              placeholder="Masukkan alamat domisili"
-              onChange={(val) => { beasiswaDesa.create.form.alamatDomisili = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.alamatDomisili = val.target.value }}
+            />
            <TextInput
              label="Tempat Lahir"
              placeholder="Masukkan tempat lahir"
-              onChange={(val) => { beasiswaDesa.create.form.tempatLahir = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.tempatLahir = val.target.value }}
+            />
            <TextInput
              type="date"
              label="Tanggal Lahir"
              placeholder="Pilih tanggal lahir"
-              onChange={(val) => { beasiswaDesa.create.form.tanggalLahir = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.tanggalLahir = val.target.value }}
+            />
            <Box pt={15} pb={10}>
              <Divider />
            </Box>
            <TextInput
              label="Nama Orang Tua / Wali"
              placeholder="Masukkan nama orang tua / wali"
-              onChange={(val) => { beasiswaDesa.create.form.namaOrtu = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.namaOrtu = val.target.value }}
+            />
            <TextInput
              label="NIK Orang Tua / Wali"
              placeholder="Masukkan NIK orang tua / wali"
-              onChange={(val) => { beasiswaDesa.create.form.nik = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.nik = val.target.value }}
+            />
            <TextInput
              label="Pekerjaan Orang Tua / Wali"
              placeholder="Masukkan pekerjaan orang tua / wali"
-              onChange={(val) => { beasiswaDesa.create.form.pekerjaanOrtu = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.pekerjaanOrtu = val.target.value }}
+            />
            <TextInput
              label="Penghasilan Orang Tua / Wali"
              placeholder="Masukkan penghasilan orang tua / wali"
-              onChange={(val) => { beasiswaDesa.create.form.penghasilan = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.penghasilan = val.target.value }}
+            />
            <TextInput
              label="No HP"
              placeholder="Masukkan no hp"
-              onChange={(val) => { beasiswaDesa.create.form.noHp = val.target.value }} />
+              labelProps={{ style: { fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 } }}
+              onChange={(val) => { beasiswaDesa.create.form.noHp = val.target.value }}
+            />
            <Group justify="flex-end" mt="md">
-              <Button variant="default" radius="xl" onClick={close}>Batal</Button>
-              <Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit}>Kirim</Button>
+              <Button
+                variant="default"
+                radius="xl"
+                onClick={close}
+                style={{ fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 }}
+              >
+                Batal
+              </Button>
+              <Button
+                radius="xl"
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                style={{ fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 }}
+              >
+                Kirim
+              </Button>
            </Group>
          </Stack>
        </Paper>
      </Modal>
    </Box>
  );
-}
+}
--- a/src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx
@@ -38,11 +38,17 @@ function Page() {
      </Box>
      <Box px={{ base: 'md', md: 120 }} pb={80}>
        <Box mb="lg">
-          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} fz={{ base: 28, md: 38 }}>
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} fz={{ base: 'xl', md: '2em' }} lh={1.15}>
            Program Bimbingan Belajar Desa
          </Title>
          <Divider size="sm" my="md" mx="auto" w="60%" color={colors['blue-button']} />
-          <Text ta="center" fz="lg" c="black" px={{ base: 'sm', md: 120 }}>
+          <Text
+            ta="center"
+            fz={{ base: 'sm', md: 'md' }}
+            c="black"
+            lh={{ base: 1.6, md: 1.5 }}
+            px={{ base: 'sm', md: 120 }}
+          >
            Program unggulan untuk mendukung siswa Desa Darmasaba memahami pelajaran sekolah, meningkatkan prestasi akademik, dan menumbuhkan semangat belajar sejak dini.
          </Text>
        </Box>
@@ -55,11 +61,16 @@ function Page() {
                    <IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
                  </Box>
                </Tooltip>
-                <Title order={3} fw={700} c={colors['blue-button']} mb="xs">
+                <Title order={3} fw={700} c={colors['blue-button']} lh={1.2} fz={{ base: 'sm', md: 'md' }}>
                  {stateTujuanProgram.findById.data?.judul}
                </Title>
              </Group>
-              <Text fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
+              <Text
+                fz={{ base: 'xs', md: 'md' }}
+                lh={{ base: 1.6, md: 1.5 }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }}
+              />
            </Stack>
          </Paper>
          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
@@ -70,11 +81,16 @@ function Page() {
                    <IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
                  </Box>
                </Tooltip>
-                <Title order={3} fw={700} c={colors['blue-button']} mb="xs">
+                <Title order={3} fw={700} c={colors['blue-button']} lh={1.2} fz={{ base: 'sm', md: 'md' }}>
                  {stateLokasiDanJadwal.findById.data?.judul}
                </Title>
              </Group>
-              <Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
+              <Text
+                fz={{ base: 'xs', md: 'md' }}
+                lh={{ base: 1.6, md: 1.5 }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }}
+              />
            </Stack>
          </Paper>
          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
@@ -85,11 +101,16 @@ function Page() {
                    <IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
                  </Box>
                </Tooltip>
-                <Title order={3} fw={700} c={colors['blue-button']} mb="xs">
+                <Title order={3} fw={700} c={colors['blue-button']} lh={1.2} fz={{ base: 'sm', md: 'md' }}>
                  {stateFasilitas.findById.data?.judul}
                </Title>
              </Group>
-              <Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
+              <Text
+                fz={{ base: 'xs', md: 'md' }}
+                lh={{ base: 1.6, md: 1.5 }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }}
+              />
            </Stack>
          </Paper>
        </SimpleGrid>
@@ -98,4 +119,4 @@ function Page() {
  );
 }

-export default Page;
+export default Page;