Fix konsisten font, menu landing page & PPID

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

@@ -5,7 +5,20 @@ import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
 import APBDesProgress from '@/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress'
 import { transformAPBDesData } from '@/app/darmasaba/(tambahan)/apbdes/lib/types'
 import colors from '@/con/colors'
-import { ActionIcon, BackgroundImage, Box, Button, Center, Group, Loader, Select, SimpleGrid, Stack, Text } from '@mantine/core'
+import {
+  ActionIcon,
+  BackgroundImage,
+  Box,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Select,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core'
 import { IconDownload } from '@tabler/icons-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
@@ -38,17 +51,15 @@ function Apbdes() {
   const dataAPBDes = state.findMany.data || []
 
   const years = Array.from(new Set(dataAPBDes.map((item: any) => item.tahun)))
-    .sort((a, b) => b - a) // urutkan descending
+    .sort((a, b) => b - a)
     .map(year => ({ value: year.toString(), label: `Tahun ${year}` }))
 
-  // Pilih tahun pertama sebagai default jika belum ada yang dipilih
   useEffect(() => {
     if (years.length > 0 && !selectedYear) {
       setSelectedYear(years[0].value)
     }
   }, [years, selectedYear])
 
-  // Transform and filter data based on selected year
   const currentApbdes = dataAPBDes.length > 0
     ? transformAPBDesData(dataAPBDes.find(item => item?.tahun?.toString() === selectedYear) || dataAPBDes[0])
     : null
@@ -57,17 +68,31 @@ function Apbdes() {
 
   return (
     <Stack p="sm" gap="xl" bg={colors.Bg}>
-      <Box mt={"xl"}>
+      {/* 📌 HEADING */}
+      <Box mt="xl">
         <Stack gap="sm">
-          <Text c={colors["blue-button"]} ta={"center"} fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>
+          <Title
+            order={1}
+            ta="center"
+            c={colors['blue-button']}
+            fz={{ base: '2rem', md: '3.6rem' }}
+            lh={{ base: 1.2, md: 1.1 }}
+          >
             {textHeading.title}
-          </Text>
-          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
+          </Title>
+
+          <Text
+            ta="center"
+            fz={{ base: '1rem', md: '1.25rem' }}
+            lh={{ base: 1.5, md: 1.55 }}
+            c="black"
+          >
             {textHeading.des}
           </Text>
         </Stack>
       </Box>
 
+      {/* Button Lihat Semua */}
       <Group justify="center">
         <Button
           component={Link}
@@ -81,32 +106,39 @@ function Apbdes() {
         </Button>
       </Group>
 
-      {/* 🔥 COMBOBOX UNTUK PILIH TAHUN */}
+      {/* COMBOBOX */}
       <Box px={{ base: 'md', md: 100 }}>
         <Select
-          label="Pilih Tahun APBDes"
+          label={<Text fw={600} fz="sm">Pilih Tahun APBDes</Text>}
           placeholder="Pilih tahun"
           value={selectedYear}
           onChange={setSelectedYear}
           data={years}
-          w={{ base: '100%', sm: 200 }}
+          w={{ base: '100%', sm: 220 }}
           searchable
           clearable
           nothingFoundMessage="Tidak ada tahun tersedia"
         />
       </Box>
 
+      {/* Progress */}
       {currentApbdes ? (
-        <>
-          <APBDesProgress apbdesData={currentApbdes} />
-        </>
+        <APBDesProgress apbdesData={currentApbdes} />
       ) : (
         <Box px={{ base: 'md', md: 100 }} py="md">
-          <Text c="dimmed">Tidak ada data APBDes untuk tahun yang dipilih.</Text>
+          <Text fz="sm" c="dimmed" ta="center" lh={1.5}>
+            Tidak ada data APBDes untuk tahun yang dipilih.
+          </Text>
         </Box>
       )}
 
-      <SimpleGrid mx={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 3 }} spacing="lg" pb={"xl"}>
+      {/* GRID */}
+      <SimpleGrid
+        mx={{ base: 'md', md: 100 }}
+        cols={{ base: 1, sm: 3 }}
+        spacing="lg"
+        pb="xl"
+      >
         {loading ? (
           <Center mih={200}>
             <Loader size="lg" color="blue" />
@@ -114,10 +146,10 @@ function Apbdes() {
         ) : data.length === 0 ? (
           <Center mih={200}>
             <Stack align="center" gap="xs">
-              <Text fz="lg" c="dimmed">
+              <Text fz="lg" c="dimmed" lh={1.4}>
                 Belum ada data APBDes yang tersedia
               </Text>
-              <Text fz="sm" c="dimmed">
+              <Text fz="sm" c="dimmed" lh={1.4}>
                 Data akan ditampilkan di sini setelah diunggah
               </Text>
             </Stack>
@@ -133,25 +165,30 @@ function Apbdes() {
               style={{ overflow: 'hidden' }}
             >
               <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
-              <Stack gap={"xs"} justify="space-between" h="100%" p="xl" pos="relative">
+
+              <Stack gap="xs" justify="space-between" h="100%" p="xl" pos="relative">
                 <Text
                   c="white"
                   fw={600}
-                  fz="lg"
+                  fz={{ base: 'lg', md: 'xl' }}
                   ta="center"
+                  lh={1.35}
                   lineClamp={2}
                 >
                   {v.name}
                 </Text>
+
                 <Text
-                  fw="bold"
+                  fw={700}
                   c="white"
-                  fz="3rem"
+                  fz={{ base: '2.4rem', md: '3.2rem' }}
                   ta="center"
+                  lh={1}
                   style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
                 >
                   {v.jumlah}
                 </Text>
+
                 <Center>
                   <ActionIcon
                     component={Link}
@@ -163,29 +200,12 @@ function Apbdes() {
                   >
                     <IconDownload size={20} color="white" />
                   </ActionIcon>
-
                 </Center>
-                {/* <Group justify="center">
-                  <ActionIcon
-                    component={Link}
-                    href={v.file?.link || ''}
-                    radius="xl"
-                    size="lg"
-                    variant="gradient"
-                    gradient={{ from: '#1C6EA4', to: '#1C6EA4' }}
-                  >
-                    <Group align="center" gap="xs" px="md" py={6}>
-                      <IconDownload size={25} color="white" />
-                    </Group>
-                  </ActionIcon>
-                </Group> */}
               </Stack>
             </BackgroundImage>
           ))
         )}
       </SimpleGrid>
-
-
     </Stack>
   )
 }