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

update

This commit is contained in:
amd123 2024-01-10 20:07:12 +07:00
parent 70b0422de3
commit 2d59536fc1
14 changed files with 888 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/campaign/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import DetailCampaign from '@/components/page/detail-campaign'
import SimilarNews from '@/components/page/similar-news'
import React from 'react'
export default function DetailPage() {
return (
<div className='container mx-auto space-y-10'>
<DetailCampaign />
<SimilarNews />
</div>
)
}

12
app/headline/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import DetailCampaign from '@/components/page/detail-campaign'
import SimilarNews from '@/components/page/similar-news'
import React from 'react'
export default function HeadlineDetail() {
return (
<>
<DetailCampaign />
<SimilarNews />
</>
)
}

13
app/report/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
export default function ReportLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section>
<div>
{children}
</div>
</section>
);
}

8
app/report/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import FormReport from '@/components/form/form-report'
import React from 'react'
export default function ReportPage() {
return (
<FormReport />
)
}

100
components/form/form-report.tsx Normal file
View File

@ -0,0 +1,100 @@
'use client'
import { Button } from '@nextui-org/button';
import { Textarea } from '@nextui-org/input';
import { useState } from 'react';
export default function FormReport() {
const [formData, setFormData] = useState({
date: '',
location: '',
attachment: '',
complaint: '',
complaintLink: '',
voiceNote: '',
});
const handleChange = (e: any) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
}
const handleDateChange = (e: any) => {
const { value } = e.target;
setFormData((prevData) => ({
...prevData,
date: value,
}));
};
const handleSubmit = () => {
// Lakukan apa pun yang diperlukan dengan data formulir
console.log('Data formulir yang dikirim:', formData);
console.log('Tanggal yang dipilih:', formData.date);
// Contoh: Kirim data ke server atau lakukan tindakan lainnya
};
return (
<div className=''>
<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>
</div>
<div className='space-y-5 container mx-auto pt-10'>
<div>
<p>Tanggal</p>
<input
className='w-full border-2 rounded-md p-1 mt-2 bg-transparent'
type="date"
name='date'
value={formData.date}
onChange={handleDateChange}
/>
</div>
{/* <div>
<p>Lokasi Kejadian</p>
</div> */}
<div>
<p>Lampiran Aduan</p>
<input className='border-2 w-full mt-2' type="file" accept="image/*, text/*" name="file" />
</div>
<div>
<p>Isi Aduan</p>
<Textarea
placeholder="Masukkan Link Pendukung"
className="w-full mt-2"
variant='bordered'
name='complaint'
value={formData.complaint}
onChange={handleChange}
/>
</div>
<div>
<p>Link Pengaduan</p>
<Textarea
placeholder="Masukkan Link Pendukung"
className="w-full mt-2"
variant='bordered'
name='complaintLink'
value={formData.complaintLink}
onChange={handleChange}
/>
</div>
{/* <div>
<p>Voice Note</p>
</div> */}
<div>
<Button
className='bg-[#1A328E] w-full my-4 text-white'
onClick={handleSubmit}
>
Kirim
</Button>
</div>
</div>
</div>
)
}

224
components/landing/campaign.tsx
View File

