From 4657f79556f280099a3d20f09a2bc9b68f6dc1d9 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Mon, 2 Jun 2025 08:00:01 +0700 Subject: [PATCH 1/3] adjust landing page mabes --- .../(polda)/polda/[polda_name]/page.tsx | 4 +- app/[locale]/page.tsx | 2 +- .../area-coverage-and-work-units.tsx | 47 +- components/landing-page/content-category.tsx | 98 +- components/landing-page/coverage.tsx | 218 ++-- components/landing-page/division.tsx | 82 +- components/landing-page/new-content.tsx | 481 ++++----- .../landing-page/search-section-new.tsx | 195 ++-- components/landing-page/search-section.tsx | 13 +- components/landing-page/survey-box.tsx | 251 ++--- components/landing-page/welcome-polda.tsx | 4 +- messages/en.json | 1 + messages/in.json | 9 +- public/assets/background.png | Bin 0 -> 2229049 bytes public/assets/divkum.png | Bin 0 -> 121212 bytes public/assets/line1.png | Bin 0 -> 5434 bytes public/assets/satker/divkum.png | Bin 5288 -> 0 bytes public/assets/satker/rumkit.png | Bin 0 -> 118922 bytes public/assets/satker/sebasa.png | Bin 0 -> 401590 bytes public/assets/satker/sepolwan.png | Bin 0 -> 274177 bytes public/assets/survey.png | Bin 0 -> 15303 bytes public/logo/satker/DIVKUM.png | Bin 107239 -> 0 bytes vendor/ckeditor5/node_modules/.bin/tsc | 13 +- vendor/ckeditor5/node_modules/.bin/tsc.cmd | 17 - vendor/ckeditor5/node_modules/.bin/tsc.ps1 | 28 - vendor/ckeditor5/node_modules/.bin/tsserver | 13 +- .../ckeditor5/node_modules/.bin/tsserver.cmd | 17 - .../ckeditor5/node_modules/.bin/tsserver.ps1 | 28 - .../node_modules/typescript/LICENSE.txt | 110 +- .../node_modules/typescript/README.md | 98 +- .../typescript/ThirdPartyNoticeText.txt | 386 +++---- .../ckeditor5/node_modules/typescript/bin/tsc | 0 .../node_modules/typescript/bin/tsserver | 0 .../node_modules/typescript/lib/typesMap.json | 992 +++++++++--------- 34 files changed, 1349 insertions(+), 1758 deletions(-) create mode 100644 public/assets/background.png create mode 100644 public/assets/divkum.png create mode 100644 public/assets/line1.png delete mode 100644 public/assets/satker/divkum.png create mode 100644 public/assets/satker/rumkit.png create mode 100644 public/assets/satker/sebasa.png create mode 100644 public/assets/satker/sepolwan.png create mode 100644 public/assets/survey.png delete mode 100644 public/logo/satker/DIVKUM.png delete mode 100644 vendor/ckeditor5/node_modules/.bin/tsc.cmd delete mode 100644 vendor/ckeditor5/node_modules/.bin/tsc.ps1 delete mode 100644 vendor/ckeditor5/node_modules/.bin/tsserver.cmd delete mode 100644 vendor/ckeditor5/node_modules/.bin/tsserver.ps1 mode change 100644 => 100755 vendor/ckeditor5/node_modules/typescript/bin/tsc mode change 100644 => 100755 vendor/ckeditor5/node_modules/typescript/bin/tsserver diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx index 1fb82e54..8177d8a9 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx @@ -13,6 +13,7 @@ import LatestContentKaltara from "@/components/landing-page/landing-polda-kaltar import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara"; import NewsTickerKaltara from "../../tbnews/[polda_name]/components/news-tickers-kaltara"; import ContentCategoryKaltara from "@/components/landing-page/landing-polda-kaltara/content-category-kaltara"; +import HeroNew from "@/components/landing-page/hero-new"; const page = () => { const params = useParams(); @@ -31,7 +32,8 @@ const page = () => { ) : (
- + {/* */} + diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 2bbdbef6..a9ed36a2 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -19,7 +19,7 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => { return ( -
+
diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx index e01d7bfd..35d02d95 100644 --- a/components/landing-page/area-coverage-and-work-units.tsx +++ b/components/landing-page/area-coverage-and-work-units.tsx @@ -1,15 +1,7 @@ "use client"; import React, { useEffect, useState } from "react"; -import { - Dialog, - DialogClose, - DialogContent, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; +import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import Image from "next/image"; import Coverage from "./coverage"; import Division from "./division"; @@ -30,33 +22,20 @@ const AreaCoverageWorkUnits = () => { }; }, [openPolda, openSatker]); return ( -
+

- Liputan Wilayah &{" "} - Satker + Liputan Wilayah & Satker

{/* POLDA */} - - +

Polda Jajaran

@@ -78,15 +57,11 @@ const AreaCoverageWorkUnits = () => { {/* SATKER */} - - polri -

Satuan Kerja Polri

+ + diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx index d9ad516f..2784174e 100644 --- a/components/landing-page/content-category.tsx +++ b/components/landing-page/content-category.tsx @@ -1,20 +1,11 @@ -import { - getCategoryData, - getPublicCategoryData, -} from "@/service/landing/landing"; +import { getCategoryData, getPublicCategoryData } from "@/service/landing/landing"; import React, { useEffect, useState } from "react"; import { Reveal } from "./Reveal"; import { useTranslations } from "next-intl"; import { usePathname } from "next/navigation"; import { useParams } from "next/navigation"; import Image from "next/image"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, -} from "../ui/carousel"; +import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../ui/carousel"; import { useRouter } from "@/i18n/routing"; import { Button } from "../ui/button"; @@ -28,26 +19,14 @@ const ContentCategory = (props: { group?: string; type: string }) => { const satkerName = params?.satker_name; const router = useRouter(); - let prefixPath = poldaName - ? `/polda/${poldaName}` - : satkerName - ? `/satker/${satkerName}` - : "/"; + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; useEffect(() => { initFetch(); }, []); const initFetch = async () => { const response = await getPublicCategoryData( - props.group == "mabes" - ? "" - : props.group == "polda" && poldaName && String(poldaName)?.length > 1 - ? poldaName - : props.group == "satker" && - satkerName && - String(satkerName)?.length > 1 - ? "satker-" + satkerName - : "", + props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "", "", locale == "en" ? true : false ); @@ -73,10 +52,7 @@ const ContentCategory = (props: { group?: string; type: string }) => { `; - const toBase64 = (str: string) => - typeof window === "undefined" - ? Buffer.from(str).toString("base64") - : window.btoa(str); + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); return (
@@ -85,66 +61,46 @@ const ContentCategory = (props: { group?: string; type: string }) => {

{pathname?.split("/")[1] == "in" ? ( <> - - {t("category")}  - + {t("category")}  {t("content")} ) : ( <> - - {t("content")}  - + {t("content")}  {t("category")} )}

- {(seeAllValue ? categories : categories?.slice(0, 4))?.map( - (category: any) => ( -
-
- router.push( - `${prefixPath}all/filter?category=${category?.id}` - ) - } - className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block" - > - {/* Gambar */} - category + {(seeAllValue ? categories : categories?.slice(0, 8))?.map((category: any) => ( +
+
router.push(`${prefixPath}all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"> + {/* Gambar */} + category - {/* Overlay gelap */} -
+ {/* Overlay gelap */} +
- {/* Judul */} -
-

- {category?.name} -

-
+ {/* Judul */} +
+

{category?.name}

- ) - )} +
+ ))}
{/* Tombol See More / See Less */} {categories?.length > 8 && (
-
diff --git a/components/landing-page/coverage.tsx b/components/landing-page/coverage.tsx index cd9ec958..c2cbf58e 100644 --- a/components/landing-page/coverage.tsx +++ b/components/landing-page/coverage.tsx @@ -8,100 +8,64 @@ import { usePathname } from "next/navigation"; import Image from "next/image"; const regions = [ + { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" }, + { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" }, { - name: "Polda Metro Jaya", - slug: "metro-jaya", - logo: "/logo/polda/polda-metro.png", - }, - { - name: "Polda Jawa Barat", - slug: "jawa-barat", - logo: "/logo/polda/polda-jawabarat.png", + name: "Polda Bangka Belitung", + slug: "bangka-belitung", + logo: "/logo/polda/polda-bangkabelitung.png", }, { name: "Polda Banten", slug: "banten", logo: "/logo/polda/polda-banten.png", }, + { + name: "Polda Bengkulu", + slug: "bengkulu", + logo: "/logo/polda/polda-bengkulu.png", + }, + { + name: "Polda DIY", + slug: "di-yogyakarta", + logo: "/logo/polda/polda-jogja.png", + }, + { + name: "Polda Gorontalo", + slug: "gorontalo", + logo: "/logo/polda/polda-gorontalo.png", + }, + { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" }, + { + name: "Polda Jawa Barat", + slug: "jawa-barat", + logo: "/logo/polda/polda-jawabarat.png", + }, { name: "Polda Jawa Tengah", slug: "jawa-tengah", logo: "/logo/polda/polda-jawatengah.png", }, - { - name: "Polda D.I Yogyakarta", - slug: "di-yogyakarta", - logo: "/logo/polda/polda-jogja.png", - }, { name: "Polda Jawa Timur", slug: "jawa-timur", logo: "/logo/polda/polda-jawatimur.png", }, - { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" }, - { - name: "Polda Sumatera Utara", - slug: "sumatera-utara", - logo: "/logo/polda/polda-sumut.png", - }, - { - name: "Polda Sumatera Barat", - slug: "sumatera-barat", - logo: "/logo/polda/polda-sumatera-barat.png", - }, - { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" }, - { - name: "Polda Kep. Riau", - slug: "kepulauan-riau", - logo: "/logo/polda/polda-kepri.png", - }, - { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" }, - { - name: "Polda Sumatera Selatan", - slug: "sumatera-selatan", - logo: "/logo/polda/polda-sumsel.png", - }, - { - name: "Polda Kep. Bangka Belitung", - slug: "bangka-belitung", - logo: "/logo/polda/polda-bangkabelitung.png", - }, - { - name: "Polda Bengkulu", - slug: "bengkulu", - logo: "/logo/polda/polda-bengkulu.png", - }, - { - name: "Polda Lampung", - slug: "lampung", - logo: "/logo/polda/polda-lampung.png", - }, - { - name: "Polda Nusa Tenggara Barat", - slug: "ntb", - logo: "/logo/polda/polda-ntb.png", - }, - { - name: "Polda Nusa Tenggara Timur", - slug: "ntt", - logo: "/logo/polda/polda-ntt.png", - }, - { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" }, { name: "Polda Kalimantan Barat", slug: "kalimantan-barat", logo: "/logo/polda/polda-kalbar.png", }, - { - name: "Polda Kalimantan Tengah", - slug: "kalimantan-tengah", - logo: "/logo/polda/polda-kalteng.png", - }, { name: "Polda Kalimantan Selatan", slug: "kalimantan-selatan", logo: "/logo/polda/polda-kalsel.png", }, + { + name: "Polda Kalimantan Tengah", + slug: "kalimantan-tengah", + logo: "/logo/polda/polda-kalteng.png", + }, { name: "Polda Kalimantan Timur", slug: "kalimantan-timur", @@ -113,20 +77,47 @@ const regions = [ logo: "/logo/polda/polda-kaltara.png", }, { - name: "Polda Sulawesi Tengah", - slug: "sulawesi-tengah", - logo: "/logo/polda/polda-sulawesi-tengah.png", + name: "Polda Kepulauan Riau", + slug: "kepulauan-riau", + logo: "/logo/polda/polda-kepri.png", }, { - name: "Polda Sulawesi Utara", - slug: "sulawesi-utara", - logo: "/logo/polda/polda-sulawesi-utara.png", + name: "Polda Lampung", + slug: "lampung", + logo: "/logo/polda/polda-lampung.png", }, { - name: "Polda Gorontalo", - slug: "gorontalo", - logo: "/logo/polda/polda-gorontalo.png", + name: "Polda Maluku", + slug: "maluku", + logo: "/logo/polda/polda-maluku.png", }, + { + name: "Polda Maluku Utara", + slug: "maluku-utara", + logo: "/logo/polda/polda-maluku-utara.png", + }, + { + name: "Polda Metro Jaya", + slug: "metro-jaya", + logo: "/logo/polda/polda-metro.png", + }, + { + name: "Polda NTB", + slug: "ntb", + logo: "/logo/polda/polda-ntb.png", + }, + { + name: "Polda NTT", + slug: "ntt", + logo: "/logo/polda/polda-ntt.png", + }, + { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" }, + { + name: "Polda Papua Barat", + slug: "papua-barat", + logo: "/logo/polda/polda-papua-barat.png", + }, + { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" }, { name: "Polda Sulawesi Barat", slug: "sulawesi-barat", @@ -137,54 +128,59 @@ const regions = [ slug: "sulawesi-selatan", logo: "/logo/polda/polda-sulsel.png", }, + { + name: "Polda Sulawesi Tengah", + slug: "sulawesi-tengah", + logo: "/logo/polda/polda-sulawesi-tengah.png", + }, { name: "Polda Sulawesi Tenggara", slug: "sulawesi-tenggara", logo: "/logo/polda/polda-sulawesi-tenggara.png", }, { - name: "Polda Maluku Utara", - slug: "maluku-utara", - logo: "/logo/polda/polda-maluku-utara.png", + name: "Polda Sulawesi Utara", + slug: "sulawesi-utara", + logo: "/logo/polda/polda-sulawesi-utara.png", }, { - name: "Polda Maluku", - slug: "maluku", - logo: "/logo/polda/polda-maluku.png", + name: "Polda Sumatera Barat", + slug: "sumatera-barat", + logo: "/logo/polda/polda-sumatera-barat.png", }, { - name: "Polda Papua Barat", - slug: "papua-barat", - logo: "/logo/polda/polda-papua-barat.png", - }, - { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" }, - { - name: "Satuan Kerja POLRI", - slug: "satker-polri", - logo: "/logo/satker/SATUAN-KERJA-POLRI.png", + name: "Polda Sumatera Selatan", + slug: "sumatera-selatan", + logo: "/logo/polda/polda-sumsel.png", }, { - name: "Internasional", - slug: "internasional", - logo: "/assets/polda/internasional.png", + name: "Polda Sumatera Utara", + slug: "sumatera-utara", + logo: "/logo/polda/polda-sumut.png", }, + // { + // name: "Satuan Kerja POLRI", + // slug: "satker-polri", + // logo: "/logo/satker/SATUAN-KERJA-POLRI.png", + // }, + // { + // name: "Internasional", + // slug: "internasional", + // logo: "/assets/polda/internasional.png", + // }, ]; const Coverage: React.FC = () => { const [seeAllValue, setSeeAllValue] = useState(false); const [searchTerm, setSearchTerm] = useState(""); - const [filteredList, setFilteredList] = useState( - regions - ); + const [filteredList, setFilteredList] = useState(regions); const pathname = usePathname(); const t = useTranslations("LandingPage"); const handleSearch = () => { const value = searchTerm.toLowerCase(); - const filtered = regions.filter((polda) => - polda.name.toLowerCase().includes(value) - ); + const filtered = regions.filter((polda) => polda.name.toLowerCase().includes(value)); setFilteredList(filtered); }; @@ -202,32 +198,16 @@ const Coverage: React.FC = () => { `; - const toBase64 = (str: string) => - typeof window === "undefined" - ? Buffer.from(str).toString("base64") - : window.btoa(str); + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); return (
{filteredList?.map((region: any) => ( - +
- {region.name} + {region.name}

{region.name}

diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx index ab5fe9af..63484f03 100644 --- a/components/landing-page/division.tsx +++ b/components/landing-page/division.tsx @@ -8,45 +8,55 @@ import { usePathname } from "next/navigation"; import Image from "next/image"; const regions = [ - { name: "SIBER", slug: "siber", logo: "/logo/satker/SIBER.png" }, - { name: "DIVKUM", slug: "divkum", logo: "/logo/satker/DIVKUM.png" }, - { name: "PUSKEU", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" }, - { name: "YANMA", slug: "yanma", logo: "/logo/satker/YANMA.png" }, - { name: "SSDM", slug: "ssdm", logo: "/logo/satker/SSDM.png" }, - { name: "ITWASUM", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" }, - { name: "STIK-PTIK", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" }, - { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" }, - { name: "BRIMOB", slug: "brimob", logo: "/logo/satker/BRIMOB.png" }, - { name: "DIV HUMAS", slug: "div-humas", logo: "/logo/satker/DIV-HUMAS.png" }, - { name: "PUSLITBANG", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" }, - { name: "BINMAS", slug: "binmas", logo: "/logo/satker/BINMAS.png" }, - { name: "DIV TIK", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" }, - { name: "SPRIPIM", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" }, - { name: "DIVPROPRAM", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" }, - { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png" }, - { name: "PUSDOKKES", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" }, - { name: "BAHARKAM", slug: "baharkam", logo: "/logo/satker/BAHARKAM.png" }, - { name: "POLAIRUD", slug: "polairud", logo: "/logo/satker/POLAIRUD.png" }, + { name: "ITWASUM POLRI", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" }, + { name: "BAINTELKAM POLRI", slug: "baintelkam", logo: "/logo/satker/BAINTELKAM.png" }, + { name: "BAHARKAM POLRI", slug: "baharkam", logo: "/logo/satker/BAHARKAM.png" }, + { name: "BARESKRIM POLRI", slug: "bareskrim", logo: "/logo/satker/BARESKRIM.png" }, + { name: "LEMDIKLAT POLRI", slug: "lemdiklat", logo: "/logo/satker/LEMDIKLAT.png" }, + { name: "KORBRIMOB POLRI", slug: "brimob", logo: "/logo/satker/BRIMOB.png" }, + { name: "STAMAOPS POLRI", slug: "sops", logo: "/logo/satker/SOPS.png" }, + { name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" }, + { name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" }, + { name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" }, + { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" }, + { name: "DIVPROPRAM POLRI", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" }, + { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" }, + { name: "DIVHUBINTER POLRI", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" }, + { name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" }, + { name: "KORLANTAS POLRI", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" }, + { name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" }, + { name: "PUSDOKKES POLRI", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" }, + { name: "PUSLITBANG POLRI", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" }, + { name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" }, + { name: "PUSJARAH POLRI", slug: "pusjarah", logo: "/logo/satker/PUSJARAH.png" }, + { name: "SETUM POLRI", slug: "setum", logo: "/logo/satker/SETUM.png" }, + { name: "YANMA POLRI", slug: "yanma", logo: "/logo/satker/YANMA.png" }, + { name: "SPRIPIM POLRI", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" }, + { name: "KORPOLAIRUD BAHARKAM POLRI", slug: "polairud", logo: "/logo/satker/POLAIRUD.png" }, + { name: "KORSABHARA BAHARKAM POLRI", slug: "korps-sabhara-baharkam", logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png" }, + { name: "KORBINMAS BAHARKAM POLRI", slug: "binmas", logo: "/logo/satker/BINMAS.png" }, + { name: "DITTIPIDUM BARESKRIM POLRI", slug: "dittipidum", logo: "/logo/satker/DITTIPIDUM.png" }, + { name: "DITTIPIDEKSUS BARESKRIM POLRI", slug: "dittipideksus", logo: "/logo/satker/DITTIPIDEKSUS.png" }, + { name: "DITTIPIDKOR BARESKRIM POLRI", slug: "dittipidkor", logo: "/logo/satker/DITTIPIDKOR.png" }, + { name: "DITTIPIDNARKOBA BARESKRIM POLRI", slug: "dittipidnarkoba", logo: "/logo/satker/DITTIPIDNARKOBA.png" }, + { name: "DITTIPIDTER BARESKRIM POLRI", slug: "dittipidter", logo: "/logo/satker/DITTIPIDTER.png" }, + { name: "DITTIPIDSIBER BARESKRIM POLRI", slug: "dittipidsiber", logo: "/logo/satker/DITTIPIDSIBER.png" }, + { name: "DIT PPA-PPO BARESKRIM POLRI", slug: "dit-ppa-ppo", logo: "/logo/satker/DITPPAPPO.png" }, + { name: "PUSLABFOR BARESKRIM POLRI", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" }, + { name: "PUSIKNAS BARESKRIM POLRI", slug: "pusiknas", logo: "/logo/satker/PUSKINAS.png" }, + { name: "STIK LEMDIKLAT POLRI", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" }, + { name: "AKPOL LEMDIKLAT POLRI", slug: "akpol", logo: "/logo/satker/AKPOL.png" }, + { name: "SESPIM LEMDIKLAT POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" }, + { name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" }, + { name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/assets/satker/sepolwan.png" }, + { name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/assets/satker/sebasa.png" }, + { name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/assets/satker/rumkit.png" }, { name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" }, { name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" }, - { name: "LEMDIKLAT", slug: "lemdiklat", logo: "/logo/satker/LEMDIKLAT.png" }, - { name: "AKPOL", slug: "akpol", logo: "/logo/satker/AKPOL.png" }, - { name: "KORLANTAS", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" }, { name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" }, - { name: "PUSJARAH", slug: "pusjarah", logo: "/logo/satker/PUSJARAH.png" }, - { name: "PUSIKNAS", slug: "pusiknas", logo: "/logo/satker/PUSKINAS.png" }, - { name: "SLOG", slug: "slog", logo: "/logo/satker/SLOG.png" }, - { name: "BAINTELKAM", slug: "baintelkam", logo: "/logo/satker/BAINTELKAM.png" }, - { name: "BARESKRIM", slug: "bareskrim", logo: "/logo/satker/BARESKRIM.png" }, - { name: "DIVHUBINTER", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" }, - { name: "SETUM", slug: "setum", logo: "/logo/satker/SETUM.png" }, - { name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" }, - { name: "DENSUS 88", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" }, - { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" }, - { name: "SOPS", slug: "sops", logo: "/logo/satker/SOPS.png" }, - { name: "SRENA", slug: "srena", logo: "/logo/satker/SRENA.png" }, - { name: "SESPIM POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" }, - { name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" }, + // { name: "SIBER", slug: "siber", logo: "/logo/satker/SIBER.png" }, + // { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" }, + // { name: "DIV HUMAS", slug: "div-humas", logo: "/logo/satker/DIV-HUMAS.png" }, ]; const Division = () => { diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index 70840aac..7d534c13 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -2,13 +2,7 @@ import React, { useEffect, useState } from "react"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, -} from "@/components/ui/carousel"; +import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import { useParams, usePathname } from "next/navigation"; import { Icon } from "@iconify/react/dist/iconify.js"; import { formatDateToIndonesian, secondToTimes } from "@/utils/globals"; @@ -18,6 +12,7 @@ import { Reveal } from "./Reveal"; import { useTranslations } from "next-intl"; import { Skeleton } from "../ui/skeleton"; import Image from "next/image"; +import { motion } from "framer-motion"; const NewContent = (props: { group: string; type: string }) => { const [newContent, setNewContent] = useState(); @@ -30,12 +25,28 @@ const NewContent = (props: { group: string; type: string }) => { const poldaName = params?.polda_name; const satkerName = params?.satker_name; const t = useTranslations("LandingPage"); + const [api, setApi] = React.useState(null); + const [current, setCurrent] = React.useState(0); + const [count, setCount] = React.useState(0); - let prefixPath = poldaName - ? `/polda/${poldaName}` - : satkerName - ? `/satker/${satkerName}` - : "/"; + React.useEffect(() => { + if (!api) return; + + setCount(api.scrollSnapList().length); + setCurrent(api.selectedScrollSnap()); + + const onSelect = () => { + setCurrent(api.selectedScrollSnap()); + }; + + api.on("select", onSelect); + + return () => { + api.off("select", onSelect); + }; + }, [api]); + + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; useEffect(() => { const timer = setTimeout(() => { @@ -55,26 +66,8 @@ const NewContent = (props: { group: string; type: string }) => { page: 0, size: 5, sortBy: props.type == "popular" ? "clickCount" : "createdAt", - contentTypeId: - selectedTab == "image" - ? "1" - : selectedTab == "video" - ? "2" - : selectedTab == "text" - ? "3" - : selectedTab == "audio" - ? "4" - : "", - group: - props.group == "mabes" - ? "" - : props.group == "polda" && poldaName && String(poldaName)?.length > 1 - ? poldaName - : props.group == "satker" && - satkerName && - String(satkerName)?.length > 1 - ? "satker-" + satkerName - : "", + contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "", + group: props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "", isInt: locale == "en" ? true : false, }; const response = await getListContent(request); @@ -96,44 +89,31 @@ const NewContent = (props: { group: string; type: string }) => { `; - const toBase64 = (str: string) => - typeof window === "undefined" - ? Buffer.from(str).toString("base64") - : window.btoa(str); + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); return (
-

+

{pathname?.split("/")[1] == "in" ? ( <> {t("content")}  - {props.type == "popular" - ? "Terpopuler" - : props.type == "latest" - ? t("new") - : "Serupa"} + {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"} ) : ( <> - - {props.type == "popular" - ? "Popular" - : props.type == "latest" - ? t("new") - : "Serupa"} - + {props.type == "popular" ? "Popular" : props.type == "latest" ? t("new") : "Serupa"}   {t("content")} )}

-
+
{[ - { label: "video", value: "video" }, + { label: "Audio Visual", value: "video" }, { label: "Audio", value: "audio" }, { label: "Foto", value: "image" }, { label: "Teks", value: "text" }, @@ -142,7 +122,7 @@ const NewContent = (props: { group: string; type: string }) => { key={tab.value} value={tab.value} className={` - rounded-md px-4 py-2 text-sm transition-all + rounded-md px-6 py-2 text-sm transition-all bg-[#f5f5f5] text-[#666] hover:bg-[#e0e0e0] data-[state=active]:bg-[#bb0000] data-[state=active]:text-white @@ -163,304 +143,243 @@ const NewContent = (props: { group: string; type: string }) => {
) : ( -
+
{selectedTab == "image" ? ( newContent?.length > 0 ? ( - + {newContent?.map((image: any) => ( - -
- router.push( - prefixPath + `/image/detail/${image?.slug}` - ) - } - className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg" - > - image -
-

- {image?.title} -

-

- {formatDateToIndonesian( - new Date(image?.createdAt) - )}{" "} - {image?.timezone ? image?.timezone : "WIB"} |{" "} - {" "} - {image.clickCount}{" "} -

+ +
router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"> + {/* Image with motion effect */} + + image + + + {/* Badge category */} + {/*
{image?.category?.toUpperCase() ?? "GIAT PIMPINAN"}
*/} + + {/* Red icon overlay */} +
+ + + + + + {" "} +
+ + {/* Caption section */} +
+

{image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}

+ +

{image?.title}

+ + {/*

+ {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ?? "WIB"} | + {image.clickCount} +

*/}
))} + +
+ {Array.from({ length: count }).map((_, index) => ( +
+ ) : (

- empty + empty

) ) : selectedTab == "audio" ? ( newContent?.length > 0 ? ( - + {newContent?.map((audio: any) => ( - -
-
- router.push( - prefixPath + `/audio/detail/${audio?.slug}` - ) - } - className="cursor-pointer flex flex-row sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md border rounded-lg p-4 my-3 gap-4 w-full " - > -
- - - -
+ +
router.push(prefixPath + `/audio/detail/${audio?.slug}`)} className="cursor-pointer bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"> + {/* Icon Background */} +
+ + + {" "} +
-
-
- {formatDateToIndonesian( - new Date(audio?.createdAt) - )}{" "} - {audio?.timezone ? audio?.timezone : "WIB"}{" "} - | {" "} - -   {audio?.clickCount}{" "} -
-
- {audio?.title} -
-

- {" "} - {audio?.duration - ? secondToTimes(Number(audio?.duration)) - : "00:00:00"} -

-
+ {/* Caption */} +
+

{audio?.categoryName?.toUpperCase() ?? "GIAT PIMPINAN"}

+ +

{audio?.title}

+ + {/*

+ {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ?? "WIB"} | + {audio?.clickCount} +

*/}
))} + +
+ {Array.from({ length: count }).map((_, index) => ( +
+ ) : (

- empty + empty

) ) : selectedTab == "video" ? ( newContent?.length > 0 ? ( - + {newContent?.map((video: any) => ( - -
- router.push( - prefixPath + `/video/detail/${video?.slug}` - ) - } - className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg" - > - video -
-

- {video?.title} -

-

- {formatDateToIndonesian( - new Date(video?.createdAt) - )}{" "} - {video?.timezone ? video?.timezone : "WIB"}|{" "} - {" "} - {video?.clickCount}{" "} -

+ +
router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"> + {/* Image with motion effect */} + + video + + + {/* Badge category */} + {/*
{video?.category?.toUpperCase() ?? "VIDEO"}
*/} + + {/* Red icon overlay */} +
+ + + + + + {" "} +
+ + {/* Caption section */} +
+

{video?.categoryName?.toUpperCase() ?? "Video"}

+ +

{video?.title}

+ + {/*

+ {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ?? "WIB"} | + {video?.clickCount} +

*/}
))} - - + + {/* Pagination Dots */} +
+ {Array.from({ length: count }).map((_, index) => ( +
+ + + ) : (

- empty + empty

) ) : newContent.length > 0 ? ( - + {newContent?.map((text: any) => ( - -
-
- router.push( - prefixPath + `/document/detail/${text?.slug}` - ) - } - className="flex flex-row bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4" - > -
- - - -
+ +
router.push(prefixPath + `/document/detail/${text?.slug}`)} className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white"> + {/* Ikon di tengah dengan latar kuning */} +
+ + + +
-
-
- {formatDateToIndonesian( - new Date(text?.createdAt) - )} - {text?.timezone ? text?.timezone : "WIB"}| - + {/* Konten bawah */} +
+ {/* Kategori merah */} +
{text?.categoryName?.toUpperCase() ?? "Text"}
+ + {/* Judul */} +
{text?.title}
+ + {/* Meta info */} + {/*
+ + {formatDateToIndonesian(new Date(text?.createdAt))} + {text?.timezone ? text?.timezone : "WIB"} + + + {text?.clickCount} -
-
- {text?.title} -
-
- - - - Download {t("document")} -
-
+ +
*/} + + {/* Download */} + {/*
+ + + + Download {t("document")} +
*/}
))} + + {/* Pagination Dots */} +
+ {Array.from({ length: count }).map((_, index) => ( +
+ ) : (

- empty + empty

)}
)}
-
-
- router.push( - prefixPath + `/${selectedTab}/filter?sortBy=${props.type}` - ) - } - className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]" - > + {/*
+
router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"> {t("seeAll")}
-
+
*/}
); diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx index e90db7a6..0287f64e 100644 --- a/components/landing-page/search-section-new.tsx +++ b/components/landing-page/search-section-new.tsx @@ -4,14 +4,7 @@ import { useParams, useRouter } from "next/navigation"; import router from "next/router"; import React, { useEffect, useState } from "react"; import { Icon } from "@iconify/react/dist/iconify.js"; -import { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectTrigger, - SelectValue, -} from "../ui/select"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select"; import Image from "next/image"; import { getHeroData } from "@/service/landing/landing"; import { title } from "process"; @@ -57,26 +50,31 @@ const ScrollableContent = () => { }; return ( <> -
+

- - {t("exploration")} + + {t("exploration")} {t("and")} + + +  {t("download")} {t("coverage")} {" "} - {t("and")}{" "} - - {t("download")} - {" "} - {t("coverage")}{" "}

-
-

- {t("officialCoverage")} -

+
+
+

{t("officialCoverage")}

- + - setSearch(e.target.value)} - /> + setSearch(e.target.value)} />
-
+ {/* Berita Polda */}
-

- Berita Polda -

+

Berita Polda

+
+
{content?.slice(0, 4).map((item: any, index: number) => ( -
-
+
+
{ : `${locale}/audio/detail/${item?.slug}` } > - {item.title} -
- - + +
+ + + + +
@@ -182,46 +152,35 @@ const ScrollableContent = () => { } > */}
-

- {item.categoryName} -

-

- {item.title} -

-

- {htmlToString(item.description)} -

+

{item.categoryName}

+

{item.title}

+

{htmlToString(item.description)}

- {/* */}
))} - + {" "}
{/* Berita SATKER */}
-

- Berita Satker -

+

Berita Satker

+
+
{content ?.filter((item: any) => item.isPublishOnPolda === true) .slice(0, 4) .map((item: any, index: number) => ( -
-
+
+
{ : `${locale}/audio/detail/${item?.slug}` } > - {item.title} -
- - + +
+ + + + +
-

- {item.categoryName} -

-

- {item.title} -

-

- {htmlToString(item.description)} -

+

{item.categoryName}

+

{item.title}

+

{htmlToString(item.description)}

))} -
diff --git a/components/landing-page/search-section.tsx b/components/landing-page/search-section.tsx index 929eefde..499dc97b 100644 --- a/components/landing-page/search-section.tsx +++ b/components/landing-page/search-section.tsx @@ -1,12 +1,5 @@ import search from "@/app/[locale]/(protected)/app/chat/components/search"; -import { - Select, - SelectTrigger, - SelectValue, - SelectContent, - SelectGroup, - SelectItem, -} from "@radix-ui/react-select"; +import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@radix-ui/react-select"; import { Icon } from "lucide-react"; import { useTranslations } from "next-intl"; import { useRouter } from "next/navigation"; @@ -39,12 +32,12 @@ const SearchSection = () => { const router = useRouter(); const t = useTranslations("LandingPage"); return ( -
+
-
+
diff --git a/components/landing-page/survey-box.tsx b/components/landing-page/survey-box.tsx index 414a2a21..bde4e8f8 100644 --- a/components/landing-page/survey-box.tsx +++ b/components/landing-page/survey-box.tsx @@ -1,13 +1,5 @@ import React, { useState } from "react"; -import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "../ui/dialog"; +import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog"; import FormSurvey from "./survey"; import { Controller, useForm } from "react-hook-form"; import { Textarea } from "../ui/textarea"; @@ -54,49 +46,16 @@ const UserSurveyBox = () => { }); const options = { - accessFrequency: [ - "Setiap hari", - "Beberapa kali seminggu", - "Beberapa kali dalam sebulan", - "Baru pertama kali", - ], + accessFrequency: ["Setiap hari", "Beberapa kali seminggu", "Beberapa kali dalam sebulan", "Baru pertama kali"], uiExperienceDesign: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"], - uiExperienceNavigation: [ - "Sangat mudah", - "Mudah", - "Cukup", - "Sulit", - "Sangat sulit", - ], - uiExperienceSpeed: [ - "Sangat cepat", - "Cepat", - "Cukup", - "Lambat", - "Sangat lambat", - ], + uiExperienceNavigation: ["Sangat mudah", "Mudah", "Cukup", "Sulit", "Sangat sulit"], + uiExperienceSpeed: ["Sangat cepat", "Cepat", "Cukup", "Lambat", "Sangat lambat"], infoAccuracy: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"], - infoCompleteness: [ - "Sangat lengkap", - "Lengkap", - "Cukup", - "Kurang lengkap", - "Tidak lengkap", - ], - usefulness: [ - "Sangat membantu", - "Membantu", - "Cukup membantu", - "Kurang membantu", - "Tidak membantu", - ], + infoCompleteness: ["Sangat lengkap", "Lengkap", "Cukup", "Kurang lengkap", "Tidak lengkap"], + usefulness: ["Sangat membantu", "Membantu", "Cukup membantu", "Kurang membantu", "Tidak membantu"], }; - const renderControllerGroup = ( - name: keyof SurveySchema, - question: string, - choices: string[] - ) => ( + const renderControllerGroup = (name: keyof SurveySchema, question: string, choices: string[]) => (

{question}

@@ -107,21 +66,14 @@ const UserSurveyBox = () => { control={control} render={({ field }) => ( )} /> ))}
- {errors[name] && ( -

- {errors[name]?.message as string} -

- )} + {errors[name] &&

{errors[name]?.message as string}

}
); @@ -138,120 +90,81 @@ const UserSurveyBox = () => { } }; return ( -
-

- SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI -

-

- Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan - kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit - untuk mengisi survei ini. -

- - - - - - - - SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI - - - Kami menghargai pendapat Anda! Survei ini bertujuan untuk - meningkatkan kualitas layanan MediaHub Polri. - - +
+ {/* Garis menyerong */} +
+ line +
+
+ line +
+
+ line +
-
- {renderControllerGroup( - "accessFrequency", - "1. Seberapa sering Anda mengakses MediaHub Polri?", - options.accessFrequency - )} - -
-

- 2. Bagaimana pengalaman Anda dalam mengakses website ini? -

-
- {renderControllerGroup( - "uiExperienceDesign", - "a) Tampilan dan desain website", - options.uiExperienceDesign - )} - {renderControllerGroup( - "uiExperienceNavigation", - "b) Kemudahan navigasi", - options.uiExperienceNavigation - )} - {renderControllerGroup( - "uiExperienceSpeed", - "c) Kecepatan akses website", - options.uiExperienceSpeed - )} -
-
- -
-

- 3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub - Polri? -

-
- {renderControllerGroup( - "infoAccuracy", - "a) Akurat dan terpercaya", - options.infoAccuracy - )} - {renderControllerGroup( - "infoCompleteness", - "b) Kelengkapan berita dan informasi", - options.infoCompleteness - )} -
-
- - {renderControllerGroup( - "usefulness", - "4. Apakah Anda merasa website ini membantu dalam mendapatkan informasi terkait Polri?", - options.usefulness - )} - -
-

5. Apa saran atau masukan Anda?

- ( -