diff --git a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_lib/layoutTabs.tsx b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_lib/layoutTabs.tsx index 0125ef2e..90270f01 100644 --- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_lib/layoutTabs.tsx +++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_lib/layoutTabs.tsx @@ -20,9 +20,9 @@ function LayoutTabs({ children }: { children: React.ReactNode }) { icon: }, { - label: "Grafik Hasil Kepuasan Masyarakat", - value: "grafikhasilkepuasan", - href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan", + label: "Penderita Penyakit", + value: "penderitapenyakit", + href: "/admin/kesehatan/data-kesehatan-warga/penderita_penyakit", icon: }, { diff --git a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/edit/page.tsx b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx similarity index 91% rename from src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/edit/page.tsx rename to src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx index 070d52f0..f135f7b2 100644 --- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx @@ -70,8 +70,8 @@ function EditGrafikHasilKepuasan() { }); } } catch (err) { - console.error("Error loading grafik hasil kepuasan:", err); - toast.error("Gagal memuat data grafik hasil kepuasan"); + console.error("Error loading penderita penyakit:", err); + toast.error("Gagal memuat data penderita penyakit"); } }; @@ -99,11 +99,11 @@ function EditGrafikHasilKepuasan() { setIsSubmitting(true); editState.update.form = { ...editState.update.form, ...formData }; await editState.update.submit(); - toast.success('Grafik hasil kepuasan berhasil diperbarui!'); - router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan'); + toast.success('penderita penyakit berhasil diperbarui!'); + router.push('/admin/kesehatan/data-kesehatan-warga/penderita_penyakit'); } catch (err) { - console.error('Error updating grafik hasil kepuasan:', err); - toast.error('Terjadi kesalahan saat memperbarui grafik hasil kepuasan'); + console.error('Error updating penderita penyakit:', err); + toast.error('Terjadi kesalahan saat memperbarui penderita penyakit'); } finally { setIsSubmitting(false); } @@ -122,7 +122,7 @@ function EditGrafikHasilKepuasan() { - Edit Grafik Hasil Kepuasan + Edit Penderita Penyakit diff --git a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/page.tsx b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/page.tsx similarity index 94% rename from src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/page.tsx rename to src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/page.tsx index 738e64fb..83211062 100644 --- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/page.tsx +++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/page.tsx @@ -26,7 +26,7 @@ function DetailGrafikHasilKepuasan() { state.delete.byId(selectedId); setModalHapus(false); setSelectedId(null); - router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan"); + router.push("/admin/kesehatan/data-kesehatan-warga/penderita_penyakit"); } }; @@ -63,7 +63,7 @@ function DetailGrafikHasilKepuasan() { > - Detail Data Grafik Hasil Kepuasan + Detail Data Penderita Penyakit @@ -118,7 +118,7 @@ function DetailGrafikHasilKepuasan() { color="green" onClick={() => router.push( - `/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${data.id}/edit` + `/admin/kesehatan/data-kesehatan-warga/penderita_penyakit/${data.id}/edit` ) } variant="light" diff --git a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create/page.tsx b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/create/page.tsx similarity index 97% rename from src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create/page.tsx rename to src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/create/page.tsx index d1ea8b7f..7cbfb5a8 100644 --- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create/page.tsx +++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/create/page.tsx @@ -40,7 +40,7 @@ function CreateGrafikHasilKepuasanMasyarakat() { setIsSubmitting(true); await stateGrafikKepuasan.create.create(); resetForm(); - router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan"); + router.push("/admin/kesehatan/data-kesehatan-warga/penderita_penyakit"); } catch (error) { console.error("Error creating grafik kepuasan:", error); toast.error("Terjadi kesalahan saat membuat grafik kepuasan"); @@ -62,7 +62,7 @@ function CreateGrafikHasilKepuasanMasyarakat() { - Tambah Grafik Hasil Kepuasan Masyarakat + Tambah Penderita Penyakit diff --git a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/page.tsx b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/page.tsx similarity index 95% rename from src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/page.tsx rename to src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/page.tsx index e5ba5b28..884b476f 100644 --- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/page.tsx +++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/page.tsx @@ -36,7 +36,7 @@ function GrafikHasilKepuasanMasyarakat() { {/* Header Search */} } value={search} @@ -115,14 +115,14 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) { {/* Judul + Tombol Tambah */} - Daftar Grafik Hasil Kepuasan Masyarakat + Daftar Penderita Penyakit - - - - Laporan Terbaru - - - - - Terselesaikan - - - - - - Dalam Proses - - - - - - Gagal - - - - - - - + + + Laporan Terbaru + + - {data.map((v, k) => { - return ( - - - {v.judul} - - {v.tanggalWaktu - ? new Date(v.tanggalWaktu).toLocaleString('id-ID') - : '-'} - - - Penanganan: - {v.penanganan?.length ? ( - v.penanganan.map((item, index) => ( - - - - )) - ) : ( - - Belum ada penanganan - - )} - - - {v.status} - - - - - ) - })} - -
- load(newPage)} - total={totalPages} - my="md" - /> -
- + + + Terselesaikan + + + + Dalam Proses + + + + Gagal + + + - + + {/* Cards Grid */} + + + {data.map((v, k) => ( + + + + {v.judul} + + + + {v.tanggalWaktu + ? new Date(v.tanggalWaktu).toLocaleString('id-ID') + : '-'} + + + + + Penanganan: + + {v.penanganan?.length ? ( + v.penanganan.map((item, index) => ( + + + + )) + ) : ( + + Belum ada penanganan + + )} + + + + {v.status} + + + + + + ))} + + + + {/* Pagination */} +
+ load(newPage)} + total={totalPages} + my="md" + size={mobile ? 'sm' : 'md'} + /> +
+ + {/* Modal Form */} + (stateLaporan.create.form.judul = e.target.value)} + onChange={(e) => + (stateLaporan.create.form.judul = e.target.value) + } label={Judul Laporan Publik} placeholder="Masukkan judul laporan publik" required + w="100%" + size={mobile ? 'sm' : 'md'} /> (stateLaporan.create.form.lokasi = e.target.value)} + onChange={(e) => + (stateLaporan.create.form.lokasi = e.target.value) + } label={Lokasi Laporan Publik} placeholder="Masukkan lokasi laporan publik" required + w="100%" + size={mobile ? 'sm' : 'md'} /> { stateLaporan.create.form.tanggalWaktu = val ? val.toString() : ''; }} + w="100%" + size={mobile ? 'sm' : 'md'} /> @@ -238,7 +341,7 @@ function Page() { + + {/* Wrapper Detail */} + + + + Detail Kontak Darurat + + + + + + Judul + {data.name || '-'} + + + + Whatsapp + {data.whatsapp || '-'} + + + + Deskripsi + + + + + Gambar + {data.image?.link ? ( + gambar + ) : ( + - + )} + + + + + + + + + + ); +} + +export default Page; diff --git a/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx b/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx index 0e7913f3..3967e3a1 100644 --- a/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx @@ -7,6 +7,7 @@ import { Center, Grid, GridCol, + Group, Image, Pagination, Paper, @@ -17,17 +18,18 @@ import { TextInput, Tooltip } from '@mantine/core'; -import { useShallowEffect } from '@mantine/hooks'; -import { IconBrandWhatsapp, IconSearch } from '@tabler/icons-react'; +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; +import { IconSearch } from '@tabler/icons-react'; +import { useTransitionRouter } from 'next-view-transitions'; import { useState } from 'react'; import { useProxy } from 'valtio/utils'; import BackButton from '../../desa/layanan/_com/BackButto'; -import { useDebouncedValue } from '@mantine/hooks'; function Page() { const state = useProxy(kontakDarurat); + const router = useTransitionRouter() const [search, setSearch] = useState(''); - const [debouncedSearch] = useDebouncedValue(search, 500) + const [debouncedSearch] = useDebouncedValue(search, 1000) const { data, page, totalPages, loading, load } = state.findMany; useShallowEffect(() => { @@ -88,83 +90,79 @@ function Page() { ) : ( {data.map((v, k) => ( - - - - {v.name} (e.currentTarget.style.transform = 'scale(1.05)')} - onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')} - /> - - - - {v.name} - - - - - - - - {/* ✅ Tombol selalu di bagian bawah card */} -
- -
- - - + + + + {v.name} (e.currentTarget.style.transform = 'scale(1.05)')} + onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')} + /> + + + + {v.name} + + + + + + + + {/* ✅ Tombol selalu di bagian bawah card */} + + + + + + ))} )} diff --git a/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx b/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx index d08080c8..a910dc68 100644 --- a/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx @@ -26,7 +26,7 @@ import BackButton from '../../desa/layanan/_com/BackButto' function Page() { const state = useProxy(penangananDarurat) const [search, setSearch] = useState('') - const [debouncedSearch] = useDebouncedValue(search, 500) + const [debouncedSearch] = useDebouncedValue(search, 1000) const { data, page, totalPages, loading, load } = state.findMany useShallowEffect(() => { diff --git a/src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx b/src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx index 1048dcb2..c567f34f 100644 --- a/src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx @@ -12,7 +12,7 @@ import { useTransitionRouter } from "next-view-transitions"; export default function Page() { const state = useProxy(posyandustate); const [search, setSearch] = useState(""); - const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay + const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay const router = useTransitionRouter() const { data, page, totalPages, loading, load } = state.findMany; diff --git a/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx b/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx index ed5a360f..e95b6d30 100644 --- a/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx @@ -57,7 +57,7 @@ export default function Page() { const state = useProxy(programKesehatan); const router = useRouter(); const [search, setSearch] = useState(""); - const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay + const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay const { data, page, totalPages, loading, load } = state.findMany; useShallowEffect(() => { diff --git a/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx b/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx index ed15017d..40f5d755 100644 --- a/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx @@ -7,10 +7,12 @@ import { IconSearch, IconMapPin, IconPhone, IconMail } from '@tabler/icons-react import { useState } from 'react'; import { useProxy } from 'valtio/utils'; import BackButton from '../../desa/layanan/_com/BackButto'; +import { useDebouncedValue } from '@mantine/hooks'; function Page() { const state = useProxy(puskesmasState) const [search, setSearch] = useState('') + const [debouncedSearch] = useDebouncedValue(search, 1000); const { data, @@ -21,8 +23,8 @@ function Page() { } = state.findMany; useShallowEffect(() => { - load(page, 6, search) - }, [page, search]) + load(page, 6, debouncedSearch) + }, [page, debouncedSearch]) if (loading || !data) { return ( @@ -95,17 +97,17 @@ function Page() { - + {v.alamat} - + {v.kontak.kontakPuskesmas} - + {v.kontak.email} diff --git a/src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx b/src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx index 595a35a7..ea753870 100644 --- a/src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx +++ b/src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx @@ -11,7 +11,7 @@ import BackButton from '../../desa/layanan/_com/BackButto'; function Page() { const state = useProxy(dataLingkunganDesaState.findMany) const [search, setSearch] = useState('') - const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay + const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay const { data, diff --git a/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx b/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx index 92fe9f3a..3e5c1d5b 100644 --- a/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx +++ b/src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx @@ -49,6 +49,7 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu - {label} - + {label} + {formatRupiah(dataset.realisasi)} | {formatRupiah(dataset.anggaran)} (null); - const scrollPositionRef = useRef(0); - const animationFrameRef = useRef(0); + const scrollPosRef = useRef(0); + const animFrameRef = useRef(0); const isHoveredRef = useRef(false); - - // Refs for drag functionality const isDraggingRef = useRef(false); const startXRef = useRef(0); const scrollLeftRef = useRef(0); const velocityRef = useRef(0); - const lastScrollTimeRef = useRef(0); + const lastScrollRef = useRef(0); - // Speed configuration - const normalSpeed = 1.0; // pixels per frame - const hoverSpeed = 0.5; // slower speed on hover + const SPEED_NORMAL = 1.0; + const SPEED_HOVER = 0.5; + const VELOCITY_DECAY = 0.95; + const SCROLL_THRESHOLD = 100; useEffect(() => { state.findMany.load(); @@ -63,120 +61,114 @@ function Slider() { const data = state.findMany.data || []; const loading = state.findMany.loading; - // Duplicate slides for seamless infinite loop - const slidesData = [...data, ...data, ...data]; + // Triple data untuk infinite loop (desktop only) + const slidesData = mobile ? data : [...data, ...data, ...data]; + // Auto-scroll animation untuk desktop useEffect(() => { - if (loading || !containerRef.current || slidesData.length === 0) return; + if (loading || !containerRef.current || data.length === 0 || mobile) return; const container = containerRef.current; const slideWidth = container.scrollWidth / slidesData.length; - const originalDataLength = data.length; + const originalLength = data.length; - // Start from the middle set of slides - scrollPositionRef.current = slideWidth * originalDataLength; - container.scrollLeft = scrollPositionRef.current; + // Start dari middle set + scrollPosRef.current = slideWidth * originalLength; + container.scrollLeft = scrollPosRef.current; const animate = () => { if (!containerRef.current) return; const container = containerRef.current; const slideWidth = container.scrollWidth / slidesData.length; + const timeSinceScroll = Date.now() - lastScrollRef.current; + const isUserScrolling = timeSinceScroll < SCROLL_THRESHOLD; - // Check if user recently scrolled manually - const timeSinceLastScroll = Date.now() - lastScrollTimeRef.current; - const isUserScrolling = timeSinceLastScroll < 100; - - // Only auto-scroll if user is not actively scrolling or dragging if (!isDraggingRef.current && !isUserScrolling) { - const currentSpeed = isHoveredRef.current ? hoverSpeed : normalSpeed; - scrollPositionRef.current += currentSpeed; + const speed = isHoveredRef.current ? SPEED_HOVER : SPEED_NORMAL; + scrollPosRef.current += speed; - // Reset position for infinite loop - if (scrollPositionRef.current >= slideWidth * (originalDataLength * 2)) { - scrollPositionRef.current -= slideWidth * originalDataLength; + // Reset untuk infinite loop + if (scrollPosRef.current >= slideWidth * (originalLength * 2)) { + scrollPosRef.current -= slideWidth * originalLength; + } + if (scrollPosRef.current <= 0) { + scrollPosRef.current += slideWidth * originalLength; } - if (scrollPositionRef.current <= 0) { - scrollPositionRef.current += slideWidth * originalDataLength; - } - - container.scrollLeft = scrollPositionRef.current; + container.scrollLeft = scrollPosRef.current; } else { - // Sync scroll position when user is scrolling - scrollPositionRef.current = container.scrollLeft; - - // Apply momentum/velocity for smooth drag release + scrollPosRef.current = container.scrollLeft; + + // Momentum untuk drag release if (!isDraggingRef.current && Math.abs(velocityRef.current) > 0.1) { - scrollPositionRef.current += velocityRef.current; - velocityRef.current *= 0.95; // Decay velocity - container.scrollLeft = scrollPositionRef.current; + scrollPosRef.current += velocityRef.current; + velocityRef.current *= VELOCITY_DECAY; + container.scrollLeft = scrollPosRef.current; } } - animationFrameRef.current = requestAnimationFrame(animate); + animFrameRef.current = requestAnimationFrame(animate); }; - animationFrameRef.current = requestAnimationFrame(animate); + animFrameRef.current = requestAnimationFrame(animate); return () => { - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); + if (animFrameRef.current) { + cancelAnimationFrame(animFrameRef.current); } }; - }, [loading, slidesData.length, data.length, mobile]); + }, [loading, data.length, mobile]); const handleMouseEnter = () => { - isHoveredRef.current = true; + if (!mobile) isHoveredRef.current = true; }; const handleMouseLeave = () => { - isHoveredRef.current = false; - isDraggingRef.current = false; + if (!mobile) { + isHoveredRef.current = false; + isDraggingRef.current = false; + } }; - // Mouse drag handlers const handleMouseDown = (e: React.MouseEvent) => { - if (!containerRef.current) return; - + if (!containerRef.current || mobile) return; + isDraggingRef.current = true; startXRef.current = e.pageX - containerRef.current.offsetLeft; scrollLeftRef.current = containerRef.current.scrollLeft; velocityRef.current = 0; - containerRef.current.style.cursor = 'grabbing'; }; const handleMouseMove = (e: React.MouseEvent) => { - if (!isDraggingRef.current || !containerRef.current) return; - + if (!isDraggingRef.current || !containerRef.current || mobile) return; + e.preventDefault(); const x = e.pageX - containerRef.current.offsetLeft; const walk = (x - startXRef.current) * 2; const newScrollLeft = scrollLeftRef.current - walk; - + velocityRef.current = containerRef.current.scrollLeft - newScrollLeft; - containerRef.current.scrollLeft = newScrollLeft; - scrollPositionRef.current = newScrollLeft; - lastScrollTimeRef.current = Date.now(); + scrollPosRef.current = newScrollLeft; + lastScrollRef.current = Date.now(); }; const handleMouseUp = () => { - if (!containerRef.current) return; - + if (!containerRef.current || mobile) return; + isDraggingRef.current = false; containerRef.current.style.cursor = 'grab'; }; - // Wheel scroll handler const handleWheel = (e: React.WheelEvent) => { - if (!containerRef.current) return; - + if (!containerRef.current || mobile) return; + e.preventDefault(); containerRef.current.scrollLeft += e.deltaY; - scrollPositionRef.current = containerRef.current.scrollLeft; - lastScrollTimeRef.current = Date.now(); + scrollPosRef.current = containerRef.current.scrollLeft; + lastScrollRef.current = Date.now(); }; if (loading) { @@ -211,37 +203,45 @@ function Slider() { onWheel={handleWheel} py="xl" style={{ - overflow: "hidden", - cursor: "grab", + overflowX: mobile ? "auto" : "hidden", + overflowY: "hidden", + cursor: mobile ? "default" : "grab", userSelect: "none", position: "relative", + WebkitOverflowScrolling: "touch", + scrollbarWidth: "none", + msOverflowStyle: "none", }} > - {/* Blur edges effect */} - - + {/* Blur edges - hanya untuk desktop */} + {!mobile && ( + <> + + + + )} { - e.currentTarget.style.transform = "translateY(-8px) scale(1.02)"; - e.currentTarget.style.boxShadow = "0 12px 28px rgba(0,0,0,0.25)"; + if (!mobile) { + e.currentTarget.style.transform = "translateY(-8px) scale(1.02)"; + e.currentTarget.style.boxShadow = "0 12px 28px rgba(0,0,0,0.25)"; + } }} onMouseLeave={(e) => { - e.currentTarget.style.transform = "translateY(0) scale(1)"; - e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)"; + if (!mobile) { + e.currentTarget.style.transform = "translateY(0) scale(1)"; + e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)"; + } }} > - - + + + {textHeading.title} - + {textHeading.des} - +