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">
{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>

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

@ -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>

93
components/landing/campaign.tsx
View File

@ -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

92
components/landing/headline.tsx
View File

@ -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'>

23
components/navbar.tsx
View File

@ -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}

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

@ -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>

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

@ -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'>

32
config/site.ts
View File

@ -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: {