@ -1,91 +1,177 @@
'use client'
import { Button } from '@nextui-org/button'
import { Card, CardBody, CardFooter } from '@nextui-org/react'
import Image from 'next/image'
import React from 'react'
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
import Slider from 'react-slick'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from 'next/link';
export default function Campaign() {
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
};
const dummyData = [
{
id: 1,
date: '03/01/2024 14:30 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/vm1.jpg',
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',
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',
link: '/link2',
},
// {
// id: 4,
// date: '03/04/2024 17:30 WIB',
// title: 'Judul Artikel 4',
// imageUrl: '/vm4.jpg',
// link: '/link4',
// },
// {
// id: 5,
// date: '03/05/2024 18:45 WIB',
// title: 'Judul Artikel 5',
// imageUrl: '/vm5.jpg',
// link: '/link5',
// },
];
return (
<div>
<div className='h-screen'>
<p className='text-3xl font-bold text-red-600 text-center pt-10'>Kampanye Daerah</p>
<div className='space-y-2 pt-10'>
<div className='flex justify-center gap-4 border-2'>
<Card className='h-[400px] w-[250px] overflow-hidden '>
<CardBody className="items-center ">
<div className='h-screen'>
<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>
<Image
alt="Card background"
className="object-cover rounded-t-xl"
alt='visimisi'
className='rounded-lg object-fill'
src={data.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>
</Card>
))}
{/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
width={180}
height={200}
height={150}
width={220}
/>
</CardBody>
<CardFooter className='flex flex-col border overflow-hidden leading-tight p-0 items-start'>
<p className='text-xs'>03/01/2024 14:00 WIB</p>
<p className='leading-none'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p >
<p className='text-xs text-blue-800'>Lihat Selengkapnya</p>
</CardFooter>
<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="py-2 h-[420px] w-[300px]">
<CardBody className="overflow-visible py-2">
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt="Card background"
className="object-cover rounded-xl h-full"
src="/HL1.png"
width={270}
height={400}
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
<p className="text-tiny uppercase font-bold">Daily Mix</p>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-large">Frontend Radio</h4>
</CardFooter>
<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="py-2 w-[270px]">
<CardBody className="overflow-visible py-2">
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt="Card background"
className="object-cover rounded-xl h-full"
src="/HL1.png"
width={270}
height={400}
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
<p className="text-tiny uppercase font-bold">Daily Mix</p>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-large">Frontend Radio</h4>
</CardFooter>
</Card>
<Card className="py-2 w-[270px]">
<CardBody className="overflow-visible py-2">
<Image
alt="Card background"
className="object-cover rounded-xl h-full"
src="/HL1.png"
width={270}
height={400}
/>
</CardBody>
<CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
<p className="text-tiny uppercase font-bold">Daily Mix</p>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-large">Frontend Radio</h4>
</CardFooter>
<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
className='text-[#FF3900] font-bold border-[#FF3900]'
variant='bordered'
radius='full'
>
Lihat Selengkapnya
</Button>
</div>
</div>
<div className='flex justify-center pt-5'>
<Button
className='text-[#FF3900] font-bold border-[#FF3900]'
variant='bordered'
radius='full'
>
Lihat Selengkapnya
</Button>
</div>
</div>
{/* <div className='border-2 border-green-600 container mx-auto'>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div> */}
{/* <div className='flex justify-start relative bottom-[135px] z-0 left-0 '>
<Image
alt='anisbaswedan'
className='rounded-lg'
src="/anis1.png"
/>
</div> */}
</div>
)
}

472
components/landing/headline.tsx
View File

@ -1,104 +1,392 @@
'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import Image from 'next/image'
import Link from 'next/link';
import React from 'react'
export default function Headline() {
const headlineData = [
{
id: 1,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline1.png',
link: '/link2',
},
{
id: 2,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline2.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: '/headline3.png',
link: '/link2',
},
{
id: 4,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline4.png',
link: '/link2',
},
{
id: 5,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline5.png',
link: '/link2',
},
];
return (
<div className='h-screen space-y-5 pt-10 bg-[#F1F4FE]'>
<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'
color='primary'
radius='full'
// disabledKeys={["audio", "foto", "teks"]}
>
<Tab key="audiovisual" title="Audio Visual">
<div className='flex'>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/HL1.png"
height={900}
width={300}
/>
</CardBody>
</Card>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/HL1.png"
height={900}
width={300}
/>
</CardBody>
</Card>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/HL1.png"
height={900}
width={300}
/>
</CardBody>
</Card>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/HL1.png"
height={900}
width={300}
/>
</CardBody>
</Card>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/HL1.png"
height={900}
width={300}
/>
</CardBody>
</Card>
</div>
</Tab>
<Tab key="audio" title="Audio">
<Card>
<CardBody>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</CardBody>
</Card>
</Tab>
<Tab key="foto" title="Foto">
<Card>
<CardBody>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CardBody>
</Card>
</Tab>
<Tab key="teks" title="Teks">
<Card>
<CardBody>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CardBody>
</Card>
</Tab>
</Tabs>
<div className='mx-7 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'
color='primary'
className='pb-5 pt-4'
radius='full'
// 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>
<Image
alt='visimisi'
className='rounded-lg'
src={data.imageUrl}
height={150}
width={220}
/>
</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>
</Link>
</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>
<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">
<div className='flex justify-center gap-4'>
<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>
<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="foto" title="Foto">
<div className='flex justify-center gap-4'>
<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>
<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="teks" title="Teks">
<div className='flex justify-center gap-4'>
<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>
<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>
</Tabs>
</div>
</div>
</div>
</div>
</div >
)
}

41
components/landing/visi-misi.tsx
View File

@ -1,3 +1,7 @@
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { Card, CardBody } from "@nextui-org/react";
import Image from "next/image";
@ -48,43 +52,6 @@ export default function VisiMisi() {
/>
</CardBody>
</Card>
{/* <div className='w-1/3'>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/vm1.jpg"
height={900}
width={400}
/>
</CardBody>
</Card>
</div> */}
{/* <div className='w-1/3'>
<Card className='h-full'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/vm4.jpg"
fill={true}
/>
</CardBody>
</Card>
</div>
<div className='w-1/3'>
<Card className='h-full'>
<CardBody>
<Image
alt="Card background"
className="object-cover rounded-xl"
src="/vm2.jpg"
fill={true}
/>
</CardBody>
</Card>
</div> */}
</div>
</div>
</div>

38
components/page/detail-campaign.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Button, Image } from '@nextui-org/react'
import React from 'react'
export default function DetailCampaign() {
return (
<div className='flex container mx-auto pt-8'>
<div className='w-9/12'>
<div className='w-full'>
<Image
alt='detail campaign'
className='rounded-none'
src='/detil1.png'
/>
</div>
<div className='pt-5'>
<p className='text-xs'>03/01/2024 13:10 WIB</p>
<p className='text-xl font-bold'>Anies Baswedan Kampanye di Sumbar: InsyaAllah Masyarakat Minang di Barisan Perubahan.</p>
<p className='pt-2 text-sm leading-relaxed'>Calon Presiden (Capres) nomor urut satu Anies Baswedan mengawali kampanye di tahun 2024 dengan berkunjung ke Sumatera Barat. Kedatangan Anies disambut meriah di Bandara Internasional Minangkabau, Rabu (3/1/2024). Anies mengaku kagum dengan antusiasme masyarakat Minang untuk menyambut perubahan. Anies meyakini masyarakat Minang akan mendukungnya dalam Pilpres 2024 mendatang.
"Senang sekali bisa kembali ke Sumatera Barat, dan pagi ini antusiasme masyarakat tinggi sekali. Insya Allah seperti juga sebelum-sebelumnya, masyarakat Minang ada di barisan perubahan yang selalu memilih untuk Indonesia lebih adil bagi semuanya," ujar Anies di Bandara Internasional Minangkabau, Rabu (3/1/2024).
"Kami makin optimistis bahwa di Sumatera Barat masyarakat akan terus makin kokoh untuk mengusung perubahan di Pilpres tahun ini," Anies menambahkan.
Anies menyebut masyarakat Minang punya tradisi panjang memperjuangkan gagasan perubahan untuk Indonesia yang lebih baik. Dia yakin masyarakat Minang mendukungnya karena memiliki visi misi merubah Indonesia ke arah yang lebih baik.
"Jadi saya tidak menterjemahkan sebagai dukungan kepada satu orang tapi dukungan kepada satu gagasan, yaitu gagasan perubahan," kata dia.
Sementara itu, Ketua Tim Kampanye Daerah (TKD) Sumatera Barat, Rahmat Saleh mengatakan upaya pemenangan Anies di Sumbar tak lepas dari peran penting partai pendukung dan relawan setempat.
"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='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>
<Button className='text-white bg-[#1A328E] rounded-lg'>Share</Button>
</div>
</div>
</div>
)
}

62
components/page/similar-news.tsx Normal file
View File

@ -0,0 +1,62 @@
'use client'
import { Card, CardBody } from '@nextui-org/react'
import Image from 'next/image'
import React from 'react'
export default function SimilarNews() {
return (
<div>
<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'>
<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>
)
}

4
config/site.ts
View File

@ -10,11 +10,11 @@ export const siteConfig = {
},
{
label: "Lapor Kampanye",
href: "/docs",
href: "/report",
},
{
label: "Update TPS",
href: "/pricing",
href: "/docs",
},
// {
// label: "Blog",

98
package-lock.json generated
View File

