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,
width,
height,
color = "white",
color = "currentColor",
...props
}) => {
return (
@ -111,7 +111,7 @@ export const SendIcon: React.FC<IconSvgProps> = ({
<g clipPath="url(#clip1_1012_36617)">
<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"
fill="white"
fill="currentColor"
/>
</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 ">
<p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p>
</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
classNames={{
tabList: "bg-white shadow-lg border p-2 rounded-lg",
@ -131,12 +131,12 @@ export default function MedolUpdate() {
onSelectionChange={setSelectedTab}
>
<Tab key="mediahub" title="MediaHUB Update">
{mediahubUpdate.length > 1 ? (
{mediahubUpdate?.length > 1 ? (
<>
<Swiper
navigation={true}
modules={[Navigation]}
spaceBetween={40}
spaceBetween={10}
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px
@ -219,13 +219,13 @@ export default function MedolUpdate() {
)}
</Tab>
<Tab key="tbnews" title="Tribrata News Update">
{tbnUpdate.length > 1 ? (
{tbnUpdate?.length > 1 ? (
<>
{" "}
<Swiper
navigation={true}
modules={[Navigation]}
spaceBetween={40}
spaceBetween={10}
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px
@ -309,12 +309,12 @@ export default function MedolUpdate() {
)}
</Tab>
<Tab key="inp" title="Indonesia Nasional Police Update">
{inpUpdate.length > 1 ? (
{inpUpdate?.length > 1 ? (
<>
<Swiper
navigation={true}
modules={[Navigation]}
spaceBetween={40}
spaceBetween={10}
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px

4
components/landing/NewsTicker.tsx
View File

@ -46,14 +46,14 @@ export default function NewsTicker() {
}, [article]);
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%]">
<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>
{article && (
<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"
}`}
>

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

@ -194,7 +194,7 @@ export default function BannerHumasNew() {
return (
<div className="h-fit relative text-white overflow-hidden">
<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}%)` }}
>
{images.map((img, index) => (
@ -209,8 +209,8 @@ export default function BannerHumasNew() {
</Link>
))}
</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="absolute inset-0 bg-black bg-opacity-40 pointer-events-none" />
<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 justify-between items-center mb-10">
<div className="flex flex-col gap-1 justify-start items-start">
@ -229,7 +229,7 @@ export default function BannerHumasNew() {
className="w-[200px]"
/>
</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">
<Popover
placement="bottom"
@ -326,23 +326,18 @@ export default function BannerHumasNew() {
/>
</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>
<button
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"
onClick={() => prevImage()}
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
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"
onClick={() => nextImage()}
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>
<div className="absolute bottom-4 right-5 lg:right-60 lg:mx-5">
<div className="flex">

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

@ -20,12 +20,15 @@ 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-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">
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">
<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="https://portal.humas.polri.go.id/"
className="flex justify-center"
>
<Image
src="/assets/portal-humas.png"
width={480}
@ -34,15 +37,17 @@ export default function FooterNew() {
className="w-[50px] lg:w-[100px]"
/>
</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
src="/assets/mediahub.png"
width={480}
height={480}
alt="mediahub"
className="w-[50px] lg:w-[100px]"
className="w-[80px] lg:w-[200px]"
/>
<p className="text-[#FED882] text-lg">MediaHub</p>
</Link>
<Link href="">
<Image
@ -50,10 +55,17 @@ export default function FooterNew() {
width={480}
height={480}
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 href="">
<Link href="https://tvradio.polri.go.id/">
<Image
src="/assets/polri-tv.png"
width={480}
@ -62,7 +74,7 @@ export default function FooterNew() {
className="w-[85px] lg:w-[170px]"
/>
</Link>
<Link href="">
<Link href="https://tribratanews.polri.go.id/">
<Image
src="/assets/tb-news.png"
width={480}
@ -71,7 +83,7 @@ export default function FooterNew() {
className="w-[85px] lg:w-[170px]"
/>
</Link>
<Link href="">
<Link href="https://inp.polri.go.id/">
<Image
src="/assets/inp.png"
width={480}
@ -81,9 +93,9 @@ export default function FooterNew() {
/>
</Link>
</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">
<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="w-[16px]">
<LandingCallIcon size={16} />
@ -107,32 +119,34 @@ export default function FooterNew() {
</div>
</div>
<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">
<Link
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} />
<div className="flex flex-col gap-0 leading-none font-light mr-4">
<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>
</Link>
<Link
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} />
<div className="flex flex-col gap-0 leading-none font-light mr-4">
<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>
</Link>
</div>
</div>
<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">
<p className="font-light">
Dapatkan info & event terupdate dari kami.
@ -142,23 +156,26 @@ export default function FooterNew() {
<Input
label=""
type="email"
variant="bordered"
placeholder="Tuliskan Email Anda"
className="rounded-none !text-black"
className="rounded-none !text-black "
classNames={{
inputWrapper: "rounded-l-lg h-[37px] bg-white !text-black",
mainWrapper: "rounded-l-lg h-[37px] bg-white !text-black",
inputWrapper:
"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={
// <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 />
</div>
</div>
</div>
<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>
</Button>
</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