diff --git a/app/campaign/detail/[id]/page.tsx b/app/campaign/detail/[id]/page.tsx
new file mode 100644
index 0000000..1b28c32
--- /dev/null
+++ b/app/campaign/detail/[id]/page.tsx
@@ -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>
+    )
+}
diff --git a/app/headline/detail/[id]/page.tsx b/app/headline/detail/[id]/page.tsx
new file mode 100644
index 0000000..a4d9aa5
--- /dev/null
+++ b/app/headline/detail/[id]/page.tsx
@@ -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 />
+        </>
+    )
+}
diff --git a/app/report/layout.tsx b/app/report/layout.tsx
new file mode 100644
index 0000000..a2a42bd
--- /dev/null
+++ b/app/report/layout.tsx
@@ -0,0 +1,13 @@
+export default function ReportLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <section>
+            <div>
+                {children}
+            </div>
+        </section>
+    );
+}
diff --git a/app/report/page.tsx b/app/report/page.tsx
new file mode 100644
index 0000000..ca8f986
--- /dev/null
+++ b/app/report/page.tsx
@@ -0,0 +1,8 @@
+import FormReport from '@/components/form/form-report'
+import React from 'react'
+
+export default function ReportPage() {
+    return (
+        <FormReport />
+    )
+}
diff --git a/components/form/form-report.tsx b/components/form/form-report.tsx
new file mode 100644
index 0000000..762cfa5
--- /dev/null
+++ b/components/form/form-report.tsx
@@ -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>
+    )
+}
diff --git a/components/landing/campaign.tsx b/components/landing/campaign.tsx
index 80d4176..09e5b77 100644
--- a/components/landing/campaign.tsx
+++ b/components/landing/campaign.tsx
@@ -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>
     )
 }
diff --git a/components/landing/headline.tsx b/components/landing/headline.tsx
index 62d7739..0f1fc48 100644
--- a/components/landing/headline.tsx
+++ b/components/landing/headline.tsx
@@ -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 >
     )
 }
diff --git a/components/landing/visi-misi.tsx b/components/landing/visi-misi.tsx
index 69504f9..12d272a 100644
--- a/components/landing/visi-misi.tsx
+++ b/components/landing/visi-misi.tsx
@@ -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>
diff --git a/components/page/detail-campaign.tsx b/components/page/detail-campaign.tsx
new file mode 100644
index 0000000..a9c6903
--- /dev/null
+++ b/components/page/detail-campaign.tsx
@@ -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>
+    )
+}
diff --git a/components/page/similar-news.tsx b/components/page/similar-news.tsx
new file mode 100644
index 0000000..39e5284
--- /dev/null
+++ b/components/page/similar-news.tsx
@@ -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>
+    )
+}
diff --git a/config/site.ts b/config/site.ts
index 7c22fa3..db1fa3b 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -10,11 +10,11 @@ export const siteConfig = {
 		},
 		{
 			label: "Lapor Kampanye",
-			href: "/docs",
+			href: "/report",
 		},
 		{
 			label: "Update TPS",
-			href: "/pricing",
+			href: "/docs",
 		},
 		// {
 		// 	label: "Blog",
diff --git a/package-lock.json b/package-lock.json
index d3ce711..c67e2f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index f0346ea..2bb0b40 100644
--- a/package.json
+++ b/package.json
@@ -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"
   }
 }
diff --git a/public/detil1.png b/public/detil1.png
new file mode 100644
index 0000000..6167e27
Binary files /dev/null and b/public/detil1.png differ