@ -22,9 +22,12 @@
"@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7",
"@types/react": "18.2.21",
"@types/react": "^18.2.21",
"@types/react-dates": "^21.8.6",
"@types/react-dom": "18.2.7",
"@types/react-slick": "^0.23.13",
"@types/react-slider": "^1.3.6",
"@types/slick-carousel": "^1.6.40",
"autoprefixer": "10.4.16",
"clsx": "^2.0.0",
"eslint": "8.48.0",
@ -36,11 +39,12 @@
"postcss": "8.4.31",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"typescript": "5.0.4"
"typescript": "^5.0.4"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@ -2737,6 +2741,14 @@
"tslib": "^2.4.0"
}
},
"node_modules/@types/jquery": {
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
"integrity": "sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==",
"dependencies": {
"@types/sizzle": "*"
}
},
"node_modules/@types/json5": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -2762,6 +2774,16 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-dates": {
"version": "21.8.6",
"resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.6.tgz",
"integrity": "sha512-fDF322SOXAxstapv0/oruiPx9kY4DiiaEHYAVvXdPfQhi/hdaONsA9dFw5JBNPAWz7Niuwk+UUhxPU98h70TjA==",
"dependencies": {
"@types/react": "*",
"@types/react-outside-click-handler": "*",
"moment": "^2.26.0"
}
},
"node_modules/@types/react-dom": {
"version": "18.2.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
@ -2770,6 +2792,14 @@
"@types/react": "*"
}
},
"node_modules/@types/react-outside-click-handler": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.3.tgz",
"integrity": "sha512-fF7x4dHf/IPIne8kkt3rlCGuWFrWkFJmzQm4JkxSBzXJIM9WDLob++VnmGpE3ToVWrW3Xw9D5TxcUWrwqe04Gg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-slick": {
"version": "0.23.13",
"resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
@ -2778,11 +2808,32 @@
"@types/react": "*"
}
},
"node_modules/@types/react-slider": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@types/react-slider/-/react-slider-1.3.6.tgz",
"integrity": "sha512-RS8XN5O159YQ6tu3tGZIQz1/9StMLTg/FCIPxwqh2gwVixJnlfIodtVx+fpXVMZHe7A58lAX1Q4XTgAGOQaCQg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.6",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
"integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA=="
},
"node_modules/@types/sizzle": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
"integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg=="
},
"node_modules/@types/slick-carousel": {
"version": "1.6.40",
"resolved": "https://registry.npmjs.org/@types/slick-carousel/-/slick-carousel-1.6.40.tgz",
"integrity": "sha512-r56PBGVLYHmZvFSV+UC4dYbnpEu3LGzgJiSSixBx5ME+IUhsyho1XP7gKSG0R9tiYSx54ftq/g+miLQTbA10Dw==",
"dependencies": {
"@types/jquery": "*"
}
},
"node_modules/@typescript-eslint/parser": {
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
@ -3106,6 +3157,14 @@
"has-symbols": "^1.0.3"
}
},
"node_modules/attr-accept": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
"integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
"engines": {
"node": ">=4"
}
},
"node_modules/autoprefixer": {
"version": "10.4.16",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@ -4160,6 +4219,17 @@
"node": "^10.12.0 || >=12.0.0"
}
},
"node_modules/file-selector": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"dependencies": {
"tslib": "^2.4.0"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -5181,6 +5251,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -5743,6 +5821,22 @@
"react": "^18.2.0"
}
},
"node_modules/react-dropzone": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
"integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
"dependencies": {
"attr-accept": "^2.2.2",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">= 10.13"
},
"peerDependencies": {
"react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

8
package.json
View File

@ -23,9 +23,12 @@
"@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7",
"@types/react": "18.2.21",
"@types/react": "^18.2.21",
"@types/react-dates": "^21.8.6",
"@types/react-dom": "18.2.7",
"@types/react-slick": "^0.23.13",
"@types/react-slider": "^1.3.6",
"@types/slick-carousel": "^1.6.40",
"autoprefixer": "10.4.16",
"clsx": "^2.0.0",
"eslint": "8.48.0",
@ -37,10 +40,11 @@
"postcss": "8.4.31",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"typescript": "5.0.4"
"typescript": "^5.0.4"
}
}

BIN
public/detil1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 733 KiB