humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix landing mobile

This commit is contained in:
Rama Priyanto 2025-02-25 17:30:33 +07:00
parent f94e21d953
commit 9730375aeb
6 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
components/landing/HeaderNews.tsx
View File

@ -65,8 +65,8 @@ export default function HeaderNews() {
return (
<div className="w-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-[75%] lg:mx-auto">
<div className="lg:hidden w-full h-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-full lg:w-[75%] lg:mx-auto">
<div className="lg:hidden w-[90%] h-[40vh] mx-auto">
{article ? (
<Swiper
centeredSlides={true}
@ -97,17 +97,17 @@ export default function HeaderNews() {
{article?.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id}>
<Card isFooterBlurred radius="lg" className="border-none">
{/* <Image
width={1920}
height={1080}
<Image
width={720}
height={480}
alt="headernews"
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="h-[25vh] object-cover"
/> */}
className="w-full h-[100px] object-cover"
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-black dark:text-white">
@ -135,11 +135,11 @@ export default function HeaderNews() {
<CircularProgress aria-label="Loading..." size="lg" />
)}
</div>
<div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[37vh] lg:h-[50vh]">
<div className="w-[90%] lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[50vh] mx-auto">
<p className="text-base font-bold text-center dark:text-white text-black">
{t("berita")}
</p>
<ScrollShadow hideScrollBar className="h-[33vh] lg:h-[39vh] ">
<ScrollShadow hideScrollBar className="h-[29vh] lg:h-[39vh] ">
{hotNews?.map((data: any, index: number) => (
<div
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
@ -272,16 +272,16 @@ export default function HeaderNews() {
<CircularProgress aria-label="Loading..." size="lg" />
)}
</div>
<div className="lg:w-[25%] h-[50vh] rounded-md text-white dark:text-black ">
<div className="w-[90%] lg:w-[25%] h-[50vh] rounded-md text-white dark:text-black mx-auto lg:mx-0">
{/* <GPRKominfo /> */}
{selectedTab === "media" ? (
<div className="lg:!h-[50vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
<div className="lg:!h-[50vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] text-black dark:text-white rounded-lg">
<div className="text-sm flex flex-row gap-3 mx-2 mb-2">
<a
onClick={() => setSelectedTab("media")}
className={
"text-black border-b-3 border-red-400 cursor-pointer p-0"
"text-black dark:text-white border-b-3 border-red-400 cursor-pointer p-0"
}
>
{t("terkini")}
@ -322,55 +322,59 @@ export default function HeaderNews() {
</Button>
</div>
) : (
<div className="lg:!h-[35vh] dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
<div className="text-[15px] flex flex-row gap-10">
<div className="lg:!h-[50vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] text-black dark:text-white rounded-lg">
<div className="text-sm flex flex-row gap-3 mx-2 mb-2">
<a
className={"text-slate-300 cursor-pointer"}
onClick={() => setSelectedTab("media")}
className={"text-slate-300 cursor-pointer py-2"}
>
{t("terkini")}
</a>
<a
onClick={() => setSelectedTab("video")}
className={
"text-black border-b-3 border-red-400 cursor-pointer py-2"
"text-black dark:text-white border-b-3 border-red-400 cursor-pointer p-0"
}
>
Video Virtual
</a>
</div>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
className="border-b-2 py-2 lg:py-4"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
INDONESIA
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
className="border-b-2 py-2 lg:py-4"
>
ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
UNTUK MENGATASI PANDEMI COVID 19
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=jaihQPjxcy4"
className="border-b-2 py-2 lg:py-4"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
RADIKALISME
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=umPEo0FYTQk"
className="border-b-2 py-2 lg:py-4"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
SAHABAT MASYARAKAT
</Link>
<ScrollShadow hideScrollBar className="h-[39vh]">
<div className="p-2 flex flex-col gap-2 text-sm">
<Link
target="_blank"
href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI
UNTUK INDONESIA
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
>
ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
UNTUK MENGATASI PANDEMI COVID 19
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=jaihQPjxcy4"
className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
RADIKALISME
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=umPEo0FYTQk"
className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
SAHABAT MASYARAKAT
</Link>
</div>
</ScrollShadow>
</div>
)}
</div>

6
components/landing/MedolUpdate.tsx
View File

@ -109,11 +109,11 @@ export default function MedolUpdate() {
};
return (
<div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
<div className="text-xl font-semibold w-full">
<div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
<div className="text-xl font-semibold w-full ">
<p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p>
</div>
<div className="bg-white text-black p-1 md:p-5 space-y-5">
<div className=" p-1 md:p-5 space-y-5">
<Tabs
classNames={{
tabList: "bg-white shadow-lg border p-2 rounded-lg",

8
components/landing/adds-carousel.tsx
View File

@ -22,7 +22,7 @@ const datas = [
];
export default function AddsCarousel() {
return (
<div className="w-[75%] mx-auto">
<div className="w-[90%] lg:w-[75%] mx-auto">
{datas ? (
<Swiper
centeredSlides={true}
@ -51,18 +51,18 @@ export default function AddsCarousel() {
}}
>
{datas?.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id} className="h-[50vh]">
<SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
<Card
isFooterBlurred
radius="lg"
className="border-none h-[50vh] shadow-none"
className="border-none h-[20vh] lg:h-[50vh] shadow-none"
>
<Image
alt="headernews"
width={1440}
height={1080}
src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
className="w-full !h-[50vh] object-cover rounded-lg"
className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
/>
</Card>
</SwiperSlide>

18
components/landing/banner-new.tsx
View File

@ -67,7 +67,7 @@ export default function BannerHumasNew() {
return (
<div className="h-fit relative text-white overflow-hidden">
<div
className="flex w-full h-[78vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
className="flex w-full h-[45vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
>
{images.map((img, index) => (
@ -84,13 +84,15 @@ export default function BannerHumasNew() {
</div>
<div className="absolute inset-0 bg-black bg-opacity-40" />
<div className="absolute z-50 lg:mt-[50px] top-44 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
<div className="flex flex-col gap-3 justify-between">
<div className="flex flex-col gap-3 justify-between p-5">
<div className="flex justify-between items-center mb-10">
<div className="flex flex-col gap-1 justify-start items-start">
<p className="text-5xl font-bold text-left leading-0">
<p className="text-lg lg:text-5xl font-bold text-left leading-0">
SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
</p>
<p>OBYEKTIF - DIPERCAYA - PARTISIPASI</p>
<p className="text-xs lg:text-base">
OBYEKTIF - DIPERCAYA - PARTISIPASI
</p>
</div>
<Image
src="/divhumas.png"
@ -100,12 +102,12 @@ export default function BannerHumasNew() {
className="w-[200px]"
/>
</div>
<div className="flex justify-between">
<div className="flex flex-row gap-6">
<div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10">
<div className="flex flex-row gap-6">
<Dropdown onOpenChange={setOnOpen}>
<DropdownTrigger>
<Button
className="w-[200px] bg-white dark:bg-stone-900"
className="w-full lg:w-[200px] bg-white dark:bg-stone-900"
radius="sm"
endContent={
onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
@ -163,7 +165,7 @@ export default function BannerHumasNew() {
>
<ChevronRightIcon />
</button>
<div className="absolute bottom-4 right-60">
<div className="absolute bottom-4 right-5 lg:right-60 lg:mx-5">
<div className="flex">
<div className="flex gap-1 lg:gap-3 items-center">
<Link

28
components/landing/footer-new.tsx
View File

@ -20,16 +20,18 @@ export default function FooterNew() {
return (
<div className="mb-[60px] relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold">
<div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-[#A88155] via-[#ad1719] to-[#AA0004] from-3% via-50% to-70% ">
<div className="flex justify-center text-2xl">Channel Humas Polri</div>
<div className="flex flex-row gap-4 justify-around items-center">
<Link href="">
<div className="py-10 px-12 lg:px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-[#A88155] via-[#ad1719] to-[#AA0004] from-3% via-50% to-70% ">
<div className="flex justify-center text-xl lg:text-2xl">
Channel Humas Polri
</div>
<div className="grid grid-cols-3 lg:flex lg:flex-row gap-4 justify-around items-center">
<Link href="" className="flex justify-center">
<Image
src="/assets/portal-humas.png"
width={480}
height={480}
alt="portal-humas"
className="w-[100px]"
className="w-[50px] lg:w-[100px]"
/>
</Link>
<Link href="" className="flex flex-col justify-center items-center">
@ -38,7 +40,7 @@ export default function FooterNew() {
width={480}
height={480}
alt="mediahub"
className="w-[100px]"
className="w-[50px] lg:w-[100px]"
/>
<p className="text-[#FED882] text-lg">MediaHub</p>
</Link>
@ -48,7 +50,7 @@ export default function FooterNew() {
width={480}
height={480}
alt="spit"
className="w-[170px]"
className="w-[85px] lg:w-[170px]"
/>
</Link>
<Link href="">
@ -57,7 +59,7 @@ export default function FooterNew() {
width={480}
height={480}
alt="polritv"
className="w-[170px]"
className="w-[85px] lg:w-[170px]"
/>
</Link>
<Link href="">
@ -66,7 +68,7 @@ export default function FooterNew() {
width={480}
height={480}
alt="tbn"
className="w-[170px]"
className="w-[85px] lg:w-[170px]"
/>
</Link>
<Link href="">
@ -75,11 +77,11 @@ export default function FooterNew() {
width={480}
height={480}
alt="inp"
className="w-[170px]"
className="w-[85px] lg:w-[170px]"
/>
</Link>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div className="flex flex-col gap-1 text-md font-light">
<p className="text-lg font-normal">Tentang Kami</p>
<div className="flex flex-row gap-2 items-center">
@ -163,8 +165,8 @@ export default function FooterNew() {
</div>
</div>
</div>
<div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-base">
&copy; Copyright Humas&nbsp; POLRI &reg; &nbsp; All Rights Reserved
<div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-sm lg:text-base">
&copy; Copyright Humas&nbsp; POLRI &reg;&nbsp;All Rights Reserved
</div>
</div>
);

4
components/landing/social-media.tsx
View File

@ -37,13 +37,13 @@ export default function SocialMediaNew() {
const t = useTranslations("Landing");
return (
<div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
<div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
<div className="text-xl font-semibold w-full">
<p className="border-b-2 border-red-600 w-fit mx-auto">
Media Sosial Humas
</p>
</div>
<div className="bg-white text-black p-1 md:p-5 space-y-5">
<div className=" p-1 md:p-5 space-y-5">
<Tabs
classNames={{
tabList: "bg-white shadow-lg border p-2 rounded-lg",