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

fixing ui

This commit is contained in:
Rama Priyanto 2025-03-03 18:06:31 +07:00
parent e4bbd1c063
commit 72736d6287
7 changed files with 61 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/icons.tsx
View File

@ -96,7 +96,7 @@ export const SendIcon: React.FC<IconSvgProps> = ({
size, size,
width, width,
height, height,
color = "white", color = "currentColor",
...props ...props
}) => { }) => {
return ( return (
@ -111,7 +111,7 @@ export const SendIcon: React.FC<IconSvgProps> = ({
<g clipPath="url(#clip1_1012_36617)"> <g clipPath="url(#clip1_1012_36617)">
<path <path
d="M15.0053 0.0999837L0.520926 8.45623C-0.0446989 8.78123 0.0271761 9.56873 0.589676 9.80623L3.91155 11.2L12.8897 3.28748C13.0616 3.13436 13.3053 3.36873 13.1584 3.54686L5.6303 12.7187V15.2344C5.6303 15.9719 6.52093 16.2625 6.95843 15.7281L8.9428 13.3125L12.8366 14.9437C13.2803 15.1312 13.7866 14.8531 13.8678 14.375L16.1178 0.874984C16.2241 0.243734 15.5459 -0.212516 15.0053 0.0999837Z" d="M15.0053 0.0999837L0.520926 8.45623C-0.0446989 8.78123 0.0271761 9.56873 0.589676 9.80623L3.91155 11.2L12.8897 3.28748C13.0616 3.13436 13.3053 3.36873 13.1584 3.54686L5.6303 12.7187V15.2344C5.6303 15.9719 6.52093 16.2625 6.95843 15.7281L8.9428 13.3125L12.8366 14.9437C13.2803 15.1312 13.7866 14.8531 13.8678 14.375L16.1178 0.874984C16.2241 0.243734 15.5459 -0.212516 15.0053 0.0999837Z"
fill="white" fill="currentColor"
/> />
</g> </g>
</g> </g>

14
components/landing/MedolUpdate.tsx
View File

@ -114,7 +114,7 @@ export default function MedolUpdate() {
<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=" p-1 md:p-5 space-y-5"> <div className=" p-1 md:py-5 md:px-12 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",
@ -131,12 +131,12 @@ export default function MedolUpdate() {
onSelectionChange={setSelectedTab} onSelectionChange={setSelectedTab}
> >
<Tab key="mediahub" title="MediaHUB Update"> <Tab key="mediahub" title="MediaHUB Update">
{mediahubUpdate.length > 1 ? ( {mediahubUpdate?.length > 1 ? (
<> <>
<Swiper <Swiper
navigation={true} navigation={true}
modules={[Navigation]} modules={[Navigation]}
spaceBetween={40} spaceBetween={10}
slidesPerView={1} slidesPerView={1}
breakpoints={{ breakpoints={{
// When the window width is less than 640px // When the window width is less than 640px
@ -219,13 +219,13 @@ export default function MedolUpdate() {
)} )}
</Tab> </Tab>
<Tab key="tbnews" title="Tribrata News Update"> <Tab key="tbnews" title="Tribrata News Update">
{tbnUpdate.length > 1 ? ( {tbnUpdate?.length > 1 ? (
<> <>
{" "} {" "}
<Swiper <Swiper
navigation={true} navigation={true}
modules={[Navigation]} modules={[Navigation]}
spaceBetween={40} spaceBetween={10}
slidesPerView={1} slidesPerView={1}
breakpoints={{ breakpoints={{
// When the window width is less than 640px // When the window width is less than 640px
@ -309,12 +309,12 @@ export default function MedolUpdate() {
)} )}
</Tab> </Tab>
<Tab key="inp" title="Indonesia Nasional Police Update"> <Tab key="inp" title="Indonesia Nasional Police Update">
{inpUpdate.length > 1 ? ( {inpUpdate?.length > 1 ? (
<> <>
<Swiper <Swiper
navigation={true} navigation={true}
modules={[Navigation]} modules={[Navigation]}
spaceBetween={40} spaceBetween={10}
slidesPerView={1} slidesPerView={1}
breakpoints={{ breakpoints={{
// When the window width is less than 640px // When the window width is less than 640px

4
components/landing/NewsTicker.tsx
View File

@ -46,14 +46,14 @@ export default function NewsTicker() {
}, [article]); }, [article]);
return ( return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50"> <div className="fixed bottom-0 z-50 flex flex-row h-[60px] lg:h-[7vh] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]"> <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
<span className="mr-2"></span> BREAKING NEWS <span className="mr-2"></span> BREAKING NEWS
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div> <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
</div> </div>
{article && ( {article && (
<div <div
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${ className={`w-full px-5 py-1 flex flex-col justify-center gap-1 transition-transform duration-300 ${
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0" animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
}`} }`}
> >

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

@ -194,7 +194,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-[45vh] lg:h-[60vh] transition-transform duration-700 ease-in-out" className="flex w-full h-[45vh] lg:h-[93vh] 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) => (
@ -209,8 +209,8 @@ export default function BannerHumasNew() {
</Link> </Link>
))} ))}
</div> </div>
<div className="absolute inset-0 bg-black bg-opacity-40" /> <div className="absolute inset-0 bg-black bg-opacity-40 pointer-events-none" />
<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-48 lg:top-1/3 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 p-5"> <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">
@ -229,7 +229,7 @@ export default function BannerHumasNew() {
className="w-[200px]" className="w-[200px]"
/> />
</div> </div>
<div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10"> <div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10 lg:mt-24">
<div className="flex flex-row gap-6"> <div className="flex flex-row gap-6">
<Popover <Popover
placement="bottom" placement="bottom"
@ -326,23 +326,18 @@ export default function BannerHumasNew() {
/> />
</div> </div>
</div> </div>
{/* <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
{t("jumbotron")}
</p> */}
{/* <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> */}
</div> </div>
<button <button
onClick={prevImage} onClick={() => prevImage()}
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition" className=" absolute z-50 left-4 lg:left-10 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
> >
<ChevronLeftIcon /> <ChevronLeftIcon size={36} />
</button> </button>
<button <button
onClick={nextImage} onClick={() => nextImage()}
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition" className="absolute z-50 right-4 lg:right-10 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
> >
<ChevronRightIcon /> <ChevronRightIcon size={36} />
</button> </button>
<div className="absolute bottom-4 right-5 lg:right-60 lg:mx-5"> <div className="absolute bottom-4 right-5 lg:right-60 lg:mx-5">
<div className="flex"> <div className="flex">

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

@ -20,12 +20,15 @@ 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-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="py-10 w-full lg:w-[70%] flex flex-col gap-4 lg:mx-auto">
<div className="flex justify-center text-xl lg:text-2xl"> <div className="flex justify-center text-xl lg:text-2xl">
Channel Humas Polri Channel Humas Polri
</div> </div>
<div className="grid grid-cols-3 lg:flex lg:flex-row gap-4 justify-around items-center"> <div className="grid grid-cols-3 lg:flex lg:flex-row gap-4 justify-around items-center border-b-1 border-black pb-5">
<Link href="" className="flex justify-center"> <Link
href="https://portal.humas.polri.go.id/"
className="flex justify-center"
>
<Image <Image
src="/assets/portal-humas.png" src="/assets/portal-humas.png"
width={480} width={480}
@ -34,15 +37,17 @@ export default function FooterNew() {
className="w-[50px] lg:w-[100px]" className="w-[50px] lg:w-[100px]"
/> />
</Link> </Link>
<Link href="" className="flex flex-col justify-center items-center"> <Link
href="https://mediahub.polri.go.id/"
className="flex flex-col justify-center items-center"
>
<Image <Image
src="/assets/mediahub.png" src="/assets/mediahub.png"
width={480} width={480}
height={480} height={480}
alt="mediahub" alt="mediahub"
className="w-[50px] lg:w-[100px]" className="w-[80px] lg:w-[200px]"
/> />
<p className="text-[#FED882] text-lg">MediaHub</p>
</Link> </Link>
<Link href=""> <Link href="">
<Image <Image
@ -50,10 +55,17 @@ export default function FooterNew() {
width={480} width={480}
height={480} height={480}
alt="spit" alt="spit"
className="w-[85px] lg:w-[170px]" className="w-[85px] lg:w-[170px] hidden dark:block"
/>
<Image
src="/assets/spit-blackline.png"
width={480}
height={480}
alt="spit"
className="w-[85px] lg:w-[170px] dark:hidden"
/> />
</Link> </Link>
<Link href=""> <Link href="https://tvradio.polri.go.id/">
<Image <Image
src="/assets/polri-tv.png" src="/assets/polri-tv.png"
width={480} width={480}
@ -62,7 +74,7 @@ export default function FooterNew() {
className="w-[85px] lg:w-[170px]" className="w-[85px] lg:w-[170px]"
/> />
</Link> </Link>
<Link href=""> <Link href="https://tribratanews.polri.go.id/">
<Image <Image
src="/assets/tb-news.png" src="/assets/tb-news.png"
width={480} width={480}
@ -71,7 +83,7 @@ export default function FooterNew() {
className="w-[85px] lg:w-[170px]" className="w-[85px] lg:w-[170px]"
/> />
</Link> </Link>
<Link href=""> <Link href="https://inp.polri.go.id/">
<Image <Image
src="/assets/inp.png" src="/assets/inp.png"
width={480} width={480}
@ -81,9 +93,9 @@ export default function FooterNew() {
/> />
</Link> </Link>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:px-10">
<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-semibold">Tentang Kami</p>
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<div className="w-[16px]"> <div className="w-[16px]">
<LandingCallIcon size={16} /> <LandingCallIcon size={16} />
@ -107,32 +119,34 @@ export default function FooterNew() {
</div> </div>
</div> </div>
<div className="flex flex-col gap-4 text-md"> <div className="flex flex-col gap-4 text-md">
<p className="text-lg">Download Aplikasi Polri Presisi</p> <p className="text-lg font-semibold">
Download Aplikasi Polri Presisi
</p>
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<Link <Link
href="" href=""
className="flex flex-row p-1 border-1 border-white rounded-lg" className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
> >
<LandingAppleIcon size={36} /> <LandingAppleIcon size={36} />
<div className="flex flex-col gap-0 leading-none font-light mr-4"> <div className="flex flex-col gap-0 leading-none font-light mr-4">
<p className="text-[10px]">Download on the</p> <p className="text-[10px]">Download on the</p>
<p className="text-lg ">App Store</p> <p className="text-lg font-semibold">App Store</p>
</div> </div>
</Link> </Link>
<Link <Link
href="" href=""
className="flex flex-row p-1 border-1 border-white rounded-lg" className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
> >
<LandingPlayStoreIcon size={30} /> <LandingPlayStoreIcon size={30} />
<div className="flex flex-col gap-0 leading-none font-light mr-4"> <div className="flex flex-col gap-0 leading-none font-light mr-4">
<p className="text-[10px]">GET IT ON</p> <p className="text-[10px]">GET IT ON</p>
<p className="text-lg ">Google Play</p> <p className="text-lg font-semibold">Google Play</p>
</div> </div>
</Link> </Link>
</div> </div>
</div> </div>
<div className="flex flex-col gap-4 text-md"> <div className="flex flex-col gap-4 text-md">
<p className="text-xl font-bold">Subscribe</p> <p className="text-xl font-semibold">Subscribe</p>
<div className="flex flex-col"> <div className="flex flex-col">
<p className="font-light"> <p className="font-light">
Dapatkan info & event terupdate dari kami. Dapatkan info & event terupdate dari kami.
@ -142,23 +156,26 @@ export default function FooterNew() {
<Input <Input
label="" label=""
type="email" type="email"
variant="bordered"
placeholder="Tuliskan Email Anda" placeholder="Tuliskan Email Anda"
className="rounded-none !text-black" className="rounded-none !text-black "
classNames={{ classNames={{
inputWrapper: "rounded-l-lg h-[37px] bg-white !text-black", inputWrapper:
mainWrapper: "rounded-l-lg h-[37px] bg-white !text-black", "rounded-none h-[37px] bg-white !text-black border-black dark:border-white",
mainWrapper:
"rounded-none h-[37px] bg-white !text-black dark:border-white",
}} }}
// startContent={ // startContent={
// <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" /> // <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
// } // }
/> />
<div className="h-[40px] bg-black flex items-center justify-center w-16 rounded-r-lg cursor-pointer"> <div className="h-[38px] dark:h-[37px] text-white dark:text-black bg-black dark:bg-white flex items-center justify-center w-14 cursor-pointer">
<SendIcon /> <SendIcon />
</div> </div>
</div> </div>
</div> </div>
<Link href={`/auth`}> <Link href={`/auth`}>
<Button className="mt-1 text-black bg-white "> <Button className="mt-1 bg-[#BE0106] text-white">
<p className="text-xs">Kontributor Wilayah</p> <p className="text-xs">Kontributor Wilayah</p>
</Button> </Button>
</Link> </Link>

BIN
public/assets/mediahub.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/spit-blackline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB