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

update: landing

This commit is contained in:
amd123 2024-01-11 16:36:00 +07:00
parent 677e82b177
commit 4874262a13
8 changed files with 72 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/layout.tsx
View File

@ -45,22 +45,21 @@ export default function RootLayout({
<main className=" w-screen pt-2 flex-grow"> <main className=" w-screen pt-2 flex-grow">
{children} {children}
</main> </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"> <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">
<p>FAQ</p> <div>FAQ</div>
<p>ABOUT</p> <div>ABOUT</div>
<p>TERM AND CONDITION</p> <div>TERM AND CONDITION</div>
<p> <div className="">
<Image <Image
src="/paslon01.png" src="/paslon01.png"
alt="logo" alt="logo"
width={100} width={100}
height={120} height={120}
/> />
</p> </div>
<p>PRIVACY POLICY</p> <div>PRIVACY POLICY</div>
<p>CONTACT US</p> <div>CONTACT US</div>
<p>LAPOR KAMPANYE</p> <div>LAPOR KAMPANYE</div>
</footer> </footer>
</div> </div>
</Providers> </Providers>

2
components/form/form-report.tsx
View File

@ -38,7 +38,7 @@ export default function FormReport() {
}; };
return ( return (
<div className=''> <div className='mx-20'>
<div className='text-[#1A328E] font-bold text-center'> <div className='text-[#1A328E] font-bold text-center'>
<p className='text-3xl pt-3'>Lapor Pelanggan Pemilu</p> <p className='text-3xl pt-3'>Lapor Pelanggan Pemilu</p>
<p className='text-sm pt-5'>Portal Laporan Pengaduan Online Pelanggaran Pemilu</p> <p className='text-sm pt-5'>Portal Laporan Pengaduan Online Pelanggaran Pemilu</p>

91
components/landing/campaign.tsx
View File

@ -20,21 +20,21 @@ export default function Campaign() {
id: 1, id: 1,
date: '03/01/2024 14:30 WIB', date: '03/01/2024 14:30 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03', title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/vm1.jpg', imageUrl: '/kampanye1.png',
link: '/link1', link: '/link1',
}, },
{ {
id: 2, id: 2,
date: '03/02/2024 15:45 WIB', date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03', title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/vm1.jpg', imageUrl: '/kampanye2.png',
link: '/link2', link: '/link2',
}, },
{ {
id: 3, id: 3,
date: '03/02/2024 15:45 WIB', date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03', title: 'MNC Penyelenggara Debat C',
imageUrl: '/vm1.jpg', imageUrl: '/kampanye3.png',
link: '/link2', link: '/link2',
}, },
// { // {
@ -54,82 +54,31 @@ export default function Campaign() {
]; ];
return ( return (
<div className='h-screen'> <div className='py-10'>
<p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p> <p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
<div className='pt-10'> <div className='pt-10'>
<div className='flex justify-center gap-4 h-full'> <div className='flex flex-wrap justify-center gap-4 h-full'>
{dummyData.map((data) => ( {dummyData.map((item, index) => (
<Card key={data.id} className='w-[250px] items-center rounded-lg'> <Card shadow="sm" key={index} className='w-[280px]'>
<CardBody> <CardBody className="overflow-visible p-0">
<Image <Image
alt='visimisi' shadow="sm"
className='rounded-lg object-fill' radius="lg"
src={data.imageUrl} width="100%"
alt={item.title}
className="w-full object-cover "
src={item.imageUrl}
/> />
</CardBody> </CardBody>
<CardFooter > <CardFooter className="text-small text-left flex flex-col items-start border-2 h-full">
<div className='px-3 pb-2 text-left w-full h-full'> <div >{item.date}</div>
<p className='text-xs'>{data.date}</p> <div className='font-bold'>{item.title}</div>
<p className='leading-tight text-sm font-semibold'>{data.title}</p> <Link href={`/headline/detail/${item.id}`}>
<Link href={`campaign/detail/${data.id}`}> <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
</Link> </Link>
</div>
</CardFooter> </CardFooter>
</Card> </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>
<div className='flex justify-center pt-5'> <div className='flex justify-center pt-5'>
<Button <Button

92
components/landing/headline.tsx
View File

@ -1,6 +1,5 @@
'use client' 'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react' import { Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react'
import Image from 'next/image'
import Link from 'next/link'; import Link from 'next/link';
import React from 'react' import React from 'react'
@ -46,89 +45,42 @@ export default function Headline() {
]; ];
return ( return (
<div className='h-screen space-y-5 pt-10 bg-[#F1F4FE]'> <div className='space-y-5 pt-10 pb-10 bg-[#F1F4FE]'>
<div className='mx-7 space-y-4'> <div className='lg:mx-16 space-y-4'>
<div className='text-3xl font-bold z-10 text-black'>Headline News</div> <div className='text-3xl font-bold z-10 text-black'>Headline News</div>
<div> <div>
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<Tabs <Tabs
aria-label="Options" aria-label="Options"
size='sm' size='lg'
color='primary' color='primary'
className='pb-5 pt-4' className='pb-5 pt-4'
radius='full' radius='full'
// disabledKeys={["audio", "foto", "teks"]} disabledKeys={["audio", "foto", "teks"]}
> >
<Tab key="audiovisual" title="Audio Visual"> <Tab key="audiovisual" title="Audio Visual">
<div className='flex justify-center gap-4'> <div className="gap-2 grid grid-cols-2 sm:grid-cols-5">
{headlineData.map((data) => ( {headlineData.map((item, index) => (
<Card key={data.id} className='max-h-max w-[250px] items-center rounded-lg'> <Card shadow="sm" key={index}>
<CardBody> <CardBody className="overflow-visible p-0">
<Image <Image
alt='visimisi' shadow="sm"
className='rounded-lg' radius="lg"
src={data.imageUrl} width="100%"
height={150} alt={item.title}
width={220} className="w-full object-cover "
src={item.imageUrl}
/> />
</CardBody> </CardBody>
<div className='px-3 pb-2'> <CardFooter className="text-small text-left flex flex-col items-start">
<p className='text-xs'>{data.date}</p> <div >{item.date}</div>
<p className='leading-tight text-sm font-semibold'>{data.title}</p> <div className='font-bold'>{item.title}</div>
<Link href={`headline/detail/${data.id}`}> <Link href={`/headline/detail/${item.id}`}>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p> <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
</Link> </Link>
</div> </CardFooter>
</Card> </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>
</Tab> </Tab>
<Tab key="audio" title="Audio"> <Tab key="audio" title="Audio">
@ -146,7 +98,7 @@ export default function Headline() {
<div className='px-3 pb-2'> <div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p> <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='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> </div>
</Card> </Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'> <Card className='max-h-max w-[250px] items-center rounded-lg'>

19
components/navbar.tsx
View File

@ -50,7 +50,7 @@ export const Navbar = () => {
<NextUINavbar maxWidth="xl" position="sticky" className={"px-8 py-3"} classNames={{ <NextUINavbar maxWidth="xl" position="sticky" className={"px-8 py-3"} classNames={{
wrapper: "max-w-full", wrapper: "max-w-full",
}}> }}>
<NavbarContent className="basis-1/5 sm:basis-full" justify="start"> <NavbarContent className="basis-1/5" justify="start">
<NavbarBrand as="li" className="gap-3 max-w-fit"> <NavbarBrand as="li" className="gap-3 max-w-fit">
<NextLink className="flex justify-start items-center gap-1" href="/"> <NextLink className="flex justify-start items-center gap-1" href="/">
<Image <Image
@ -115,25 +115,18 @@ export const Navbar = () => {
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end"> <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
{/* <Link isExternal href={siteConfig.links.github} aria-label="Github"> {/* <Link isExternal href={siteConfig.links.github} aria-label="Github">
<GithubIcon className="text-default-500" /> <GithubIcon className="text-default-500" />
</Link> */} </Link>
<ThemeSwitch /> <ThemeSwitch /> */}
<NavbarMenuToggle /> <NavbarMenuToggle />
</NavbarContent> </NavbarContent>
<NavbarMenu> <NavbarMenu>
{searchInput} {/* {searchInput} */}
<div className="mx-4 mt-2 flex flex-col gap-2"> <div className="mx-4 mt-2 flex flex-col gap-2 pt-2">
{siteConfig.navMenuItems.map((item, index) => ( {siteConfig.navMenuItems.map((item, index) => (
<NavbarMenuItem key={`${item}-${index}`}> <NavbarMenuItem key={`${item}-${index}`}>
<Link <Link
color={ href={item.href}
index === 2
? "primary"
: index === siteConfig.navMenuItems.length - 1
? "danger"
: "foreground"
}
href="#"
size="lg" size="lg"
> >
{item.label} {item.label}

10
components/page/detail-campaign.tsx
View File

@ -3,13 +3,15 @@ import React from 'react'
export default function DetailCampaign() { export default function DetailCampaign() {
return ( return (
<div className='flex container mx-auto pt-8'> <div className='flex mx-auto md:mx-20 pt-8'>
<div className='w-9/12'> <div className='w-full md:w-9/12 '>
<div className='w-full'> <div className='w-full'>
<Image <img
alt='detail campaign' alt='detail campaign'
className='rounded-none' className='rounded-none'
src='/detil1.png' src='/detil1.png'
width="100%"
/> />
</div> </div>
<div className='pt-5'> <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> "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> </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'> <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-[#25292D] rounded-lg'>Simpan</Button>
<Button className='text-white bg-[#007748] rounded-lg'>Download</Button> <Button className='text-white bg-[#007748] rounded-lg'>Download</Button>

2
components/page/similar-news.tsx
View File

@ -5,7 +5,7 @@ import React from 'react'
export default function SimilarNews() { export default function SimilarNews() {
return ( return (
<div> <div className='border-2'>
<p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p> <p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
<div className='flex justify-center gap-3 pb-5'> <div className='flex justify-center gap-3 pb-5'>
<Card className='max-h-max w-[250px] items-center rounded-lg'> <Card className='max-h-max w-[250px] items-center rounded-lg'>

32
config/site.ts
View File

@ -27,36 +27,12 @@ export const siteConfig = {
], ],
navMenuItems: [ navMenuItems: [
{ {
label: "Profile", label: "Giat Sepekan",
href: "/profile", href: "/",
}, },
{ {
label: "Dashboard", label: "Lapor Kampanye",
href: "/dashboard", href: "/report",
},
{
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",
}, },
], ],
links: { links: {