QC Kak Inno FrontEnd Done

QC Kak Ayu FrontEnd Done QC Keano 31 Okt
2025-11-03 10:28:03 +08:00
parent 0befe6a3f2
commit 7b4bb1e58e
29 changed files with 165 additions and 171 deletions
--- a/src/app/darmasaba/(pages)/desa/profile/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/page.tsx
@@ -26,7 +26,7 @@ function Page() {
            </Text>
          </Stack>
        </Container>
-        <Box px={{ base: "md", md: 100 }}>
+        <Stack px={{ base: "md", md: 100 }} gap={"xl"}>
          <ProfileDesa />
          <SejarahDesa />
          <VisimisiDesa />
@@ -35,7 +35,7 @@ function Page() {
          <ProfilPerbekel />
          <MotoDesa />
          <SemuaPerbekel />
-        </Box>
+        </Stack>
      </Stack>
      {/* Tombol Scroll ke Atas */}
      <ScrollToTopButton />
--- a/src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx
@@ -24,7 +24,7 @@ function LambangDesa() {
  }

  return (
-    <Box pb={90}>
+    <Box>
      <Stack align="center" gap="lg">
        <Box pb="lg">
          <Center>
--- a/src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx
@@ -28,7 +28,7 @@ function MaskotDesa() {
  }

  return (
-    <Box pb={80}>
+    <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"/>
--- a/src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx
@@ -36,7 +36,7 @@ const letters = ["S", "I", "G", "A", "P"];

 function MotoDesa() {
  return (
-    <Box pb={80} px={{ base: "md", md: "xl" }}>
+    <Box px={{ base: "md", md: "xl" }}>
      <Stack align="center" gap="lg">
        <Box>
          <Text
--- a/src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx
@@ -25,7 +25,7 @@ function ProfilPerbekel() {
  }

  return (
-    <Box pb={80} px="md">
+    <Box px="md">
      <Stack align="center" gap={0} mb={40}>
        <Text
          c={colors['blue-button']}
@@ -116,7 +116,7 @@ function ProfilPerbekel() {
                </Stack>
                <Text
                  fz={{ base: "1rem", md: "1.2rem" }}
-                  ta="justify"
+                  ta="left"
                  lh={1.6}
                  dangerouslySetInnerHTML={{ __html: data.pengalaman }}
                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
--- a/src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx
@@ -3,7 +3,7 @@ import { Box, Center, Paper } from '@mantine/core';

 function ProfileDesa() {
  return (
-    <Box pb={90}>
+    <Box>
      <Center>
          <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
            <Center>
--- a/src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx
@@ -24,7 +24,7 @@ function SejarahDesa() {
  }

  return (
-    <Box py="xl">
+    <Box>
      <Stack align="center" gap="xl">
        <Stack align="center" gap="sm">
          <Center>
--- a/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx
@@ -36,7 +36,7 @@ function SemuaPerbekel() {
  }

  return (
-    <Box pb={80}>
+    <Box>
      <Stack align="center" gap="lg">
        <Box>
          <Text
--- a/src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx
@@ -24,7 +24,7 @@ function VisiMisiDesa() {
  }

  return (
-    <Box py="xl">
+    <Box>
      <Stack align="center" gap="xl">
        <Image
          src="/darmasaba-icon.png"
--- a/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx
@@ -1,27 +1,26 @@
 'use client'
 import {
  Box,
+  Button,
  Card,
  Center,
  Group,
  Pagination,
+  Paper,
  Skeleton,
  Stack,
  Text,
-  Title,
-  Tooltip,
-  Button,
-  Paper,
+  Title
 } from '@mantine/core';
-import { IconSearch, IconArrowRight } from '@tabler/icons-react';
+import { IconArrowRight, IconSearch } from '@tabler/icons-react';

-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
+import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
 import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas';
 import { useShallowEffect } from '@mantine/hooks';
-import { useState } from 'react';
-import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
 import { IconArrowLeft } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';

 function PencegahanKriminalitas() {
  const [search, setSearch] = useState("");
@@ -96,7 +95,6 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                />
                <Group justify="flex-end" mt="sm">
-                  <Tooltip label="Lihat detail program" withArrow>
                    <Button
                      size="sm"
                      variant="gradient"
@@ -106,7 +104,6 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                    >
                      Lihat Detail
                    </Button>
-                  </Tooltip>
                </Group>
              </Stack>
            </Card>
--- a/src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx
@@ -57,7 +57,7 @@ function Page() {
          <Title order={1} fw={700} ta="center" c={colors['blue-button']}>
            Statistik Data Pendidikan
          </Title>
-          <Text c="dimmed" size="sm" ta="center">
+          <Text fz="md" ta="center">
            Visualisasi jumlah pendidikan berdasarkan kategori yang tersedia
          </Text>
        </Stack>
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx
@@ -55,7 +55,7 @@ function Page({ params }: PageProps) {
        <Group justify="space-between" align="center" mb="md">
          <Group gap="sm">
            <IconChalkboard size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
+            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Lembaga Pendidikan</Title>
          </Group>
          <TextInput
           placeholder='pencarian'
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/pengajar/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/pengajar/page.tsx
@@ -55,7 +55,7 @@ function Page({ params }: PageProps) {
        <Group justify="space-between" align="center" mb="md">
          <Group gap="sm">
            <IconMicroscope size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl">Daftar Pengajar</Title>
+            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Pengajar</Title>
          </Group>
          <TextInput
            placeholder='pencarian'
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/siswa/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/siswa/page.tsx
@@ -55,7 +55,7 @@ function Page({ params }: PageProps) {
        <Group justify="space-between" align="center" mb="md">
          <Group gap="sm">
            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl">Daftar Siswa</Title>
+            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Siswa</Title>
          </Group>
          <TextInput
            placeholder='pencarian'
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/_lib/layoutTabs.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/_lib/layoutTabs.tsx
@@ -96,23 +96,21 @@
 'use client'
 import colors from '@/con/colors';
 // pastikan path benar
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import {
-  ActionIcon,
  Box,
  Button,
  Container,
  Group,
+  Loader,
  Paper,
  Stack,
-  Text,
-  VisuallyHidden,
-  Loader,
+  Text
 } from '@mantine/core';
-import { IconArrowLeft } from '@tabler/icons-react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useSnapshot } from 'valtio';
 import React, { useEffect, useState } from 'react';
-import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import { useSnapshot } from 'valtio';
+import BackButton from '../../../desa/layanan/_com/BackButto';

 type LayoutSekolahProps = {
  title?: string;
@@ -153,10 +151,7 @@ export default function LayoutSekolah({
      <Container size="xl" py={{ base: 'md', md: 'xl' }}>
        <Stack gap="lg">
          {/* Back Button */}
-          <ActionIcon onClick={() => window.history.back()} variant="light" radius="md" size="lg">
-            <IconArrowLeft size={20} />
-            <VisuallyHidden>Kembali</VisuallyHidden>
-          </ActionIcon>
+          <BackButton/>

          {/* Search & Filter */}
          <Paper radius="lg" p="xl" withBorder>
@@ -185,8 +180,8 @@ export default function LayoutSekolah({
                        radius="xl"
                        size="sm"
                        variant={aktif ? 'filled' : 'light'}
-                        bg={colors['blue-button']}
-                        c={aktif ? colors['white-1'] : 'gray'}
+                        bg={aktif? colors['blue-button'] : '#BDCADE'}
+                        c={aktif ? colors['white-1'] : colors['blue-button']}
                      >
                        {k}
                      </Button>
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx
@@ -47,7 +47,7 @@ function Page() {
        <Group justify="space-between" align="center" mb="md">
          <Group gap="sm">
            <IconChalkboard size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
+            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Lembaga Pendidikan</Title>
          </Group>
          <TextInput
            placeholder='pencarian'
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/pengajar/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/pengajar/page.tsx
@@ -46,7 +46,7 @@ function Page() {
        <Group justify="space-between" align="center" mb="md">
          <Group gap="sm">
            <IconMicroscope size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl">Daftar Pengajar</Title>
+            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Pengajar</Title>
          </Group>
          <TextInput
            placeholder='pencarian'
--- a/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/siswa/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/siswa/page.tsx
@@ -47,7 +47,7 @@ function Page() {
        <Group justify="space-between" align="center" mb="md">
          <Group gap="sm">
            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl">Daftar Siswa</Title>
+            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Siswa</Title>
          </Group>
          <TextInput
            placeholder='pencarian'
--- a/src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx
@@ -37,13 +37,15 @@ function Page() {

      <Box px={{ base: 'md', md: 100 }} pb={50}>
        <Box mb="xl">
-          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} mb="sm">
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']}>
            Program Pendidikan Anak
          </Title>
+          <Box my={"sm"}>
+            <Divider size="sm" color={colors['blue-button']} mx="auto" maw={550} />
+          </Box>
          <Text ta="center" fz="lg" c="black" mb="lg" maw={800} mx="auto">
            Desa Darmasaba berkomitmen mencetak generasi muda yang cerdas, berkarakter, dan siap bersaing melalui program pendidikan yang inklusif dan berkelanjutan.
          </Text>
-          <Divider size="sm" color={colors['blue-button']} mx="auto" maw={120} />
        </Box>

        <SimpleGrid
@@ -66,7 +68,7 @@ function Page() {
                </Title>
              </Group>
              <Tooltip label="Detail tujuan program pendidikan anak" position="top-start" withArrow>
-                <Text fz="lg" lh={1.6} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateTujuan.findById.data?.deskripsi }} />
+                <Text fz="lg" lh={1.6} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateTujuan.findById.data?.deskripsi }} />
              </Tooltip>
            </Stack>
          </Paper>
@@ -87,7 +89,7 @@ function Page() {
                </Title>
              </Group>
              <Tooltip label="Detail program unggulan yang sedang berjalan" position="top-start" withArrow>
-                <Text fz="lg" lh={1.6} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateUnggulan.findById.data?.deskripsi }} />
+                <Text fz="lg" lh={1.6} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateUnggulan.findById.data?.deskripsi }} />
              </Tooltip>
            </Stack>
          </Paper>
--- a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/page.tsx
+++ b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/page.tsx
@@ -7,6 +7,7 @@ import {
  Box,
  Button,
  Center,
+  Group,
  Image,
  Pagination,
  Paper,
@@ -178,12 +179,18 @@ function Page() {
          <Paper p="lg" radius="xl" shadow="xs" withBorder>
            <Stack gap="xs">
              <Text fz="lg" fw="bold" c={colors["blue-button"]}>Kontak PPID</Text>
-              <Text fz="sm" c="dimmed" lh={1.6}>
-                <IconMail size={16} style={{ marginRight: 6 }} /> Email: <Text span fw="500">ppid@desadarmasaba.id</Text>
-              </Text>
-              <Text fz="sm" c="dimmed" lh={1.6}>
-                <IconBrandWhatsapp size={16} style={{ marginRight: 6 }} /> WhatsApp: <Text span fw="500">081-xxx-xxx-xxx</Text>
-              </Text>
+              <Group>
+                <IconMail color='gray' size={16} style={{ marginRight: 6 }} />
+                <Text c={"dimmed"} fz="sm" lh={1.6}>
+                  Email: <Text c={"dimmed"} span fw="500">ppid@desadarmasaba.id</Text>
+                </Text>
+              </Group>
+              <Group>
+                <IconBrandWhatsapp color='gray' size={16} style={{ marginRight: 6 }} />
+                <Text c={"dimmed"} fz="sm" lh={1.6}>
+                  WhatsApp: <Text c={"dimmed"} span fw="500">081-xxx-xxx-xxx</Text>
+                </Text>
+              </Group>
            </Stack>
          </Paper>
        </Stack>
--- a/src/app/darmasaba/(tambahan)/apbdes/page.tsx
+++ b/src/app/darmasaba/(tambahan)/apbdes/page.tsx
@@ -63,7 +63,7 @@ function Page() {
        <SimpleGrid px={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
          {data.map((v: any, k: number) => (
            <BackgroundImage key={k} src={v.image?.link || ''} h={360} radius="xl" pos="relative">
-              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
+              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 27 }} />
              <Stack justify="space-between" h="100%" p="lg" pos="relative">
                <Box>
                  <Text fz="lg" fw={600} c="white" ta="center">
--- a/src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx
+++ b/src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx
@@ -1,10 +1,10 @@
 'use client'
-import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title, Tooltip } from '@mantine/core';
-import { Prisma } from '@prisma/client';
-import { useEffect, useState } from 'react';
-import { IconMoodSad } from '@tabler/icons-react';
-import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
+import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { Prisma } from '@prisma/client';
+import { IconMoodSad } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto';

 function Page() {
  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[]>([]);
@@ -114,11 +114,9 @@ function Page() {
                    />
                  </Box>
                  <Stack gap="xs" align="center" style={{ width: '100%' }}>
-                    <Tooltip label={item.name} position="top" withArrow>
                      <Title order={4} ta="center" c="dark" fw={600} lineClamp={2} style={{ minHeight: '3rem' }}>
                        {item.name}
                      </Title>
-                    </Tooltip>
                    <Text
                      ta="center"
                      fw={700}
--- a/src/app/darmasaba/_com/main-page/apbdes/index.tsx
+++ b/src/app/darmasaba/_com/main-page/apbdes/index.tsx
@@ -35,7 +35,7 @@ function Apbdes() {

  return (
    <Stack p="sm" gap="xl" bg={colors.Bg}>
-      <Box>
+      <Box mt={"xl"}>
        <Stack gap="sm">
          <Text c={colors["blue-button"]} ta={"center"} fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>
            {textHeading.title}
@@ -72,12 +72,7 @@ function Apbdes() {
              pos="relative"
              style={{ overflow: 'hidden' }}
            >
-              <Box
-                pos="absolute"
-                inset={0}
-                bg="rgba(0,0,0,0.55)"
-                style={{ backdropFilter: 'blur(4px)' }}
-              />
+               <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
              <Stack justify="space-between" h="100%" p="xl" pos="relative">
                <Text
                  c="white"
@@ -117,7 +112,7 @@ function Apbdes() {
        )}
      </SimpleGrid>

-      <Group justify="center" pb={10}>
+      <Group justify="center" pb={"xl"}>
        <Button
          component={Link}
          href="/darmasaba/apbdes"
--- a/src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
+++ b/src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
@@ -29,7 +29,7 @@ function DesaAntiKorupsi() {

  const data = (state.desaAntikorupsi.findMany.data || []).slice(0, 6);
  return (
-    <Stack gap={"0"} bg={colors.Bg} p={"sm"}>
+    <Stack gap={"0"} bg={colors.Bg} p={"sm"} my={"xs"}>
      <Container w={{ base: "100%", md: "80%" }} p={"md"} >
        <Center>
          <Text fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>
--- a/src/app/darmasaba/_com/main-page/kepuasan/index.tsx
+++ b/src/app/darmasaba/_com/main-page/kepuasan/index.tsx
@@ -153,7 +153,7 @@ function Kepuasan() {

  if (data.length === 0) {
    return (
-      <Stack p="sm">
+      <Stack p="sm" my={"xs"}>
        <Container w={{ base: "100%", md: "80%" }} p={"sm"}>
          <Center>
            <Text
@@ -421,7 +421,7 @@ function Kepuasan() {
    );
  }
  return (
-    <Stack p={"sm"}>
+    <Stack p={"sm"} my={"xs"}>
      <Container size="lg" px="sm">
        <Center>
          <Text
--- a/src/app/darmasaba/_com/main-page/layanan/index.tsx
+++ b/src/app/darmasaba/_com/main-page/layanan/index.tsx
@@ -87,7 +87,7 @@ function Slider() {
     }}>
       <Box
         style={{
-           borderRadius: 16,
+           borderRadius: 8,
           zIndex: 0,
         }}
         pos={"absolute"}
--- a/src/app/darmasaba/_com/main-page/prestasi/index.tsx
+++ b/src/app/darmasaba/_com/main-page/prestasi/index.tsx
@@ -3,11 +3,10 @@
 import prestasiState from "@/app/admin/(dashboard)/_state/landing-page/prestasi-desa";
 import colors from "@/con/colors";
 import { BackgroundImage, Box, Button, Center, Container, Group, Loader, SimpleGrid, Stack, Text } from "@mantine/core";
-import { useProxy } from "valtio/utils";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { IconTrophy } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useProxy } from "valtio/utils";

 function Prestasi() {
  const state = useProxy(prestasiState.prestasiDesa);
@@ -33,12 +32,9 @@ function Prestasi() {
    <Stack p="sm" bg="linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)">
      <Container w={{ base: "100%", md: "80%" }} p="xl">
        <Stack align="center" gap="sm">
-          <Group gap="xs">
-            <IconTrophy size={36} color={colors["blue-button"]} />
            <Text c={colors["blue-button"]} ta="center" fz={{ base: "2rem", md: "3.4rem" }} fw={700}>
              Prestasi Desa
            </Text>
-          </Group>
          <Text fz={{ base: "1rem", md: "1.3rem" }} ta="center" c="dimmed" maw={700}>
            Kami bangga dengan pencapaian desa hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.
          </Text>
@@ -63,14 +59,13 @@ function Prestasi() {
        ) : data.length === 0 ? (
          <Center mih={200}>
            <Stack align="center" gap="xs">
-              <IconTrophy size={48} color="gray" />
              <Text fz="1.2rem" fw={500} c="dimmed">
                Belum ada prestasi yang ditampilkan
              </Text>
            </Stack>
          </Center>
        ) : (
-          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
+          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mb={"xl"}>
            {data.map((v, k) => (
              <BackgroundImage
                key={k}
@@ -82,7 +77,7 @@ function Prestasi() {
                  pos="absolute"
                  inset={0}
                  bg="linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%)"
-                  style={{ borderRadius: "1rem" }}
+                  style={{ borderRadius: 27 }}
                />
                <Stack justify="space-between" h="100%" pos="relative" p="lg">
                  <Box>
--- a/src/app/darmasaba/_com/main-page/sdgs/index.tsx
+++ b/src/app/darmasaba/_com/main-page/sdgs/index.tsx
@@ -1,11 +1,12 @@
 'use client'
-import { useEffect, useState } from "react"
-import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, Title, useMantineTheme, Tooltip } from "@mantine/core"
+import colors from "@/con/colors"
+import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, Title, useMantineTheme } from "@mantine/core"
 import { useMediaQuery } from "@mantine/hooks"
 import { Prisma } from "@prisma/client"
-import Link from "next/link"
 import { IconMoodSad } from "@tabler/icons-react"
-import colors from "@/con/colors"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion";

 export default function SDGS() {
  const theme = useMantineTheme()
@@ -25,8 +26,8 @@ export default function SDGS() {
          setSdgsDesa([])
          return
        }
-        const top3Sdgs = [...data].sort((a, b) => parseInt(b.jumlah) - parseInt(a.jumlah)).slice(0, 3)
-        setSdgsDesa(top3Sdgs)
+        const top4Sdgs = [...data].sort((a, b) => parseInt(b.jumlah) - parseInt(a.jumlah)).slice(0, 4)
+        setSdgsDesa(top4Sdgs)
      } catch {
        setSdgsDesa([])
      }
@@ -35,7 +36,7 @@ export default function SDGS() {
  }, [])

  return (
-    <Stack p="sm">
+    <Stack p="sm" my={"xs"}>
      <Container w={{ base: "100%", md: "80%" }} p="xl">
        <Center>
          <Title
@@ -52,63 +53,56 @@ export default function SDGS() {
        </Text>

        <Box py="lg">
-          <Paper
-            p={{ base: "md", md: "xl" }}
-            radius="2xl"
-            withBorder
-            shadow="lg"
-            style={{
-              background: "linear-gradient(145deg, #FFFFFF, #F9FAFB)",
-              border: "1px solid rgba(0,0,0,0.06)",
-            }}
-          >
-            {sdgsDesa && sdgsDesa.length > 0 ? (
-              <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="xl" verticalSpacing="xl">
+          {sdgsDesa && sdgsDesa.length > 0 ? (
+            <SimpleGrid cols={{ base: 1, sm: 4 }} spacing="xl" verticalSpacing="xl" pb={30}>
              {sdgsDesa.map((item) => (
-                <Paper
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
                  key={item.id}
-                  p="lg"
-                  radius="xl"
-                  shadow="sm"
-                  withBorder
-                  style={{
-                    background: "linear-gradient(180deg, #FFFFFF, #F6F8FA)",
-                    border: "1px solid rgba(0,0,0,0.05)",
-                    transition: "all 0.3s ease",
-                    height: "100%", // biar tinggi antar card konsisten
-                    display: "flex",
-                    flexDirection: "column",
-                  }}
                >
-                  <Center mb="lg">
-                    <Box
-                      p="md"
-                      style={{
-                        background: "rgba(240, 249, 255, 0.8)",
-                        backdropFilter: "blur(6px)",
-                        width: mobile ? 140 : 160,
-                        height: mobile ? 140 : 160,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        borderRadius: "1rem",
-                        boxShadow: "0 6px 16px rgba(0,0,0,0.06)",
-                      }}
-                    >
-                      <Image
-                        src={item.image?.link ? item.image.link : "/placeholder-sdgs.png"}
-                        alt={item.name}
-                        w={mobile ? 90 : 110}
-                        h={mobile ? 90 : 110}
-                        fit="contain"
-                        loading="lazy"
-                      />
-                    </Box>
-                  </Center>
-            
-                  {/* Stack isi teks & angka */}
-                  <Stack justify="space-between" align="center" gap="xs" h="100%">
-                    <Tooltip label="Nama tujuan SDGs Desa" position="top" withArrow>
+                  <Paper
+                    p="lg"
+                    radius="xl"
+                    shadow="sm"
+                    withBorder
+                    style={{
+                      background: "linear-gradient(180deg, #FFFFFF, #F6F8FA)",
+                      border: "1px solid rgba(0,0,0,0.05)",
+                      transition: "all 0.3s ease",
+                      height: "100%", // biar tinggi antar card konsisten
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <Center mb="lg">
+                      <Box
+                        p="md"
+                        style={{
+                          background: "rgba(240, 249, 255, 0.8)",
+                          backdropFilter: "blur(6px)",
+                          width: mobile ? 140 : 160,
+                          height: mobile ? 140 : 160,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "1rem",
+                          boxShadow: "0 6px 16px rgba(0,0,0,0.06)",
+                        }}
+                      >
+                        <Image
+                          src={item.image?.link ? item.image.link : "/placeholder-sdgs.png"}
+                          alt={item.name}
+                          w={mobile ? 90 : 110}
+                          h={mobile ? 90 : 110}
+                          fit="contain"
+                          loading="lazy"
+                        />
+                      </Box>
+                    </Center>
+
+                    {/* Stack isi teks & angka */}
+                    <Stack justify="space-between" align="center" gap="xs" h="100%">
                      <Text
                        ta="center"
                        fz={{ base: "lg", md: "xl" }}
@@ -118,34 +112,33 @@ export default function SDGS() {
                      >
                        {item.name}
                      </Text>
-                    </Tooltip>
-            
-                    <Title
-                      order={2}
-                      ta="center"
-                      style={{
-                        fontSize: mobile ? "2.4rem" : "3.2rem",
-                        fontWeight: 900,
-                        letterSpacing: "-0.5px",
-                        color: "#124170",
-                      }}
-                    >
-                      {item.jumlah}
-                    </Title>
-                  </Stack>
-                </Paper>
+
+                      <Title
+                        order={2}
+                        ta="center"
+                        style={{
+                          fontSize: mobile ? "2.4rem" : "3.2rem",
+                          fontWeight: 900,
+                          letterSpacing: "-0.5px",
+                          color: "#124170",
+                        }}
+                      >
+                        {item.jumlah}
+                      </Title>
+                    </Stack>
+                  </Paper>
+                </motion.div>
              ))}
            </SimpleGrid>
-            
-            ) : (
-              <Center mih={200} style={{ flexDirection: "column" }}>
-                <IconMoodSad size={48} stroke={1.5} style={{ marginBottom: "1rem" }} />
-                <Text fz="lg" c="dimmed">
-                  Data SDGs Desa belum tersedia
-                </Text>
-              </Center>
-            )}
-          </Paper>
+
+          ) : (
+            <Center mih={200} style={{ flexDirection: "column" }}>
+              <IconMoodSad size={48} stroke={1.5} style={{ marginBottom: "1rem" }} />
+              <Text fz="lg" c="dimmed">
+                Data SDGs Desa belum tersedia
+              </Text>
+            </Center>
+          )}

          <Center>
            <Button
@@ -156,7 +149,19 @@ export default function SDGS() {
              mt="md"
              variant="gradient"
              gradient={{ from: "#26667F", to: "#124170" }}
-              style={{ boxShadow: "0 6px 14px rgba(18,65,112,0.25)"}}
+              style={{
+                boxShadow: "0 6px 14px rgba(18,65,112,0.25)",
+                transition: "all 0.3s ease",
+                transform: "translateY(0)",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform = "translateY(-4px)";
+                e.currentTarget.style.boxShadow = "0 10px 20px rgba(18,65,112,0.35)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = "translateY(0)";
+                e.currentTarget.style.boxShadow = "0 6px 14px rgba(18,65,112,0.25)";
+              }}
            >
              <Text c="white" fz={{ base: "md", md: "lg" }} fw="bold">Jelajahi Semua Tujuan SDGs Desa</Text>
            </Button>
--- a/src/app/darmasaba/page.tsx
+++ b/src/app/darmasaba/page.tsx
@@ -19,7 +19,7 @@ export default function Page() {
    <Box>
      <Stack 
      bg={colors.grey[1]} 
-      gap={"1.5rem"}
+      gap={0}
      >
        <LandingPage />
        <Penghargaan />