fix: polda/kaltara mobile version
This commit is contained in:
parent
87b57f1442
commit
5762845cbc
|
|
@ -0,0 +1,17 @@
|
|||
import NewsTickerKaltara from "@/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara";
|
||||
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
|
||||
import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
|
||||
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<NavbarKaltara />
|
||||
{children}
|
||||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default layout;
|
||||
|
|
@ -7,11 +7,19 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
|||
import NewContent from "@/components/landing-page/new-content";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
|
||||
import { close, error, loading, warning } from "@/config/swal";
|
||||
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import Image from "next/image";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import Swal from "sweetalert2";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import parse from "html-react-parser";
|
||||
|
||||
const DetailInfo = () => {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
||||
const [selectedTab, setSelectedTab] = useState("video");
|
||||
const router = useRouter();
|
||||
|
|
@ -29,8 +37,22 @@ const DetailInfo = () => {
|
|||
const [main, setMain] = useState<any>();
|
||||
const [resolutionSelected, setResolutionSelected] = useState("720");
|
||||
const [imageSizeSelected, setImageSizeSelected] = useState("l");
|
||||
|
||||
const userId = getCookiesDecrypt("uie");
|
||||
const [content, setContent] = useState<any>([]);
|
||||
const [emailShareList, setEmailShareList] = useState<any>();
|
||||
const [emailShareInput, setEmailShareInput] = useState<any>();
|
||||
const [emailMessageInput, setEmailMessageInput] = useState();
|
||||
const searchParams = useSearchParams();
|
||||
const [width, setWidth] = useState<any>();
|
||||
const userRoleId = getCookiesDecrypt("urie");
|
||||
const [message, setMessage] = useState("");
|
||||
const [listSuggestion, setListSuggestion] = useState<any>();
|
||||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const [visibleInput, setVisibleInput] = useState(null);
|
||||
let typeString = "image";
|
||||
const t = useTranslations("LandingPage");
|
||||
const poldaName = params?.polda_name;
|
||||
const satkerName = params?.satker_name;
|
||||
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
|
|
@ -112,6 +134,12 @@ const DetailInfo = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const getInputValue = (e: any) => {
|
||||
const message = e.target.value;
|
||||
console.log(message);
|
||||
setMessage(message);
|
||||
};
|
||||
|
||||
const sizes = [
|
||||
{ label: "XL", value: "3198 x 1798 px" },
|
||||
{ label: "L", value: "2399 x 1349 px" },
|
||||
|
|
@ -131,6 +159,10 @@ const DetailInfo = () => {
|
|||
// console.log(response);
|
||||
}
|
||||
|
||||
function addDefaultProfile(ev: any) {
|
||||
ev.target.src = "/assets/avatar-profile.png";
|
||||
}
|
||||
|
||||
const handleDownload = () => {
|
||||
if (downloadProgress === 0) {
|
||||
if (!userId) {
|
||||
|
|
@ -219,6 +251,135 @@ const DetailInfo = () => {
|
|||
xhr.send();
|
||||
};
|
||||
|
||||
const showInput = (e: any) => {
|
||||
console.log(document.querySelector(`#${e}`)?.classList);
|
||||
document.querySelector(`#${e}`)?.classList.toggle("none");
|
||||
setVisibleInput(visibleInput === e ? null : e);
|
||||
};
|
||||
|
||||
async function sendSuggestionParent() {
|
||||
if (message?.length > 3) {
|
||||
loading();
|
||||
const data = {
|
||||
mediaUploadId: slug?.split("-")?.[0],
|
||||
message,
|
||||
parentId: null,
|
||||
};
|
||||
|
||||
const response = await createPublicSuggestion(data);
|
||||
|
||||
console.log(response);
|
||||
setMessage("");
|
||||
|
||||
const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]);
|
||||
console.log(responseGet?.data?.data);
|
||||
setListSuggestion(responseGet?.data?.data);
|
||||
|
||||
// Hapus nilai semua input secara manual jika perlu
|
||||
const inputs = document.querySelectorAll("input");
|
||||
inputs.forEach((input) => {
|
||||
input.value = "";
|
||||
});
|
||||
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function sendSuggestionChild(parentId: any) {
|
||||
const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
|
||||
|
||||
if (inputElement && inputElement.value.length > 3) {
|
||||
loading();
|
||||
const data = {
|
||||
mediaUploadId: slug?.split("-")?.[0],
|
||||
message: inputElement.value,
|
||||
parentId,
|
||||
};
|
||||
|
||||
console.log(data);
|
||||
const response = await createPublicSuggestion(data);
|
||||
console.log(response);
|
||||
const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
|
||||
console.log(responseGet.data?.data);
|
||||
setListSuggestion(responseGet.data?.data);
|
||||
|
||||
// Reset input field
|
||||
inputElement.value = "";
|
||||
|
||||
// document.querySelector("#comment-id-" + parentId)?.style.display = "none";
|
||||
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
const postData = () => {
|
||||
const checkMessage = checkMaliciousText(message);
|
||||
if (checkMessage == "") {
|
||||
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
||||
router.push("/auth");
|
||||
} else {
|
||||
sendSuggestionParent();
|
||||
}
|
||||
} else {
|
||||
warning(checkMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const postDataChild = (id: any) => {
|
||||
const checkMessage = checkMaliciousText(message);
|
||||
if (checkMessage == "") {
|
||||
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
||||
router.push("/auth");
|
||||
} else {
|
||||
sendSuggestionChild(id);
|
||||
}
|
||||
} else {
|
||||
warning(checkMessage);
|
||||
}
|
||||
};
|
||||
|
||||
async function deleteDataSuggestion(dataId: any) {
|
||||
loading();
|
||||
const response = await deletePublicSuggestion(dataId);
|
||||
console.log(response);
|
||||
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
|
||||
console.log(responseGet.data?.data);
|
||||
setListSuggestion(responseGet.data?.data);
|
||||
close();
|
||||
}
|
||||
|
||||
const deleteData = (dataId: any) => {
|
||||
MySwal.fire({
|
||||
title: "Delete Comment",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#3085d6",
|
||||
confirmButtonColor: "#d33",
|
||||
confirmButtonText: "Delete",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
deleteDataSuggestion(dataId);
|
||||
console.log(dataId);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const shimmer = (w: number, h: number) => `
|
||||
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="g">
|
||||
<stop stop-color="#bcbcbd" offset="20%" />
|
||||
<stop stop-color="#f9fafb" offset="50%" />
|
||||
<stop stop-color="#bcbcbd" offset="70%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||
</svg>`;
|
||||
|
||||
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen px-4 md:px-24 py-4">
|
||||
|
|
@ -227,7 +388,7 @@ const DetailInfo = () => {
|
|||
<div className="md:w-3/4">
|
||||
{/* Gambar Besar */}
|
||||
<div className="relative">
|
||||
<img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
|
||||
<Image width={1920} height={1080} src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
|
||||
<div className="absolute top-4 left-4"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -235,7 +396,7 @@ const DetailInfo = () => {
|
|||
<div className="py-4 flex flex-row gap-3">
|
||||
{detailDataImage?.files?.map((file: any, index: number) => (
|
||||
<a onClick={() => setSelectedImage(index)} key={file?.id}>
|
||||
<img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
|
||||
<Image alt="imgae-small" width={1920} height={1080} src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -325,20 +486,215 @@ const DetailInfo = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full mb-8">
|
||||
<div className="w-full">
|
||||
{/* Comment */}
|
||||
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
|
||||
<div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
|
||||
<div className="gap-5 flex flex-col px-4 lg:px-14">
|
||||
<p className="flex items-start text-lg">Berikan Komentar</p>
|
||||
<Textarea placeholder="Type your comments here." className="flex w-full" />
|
||||
<button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">Kirim</button>
|
||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
||||
<Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
|
||||
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
|
||||
{t("send")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
|
||||
|
||||
<div>
|
||||
{listSuggestion?.map((data: any) => (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
width={1080}
|
||||
height={1080}
|
||||
src={data?.suggestionFrom?.profilePictureUrl}
|
||||
className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
|
||||
onError={addDefaultProfile}
|
||||
alt=""
|
||||
/>
|
||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
|
||||
{getPublicLocaleTimestamp(new Date(data.createdAt))}
|
||||
</p>
|
||||
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
|
||||
<div>
|
||||
<a
|
||||
style={
|
||||
Number(data.suggestionFrom?.id) == Number(userId)
|
||||
? {
|
||||
display: "none",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onClick={() => showInput(`comment-id-${data.id}`)}
|
||||
className="mr-2"
|
||||
>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
|
||||
</a>
|
||||
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
|
||||
<a onClick={() => deleteData(data.id)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{visibleInput === `comment-id-${data.id}` && (
|
||||
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
|
||||
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
|
||||
<div className="flex flex-row gap-3">
|
||||
<a onClick={() => postDataChild(data.id)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
|
||||
</a>
|
||||
<a onClick={() => showInput(`comment-id-${data.id}`)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.children.length > 0
|
||||
? data.children?.map((child1: any) => (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
width={1080}
|
||||
height={1080}
|
||||
src={child1.suggestionFrom?.profilePictureUrl}
|
||||
onError={addDefaultProfile}
|
||||
alt=""
|
||||
className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
|
||||
/>
|
||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||
{" "}
|
||||
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
|
||||
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
|
||||
</p>
|
||||
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
|
||||
<div>
|
||||
<a
|
||||
style={
|
||||
Number(child1.suggestionFrom?.id) == Number(userId)
|
||||
? {
|
||||
display: "none",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onClick={() => showInput(`comment-id-${child1.id}`)}
|
||||
>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
|
||||
</a>
|
||||
<a
|
||||
style={
|
||||
Number(child1.suggestionFrom?.id) == Number(userId)
|
||||
? {}
|
||||
: {
|
||||
display: "none",
|
||||
}
|
||||
}
|
||||
onClick={() => deleteData(child1.id)}
|
||||
>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{visibleInput === `comment-id-${child1.id}` && (
|
||||
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
|
||||
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
|
||||
<div className="flex flex-row mt-2 gap-3">
|
||||
<a onClick={() => postDataChild(child1.id)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
|
||||
</a>
|
||||
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{child1.children.length > 0
|
||||
? child1.children?.map((child2: any) => (
|
||||
<div className="">
|
||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
width={1080}
|
||||
height={1080}
|
||||
src={child2.suggestionFrom?.profilePictureUrl}
|
||||
className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
|
||||
onError={addDefaultProfile}
|
||||
alt=""
|
||||
/>
|
||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||
{" "}
|
||||
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
|
||||
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
|
||||
<div>
|
||||
<a
|
||||
style={
|
||||
Number(child2.suggestionFrom?.id) == Number(userId)
|
||||
? {
|
||||
display: "none",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onClick={() => showInput(`comment-id-${child2.id}`)}
|
||||
>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
|
||||
</a>
|
||||
<a
|
||||
style={
|
||||
Number(child2.suggestionFrom?.id) == Number(userId)
|
||||
? {}
|
||||
: {
|
||||
display: "none",
|
||||
}
|
||||
}
|
||||
onClick={() => deleteData(child2.id)}
|
||||
>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{visibleInput === `comment-id-${child2.id}` && (
|
||||
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
|
||||
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
|
||||
<div className="flex flex-row gap-3">
|
||||
<a onClick={() => postDataChild(child2.id)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
|
||||
</a>
|
||||
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
|
||||
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
: ""}
|
||||
</div>
|
||||
))
|
||||
: ""}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Konten Serupa */}
|
||||
<div className="">
|
||||
<NewContent group="polda" type={"similar"} />
|
||||
</div>
|
||||
{/* <div className="">
|
||||
<NewContent group="mabes" type={"similar"} />
|
||||
</div> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ const HeroKaltara = () => {
|
|||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
<Carousel className="lg:w-2/3 lg:h-full ">
|
||||
<Carousel className="w-full lg:w-2/3 lg:h-full ">
|
||||
<CarouselContent>
|
||||
{content?.map((row: any) => (
|
||||
<CarouselItem key={row?.id}>
|
||||
|
|
@ -175,7 +175,7 @@ const HeroKaltara = () => {
|
|||
<Link href={`${locale}/image/detail/${row?.slug}`}>
|
||||
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
|
||||
</Link>
|
||||
<h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
|
||||
<h1 className="font-bold font-sans text-[15px] lg:text-[30px]">{row.title}</h1>
|
||||
<div className="flex flex-row gap-3">
|
||||
<p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
|
||||
<p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const PpsSection = () => {
|
|||
{image?.map((news: any, index) => (
|
||||
<CarouselItem key={news?.id} className="grid grid-cols-1">
|
||||
<Card key={index} className="w-full overflow-hidden shadow-lg h-full">
|
||||
<Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-[60vh] object-cover rounded-md" />
|
||||
<Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-full lg:h-[60vh] object-cover rounded-md" />
|
||||
|
||||
<CardContent className="p-4">
|
||||
{/* <div className="flex items-center gap-2 text-white text-xs font-bold">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ const SocialMedia = () => {
|
|||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="flex flex-col lg:flex-row w-full">
|
||||
{selectedTab == "x" ? (
|
||||
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
|
||||
{/* <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
|
||||
|
|
@ -140,7 +140,7 @@ const SocialMedia = () => {
|
|||
</div>
|
||||
</div> */}
|
||||
<Carousel className="w-full mx-auto">
|
||||
<CarouselContent className="gap-[20px] w-full">
|
||||
<CarouselContent className="gap-[20px] pl-5">
|
||||
{twitter?.map((image: any) => (
|
||||
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4">
|
||||
<div className="mt-2 flex flex-row gap-2 mx-1">
|
||||
|
|
|
|||
|
|
@ -46,15 +46,14 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||
</svg>`;
|
||||
|
||||
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 (
|
||||
<div className="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl ">
|
||||
<div className="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl">
|
||||
<Reveal>
|
||||
<h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
|
||||
{pathname?.split("/")[1] == "in" ? (
|
||||
<h2 className="bg-[#c03724] rounded-md p-3 w-fit text-white">
|
||||
{/* {pathname?.split("/")[1] == "in" ? (
|
||||
<>
|
||||
<span className="text-black dark:text-white">{t("category")} </span>
|
||||
{t("content")}
|
||||
|
|
@ -64,17 +63,25 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
<span className="text-black dark:text-white">{t("content")} </span>
|
||||
{t("category")}
|
||||
</>
|
||||
)}
|
||||
)} */}
|
||||
Kategori Konten
|
||||
</h2>
|
||||
<div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||||
{/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
|
||||
|
||||
<div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4">
|
||||
{categories?.map((category: any, index: number) =>
|
||||
!seeAllValue ? (
|
||||
index < 4 ? (
|
||||
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
alt="category"
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={category?.thumbnailLink}
|
||||
className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
|
||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -83,8 +90,15 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
)
|
||||
) : (
|
||||
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
alt="category"
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={category?.thumbnailLink}
|
||||
className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
|
||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import React from "react";
|
|||
|
||||
const ContactUsKaltara = () => {
|
||||
return (
|
||||
<div className="bg-[#E7E7E7] h-[150px] lg:h-[300px] text-black px-4 lg:px-20 mb-10 mt-10">
|
||||
<div className="bg-[#E7E7E7] h-full lg:h-[300px] text-black px-4 lg:px-20 mb-10">
|
||||
<div className="container mx-auto py-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start gap-4">
|
||||
{/* Logo */}
|
||||
|
|
|
|||
|
|
@ -85,18 +85,18 @@ const HeaderBannerKaltara = () => {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Carousel className="lg:w-2/3 lg:h-full ">
|
||||
<Carousel className="w-full lg:w-2/3 lg:h-full ">
|
||||
<CarouselContent>
|
||||
{content?.map((row: any) => (
|
||||
<CarouselItem key={row?.id}>
|
||||
<div className="relative h-[310px] lg:h-[580px]">
|
||||
<Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full rounded-lg object-cover" />
|
||||
<div className="absolute bottom-5 left-5 right-5 bg-black bg-opacity-50 text-white p-4 rounded-r-lg border-l-2 border-[#bb3523]">
|
||||
<span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
|
||||
<h3 className="text-[42px] font-sans text-white">{row.title}</h3>
|
||||
<span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer mt-2 lg:mt-0">
|
||||
<h3 className="text-[17px] lg:text-[42px] font-sans text-white">{row.title}</h3>
|
||||
</div>
|
||||
<p className="text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
|
||||
<p className="text-[9px] lg:text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
|
||||
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
|
||||
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
|
||||
</p>
|
||||
|
|
@ -105,8 +105,8 @@ const HeaderBannerKaltara = () => {
|
|||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
<CarouselPrevious className="left-6" />
|
||||
<CarouselNext className="right-6" />
|
||||
</Carousel>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
<Carousel className="w-[90%] mx-auto">
|
||||
<CarouselContent>
|
||||
{content?.map((video: any) => (
|
||||
<CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
|
||||
<CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
|
||||
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const NavbarKaltara = () => {
|
|||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<div className="hidden lg:flex items-center gap-5">
|
||||
<Link href="/tbnews/polda-kaltara" className="text-white">
|
||||
TBNews
|
||||
</Link>
|
||||
|
|
@ -184,6 +184,151 @@ const NavbarKaltara = () => {
|
|||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* mobile menu */}
|
||||
{menuOpen && (
|
||||
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 w-full space-y-3 z-50">
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList className="gap-10">
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger className="bg-[#c03724] text-white hover:bg-[#c03724] hover:text-white">
|
||||
{/* <a className="text-white flex flex-row justify-center items-center cursor-pointer"> */}
|
||||
{/* <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg> */}
|
||||
{t("content")}
|
||||
{/* </a> */}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden">
|
||||
<NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
|
||||
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
|
||||
<FiImage className="mr-2" />
|
||||
{t("image")}
|
||||
</p>
|
||||
</NavigationMenuLink>
|
||||
<NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
|
||||
{pathname?.split("/")[1] == "in" ? (
|
||||
<>
|
||||
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
|
||||
<FiYoutube className="mr-2" />
|
||||
{t("video")}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
|
||||
<FiYoutube className="mr-2" />
|
||||
{t("video")}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</NavigationMenuLink>
|
||||
<NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
|
||||
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
|
||||
<FiFile className="mr-2" />
|
||||
{t("text")}
|
||||
</p>
|
||||
</NavigationMenuLink>
|
||||
<NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
|
||||
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
|
||||
<FiMusic className="mr-2" />
|
||||
{t("audio")}{" "}
|
||||
</p>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<Link href={prefixPath + "/schedule"} legacyBehavior passHref>
|
||||
<NavigationMenuLink className="bg-[#c03724] text-white">
|
||||
{/* <span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span> */}
|
||||
{t("schedule")}
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<Link href={prefixPath + "/indeks"} legacyBehavior passHref>
|
||||
<NavigationMenuLink className="bg-[#c03724] text-white">
|
||||
{/* <span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span> */}
|
||||
{t("index")}
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
<div className="flex lg:hidden flex-col items-center gap-1">
|
||||
<div className="flex flex-row justify-between items-center gap-2">
|
||||
<Link href="/tbnews/polda-kaltara" className="text-white">
|
||||
TBNews
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center">
|
||||
<a href="https://tvradio.polri.go.id/">
|
||||
<Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Languange */}
|
||||
<div className="relative inline-block text-left">
|
||||
<LocalSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-10 items-center py-3">
|
||||
<div className="relative text-gray-600 dark:text-white">
|
||||
<input
|
||||
value={onSearch}
|
||||
onChange={(e) => setOnSearch(e.target.value)}
|
||||
onKeyPress={() => router.push(`/all/filter?title=${onSearch}`)}
|
||||
type="text"
|
||||
placeholder={t("search")}
|
||||
className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
|
||||
/>
|
||||
<span className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Dark Mode */}
|
||||
<ThemeSwitcher />
|
||||
|
||||
{/* login */}
|
||||
<Link href="/auth">
|
||||
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 p-2 w-fit h-fit">
|
||||
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
||||
<p className="text-[#c03724]">Login</p>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@ const SearchSectionKaltara = () => {
|
|||
<Reveal>
|
||||
<div className="flex flex-col items-center text-center py-12 px-4 md:py-16">
|
||||
{/* Heading */}
|
||||
<h2 className="text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
|
||||
<p className="text-gray-600 mt-2 max-w-lg text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
|
||||
<h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
|
||||
<p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
|
||||
|
||||
{/* Subjudul */}
|
||||
<h3 className="text-sm md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
|
||||
<h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative mt-4 w-full max-w-sm md:max-w-md">
|
||||
|
|
|
|||
Loading…
Reference in New Issue