From 4874262a13b3c0078124dd867539a245505214d8 Mon Sep 17 00:00:00 2001
From: amd123 <iam.ahmadsholeh@gmail.com>
Date: Thu, 11 Jan 2024 16:36:00 +0700
Subject: [PATCH] update: landing

---
 app/layout.tsx                      | 19 +++---
 components/form/form-report.tsx     |  2 +-
 components/landing/campaign.tsx     | 93 +++++++----------------------
 components/landing/headline.tsx     | 92 +++++++---------------------
 components/navbar.tsx               | 23 +++----
 components/page/detail-campaign.tsx | 10 ++--
 components/page/similar-news.tsx    |  2 +-
 config/site.ts                      | 32 ++--------
 8 files changed, 72 insertions(+), 201 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 45c6244..fde9056 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -45,22 +45,21 @@ export default function RootLayout({
 						<main className=" w-screen pt-2  flex-grow">
 							{children}
 						</main>
-						<footer className="w-full flex items-center text-white  justify-center space-x-9 font-semibold text-sm py-3 bg-[#1A328E] h-24">
-							<p>FAQ</p>
-							<p>ABOUT</p>
-							<p>TERM AND CONDITION</p>
-							<p>
-
+						<footer className="p-3 text-small md:text-base flex flex-col md:flex-row md:justify-center space-y-2  md:space-x-6 md:space-y-0 h-auto md:h-24   bg-[#1A328E] text-white items-center">
+							<div>FAQ</div>
+							<div>ABOUT</div>
+							<div>TERM AND CONDITION</div>
+							<div className="">
 								<Image
 									src="/paslon01.png"
 									alt="logo"
 									width={100}
 									height={120}
 								/>
-							</p>
-							<p>PRIVACY POLICY</p>
-							<p>CONTACT US</p>
-							<p>LAPOR KAMPANYE</p>
+							</div>
+							<div>PRIVACY POLICY</div>
+							<div>CONTACT US</div>
+							<div>LAPOR KAMPANYE</div>
 						</footer>
 					</div>
 				</Providers>
diff --git a/components/form/form-report.tsx b/components/form/form-report.tsx
index 762cfa5..88841d4 100644
--- a/components/form/form-report.tsx
+++ b/components/form/form-report.tsx
@@ -38,7 +38,7 @@ export default function FormReport() {
     };
 
     return (
-        <div className=''>
+        <div className='mx-20'>
             <div className='text-[#1A328E] font-bold text-center'>
                 <p className='text-3xl pt-3'>Lapor Pelanggan Pemilu</p>
                 <p className='text-sm pt-5'>Portal Laporan Pengaduan Online Pelanggaran Pemilu</p>
diff --git a/components/landing/campaign.tsx b/components/landing/campaign.tsx
index 09e5b77..a6aa6e2 100644
--- a/components/landing/campaign.tsx
+++ b/components/landing/campaign.tsx
@@ -20,21 +20,21 @@ export default function Campaign() {
             id: 1,
             date: '03/01/2024 14:30 WIB',
             title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
-            imageUrl: '/vm1.jpg',
+            imageUrl: '/kampanye1.png',
             link: '/link1',
         },
         {
             id: 2,
             date: '03/02/2024 15:45 WIB',
             title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
-            imageUrl: '/vm1.jpg',
+            imageUrl: '/kampanye2.png',
             link: '/link2',
         },
         {
             id: 3,
             date: '03/02/2024 15:45 WIB',
-            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
-            imageUrl: '/vm1.jpg',
+            title: 'MNC Penyelenggara Debat C',
+            imageUrl: '/kampanye3.png',
             link: '/link2',
         },
         // {
@@ -54,82 +54,31 @@ export default function Campaign() {
     ];
 
     return (
-        <div className='h-screen'>
+        <div className='py-10'>
             <p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
             <div className='pt-10'>
-                <div className='flex justify-center gap-4 h-full'>
-                    {dummyData.map((data) => (
-                        <Card key={data.id} className='w-[250px] items-center rounded-lg'>
-                            <CardBody>
+                <div className='flex flex-wrap  justify-center gap-4 h-full'>
+                    {dummyData.map((item, index) => (
+                        <Card shadow="sm" key={index} className='w-[280px]'>
+                            <CardBody className="overflow-visible p-0">
                                 <Image
-                                    alt='visimisi'
-                                    className='rounded-lg object-fill'
-                                    src={data.imageUrl}
-
+                                    shadow="sm"
+                                    radius="lg"
+                                    width="100%"
+                                    alt={item.title}
+                                    className="w-full object-cover "
+                                    src={item.imageUrl}
                                 />
                             </CardBody>
-                            <CardFooter >
-                                <div className='px-3 pb-2 text-left w-full h-full'>
-                                    <p className='text-xs'>{data.date}</p>
-                                    <p className='leading-tight text-sm font-semibold'>{data.title}</p>
-                                    <Link href={`campaign/detail/${data.id}`}>
-                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
-                                    </Link>
-                                </div>
+                            <CardFooter className="text-small text-left flex flex-col items-start border-2 h-full">
+                                <div >{item.date}</div>
+                                <div className='font-bold'>{item.title}</div>
+                                <Link href={`/headline/detail/${item.id}`}>
+                                    <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
+                                </Link>
                             </CardFooter>
                         </Card>
                     ))}
-
-
-
-                    {/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                            <CardBody>
-                                <Image
-                                    alt='visimisi'
-                                    className='rounded-lg'
-                                    src="/vm1.jpg"
-                                    height={150}
-                                    width={220}
-                                />
-                            </CardBody>
-                            <div className='px-3 pb-2'>
-                                <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                                <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                            </div>
-                        </Card>
-                        <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                            <CardBody>
-                                <Image
-                                    alt='visimisi'
-                                    className='rounded-lg'
-                                    src="/vm1.jpg"
-                                    height={150}
-                                    width={220}
-                                />
-                            </CardBody>
-                            <div className='px-3 pb-2'>
-                                <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                                <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                            </div>
-                        </Card>
-                        <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                            <CardBody>
-                                <Image
-                                    alt='visimisi'
-                                    className='rounded-lg'
-                                    src="/vm1.jpg"
-                                    height={150}
-                                    width={220}
-                                />
-                            </CardBody>
-                            <div className='px-3 pb-2'>
-                                <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                                <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                            </div>
-                        </Card> */}
                 </div>
                 <div className='flex justify-center pt-5'>
                     <Button
diff --git a/components/landing/headline.tsx b/components/landing/headline.tsx
index 0f1fc48..81452e7 100644
--- a/components/landing/headline.tsx
+++ b/components/landing/headline.tsx
@@ -1,6 +1,5 @@
 'use client'
-import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
-import Image from 'next/image'
+import { Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react'
 import Link from 'next/link';
 import React from 'react'
 
@@ -46,89 +45,42 @@ export default function Headline() {
     ];
 
     return (
-        <div className='h-screen space-y-5 pt-10 bg-[#F1F4FE]'>
-            <div className='mx-7 space-y-4'>
+        <div className='space-y-5 pt-10 pb-10 bg-[#F1F4FE]'>
+            <div className='lg:mx-16 space-y-4'>
                 <div className='text-3xl font-bold z-10 text-black'>Headline News</div>
                 <div>
                     <div className="flex w-full flex-col">
                         <Tabs
                             aria-label="Options"
-                            size='sm'
+                            size='lg'
                             color='primary'
                             className='pb-5 pt-4'
                             radius='full'
-                        // disabledKeys={["audio", "foto", "teks"]}
+                            disabledKeys={["audio", "foto", "teks"]}
                         >
                             <Tab key="audiovisual" title="Audio Visual">
-                                <div className='flex justify-center gap-4'>
-                                    {headlineData.map((data) => (
-                                        <Card key={data.id} className='max-h-max w-[250px] items-center rounded-lg'>
-                                            <CardBody>
+                                <div className="gap-2 grid grid-cols-2 sm:grid-cols-5">
+                                    {headlineData.map((item, index) => (
+                                        <Card shadow="sm" key={index}>
+                                            <CardBody className="overflow-visible p-0">
                                                 <Image
-                                                    alt='visimisi'
-                                                    className='rounded-lg'
-                                                    src={data.imageUrl}
-                                                    height={150}
-                                                    width={220}
+                                                    shadow="sm"
+                                                    radius="lg"
+                                                    width="100%"
+                                                    alt={item.title}
+                                                    className="w-full object-cover "
+                                                    src={item.imageUrl}
                                                 />
                                             </CardBody>
-                                            <div className='px-3 pb-2'>
-                                                <p className='text-xs'>{data.date}</p>
-                                                <p className='leading-tight text-sm font-semibold'>{data.title}</p>
-                                                <Link href={`headline/detail/${data.id}`}>
-                                                    <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
+                                            <CardFooter className="text-small text-left flex flex-col items-start">
+                                                <div >{item.date}</div>
+                                                <div className='font-bold'>{item.title}</div>
+                                                <Link href={`/headline/detail/${item.id}`}>
+                                                    <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
                                                 </Link>
-                                            </div>
+                                            </CardFooter>
                                         </Card>
                                     ))}
-                                    {/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                                        <CardBody>
-                                            <Image
-                                                alt='visimisi'
-                                                className='rounded-lg'
-                                                src="/vm1.jpg"
-                                                height={150}
-                                                width={220}
-                                            />
-                                        </CardBody>
-                                        <div className='px-3 pb-2'>
-                                            <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                                            <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                            <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                                        </div>
-                                    </Card> */}
-                                    {/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                                        <CardBody>
-                                            <Image
-                                                alt='visimisi'
-                                                className='rounded-lg'
-                                                src="/vm1.jpg"
-                                                height={150}
-                                                width={220}
-                                            />
-                                        </CardBody>
-                                        <div className='px-3 pb-2'>
-                                            <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                                            <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                            <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                                        </div>
-                                    </Card>
-                                    <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                                        <CardBody>
-                                            <Image
-                                                alt='visimisi'
-                                                className='rounded-lg'
-                                                src="/vm1.jpg"
-                                                height={150}
-                                                width={220}
-                                            />
-                                        </CardBody>
-                                        <div className='px-3 pb-2'>
-                                            <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                                            <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                            <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                                        </div>
-                                    </Card> */}
                                 </div>
                             </Tab>
                             <Tab key="audio" title="Audio">
@@ -146,7 +98,7 @@ export default function Headline() {
                                         <div className='px-3 pb-2'>
                                             <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                             <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                                            <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
+                                            <p className=' font-semibold text-[#1A328E] cursor-pointer'>Lihat Selengkanya</p>
                                         </div>
                                     </Card>
                                     <Card className='max-h-max w-[250px] items-center rounded-lg'>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 653fc76..f8cc66f 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -48,9 +48,9 @@ export const Navbar = () => {
 
 	return (
 		<NextUINavbar maxWidth="xl" position="sticky" className={"px-8 py-3"} classNames={{
-            wrapper: "max-w-full",
-          }}>
-			<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+			wrapper: "max-w-full",
+		}}>
+			<NavbarContent className="basis-1/5" justify="start">
 				<NavbarBrand as="li" className="gap-3 max-w-fit">
 					<NextLink className="flex justify-start items-center gap-1" href="/">
 						<Image
@@ -115,25 +115,18 @@ export const Navbar = () => {
 			<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
 				{/* <Link isExternal href={siteConfig.links.github} aria-label="Github">
 					<GithubIcon className="text-default-500" />
-				</Link> */}
-				<ThemeSwitch />
+				</Link>
+				<ThemeSwitch /> */}
 				<NavbarMenuToggle />
 			</NavbarContent>
 
 			<NavbarMenu>
-				{searchInput}
-				<div className="mx-4 mt-2 flex flex-col gap-2">
+				{/* {searchInput} */}
+				<div className="mx-4 mt-2 flex flex-col gap-2 pt-2">
 					{siteConfig.navMenuItems.map((item, index) => (
 						<NavbarMenuItem key={`${item}-${index}`}>
 							<Link
-								color={
-									index === 2
-										? "primary"
-										: index === siteConfig.navMenuItems.length - 1
-											? "danger"
-											: "foreground"
-								}
-								href="#"
+								href={item.href}
 								size="lg"
 							>
 								{item.label}
diff --git a/components/page/detail-campaign.tsx b/components/page/detail-campaign.tsx
index a9c6903..f517f23 100644
--- a/components/page/detail-campaign.tsx
+++ b/components/page/detail-campaign.tsx
@@ -3,13 +3,15 @@ import React from 'react'
 
 export default function DetailCampaign() {
     return (
-        <div className='flex container mx-auto pt-8'>
-            <div className='w-9/12'>
+        <div className='flex mx-auto md:mx-20 pt-8'>
+            <div className='w-full md:w-9/12 '>
                 <div className='w-full'>
-                    <Image
+                    <img
                         alt='detail campaign'
                         className='rounded-none'
                         src='/detil1.png'
+                        width="100%"
+
                     />
                 </div>
                 <div className='pt-5'>
@@ -26,7 +28,7 @@ export default function DetailCampaign() {
                         "Kita mempunyai struktur yang baik, tiga partai koalisi (Nasdem, PKB, PKS) plus dua partai koalisi tambahan yaitu Partai Ummat dan Partai Masyumi yang kuat dan solid," kata Saleh.</p>
                 </div>
             </div>
-            <div className='w-3/12'>
+            <div className='w-3/12 hidden md:block'>
                 <div className='flex flex-col  space-y-2 border-2 p-3 m-3 rounded-md'>
                     <Button className='text-white bg-[#25292D] rounded-lg'>Simpan</Button>
                     <Button className='text-white bg-[#007748] rounded-lg'>Download</Button>
diff --git a/components/page/similar-news.tsx b/components/page/similar-news.tsx
index 39e5284..8db9dcf 100644
--- a/components/page/similar-news.tsx
+++ b/components/page/similar-news.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 
 export default function SimilarNews() {
     return (
-        <div>
+        <div className='border-2'>
             <p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
             <div className='flex justify-center gap-3 pb-5'>
                 <Card className='max-h-max w-[250px] items-center rounded-lg'>
diff --git a/config/site.ts b/config/site.ts
index db1fa3b..94d2008 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -27,36 +27,12 @@ export const siteConfig = {
 	],
 	navMenuItems: [
 		{
-			label: "Profile",
-			href: "/profile",
+			label: "Giat Sepekan",
+			href: "/",
 		},
 		{
-			label: "Dashboard",
-			href: "/dashboard",
-		},
-		{
-			label: "Projects",
-			href: "/projects",
-		},
-		{
-			label: "Team",
-			href: "/team",
-		},
-		{
-			label: "Calendar",
-			href: "/calendar",
-		},
-		{
-			label: "Settings",
-			href: "/settings",
-		},
-		{
-			label: "Help & Feedback",
-			href: "/help-feedback",
-		},
-		{
-			label: "Logout",
-			href: "/logout",
+			label: "Lapor Kampanye",
+			href: "/report",
 		},
 	],
 	links: {