From bb8192f9522e83cc594edb2079ef47e47c3d339b Mon Sep 17 00:00:00 2001
From: amd123 <iam.ahmadsholeh@gmail.com>
Date: Fri, 12 Jan 2024 16:55:22 +0700
Subject: [PATCH] update: landing

---
 app/layout.tsx                   |  21 +-
 components/landing/headline.tsx  | 590 +++++++++++++++++--------------
 components/landing/visi-misi.tsx |  12 +-
 components/navbar.tsx            |   1 -
 public/al.svg                    |   3 +
 public/ar.svg                    |   3 +
 6 files changed, 347 insertions(+), 283 deletions(-)
 create mode 100644 public/al.svg
 create mode 100644 public/ar.svg

diff --git a/app/layout.tsx b/app/layout.tsx
index fde9056..037d1f0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -45,21 +45,26 @@ export default function RootLayout({
 						<main className=" w-screen pt-2  flex-grow">
 							{children}
 						</main>
-						<footer className="p-3 text-small md:text-base flex flex-col md:flex-row md:justify-center space-y-2  md:space-x-6 md:space-y-0 h-auto md:h-24   bg-[#1A328E] text-white items-center">
-							<div>FAQ</div>
-							<div>ABOUT</div>
-							<div>TERM AND CONDITION</div>
-							<div className="">
+						<footer className="bg-[#1A328E] h-auto md:h-24 gap-2 md:gap-3 flex  justify-evenly md:justify-center text-[10px] md:text-lg font-normal md:font-semibold items-center text-white">
+							<div className="flex flex-col md:flex-row space-x-0 md:space-x-3">
+								<div>FAQ</div>
+								<div>ABOUT</div>
+								<div>TERM AND CONDITION</div>
+							</div>
+							<div>
 								<Image
 									src="/paslon01.png"
+									className="p-2 md:p-0"
 									alt="logo"
 									width={100}
 									height={120}
 								/>
 							</div>
-							<div>PRIVACY POLICY</div>
-							<div>CONTACT US</div>
-							<div>LAPOR KAMPANYE</div>
+							<div className="flex flex-col md:flex-row space-x-0 md:space-x-3">
+								<div>PRIVACY POLICY</div>
+								<div>CONTACT US</div>
+								<div>LAPOR KAMPANYE</div>
+							</div>
 						</footer>
 					</div>
 				</Providers>
diff --git a/components/landing/headline.tsx b/components/landing/headline.tsx
index 81452e7..7be1f0b 100644
--- a/components/landing/headline.tsx
+++ b/components/landing/headline.tsx
@@ -1,10 +1,18 @@
 'use client'
 import { Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react'
 import Link from 'next/link';
-import React from 'react'
+import React, { useRef } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/free-mode";
+import { FreeMode, Navigation } from 'swiper/modules';
 
 export default function Headline() {
 
+    const sliderRef = useRef(null);
+
+
     const headlineData = [
         {
             id: 1,
@@ -48,18 +56,63 @@ export default function Headline() {
         <div className='space-y-5 pt-10 pb-10 bg-[#F1F4FE]'>
             <div className='lg:mx-16 space-y-4'>
                 <div className='text-3xl font-bold z-10 text-black'>Headline News</div>
-                <div>
-                    <div className="flex w-full flex-col">
-                        <Tabs
-                            aria-label="Options"
-                            size='lg'
-                            color='primary'
-                            className='pb-5 pt-4'
-                            radius='full'
-                            disabledKeys={["audio", "foto", "teks"]}
-                        >
-                            <Tab key="audiovisual" title="Audio Visual">
-                                <div className="gap-2 grid grid-cols-2 sm:grid-cols-5">
+                <div className="flex w-full flex-col">
+                    <Tabs
+                        aria-label="Options"
+                        size='lg'
+                        color='primary'
+                        className='pb-5 pt-4'
+                        radius='full'
+                        disabledKeys={["audio", "foto", "teks"]}
+                    >
+                        <Tab key="audiovisual" title="Audio Visual">
+                            <Swiper ref={sliderRef}
+                                breakpoints={{
+                                    450: {
+                                        slidesPerView: 1,
+                                        spaceBetween: 5,
+                                    },
+                                    700: {
+                                        slidesPerView: 2,
+                                        spaceBetween: 15,
+                                    },
+                                    900: {
+                                        slidesPerView: 4,
+                                        spaceBetween: 15,
+                                    },
+                                }}
+                                freeMode={true}
+                                navigation={true}
+                                modules={[FreeMode, Navigation]}
+                                className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
+                            >
+                                {headlineData.map((item) => (
+                                    <SwiperSlide key={item.title}>
+                                        <div className="flex flex-col relative  overflow-hidden cursor-pointer rounded-lg">
+                                            <Card>
+                                                <CardBody className="overflow-visible items-center">
+                                                    <Image
+                                                        shadow="sm"
+                                                        radius="lg"
+                                                        alt={item.title}
+                                                        className="w-full object-cover"
+                                                        src={item.imageUrl}
+                                                    />
+                                                </CardBody>
+                                                <CardFooter className="text-small text-left flex flex-col items-start">
+                                                    <div >{item.date}</div>
+                                                    <div className='font-bold'>{item.title}</div>
+                                                    <Link href={`/headline/detail/${item.id}`}>
+                                                        <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
+                                                    </Link>
+                                                </CardFooter>
+                                            </Card>
+                                        </div>
+                                    </SwiperSlide>
+                                ))}
+                            </Swiper>
+
+                            {/* <div className="gap-2 grid grid-cols-2 sm:grid-cols-5">
                                     {headlineData.map((item, index) => (
                                         <Card shadow="sm" key={index}>
                                             <CardBody className="overflow-visible p-0">
@@ -81,262 +134,261 @@ export default function Headline() {
                                             </CardFooter>
                                         </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=' font-semibold text-[#1A328E] 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> */}
+                        </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=' font-semibold text-[#1A328E] 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 >
diff --git a/components/landing/visi-misi.tsx b/components/landing/visi-misi.tsx
index 5411b77..dd220da 100644
--- a/components/landing/visi-misi.tsx
+++ b/components/landing/visi-misi.tsx
@@ -13,7 +13,7 @@ import Image from "next/image";
 import { useCallback, useRef } from "react";
 
 export default function VisiMisi() {
-    
+
     const sliderRef = useRef(null);
 
     const images = [
@@ -126,7 +126,7 @@ export default function VisiMisi() {
                                             className="absolute inset-0 bg-cover bg-center"
                                             style={{ backgroundImage: `url(${item.url})` }}
                                         /> */}
-                                         <Image
+                                        <Image
                                             alt="vm"
                                             className="object-cover"
                                             src={item.url}
@@ -145,9 +145,11 @@ export default function VisiMisi() {
                             ))}
                         </Swiper>
                     </div>
-                    <div className="swiper-navigation flex flex-wrap justify-center z-50 mt-[-50px] absolute left-0 lg:left-[28%] right-0 m-auto">
-                        <div className="prev-arrow mr-3 border-1 border-indigo-500/75 rounded-md px-3" onClick={handlePrev} role="button">Prev</div>
-                        <div className="next-arrow border-1 border-indigo-500/75 rounded-md px-3" onClick={handleNext} role="button">Next</div>
+                    <div className="swiper-navigation flex flex-wrap justify-center space-x-4 z-50 mt-[-50px] absolute left-0 lg:left-[28%] right-0 m-auto">
+                        {/* <div className="prev-arrow mr-3 border-1 border-indigo-500/75 rounded-md px-3" onClick={handlePrev} role="button">Prev</div> */}
+                        {/* <div className=" border-1 border-indigo-500/75 px-3 rounded-full" onClick={handleNext} role="button">&rarr;</div> */}
+                        <button><img src="al.svg" alt="al" onClick={handlePrev} /></button>
+                        <button><img src="ar.svg" alt="ar" onClick={handleNext} /></button>
                     </div>
                 </div>
             </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index f8cc66f..af1b116 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -20,7 +20,6 @@ import NextLink from "next/link";
 import {
 	SearchIcon
 } from "@/components/icons";
-import { ThemeSwitch } from "@/components/theme-switch";
 
 import Image from "next/image";
 
diff --git a/public/al.svg b/public/al.svg
new file mode 100644
index 0000000..41a5185
--- /dev/null
+++ b/public/al.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 14C28 11.2311 27.1789 8.52431 25.6406 6.22202C24.1022 3.91973 21.9157 2.12531 19.3576 1.06569C16.7994 0.00605965 13.9845 -0.271187 11.2687 0.269007C8.553 0.8092 6.05844 2.14257 4.10051 4.10051C2.14257 6.05844 0.8092 8.553 0.269007 11.2687C-0.271187 13.9845 0.00605965 16.7994 1.06569 19.3576C2.12531 21.9157 3.91973 24.1022 6.22202 25.6406C8.52431 27.1789 11.2311 28 14 28C17.713 28 21.274 26.525 23.8995 23.8995C26.525 21.274 28 17.713 28 14ZM22 15L9.85 15L15.43 20.607L14 22L6 14L14 6L15.43 7.427L9.85 13L22 13V15Z" fill="#007748"/>
+</svg>
diff --git a/public/ar.svg b/public/ar.svg
new file mode 100644
index 0000000..b73a3e0
--- /dev/null
+++ b/public/ar.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14C0 16.7689 0.821086 19.4757 2.35943 21.778C3.89777 24.0803 6.08427 25.8747 8.64243 26.9343C11.2006 27.9939 14.0155 28.2712 16.7313 27.731C19.447 27.1908 21.9416 25.8574 23.8995 23.8995C25.8574 21.9416 27.1908 19.447 27.731 16.7313C28.2712 14.0155 27.9939 11.2006 26.9343 8.64243C25.8747 6.08427 24.0803 3.89777 21.778 2.35943C19.4757 0.821086 16.7689 0 14 0C10.287 0 6.72601 1.475 4.1005 4.1005C1.475 6.72601 0 10.287 0 14ZM6 13H18.15L12.57 7.393L14 6L22 14L14 22L12.57 20.573L18.15 15H6V13Z" fill="#007748"/>
+</svg>