Fix Konsisten teks di tampilan mobile dan desktop

Fix QC Kak Inno tgl 10 Des Fix QC Kak Ayu tgl 10 Des
2025-12-11 17:58:03 +08:00
parent 242ea86f77
commit a00481152c
43 changed files with 1725 additions and 1093 deletions
--- a/src/app/darmasaba/(pages)/desa/profil/struktur-perangkat-desa/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/struktur-perangkat-desa/[id]/page.tsx
@@ -26,7 +26,6 @@ function DetailPegawaiUser() {
    statePegawai.findUnique.load(params?.id as string);
  }, []);

-
  if (!statePegawai.findUnique.data) {
    return (
      <Stack py="lg">
@@ -41,7 +40,7 @@ function DetailPegawaiUser() {
    <Box px={{ base: 'md', md: 100 }} py="xl">
      {/* Back button */}
      <Group mb="lg" px={{ base: 'md', md: 100 }}>
-        <BackButton/>
+        <BackButton />
      </Group>

      <Paper
@@ -69,11 +68,17 @@ function DetailPegawaiUser() {
          />

          {/* Nama & Jabatan */}
-          <Stack align="center" gap={2}>
-            <Title order={3} fw={700} c={colors['blue-button']}>
+          <Stack align="center" gap={4}>
+            {/* Title utama → H2 karena ini judul profil */}
+            <Title order={2} c={colors['blue-button']} lh={1.2}>
              {data.namaLengkap || '-'} {data.gelarAkademik || ''}
            </Title>
-            <Text fz="sm" c="dimmed">
+
+            <Text
+              fz={{ base: 'sm', md: 'md' }}
+              lh={1.4}
+              c="dimmed"
+            >
              {data.posisi?.nama || 'Posisi tidak tersedia'}
            </Text>
          </Stack>
@@ -82,7 +87,11 @@ function DetailPegawaiUser() {
        <Divider my="lg" />

        {/* Informasi Detail */}
-        <Stack gap="md">
+        <Stack gap="lg">
+          <Title order={3} lh={1.3}>
+            Informasi Pegawai
+          </Title>
+
          <InfoRow label="Email" value={data.email} />
          <InfoRow label="Telepon" value={data.telepon} />
          <InfoRow label="Alamat" value={data.alamat} multiline />
@@ -91,10 +100,10 @@ function DetailPegawaiUser() {
            value={
              data.tanggalMasuk
                ? new Date(data.tanggalMasuk).toLocaleDateString('id-ID', {
-                  day: '2-digit',
-                  month: 'long',
-                  year: 'numeric',
-                })
+                    day: '2-digit',
+                    month: 'long',
+                    year: 'numeric',
+                  })
                : '-'
            }
          />
@@ -123,11 +132,18 @@ function InfoRow({
 }) {
  return (
    <Box>
-      <Text fz="sm" fw={600} c="dark">
+      <Text
+        fz={{ base: 'sm', md: 'md' }}
+        fw={600}
+        lh={1.3}
+        c="dark"
+      >
        {label}
      </Text>
+
      <Text
-        fz="sm"
+        fz={{ base: 'sm', md: 'md' }}
+        lh={1.5}
        c={valueColor || 'dimmed'}
        style={{
          whiteSpace: multiline ? 'normal' : 'nowrap',
--- a/src/app/darmasaba/(pages)/desa/profil/struktur-perangkat-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/struktur-perangkat-desa/page.tsx
@@ -36,11 +36,12 @@ import { useTransitionRouter } from 'next-view-transitions'
 import { OrganizationChart } from 'primereact/organizationchart'
 import { useEffect, useRef, useState } from 'react'
 import { useProxy } from 'valtio/utils'
-import './struktur.css'
-import BackButton from '../_com/BackButto'
-import { useMediaQuery } from '@mantine/hooks'

-export default function StrukturPerangkatDesa() {
+import './struktur.css'
+import { useMediaQuery } from '@mantine/hooks'
+import BackButton from '../_com/BackButto'
+
+export default function Page() {
  return (
    <Box
      style={{
@@ -59,10 +60,11 @@ export default function StrukturPerangkatDesa() {
            ta="center"
            c={colors['blue-button']}
            fz={{ base: 28, md: 36, lg: 44 }}
+            lh={{ base: 1.05, md: 1.03 }}
          >
            Struktur Perangkat Desa
          </Title>
-          <Text ta="center" c="black" maw={800}>
+          <Text ta="center" c="black" maw={800} fz={{ base: 13, md: 15 }} lh={1.45}>
            Gambaran visual peran dan pegawai yang ditugaskan. Arahkan kursor
            untuk melihat detail atau klik node untuk fokus tampilan.
          </Text>
@@ -105,8 +107,8 @@ function StrukturPerangkatDesaNode() {
      <Center py={48}>
        <Stack align="center" gap="sm">
          <Loader size="lg" />
-          <Text fw={600}>Memuat struktur organisasi…</Text>
-          <Text c="dimmed" size="sm">
+          <Text fw={600} fz={{ base: 15, md: 16 }} lh={1.2}>Memuat struktur organisasi…</Text>
+          <Text c="dimmed" fz={{ base: 12, md: 13 }} lh={1.4}>
            Mengambil data pegawai dan posisi. Mohon tunggu sebentar.
          </Text>
        </Stack>
@@ -132,10 +134,10 @@ function StrukturPerangkatDesaNode() {
            <Center>
              <IconUsers size={56} />
            </Center>
-            <Title order={3} mt="md">
+            <Title order={3} mt="md" fz={{ base: 16, md: 18 }} lh={1.15}>
              Data pegawai belum tersedia
            </Title>
-            <Text c="dimmed" mt="xs">
+            <Text c="dimmed" mt="xs" fz={{ base: 13, md: 14 }} lh={1.4}>
              Belum ada data pegawai yang tercatat untuk PPID.
            </Text>
            <Group justify="center" mt="lg">
@@ -232,11 +234,18 @@ function StrukturPerangkatDesaNode() {
      {/* 🔍 Controls */}
      <Paper
        shadow="xs"
+        w={{
+          base: '100%',       // Mobile: 100%
+          sm: '40%',          // Tablet: 95%
+          md: '39%',          // Desktop: 70%
+          lg: '38%',          // Desktop L: 60%
+          xl: '37%',          // 4K: 50%
+          '2xl': '36%',       // Ultra-wide: 45%
+        }}
        p="md"
        radius="md"
        style={{
-          background: colors['blue-button'],
-          width: '100%',       // ⬅️ penting
+          background: colors['blue-button'],       // ⬅️ penting
          maxWidth: '100%',    // ⬅️ penting
          overflowX: 'auto'    // ⬅️ untuk mencegah overflow
        }}
@@ -269,30 +278,33 @@ function StrukturPerangkatDesaNode() {
                fontSize: '0.875rem',
                padding: '6px 12px',
                minHeight: 'auto',
-                flexShrink: 0, // 👈 PENTING: mencegah tab mengecil
+                flexShrink: 0,
              },
            }}
+            style={{ width: '100%' }} // 👈 penting
          >
            <TabsList
              style={{
                display: 'flex',
                overflowX: 'auto',
-                overflowY: 'hidden', // 👈 tambahkan ini
+                overflowY: 'hidden',
                gap: '4px',
                paddingBottom: '4px',
                flexWrap: 'nowrap',
-                WebkitOverflowScrolling: 'touch', // 👈 smooth scroll di iOS
-                scrollbarWidth: 'thin', // 👈 scrollbar tipis di Firefox
-                msOverflowStyle: '-ms-autohiding-scrollbar', // 👈 untuk IE/Edge
+                WebkitOverflowScrolling: 'touch',
+                scrollbarWidth: 'thin',
+                msOverflowStyle: '-ms-autohiding-scrollbar',
+                maxWidth: '100%',
+                scrollBehavior: 'smooth', // 👈 smooth scroll
              }}
            >
              <TabsTab
                value="zoom-out"
                onClick={handleZoomOut}
                leftSection={<IconZoomOut size={16} />}
-                style={{ flexShrink: 0 }} // 👈 pastikan tidak mengecil
+                style={{ flexShrink: 0 }}
              >
-                Zoom Out
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">Zoom Out</Text>
              </TabsTab>

              <Box
@@ -301,7 +313,6 @@ function StrukturPerangkatDesaNode() {
                px={12}
                py={6}
                style={{
-                  fontSize: 14,
                  fontWeight: 700,
                  borderRadius: '6px',
                  minWidth: 60,
@@ -310,10 +321,12 @@ function StrukturPerangkatDesaNode() {
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
-                  whiteSpace: 'nowrap', // 👈 mencegah text wrap
+                  whiteSpace: 'nowrap',
                }}
              >
-                {Math.round(scale * 100)}%
+                <Text fz={{ base: 12, sm: 13 }} lh={1} c={colors['blue-button']}>
+                  {Math.round(scale * 100)}%
+                </Text>
              </Box>

              <TabsTab
@@ -322,7 +335,7 @@ function StrukturPerangkatDesaNode() {
                leftSection={<IconZoomIn size={16} />}
                style={{ flexShrink: 0 }}
              >
-                Zoom In
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">Zoom In</Text>
              </TabsTab>

              <TabsTab
@@ -330,7 +343,7 @@ function StrukturPerangkatDesaNode() {
                onClick={resetZoom}
                style={{ flexShrink: 0 }}
              >
-                Reset
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">Reset</Text>
              </TabsTab>

              <TabsTab
@@ -345,7 +358,9 @@ function StrukturPerangkatDesaNode() {
                }
                style={{ flexShrink: 0 }}
              >
-                {isFullscreen ? 'Exit' : 'Fullscreen'}
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">
+                  {isFullscreen ? 'Exit' : 'Fullscreen'}
+                </Text>
              </TabsTab>
            </TabsList>
          </Tabs>
@@ -451,17 +466,17 @@ function NodeCard({ node, router }: any) {
            {/* Name */}
            <Text
              fw={700}
-              size="sm"
              ta="center"
              c={colors['blue-button']}
              lineClamp={2}
+              fz={{ base: 13, md: 15 }}
+              lh={1.2}
              style={{
                minHeight: 40,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                wordBreak: 'break-word',
-                lineHeight: 1.3,
              }}
            >
              {name}
@@ -469,18 +484,18 @@ function NodeCard({ node, router }: any) {

            {/* Title/Position */}
            <Text
-              size="xs"
              c="dimmed"
              ta="center"
              fw={500}
              lineClamp={2}
+              fz={{ base: 12, md: 13 }}
+              lh={1.3}
              style={{
                minHeight: 32,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                wordBreak: 'break-word',
-                lineHeight: 1.2,
              }}
            >
              {title}
@@ -496,14 +511,14 @@ function NodeCard({ node, router }: any) {
                mt={8}
                radius="md"
                onClick={() =>
-                  router.push(`/darmasaba/desa/profile/struktur-perangkat-desa/${node.data.id}`)
+                   router.push(`/darmasaba/desa/profil/struktur-perangkat-desa/${node.data.id}`)
                }
                style={{
                  height: 32,
                  fontWeight: 600,
                }}
              >
-                Lihat Detail
+                <Text fz={{ base: 12, md: 13 }} lh={1} ta="center">Lihat Detail</Text>
              </Button>
            )}
          </Stack>
--- a/src/app/darmasaba/(pages)/desa/profil/ui/lambangDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/lambangDesa.tsx
@@ -2,7 +2,7 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile'
 import colors from '@/con/colors'
-import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'
+import { Box, Center, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core'
 import { useEffect } from 'react'
 import { useProxy } from 'valtio/utils'

@@ -26,6 +26,8 @@ function LambangDesa() {
  return (
    <Box>
      <Stack align="center" gap="lg">
+        
+        {/* HEADER */}
        <Box pb="lg">
          <Center>
            <Image
@@ -36,17 +38,20 @@ function LambangDesa() {
              loading="lazy"
            />
          </Center>
-          <Text
+
+          {/* TITLE - H1 */}
+          <Title
+            order={1}
            c={colors['blue-button']}
            ta="center"
-            fw={800}
-            fz={{ base: 28, md: 40 }}
            mt="sm"
            style={{ letterSpacing: '-0.5px' }}
          >
            Lambang Desa
-          </Text>
+          </Title>
        </Box>
+
+        {/* DESKRIPSI */}
        <Paper
          p="xl"
          radius="xl"
@@ -58,15 +63,20 @@ function LambangDesa() {
            borderColor: '#e0e9ff',
          }}
        >
-            <Text
-              fz={{ base: '1.125rem', md: '1.375rem' }}
-              lh={1.8}
-              c="dark"
-              ta="justify"
-              style={{ fontWeight: 400, wordBreak: "break-word", whiteSpace: "normal", }}
-              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-            />
+          <Text
+            fz={{ base: 'sm', md: 'md' }}   // Body text mobile & desktop
+            lh={1.7}
+            c="dark"
+            ta="justify"
+            style={{
+              fontWeight: 400,
+              wordBreak: "break-word",
+              whiteSpace: "normal",
+            }}
+            dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+          />
        </Paper>
+
      </Stack>
    </Box>
  )
--- a/src/app/darmasaba/(pages)/desa/profil/ui/maskotDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/maskotDesa.tsx
@@ -2,7 +2,7 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text } from '@mantine/core';
+import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text, Title } from '@mantine/core';
 import { IconPhoto } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -21,7 +21,9 @@ function MaskotDesa() {
      <Center mih={500}>
        <Stack align="center" gap="sm">
          <Loader size="lg" color="blue" />
-          <Text c="dimmed" fz="sm">Sedang memuat data maskot desa...</Text>
+          <Text c="dimmed" fz={{ base: 'xs', md: 'sm' }}>
+            Sedang memuat data maskot desa...
+          </Text>
        </Stack>
      </Center>
    );
@@ -31,8 +33,21 @@ function MaskotDesa() {
    <Box>
      <Stack align="center" gap="xl">
        <Stack align="center" gap={10}>
-          <Image src="/pudak-icon.png" alt="Ikon Desa" w={{ base: 160, md: 240 }} loading="lazy"/>
-          <Text c={colors['blue-button']} ta="center" fw={700} fz={{ base: 28, md: 36 }}>Maskot Desa</Text>
+          <Image
+            src="/pudak-icon.png"
+            alt="Ikon Desa"
+            w={{ base: 160, md: 240 }}
+            loading="lazy"
+          />
+
+          {/* Page Title */}
+          <Title
+            order={1}
+            ta="center"
+            c={colors['blue-button']}
+          >
+            Maskot Desa
+          </Title>
        </Stack>

        <Paper
@@ -42,48 +57,60 @@ function MaskotDesa() {
          withBorder
          style={{ background: 'linear-gradient(145deg, #ffffff, #f8f9fa)' }}
        >
+          {/* Body Description */}
          <Text
            fz={{ base: 'sm', md: 'lg' }}
            lh={1.7}
            ta="justify"
            c="dark"
            dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-            style={{wordBreak: "break-word", whiteSpace: "normal"}}
+            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
          />

          <Group justify="center" gap="lg" mt="lg">
            {data.images.length > 0 ? (
              data.images.map((img, index) => (
-                  <Card
+                <Card
                  key={index}
-                    radius="lg"
-                    shadow="md"
-                    withBorder
-                    w={220}
-                    p="sm"
-                    style={{
-                      transition: 'transform 200ms ease, box-shadow 200ms ease',
-                    }}
-                    className="hover:scale-105 hover:shadow-lg"
+                  radius="lg"
+                  shadow="md"
+                  withBorder
+                  w={220}
+                  p="sm"
+                  style={{
+                    transition: 'transform 200ms ease, box-shadow 200ms ease',
+                  }}
+                  className="hover:scale-105 hover:shadow-lg"
+                >
+                  <Image
+                    src={img.image.link}
+                    alt={img.label}
+                    w="100%"
+                    h={200}
+                    fit="cover"
+                    radius="md"
+                    loading="lazy"
+                  />
+
+                  {/* Image Label */}
+                  <Text
+                    ta="center"
+                    mt="sm"
+                    fw={600}
+                    fz={{ base: 'xs', md: 'sm' }}
+                    c="dark"
                  >
-                    <Image
-                      src={img.image.link}
-                      alt={img.label}
-                      w="100%"
-                      h={200}
-                      fit="cover"
-                      radius="md"
-                      loading="lazy"
-                    />
-                    <Text ta="center" mt="sm" fw={600} fz="sm" c="dark">
-                      {img.label}
-                    </Text>
-                  </Card>
+                    {img.label}
+                  </Text>
+                </Card>
              ))
            ) : (
              <Stack align="center" gap="xs" mt="lg">
                <IconPhoto size={48} stroke={1.5} color="gray" />
-                <Text c="dimmed" fz="sm">Belum ada gambar maskot yang ditambahkan</Text>
+                
+                <Text c="dimmed" fz={{ base: 'xs', md: 'sm' }}>
+                  Belum ada gambar maskot yang ditambahkan
+                </Text>
              </Stack>
            )}
          </Group>
--- a/src/app/darmasaba/(pages)/desa/profil/ui/motoDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/motoDesa.tsx
@@ -1,35 +1,15 @@
 'use client'
-import { ActionIcon, Box, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, Box, Flex, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { IconSparkles } from '@tabler/icons-react';
 import colors from '@/con/colors';

 const dataText = [
-  {
-    id: 1,
-    title: "Santun",
-    description: "Pelayanan ramah, penuh empati, sopan, dan beretika."
-  },
-  {
-    id: 2,
-    title: "Adaptif",
-    description: "Cepat menyesuaikan diri terhadap perubahan dan selalu proaktif."
-  },
-  {
-    id: 3,
-    title: "Inovatif",
-    description: "Berani menciptakan pembaruan dan ide-ide kreatif."
-  },
-  {
-    id: 4,
-    title: "Profesional",
-    description: "Berpengetahuan luas, terampil, dan bertanggung jawab."
-  },
-  {
-    id: 5,
-    title: "Gesit",
-    description: "Cekatan, sigap, dan penuh inisiatif dalam bekerja."
-  },
+  { id: 1, title: "Santun", description: "Pelayanan ramah, penuh empati, sopan, dan beretika." },
+  { id: 2, title: "Adaptif", description: "Cepat menyesuaikan diri terhadap perubahan dan selalu proaktif." },
+  { id: 3, title: "Inovatif", description: "Berani menciptakan pembaruan dan ide-ide kreatif." },
+  { id: 4, title: "Profesional", description: "Berpengetahuan luas, terampil, dan bertanggung jawab." },
+  { id: 5, title: "Gesit", description: "Cekatan, sigap, dan penuh inisiatif dalam bekerja." },
 ];

 const letters = ["S", "I", "G", "A", "P"];
@@ -38,11 +18,14 @@ function MotoDesa() {
  return (
    <Box px={{ base: "md", md: "xl" }}>
      <Stack align="center" gap="lg">
+        {/* Page Title */}
        <Box>
-          <Text
+          <Title
+            order={1}
            ta="center"
            fw={800}
-            fz={{ base: "2rem", md: "2.8rem" }}
+            fz={{ base: 28, md: 36 }}
+            lh={{ base: 1.2, md: 1.3 }}
            style={{
              background: "linear-gradient(90deg, #0D5594FF, #094678FF)",
              WebkitBackgroundClip: "text",
@@ -50,9 +33,10 @@ function MotoDesa() {
            }}
          >
            Moto Desa Darmasaba
-          </Text>
+          </Title>
        </Box>

+        {/* Letter Icons */}
        <Flex gap={30} pb={40} pt={10} wrap="wrap" justify="center">
          {letters.map((letter, i) => (
            <motion.div
@@ -71,7 +55,7 @@ function MotoDesa() {
                  backdropFilter: "blur(6px)",
                }}
              >
-                <Text c="white" fw={800} fz="xl">
+                <Text c="white" fw={800} fz={{ base: 20, md: 24 }}>
                  {letter}
                </Text>
              </ActionIcon>
@@ -79,6 +63,7 @@ function MotoDesa() {
          ))}
        </Flex>

+        {/* Values Card */}
        <Paper
          radius="lg"
          p="xl"
@@ -90,19 +75,22 @@ function MotoDesa() {
        >
          <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
            {dataText.map((v) => (
-              <motion.div
-                key={v.id}
-                whileHover={{ scale: 1.02 }}
-                transition={{ duration: 0.2 }}
-              >
+              <motion.div key={v.id} whileHover={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
                <Stack gap={4}>
+                  {/* Section Title */}
                  <Flex align="center" gap="sm">
                    <IconSparkles size={20} color={colors['blue-button']} />
-                    <Text fw={700} fz={{ base: "lg", md: "xl" }} c={colors['blue-button']}>
+                    <Title
+                      order={3}
+                      fw={700}
+                      fz={{ base: 20, md: 24 }}
+                      c={colors['blue-button']}
+                    >
                      {v.title}
-                    </Text>
+                    </Title>
                  </Flex>
-                  <Text fz={{ base: "sm", md: "md" }} c="gray.7">
+                  {/* Body Text */}
+                  <Text fz={{ base: 14, md: 16 }} lh={{ base: 1.5, md: 1.6 }} c="gray.7">
                    {v.description}
                  </Text>
                </Stack>
@@ -111,16 +99,15 @@ function MotoDesa() {
          </SimpleGrid>
        </Paper>

+        {/* Motto Description */}
        <Text
          ta="center"
          fw={700}
-          fz={{ base: "md", md: "xl" }}
+          fz={{ base: 15, md: 20 }}
+          lh={{ base: 1.6, md: 1.8 }}
          c="blue.8"
          mt="md"
-          style={{
-            maxWidth: 720,
-            lineHeight: 1.6,
-          }}
+          style={{ maxWidth: 720 }}
        >
          &quot;Berkomitmen menghadirkan pelayanan terbaik dengan semangat{" "}
          <Text span fw={800} c="cyan.6">
--- a/src/app/darmasaba/(pages)/desa/profil/ui/profilPerbekel.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/profilPerbekel.tsx
@@ -2,44 +2,45 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Divider, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Divider, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { IconBriefcase, IconTargetArrow, IconUser, IconUsers } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';

 function ProfilPerbekel() {
-  const state = useProxy(stateProfileDesa.profilPerbekel)
+  const state = useProxy(stateProfileDesa.profilPerbekel);

  useEffect(() => {
-    state.findUnique.load("edit")
-  }, [])
+    state.findUnique.load("edit");
+  }, []);

-  const { data, loading } = state.findUnique
+  const { data, loading } = state.findUnique;

  if (loading || !data) {
    return (
      <Box py={20} px="md">
        <Skeleton h={500} radius="lg" />
      </Box>
-    )
+    );
  }

  return (
    <Box px="md">
+      {/* ===== PAGE TITLE ===== */}
      <Stack align="center" gap={0} mb={40}>
-        <Text
+        <Title
+          order={1}
          c={colors['blue-button']}
          ta="center"
-          fw="bold"
-          fz={{ base: "2rem", md: "2.8rem" }}
          style={{ letterSpacing: "0.5px" }}
        >
          Profil Perbekel
-        </Text>
+        </Title>
        <Divider w={120} size="sm" color={colors['blue-button']} mt={10} />
      </Stack>

      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl" pb={50}>
+        {/* ========== FOTO PERBEKEL ========== */}
        <Box>
          <Paper
            bg={colors['white-trans-1']}
@@ -60,6 +61,8 @@ function ProfilPerbekel() {
                }}
                loading="lazy"
              />
+
+              {/* ===== NAMA DAN JABATAN ===== */}
              <Paper
                bg={colors['blue-button']}
                px="lg"
@@ -67,22 +70,23 @@ function ProfilPerbekel() {
                className="glass3"
                py={{ base: 20, md: 50 }}
              >
-                <Text c={colors['white-1']} fz={{ base: "lg", md: "h3" }}>
+                <Title order={3} c={colors['white-1']}>
                  Perbekel Desa Darmasaba
-                </Text>
-                <Text
+                </Title>
+
+                <Title
+                  order={2}
                  c={colors['white-1']}
-                  fw="bolder"
-                  fz={{ base: "xl", md: "h2" }}
                  mt={8}
                >
                  {"I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P."}
-                </Text>
+                </Title>
              </Paper>
            </Stack>
          </Paper>
        </Box>

+        {/* ========== BIODATA & PENGALAMAN ========== */}
        <Paper
          p="xl"
          bg={colors['white-trans-1']}
@@ -92,34 +96,39 @@ function ProfilPerbekel() {
          withBorder
        >
          <Stack gap="xl">
+
+            {/* ===== BIODATA ===== */}
            <Box>
              <Stack gap={6}>
                <Stack align="center" gap={6}>
                  <IconUser size={22} />
-                  <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
+                  <Title order={3}>Biodata</Title>
                </Stack>
+
                <Text
-                  fz={{ base: "1rem", md: "1.2rem" }}
+                  fz={{ base: "sm", md: "md" }}
                  ta="justify"
-                  lh={1.6}
+                  lh={1.7}
                  dangerouslySetInnerHTML={{ __html: data.biodata }}
-                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                  style={{ wordBreak: "break-word" }}
                />
              </Stack>
            </Box>

+            {/* ===== PENGALAMAN ===== */}
            <Box>
              <Stack gap={6}>
                <Stack align="center" gap={6}>
                  <IconBriefcase size={22} />
-                  <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
+                  <Title order={3}>Pengalaman</Title>
                </Stack>
+
                <Text
-                  fz={{ base: "1rem", md: "1.2rem" }}
+                  fz={{ base: "sm", md: "md" }}
                  ta="left"
-                  lh={1.6}
+                  lh={1.7}
                  dangerouslySetInnerHTML={{ __html: data.pengalaman }}
-                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                  style={{ wordBreak: "break-word" }}
                />
              </Stack>
            </Box>
@@ -127,6 +136,7 @@ function ProfilPerbekel() {
        </Paper>
      </SimpleGrid>

+      {/* ========== ORGANISASI & PROGRAM UNGGULAN ========== */}
      <Paper
        p="xl"
        bg={colors['white-trans-1']}
@@ -136,35 +146,41 @@ function ProfilPerbekel() {
        withBorder
      >
        <Stack gap="xl">
+
+          {/* ===== PENGALAMAN ORGANISASI ===== */}
          <Box>
-            <Stack align="center" gap={6} >
+            <Stack align="center" gap={6}>
              <IconUsers size={22} />
-              <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
+              <Title order={3}>Pengalaman Organisasi</Title>
            </Stack>
+
            <Text
-              fz={{ base: "1rem", md: "1.2rem" }}
+              fz={{ base: "sm", md: "md" }}
              ta="justify"
-              lh={1.6}
+              lh={1.7}
              dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }}
-              style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+              style={{ wordBreak: "break-word" }}
            />
          </Box>

+          {/* ===== PROGRAM UNGGULAN ===== */}
          <Box>
            <Stack align="center" gap={6} mb={6}>
              <IconTargetArrow size={22} />
-              <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Program Kerja Unggulan</Text>
+              <Title order={3}>Program Kerja Unggulan</Title>
            </Stack>
+
            <Box px={10}>
              <Text
-                fz={{ base: "1rem", md: "1.2rem" }}
+                fz={{ base: "sm", md: "md" }}
                ta="justify"
-                lh={1.6}
+                lh={1.7}
                dangerouslySetInnerHTML={{ __html: data.programUnggulan }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{ wordBreak: "break-word" }}
              />
            </Box>
          </Box>
+
        </Stack>
      </Paper>
    </Box>
--- a/src/app/darmasaba/(pages)/desa/profil/ui/sejarahDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/sejarahDesa.tsx
@@ -2,7 +2,7 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';

@@ -26,29 +26,32 @@ function SejarahDesa() {
  return (
    <Box>
      <Stack align="center" gap="xl">
+        {/* HEADER ICON + TITLE */}
        <Stack align="center" gap="sm">
          <Center>
            <Image
              src="/darmasaba-icon.png"
              alt="Ikon Desa Darmasaba"
-              w={{ base: 180, md: 260 }}
+              w={{ base: 160, md: 240 }}
              radius="md"
              style={{ filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.15))' }}
              loading="lazy"
            />
          </Center>
+
          <Center>
-            <Text
+            <Title
+              order={1}
              c={colors['blue-button']}
              ta="center"
-              fw={700}
-              fz={{ base: '2rem', md: '2.8rem' }}
              style={{ letterSpacing: '-0.5px' }}
            >
              Sejarah Desa
-            </Text>
+            </Title>
          </Center>
        </Stack>
+
+        {/* CONTENT */}
        <Paper
          p="xl"
          radius="lg"
@@ -61,10 +64,14 @@ function SejarahDesa() {
        >
          <Stack gap="md">
            <Text
-              fz={{ base: 'md', md: 'lg' }}
-              lh={1.8}
+              fz={{ base: 'sm', md: 'md' }}
+              lh={1.75}
              ta="justify"
-              style={{ color: '#2a2a2a', wordBreak: "break-word", whiteSpace: "normal" }}
+              c="dark.7"
+              style={{
+                wordBreak: 'break-word',
+                whiteSpace: 'normal',
+              }}
              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
            />
          </Stack>
--- a/src/app/darmasaba/(pages)/desa/profil/ui/semuaPerbekel.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/semuaPerbekel.tsx
@@ -28,8 +28,10 @@ function SemuaPerbekel() {
      <Center py="xl">
        <Stack align="center" gap="sm">
          <IconUser size={48} stroke={1.5} />
-          <Title fw="bold" order={2}>Belum ada data Perbekel</Title>
-          <Text c="dimmed" fz="sm" ta="center">Data mantan Perbekel akan muncul di sini ketika sudah tersedia</Text>
+          <Title order={2} ta="center">Belum ada data Perbekel</Title>
+          <Text c="dimmed" fz={{ base: 'xs', md: 'sm' }} lh={{ base: 1.4, md: 1.6 }} ta="center">
+            Data mantan Perbekel akan muncul di sini ketika sudah tersedia
+          </Text>
        </Stack>
      </Center>
    );
@@ -38,17 +40,20 @@ function SemuaPerbekel() {
  return (
    <Box>
      <Stack align="center" gap="lg">
-        <Box>
-          <Text
-            ta="center"
-            fw={900}
-            fz={{ base: "2rem", md: "2.5rem" }}
-            variant="gradient"
-            gradient={{ from: "blue", to: "cyan", deg: 45 }}
-          >
-            Perbekel Dari Masa ke Masa
-          </Text>
-        </Box>
+        <Title
+          order={1}
+          ta="center"
+          style={{
+            background: 'linear-gradient(45deg, blue, cyan)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+          fz={{ base: 28, md: 36 }}
+          lh={{ base: 1.2, md: 1.3 }}
+          fw={900}
+        >
+          Perbekel Dari Masa ke Masa
+        </Title>

        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" w="100%">
          {data.map((v: any, k: number) => (
@@ -59,9 +64,7 @@ function SemuaPerbekel() {
              withBorder
              p="lg"
              bg="white"
-              style={{
-                transition: "all 250ms ease",
-              }}
+              style={{ transition: "all 250ms ease" }}
              className="hover:shadow-xl hover:scale-[1.02]"
            >
              <Stack gap="md" align="center">
@@ -77,17 +80,17 @@ function SemuaPerbekel() {
                </Box>

                <Stack gap={4} align="center">
-                    <Text fw={700} fz="lg" ta="center">
-                      {v.nama}
-                    </Text>
+                  <Title order={3} fz={{ base: 18, md: 20 }} ta="center" fw={700}>
+                    {v.nama}
+                  </Title>

-                  <Text c="dimmed" fz="sm" ta="center">
-                      {v.daerah}
-                    </Text>
+                  <Text c="dimmed" fz={{ base: 12, md: 14 }} lh={{ base: 1.4, md: 1.6 }} ta="center">
+                    {v.daerah}
+                  </Text>

-                  <Text c="blue" fw={600} fz="sm" ta="center">
-                      {v.periode}
-                    </Text>
+                  <Text c="blue" fw={600} fz={{ base: 12, md: 14 }} lh={{ base: 1.4, md: 1.6 }} ta="center">
+                    {v.periode}
+                  </Text>
                </Stack>
              </Stack>
            </Paper>
--- a/src/app/darmasaba/(pages)/desa/profil/ui/visimisiDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/visimisiDesa.tsx
@@ -2,7 +2,7 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';

@@ -34,60 +34,57 @@ function VisiMisiDesa() {
          loading="lazy"
        />

+        {/* VISI */}
        <Paper
          p="xl"
          radius="lg"
          shadow="md"
          withBorder
          w="100%"
-          style={{
-            background: 'linear-gradient(145deg, #ffffff, #f5f7fa)',
-          }}
+          style={{ background: 'linear-gradient(145deg, #ffffff, #f5f7fa)' }}
        >
-          <Text
+          <Title
+            order={1}
            c={colors['blue-button']}
            ta="center"
-            fw={700}
-            fz={{ base: '2rem', md: '2.5rem' }}
            mb="md"
          >
            Visi Desa
-          </Text>
+          </Title>
+
          <Text
-            fz={{ base: '1.125rem', md: '1.375rem' }}
+            fz={{ base: 'sm', md: 'md' }}   // body text responsive
+            lh={1.7}
            ta="center"
-            fw={500}
-            lh={1.6}
            dangerouslySetInnerHTML={{ __html: data.visi }}
-            style={{wordBreak: "break-word", whiteSpace: "normal"}}
+            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
          />
        </Paper>

+        {/* MISI */}
        <Paper
          p="xl"
          radius="lg"
          shadow="md"
          withBorder
          w="100%"
-          style={{
-            background: 'linear-gradient(145deg, #ffffff, #f5f7fa)',
-          }}
+          style={{ background: 'linear-gradient(145deg, #ffffff, #f5f7fa)' }}
        >
-          <Text
+          <Title
+            order={1}
            c={colors['blue-button']}
            ta="center"
-            fw={700}
-            fz={{ base: '2rem', md: '2.5rem' }}
            mb="md"
          >
            Misi Desa
-          </Text>
+          </Title>
+
          <Text
-            fz={{ base: '1.125rem', md: '1.375rem' }}
-            fw={500}
-            lh={1.6}
+            fz={{ base: 'sm', md: 'md' }}   // body text responsive
+            lh={1.7}
+            ta="left"
            dangerouslySetInnerHTML={{ __html: data.misi }}
-            style={{wordBreak: "break-word", whiteSpace: "normal"}}
+            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
          />
        </Paper>
      </Stack>