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

6
components/landing/MedolUpdate.tsx
View File

@ -109,11 +109,11 @@ export default function MedolUpdate() {
}; };
return ( 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"> <div className="text-xl font-semibold w-full ">
<p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p> <p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p>
</div> </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 <Tabs
classNames={{ classNames={{
tabList: "bg-white shadow-lg border p-2 rounded-lg", 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() { export default function AddsCarousel() {
return ( return (
<div className="w-[75%] mx-auto"> <div className="w-[90%] lg:w-[75%] mx-auto">
{datas ? ( {datas ? (
<Swiper <Swiper
centeredSlides={true} centeredSlides={true}
@ -51,18 +51,18 @@ export default function AddsCarousel() {
}} }}
> >
{datas?.map((newsItem: any, index: number) => ( {datas?.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id} className="h-[50vh]"> <SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
<Card <Card
isFooterBlurred isFooterBlurred
radius="lg" radius="lg"
className="border-none h-[50vh] shadow-none" className="border-none h-[20vh] lg:h-[50vh] shadow-none"
> >
<Image <Image
alt="headernews" alt="headernews"
width={1440} width={1440}
height={1080} height={1080}
src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src} 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> </Card>
</SwiperSlide> </SwiperSlide>

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

@ -67,7 +67,7 @@ export default function BannerHumasNew() {
return ( return (
<div className="h-fit relative text-white overflow-hidden"> <div className="h-fit relative text-white overflow-hidden">
<div <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}%)` }} style={{ transform: `translateX(-${currentIndex * 100}%)` }}
> >
{images.map((img, index) => ( {images.map((img, index) => (
@ -84,13 +84,15 @@ export default function BannerHumasNew() {
</div> </div>
<div className="absolute inset-0 bg-black bg-opacity-40" /> <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="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 justify-between items-center mb-10">
<div className="flex flex-col gap-1 justify-start items-start"> <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 SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
</p> </p>
<p>OBYEKTIF - DIPERCAYA - PARTISIPASI</p> <p className="text-xs lg:text-base">
OBYEKTIF - DIPERCAYA - PARTISIPASI
</p>
</div> </div>
<Image <Image
src="/divhumas.png" src="/divhumas.png"
@ -100,12 +102,12 @@ export default function BannerHumasNew() {
className="w-[200px]" className="w-[200px]"
/> />
</div> </div>
<div className="flex justify-between"> <div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10">
<div className="flex flex-row gap-6"> <div className="flex flex-row gap-6">
<Dropdown onOpenChange={setOnOpen}> <Dropdown onOpenChange={setOnOpen}>
<DropdownTrigger> <DropdownTrigger>
<Button <Button
className="w-[200px] bg-white dark:bg-stone-900" className="w-full lg:w-[200px] bg-white dark:bg-stone-900"
radius="sm" radius="sm"
endContent={ endContent={
onOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
@ -163,7 +165,7 @@ export default function BannerHumasNew() {
> >
<ChevronRightIcon /> <ChevronRightIcon />
</button> </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">
<div className="flex gap-1 lg:gap-3 items-center"> <div className="flex gap-1 lg:gap-3 items-center">
<Link <Link

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

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

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

@ -37,13 +37,13 @@ export default function SocialMediaNew() {
const t = useTranslations("Landing"); const t = useTranslations("Landing");
return ( 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"> <div className="text-xl font-semibold w-full">
<p className="border-b-2 border-red-600 w-fit mx-auto"> <p className="border-b-2 border-red-600 w-fit mx-auto">
Media Sosial Humas Media Sosial Humas
</p> </p>
</div> </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 <Tabs
classNames={{ classNames={{
tabList: "bg-white shadow-lg border p-2 rounded-lg", tabList: "bg-white shadow-lg border p-2 rounded-lg",