Compare commits
10 Commits
| Author | SHA1 | Date |
|---|---|---|
amd123
|
f3c5b3343d | |
|
amd123
|
955e1e488b | |
|
amd123
|
b46b2b0ee2 | |
|
amd123
|
bb8192f952 | |
|
amd123
|
6a7095473f | |
|
amd123
|
4874262a13 | |
 hanif salafi
|
677e82b177 | |
|
hanif salafi
|
e898a2a1d4 | |
|
amd123
|
2d59536fc1 | |
|
amd123
|
70b0422de3 |
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import { Providers } from "./providers";
|
|||
import { Navbar } from "@/components/navbar";
|
||||
import { Link } from "@nextui-org/link";
|
||||
import clsx from "clsx";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
|
|
@ -38,22 +39,32 @@ export default function RootLayout({
|
|||
fontSans.variable
|
||||
)}
|
||||
>
|
||||
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
|
||||
<div className="relative flex flex-col h-screen">
|
||||
<Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
|
||||
<div className=" ">
|
||||
<Navbar />
|
||||
<main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
|
||||
<main className=" w-screen pt-2 flex-grow">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="w-full flex items-center justify-center py-3">
|
||||
<Link
|
||||
isExternal
|
||||
className="flex items-center gap-1 text-current"
|
||||
href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
|
||||
title="nextui.org homepage"
|
||||
>
|
||||
<span className="text-default-600">Powered by</span>
|
||||
<p className="text-primary">NextUI</p>
|
||||
</Link>
|
||||
<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 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>
|
||||
|
|
|
|||
54
app/page.tsx
54
app/page.tsx
|
|
@ -1,51 +1,15 @@
|
|||
import { Link } from "@nextui-org/link";
|
||||
import { Snippet } from "@nextui-org/snippet";
|
||||
import { Code } from "@nextui-org/code"
|
||||
import { button as buttonStyles } from "@nextui-org/theme";
|
||||
import { siteConfig } from "@/config/site";
|
||||
import { title, subtitle } from "@/components/primitives";
|
||||
import { GithubIcon } from "@/components/icons";
|
||||
import Banner from "@/components/landing/banner";
|
||||
import Campaign from "@/components/landing/campaign";
|
||||
import Headline from "@/components/landing/headline";
|
||||
import VisiMisi from "@/components/landing/visi-misi";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
|
||||
<div className="inline-block max-w-lg text-center justify-center">
|
||||
<h1 className={title()}>Make </h1>
|
||||
<h1 className={title({ color: "violet" })}>beautiful </h1>
|
||||
<br />
|
||||
<h1 className={title()}>
|
||||
websites regardless of your design experience.
|
||||
</h1>
|
||||
<h2 className={subtitle({ class: "mt-4" })}>
|
||||
Beautiful, fast and modern React UI library.
|
||||
</h2>
|
||||
<div className="w-full h-full">
|
||||
<Banner />
|
||||
<VisiMisi />
|
||||
<Headline />
|
||||
<Campaign />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Link
|
||||
isExternal
|
||||
href={siteConfig.links.docs}
|
||||
className={buttonStyles({ color: "primary", radius: "full", variant: "shadow" })}
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
<Link
|
||||
isExternal
|
||||
className={buttonStyles({ variant: "bordered", radius: "full" })}
|
||||
href={siteConfig.links.github}
|
||||
>
|
||||
<GithubIcon size={20} />
|
||||
GitHub
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Snippet hideSymbol hideCopyButton variant="flat">
|
||||
<span>
|
||||
Get started by editing <Code color="primary">app/page.tsx</Code>
|
||||
</span>
|
||||
</Snippet>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
export default function ReportLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section>
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import FormReport from '@/components/form/form-report'
|
||||
import React from 'react'
|
||||
|
||||
export default function ReportPage() {
|
||||
return (
|
||||
<FormReport />
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
'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 = () => {
|
||||
console.log('Data formulir yang dikirim:', formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='mx-2 md:mx-24'>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
'use client'
|
||||
import Image from 'next/image';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
|
||||
export default function Banner() {
|
||||
const settings = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
};
|
||||
``
|
||||
return (
|
||||
<div className='flex flex-wrap'>
|
||||
<div className='h-auto w-full relative'>
|
||||
<img src="/banner2.png" width={'100%'} height={'100%'} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
'use client'
|
||||
import { Button } from '@nextui-org/button';
|
||||
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
|
||||
import Link from 'next/link';
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
|
||||
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: '/kampanye1.png',
|
||||
link: '/link1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '03/02/2024 15:45 WIB',
|
||||
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
|
||||
imageUrl: '/kampanye2.png',
|
||||
link: '/link2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: '03/02/2024 15:45 WIB',
|
||||
title: 'MNC Penyelenggara Debat C',
|
||||
imageUrl: '/kampanye3.png',
|
||||
link: '/link2',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className='py-10'>
|
||||
<p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
|
||||
<div className='pt-10'>
|
||||
<div className='flex flex-wrap justify-center gap-4 h-full'>
|
||||
{dummyData.map((item, index) => (
|
||||
<Link href={`headline/detail/${item.id}`}>
|
||||
<Card shadow="sm" key={index} className='w-[280px]'>
|
||||
<CardBody className="overflow-visible p-0">
|
||||
<Image
|
||||
shadow="sm"
|
||||
radius="lg"
|
||||
width="100%"
|
||||
alt={item.title}
|
||||
className="w-full object-cover "
|
||||
src={item.imageUrl}
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter className="text-small text-left flex flex-col items-start border-2 h-full">
|
||||
<div >{item.date}</div>
|
||||
<div className='font-bold'>{item.title}</div>
|
||||
<Link href={`/headline/detail/${item.id}`}>
|
||||
<p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,398 @@
|
|||
'use client'
|
||||
import { Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react'
|
||||
import Link from 'next/link';
|
||||
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,
|
||||
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='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 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%] lg:w-full ml-2 mr-2 w-full"
|
||||
>
|
||||
{headlineData.map((item) => (
|
||||
<SwiperSlide key={item.title}>
|
||||
<Link href={`/headline/detail/${item.id}`}>
|
||||
<div className="flex flex-col relative overflow-hidden cursor-pointer rounded-lg">
|
||||
<Card>
|
||||
<CardBody className="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>
|
||||
</Link>
|
||||
</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">
|
||||
<Image
|
||||
shadow="sm"
|
||||
radius="lg"
|
||||
width="100%"
|
||||
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> */}
|
||||
</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 >
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
'use client'
|
||||
|
||||
// import "slick-carousel/slick/slick.css";
|
||||
// import "slick-carousel/slick/slick-theme.css";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { FreeMode, Pagination, Navigation } from "swiper/modules";
|
||||
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/free-mode";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useCallback, useRef } from "react";
|
||||
|
||||
export default function VisiMisi() {
|
||||
|
||||
const sliderRef = useRef<any>(null);
|
||||
|
||||
const images = [
|
||||
{
|
||||
id: 1,
|
||||
url: "/vm1.jpg",
|
||||
title: "Image 1",
|
||||
description: "Description of image 1"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
url: "/vm2.jpg",
|
||||
title: "Image 2",
|
||||
description: "Description of image 2"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: "/vm3.jpg",
|
||||
title: "Image 3",
|
||||
description: "Description of image 3"
|
||||
},
|
||||
];
|
||||
|
||||
const handlePrev = useCallback(() => {
|
||||
if (!sliderRef.current) return;
|
||||
sliderRef.current.swiper.slidePrev();
|
||||
}, []);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
if (!sliderRef.current) return;
|
||||
sliderRef.current.swiper.slideNext();
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<div className='flex flex-wrap lg:m-10 m-5'>
|
||||
<div className="flex-none lg:w-1/4 w-full">
|
||||
<div className='p-3 text-green-600'>
|
||||
<p className='text-3xl font-bold'>Visi & Misi</p>
|
||||
<p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
|
||||
</div>
|
||||
<div>
|
||||
<Image
|
||||
height={400}
|
||||
width={400}
|
||||
src='/frame.png'
|
||||
alt='banner'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:grow flex-none">
|
||||
<div className="lg:w-full w-[92vw]">
|
||||
{/* <div className='ml-5 lg:mt-52 w-4/5 lg:w-full mt-10 flex gap-5 my-auto lg:justify-center justify-left overflow-x-scroll'>
|
||||
<Card className="flex-none h-[420px] w-[300px]">
|
||||
<CardBody>
|
||||
<Image
|
||||
alt="vm"
|
||||
className="object-cover"
|
||||
src="/vm1.jpg"
|
||||
fill={true}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="flex-none h-[420px] w-[300px]">
|
||||
<CardBody>
|
||||
<Image
|
||||
alt="vm"
|
||||
className="object-cover"
|
||||
src="/vm2.jpg"
|
||||
fill={true}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="flex-none h-[420px] w-[300px]">
|
||||
<CardBody>
|
||||
<Image
|
||||
alt="vm"
|
||||
className="object-cover"
|
||||
src="/vm3.jpg"
|
||||
fill={true}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div> */}
|
||||
<div className="flex items-center justify-center lg:ml-10 mt-6 lg:mt-44">
|
||||
<Swiper ref={sliderRef}
|
||||
breakpoints={{
|
||||
450: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 5,
|
||||
},
|
||||
700: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 15,
|
||||
},
|
||||
900: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 15,
|
||||
},
|
||||
}}
|
||||
freeMode={true}
|
||||
navigation={true}
|
||||
modules={[FreeMode, Navigation]}
|
||||
className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
|
||||
>
|
||||
{images.map((item) => (
|
||||
<SwiperSlide key={item.title}>
|
||||
<div className="flex flex-col gap-6 mb-20 group relative shadow-lg text-white rounded-xl px-6 py-8 h-[300px] w-full lg:h-[400px] lg:w-[300px] overflow-hidden cursor-pointer">
|
||||
{/* <div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${item.url})` }}
|
||||
/> */}
|
||||
<Image
|
||||
alt="vm"
|
||||
className="object-cover"
|
||||
src={item.url}
|
||||
fill={true}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black opacity-10 group-hover:opacity-50" />
|
||||
<div className="relative flex flex-col gap-3">
|
||||
{/* <item.icon className="text-blue-600 group-hover:text-blue-400 w-[32px] h-[32px]" /> */}
|
||||
<h1 className="text-xl lg:text-2xl">{item.title} </h1>
|
||||
<p className="lg:text-[18px]">{item.description} </p>
|
||||
{/* </div>
|
||||
<RxArrowTopRight className="absolute bottom-5 left-5 w-[35px] h-[35px] text-white group-hover:text-blue-500 group-hover:rotate-45 duration-100" /> */}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</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">→</div> */}
|
||||
<button><img src="al.svg" alt="al" onClick={handlePrev} /></button>
|
||||
<button><img src="ar.svg" alt="ar" onClick={handleNext} /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
import {
|
||||
Navbar as NextUINavbar,
|
||||
NavbarContent,
|
||||
NavbarMenu,
|
||||
NavbarMenuToggle,
|
||||
NavbarBrand,
|
||||
NavbarItem,
|
||||
NavbarMenuItem,
|
||||
} from "@nextui-org/navbar";
|
||||
import { Button } from "@nextui-org/button";
|
||||
import { Kbd } from "@nextui-org/kbd";
|
||||
import { Link } from "@nextui-org/link";
|
||||
import { Input } from "@nextui-org/input";
|
||||
|
||||
import { link as linkStyles } from "@nextui-org/theme";
|
||||
|
||||
import { siteConfig } from "@/config/site";
|
||||
import NextLink from "next/link";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { ThemeSwitch } from "@/components/theme-switch";
|
||||
import {
|
||||
TwitterIcon,
|
||||
GithubIcon,
|
||||
DiscordIcon,
|
||||
HeartFilledIcon,
|
||||
SearchIcon,
|
||||
} from "@/components/icons";
|
||||
|
||||
import { Logo } from "@/components/icons";
|
||||
|
||||
export const Navbar = () => {
|
||||
const searchInput = (
|
||||
<Input
|
||||
aria-label="Search"
|
||||
classNames={{
|
||||
inputWrapper: "bg-default-100",
|
||||
input: "text-sm",
|
||||
}}
|
||||
endContent={
|
||||
<Kbd className="hidden lg:inline-block" keys={["command"]}>
|
||||
K
|
||||
</Kbd>
|
||||
}
|
||||
labelPlacement="outside"
|
||||
placeholder="Search..."
|
||||
startContent={
|
||||
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
||||
}
|
||||
type="search"
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<NextUINavbar maxWidth="xl" position="sticky">
|
||||
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
|
||||
<NavbarBrand as="li" className="gap-3 max-w-fit">
|
||||
<NextLink className="flex justify-start items-center gap-1" href="/">
|
||||
<Logo />
|
||||
<p className="font-bold text-inherit">ACME</p>
|
||||
</NextLink>
|
||||
</NavbarBrand>
|
||||
<ul className="hidden lg:flex gap-4 justify-start ml-2">
|
||||
{siteConfig.navItems.map((item) => (
|
||||
<NavbarItem key={item.href}>
|
||||
<NextLink
|
||||
className={clsx(
|
||||
linkStyles({ color: "foreground" }),
|
||||
"data-[active=true]:text-primary data-[active=true]:font-medium"
|
||||
)}
|
||||
color="foreground"
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</NextLink>
|
||||
</NavbarItem>
|
||||
))}
|
||||
</ul>
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarContent
|
||||
className="hidden sm:flex basis-1/5 sm:basis-full"
|
||||
justify="end"
|
||||
>
|
||||
<NavbarItem className="hidden sm:flex gap-2">
|
||||
<Link isExternal href={siteConfig.links.twitter} aria-label="Twitter">
|
||||
<TwitterIcon className="text-default-500" />
|
||||
</Link>
|
||||
<Link isExternal href={siteConfig.links.discord} aria-label="Discord">
|
||||
<DiscordIcon className="text-default-500" />
|
||||
</Link>
|
||||
<Link isExternal href={siteConfig.links.github} aria-label="Github">
|
||||
<GithubIcon className="text-default-500" />
|
||||
</Link>
|
||||
<ThemeSwitch />
|
||||
</NavbarItem>
|
||||
<NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
|
||||
<NavbarItem className="hidden md:flex">
|
||||
<Button
|
||||
isExternal
|
||||
as={Link}
|
||||
className="text-sm font-normal text-default-600 bg-default-100"
|
||||
href={siteConfig.links.sponsor}
|
||||
startContent={<HeartFilledIcon className="text-danger" />}
|
||||
variant="flat"
|
||||
>
|
||||
Sponsor
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
||||
<Link isExternal href={siteConfig.links.github} aria-label="Github">
|
||||
<GithubIcon className="text-default-500" />
|
||||
</Link>
|
||||
<ThemeSwitch />
|
||||
<NavbarMenuToggle />
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarMenu>
|
||||
{searchInput}
|
||||
<div className="mx-4 mt-2 flex flex-col gap-2">
|
||||
{siteConfig.navMenuItems.map((item, index) => (
|
||||
<NavbarMenuItem key={`${item}-${index}`}>
|
||||
<Link
|
||||
color={
|
||||
index === 2
|
||||
? "primary"
|
||||
: index === siteConfig.navMenuItems.length - 1
|
||||
? "danger"
|
||||
: "foreground"
|
||||
}
|
||||
href="#"
|
||||
size="lg"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</NavbarMenuItem>
|
||||
))}
|
||||
</div>
|
||||
</NavbarMenu>
|
||||
</NextUINavbar>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,33 +1,27 @@
|
|||
import {
|
||||
Navbar as NextUINavbar,
|
||||
NavbarContent,
|
||||
NavbarMenu,
|
||||
NavbarMenuToggle,
|
||||
NavbarBrand,
|
||||
NavbarItem,
|
||||
NavbarMenuItem,
|
||||
} from "@nextui-org/navbar";
|
||||
import { Button } from "@nextui-org/button";
|
||||
import { Input } from "@nextui-org/input";
|
||||
import { Kbd } from "@nextui-org/kbd";
|
||||
import { Link } from "@nextui-org/link";
|
||||
import { Input } from "@nextui-org/input";
|
||||
import {
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
NavbarMenu,
|
||||
NavbarMenuItem,
|
||||
NavbarMenuToggle,
|
||||
Navbar as NextUINavbar,
|
||||
} from "@nextui-org/navbar";
|
||||
|
||||
import { link as linkStyles } from "@nextui-org/theme";
|
||||
|
||||
import { siteConfig } from "@/config/site";
|
||||
import NextLink from "next/link";
|
||||
import clsx from "clsx";
|
||||
import NextLink from "next/link";
|
||||
|
||||
import { ThemeSwitch } from "@/components/theme-switch";
|
||||
import {
|
||||
TwitterIcon,
|
||||
GithubIcon,
|
||||
DiscordIcon,
|
||||
HeartFilledIcon,
|
||||
SearchIcon,
|
||||
SearchIcon
|
||||
} from "@/components/icons";
|
||||
|
||||
import { Logo } from "@/components/icons";
|
||||
import Image from "next/image";
|
||||
|
||||
export const Navbar = () => {
|
||||
const searchInput = (
|
||||
|
|
@ -52,20 +46,28 @@ export const Navbar = () => {
|
|||
);
|
||||
|
||||
return (
|
||||
<NextUINavbar maxWidth="xl" position="sticky">
|
||||
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
|
||||
<NextUINavbar maxWidth="xl" position="sticky" className={"px-8 py-3"} classNames={{
|
||||
wrapper: "max-w-full",
|
||||
}}>
|
||||
<NavbarContent className="basis-1/5" justify="start">
|
||||
<NavbarBrand as="li" className="gap-3 max-w-fit">
|
||||
<NextLink className="flex justify-start items-center gap-1" href="/">
|
||||
<Logo />
|
||||
<p className="font-bold text-inherit">ACME</p>
|
||||
<Image
|
||||
src="/paslon01.png"
|
||||
alt="logo"
|
||||
width={100}
|
||||
height={100}
|
||||
/>
|
||||
</NextLink>
|
||||
</NavbarBrand>
|
||||
<ul className="hidden lg:flex gap-4 justify-start ml-2">
|
||||
</NavbarContent>
|
||||
<NavbarContent>
|
||||
<ul className="hidden lg:flex gap-3 justify-start ml-2">
|
||||
{siteConfig.navItems.map((item) => (
|
||||
<NavbarItem key={item.href}>
|
||||
<NextLink
|
||||
className={clsx(
|
||||
linkStyles({ color: "foreground" }),
|
||||
linkStyles({ color: "primary" }),
|
||||
"data-[active=true]:text-primary data-[active=true]:font-medium"
|
||||
)}
|
||||
color="foreground"
|
||||
|
|
@ -83,7 +85,7 @@ export const Navbar = () => {
|
|||
justify="end"
|
||||
>
|
||||
<NavbarItem className="hidden sm:flex gap-2">
|
||||
<Link isExternal href={siteConfig.links.twitter} aria-label="Twitter">
|
||||
{/* <Link isExternal href={siteConfig.links.twitter} aria-label="Twitter">
|
||||
<TwitterIcon className="text-default-500" />
|
||||
</Link>
|
||||
<Link isExternal href={siteConfig.links.discord} aria-label="Discord">
|
||||
|
|
@ -92,10 +94,10 @@ export const Navbar = () => {
|
|||
<Link isExternal href={siteConfig.links.github} aria-label="Github">
|
||||
<GithubIcon className="text-default-500" />
|
||||
</Link>
|
||||
<ThemeSwitch />
|
||||
<ThemeSwitch /> */}
|
||||
</NavbarItem>
|
||||
<NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
|
||||
<NavbarItem className="hidden md:flex">
|
||||
{/* <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem> */}
|
||||
{/* <NavbarItem className="hidden md:flex">
|
||||
<Button
|
||||
isExternal
|
||||
as={Link}
|
||||
|
|
@ -106,31 +108,24 @@ export const Navbar = () => {
|
|||
>
|
||||
Sponsor
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarItem> */}
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
||||
<Link isExternal href={siteConfig.links.github} aria-label="Github">
|
||||
{/* <Link isExternal href={siteConfig.links.github} aria-label="Github">
|
||||
<GithubIcon className="text-default-500" />
|
||||
</Link>
|
||||
<ThemeSwitch />
|
||||
<ThemeSwitch /> */}
|
||||
<NavbarMenuToggle />
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarMenu>
|
||||
{searchInput}
|
||||
<div className="mx-4 mt-2 flex flex-col gap-2">
|
||||
{/* {searchInput} */}
|
||||
<div className="mx-4 mt-2 flex flex-col gap-2 pt-2">
|
||||
{siteConfig.navMenuItems.map((item, index) => (
|
||||
<NavbarMenuItem key={`${item}-${index}`}>
|
||||
<Link
|
||||
color={
|
||||
index === 2
|
||||
? "primary"
|
||||
: index === siteConfig.navMenuItems.length - 1
|
||||
? "danger"
|
||||
: "foreground"
|
||||
}
|
||||
href="#"
|
||||
href={item.href}
|
||||
size="lg"
|
||||
>
|
||||
{item.label}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import { Button, Image } from '@nextui-org/react'
|
||||
import React from 'react'
|
||||
|
||||
export default function DetailCampaign() {
|
||||
return (
|
||||
<div className='flex mx-2 md:mx-20 pt-8 pb-16'>
|
||||
<div className='w-full md:w-9/12 '>
|
||||
<div className='w-full'>
|
||||
<img
|
||||
alt='detail campaign'
|
||||
className='rounded-none'
|
||||
src='/detil1.png'
|
||||
width="100%"
|
||||
|
||||
/>
|
||||
</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 hidden md:block'>
|
||||
<div className='flex flex-col space-y-2 border-2 p-3 m-3 rounded-md'>
|
||||
<Button className='text-white bg-[#25292D] rounded-lg'>Simpan</Button>
|
||||
<Button className='text-white bg-[#007748] rounded-lg'>Download</Button>
|
||||
<Button className='text-white bg-[#1A328E] rounded-lg'>Share</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
'use client'
|
||||
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
|
||||
import Link from 'next/link';
|
||||
import React from 'react'
|
||||
|
||||
export default function SimilarNews() {
|
||||
|
||||
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='border-2 border-red py-10'>
|
||||
<p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
|
||||
<div className="gap-2 grid grid-cols-2 sm:grid-cols-5 mx-auto md:mx-10">
|
||||
{headlineData.map((item, index) => (
|
||||
<Card shadow="sm" key={index}>
|
||||
<CardBody className="overflow-visible p-0">
|
||||
<Image
|
||||
shadow="sm"
|
||||
radius="lg"
|
||||
width="100%"
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,62 +1,38 @@
|
|||
export type SiteConfig = typeof siteConfig;
|
||||
|
||||
export const siteConfig = {
|
||||
name: "Next.js + NextUI",
|
||||
name: "Aminbersatu.com",
|
||||
description: "Make beautiful websites regardless of your design experience.",
|
||||
navItems: [
|
||||
{
|
||||
label: "Home",
|
||||
label: "Giat Sepekan",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Docs",
|
||||
href: "/docs",
|
||||
label: "Lapor Kampanye",
|
||||
href: "/report",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "/pricing",
|
||||
label: "Update TPS",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "/about",
|
||||
}
|
||||
// {
|
||||
// label: "Blog",
|
||||
// href: "/blog",
|
||||
// },
|
||||
// {
|
||||
// label: "About",
|
||||
// href: "/about",
|
||||
// }
|
||||
],
|
||||
navMenuItems: [
|
||||
{
|
||||
label: "Profile",
|
||||
href: "/profile",
|
||||
label: "Giat Sepekan",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "/projects",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "/team",
|
||||
},
|
||||
{
|
||||
label: "Calendar",
|
||||
href: "/calendar",
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
href: "/settings",
|
||||
},
|
||||
{
|
||||
label: "Help & Feedback",
|
||||
href: "/help-feedback",
|
||||
},
|
||||
{
|
||||
label: "Logout",
|
||||
href: "/logout",
|
||||
label: "Lapor Kampanye",
|
||||
href: "/report",
|
||||
},
|
||||
],
|
||||
links: {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
|
|
@ -15,6 +15,7 @@
|
|||
"@nextui-org/kbd": "2.0.25",
|
||||
"@nextui-org/link": "2.0.26",
|
||||
"@nextui-org/navbar": "2.0.27",
|
||||
"@nextui-org/react": "^2.2.9",
|
||||
"@nextui-org/snippet": "2.0.30",
|
||||
"@nextui-org/switch": "2.0.25",
|
||||
"@nextui-org/system": "2.0.15",
|
||||
|
|
@ -22,21 +23,29 @@
|
|||
"@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",
|
||||
"eslint-config-next": "14.0.2",
|
||||
"framer-motion": "^10.16.4",
|
||||
"framer-motion": "^10.17.9",
|
||||
"intl-messageformat": "^10.5.0",
|
||||
"next": "14.0.2",
|
||||
"next-themes": "^0.2.1",
|
||||
"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",
|
||||
"swiper": "^11.0.5",
|
||||
"tailwind-variants": "^0.1.18",
|
||||
"tailwindcss": "3.3.5",
|
||||
"typescript": "5.0.4"
|
||||
"typescript": "^5.0.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 651 B |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 627 B |
Binary file not shown.
|
After Width: | Height: | Size: 460 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 733 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* *{
|
||||
border: 1px solid red;
|
||||
} */
|
||||
|
|
@ -6,7 +6,8 @@ module.exports = {
|
|||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
|
||||
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
|
||||
"./node_modules/swiper/swiper-react.mjs",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
|
|
|
|||
Loading…
Reference in New Issue