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

feat: ppid-footer

This commit is contained in:
amd123 2024-02-20 15:42:07 +07:00
parent fb13fc879b
commit 5f4b657141
10 changed files with 214 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Landing Page/BannerHumas.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
export default function BannerHumas() {
return (
<div className=' bg-white'>
<div className=' bg-white relative'>
<img src="headerbanner1.png"
alt="humasbanner"
className='w-full relative bottom-0 md:bottom-10'

3
components/Landing Page/MediaSocial.tsx
View File

@ -7,6 +7,7 @@ import YoutubePages from '../SocialMedia/Youtube';
import YoutubeWidget from '../SocialMedia/Youtube';
import InstagramWidget from '../SocialMedia/Instagram';
import TiktokWidget from '../SocialMedia/Tiktok';
import Facebookwidget from '../SocialMedia/Facebook';
export default function MediaSocial() {
// const [limitedData, setLimitedData] = useState<any>([]);
@ -244,7 +245,7 @@ export default function MediaSocial() {
</div>
<div className=''>
<div className=' rounded-md '>
<YoutubeWidget />
<Facebookwidget />
</div>
{/* {dummyData.map((data: any) => (
<div

86
components/Portal PPID/FooterPPID.tsx Normal file
View File

@ -0,0 +1,86 @@
import React from 'react'
import { FbIcon, Hotline, IgIcon, Location, Mail, TtIcon, TwIcon, WorldIcon, YtIcon } from '../icons'
export default function FooterPPID() {
return (
<>
<div className='w-full bg-[#1F1A17] flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4 gap-0 md:gap-3 lg:gap-7 p-2 lg:p-16 text-sm'>
<div className=' flex-col hidden lg:block'>
<img src="/e-ppid.png" alt="logo" />
</div>
<div className='text-sm space-y-3 text-white'>
<div className='border-b-2 border-white border-dashed pb-0 md:pb-2 font-semibold'>Kontak Kami</div>
<div className='flex gap-2'>
<div><Location /></div>
<div>Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia</div>
</div>
<div className='flex gap-2'>
<div><Hotline /></div>
<div>Hotline Divisi HumasPolri (021) 72120599</div>
</div>
<div className='flex gap-2'>
<div><Hotline /></div>
<div>Call Center 110</div>
</div>
<div className='flex gap-2'>
<div><Mail /></div>
<div>ppid@polri.go.id</div>
</div>
</div>
<div>
<div className='text-sm space-y-3 text-white'>
<div className='border-b-2 border-white border-dashed pb-2 text-white font-semibold'>Tautan</div>
<div className='grid grid-cols-2 gap-2'>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>Polri.go.id</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>TBNews</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>Humas Polri</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>MediaHub</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>Satu Data</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>PUSIKNAS</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>SPIT</div>
</div>
<div className='flex gap-2'>
<div><WorldIcon /></div>
<div>POLRI TV</div>
</div>
</div>
</div>
</div>
<div>
<div className='text-sm space-y-3 text-white'>
<div className='border-b-2 border-white border-dashed pb-2 '>Social Media Humas</div>
<div className="flex gap-1 lg:gap-3 items-center">
<div><FbIcon /></div>
<div><IgIcon /></div>
<div><YtIcon /></div>
<div><TwIcon /></div>
<div><TtIcon /></div>
</div>
</div>
</div>
</div>
<div className='dark:bg-black text-black dark:text-white text-center py-2 text-xs md:text-sm flex justify-center font-normal'>&copy; Copyright Humas<p className='text-red-700'>&nbsp; POLRI &reg;</p>&nbsp; All Rights Reserved</div>
</>
)
}

88
components/Portal PPID/ppid-banner.tsx
View File

@ -1,38 +1,68 @@
import React from 'react'
import { SearchIcons } from '../icons'
import { Input } from '@nextui-org/input'
import { Input } from "@nextui-org/input";
import { SearchIcon, SearchIcons } from "../icons";
import Link from "next/link";
export default function PPIDBanner() {
return (
<div className='relative h-screen'>
<div className='relative w-full'>
<img
className='w-full opacity-100 dark:opacity-90'
src="bannerppid.png"
alt="banner"
<div className=' bg-white relative'>
<div className="relative">
<img src="banner-ppid.png"
alt="ppid-banner"
className='w-full object-cover relative h-[300px] md:h-min'
/>
</div>
<div className='flex flex-col items-center w-[100%] md:w-[80%] leading-10 h-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center bg-inherit text-inherit md:text-white'>
<p className='text-lg md:text-xl lg:text-4xl font-bold leading-10'>
SELAMAT DATANG DI PORTAl PPID HUBUNGAN MASYARAKAT POLISI REPUBLIK INDONESIA (HUMAS POLRI)
</p>
<p className='text-xs md:text-md lg:text-base pt-5'>
Layanan ini merupakan fasilitas daring yang disediakan bagi para pemohon informasi publik, sebagai bagian dari <br /> implementasi prinsip keterbukaan informasi publik di Pusat Informasi dan Dokumentasi (PPID) Utama.
</p>
<div className='pt-4 w-[50%]'>
<Input
type="email"
placeholder="Informasi Berkala"
classNames={{
inputWrapper: 'bg-white'
}}
startContent={
<SearchIcons className=" text-default-400 pointer-events-none flex-shrink-0" />
}
/>
<div className="absolute top-0 lg:top-1/3 left-1/2 w-[48%]">
<p className='text-xs md:text-md lg:text-4xl font-bold leanding-0 md:leading-10'>
SELAMAT DATANG DI PORTAL E-PPID POLRI
</p>
<p className='text-xs font-medium lg:font-semibold pt-1 lg:pt-3'>
Layanan ini merupakan fasilitas daring yang disediakan bagi para pemohon informasi publik, sebagai bagian dari implementasi prinsip keterbukaan informasi publik di Pusat Informasi dan Dokumentasi (PPID) Utama.
</p>
<div className='pt-2 md:pt-4 w-[100%]'>
<Input
size="sm"
type="email"
placeholder="Informasi Berkala"
className="w-full"
classNames={{
inputWrapper: 'bg-white'
}}
startContent={
<SearchIcon className=" text-default-400 pointer-events-none flex-shrink-0" />
}
/>
</div>
</div>
</div>
</div>
// <div className='relative h-screen'>
// <div className='relative w-full'>
// <img
// className='w-full opacity-100 dark:opacity-90'
// src="banner-ppid.png"
// alt="banner"
// />
// </div>
// <div className='flex flex-col items-center w-[100%] md:w-[80%] leading-10 h-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center bg-inherit text-inherit md:text-white'>
// <p className='text-lg md:text-xl lg:text-4xl font-bold leading-10'>
// SELAMAT DATANG DI PORTAl PPID HUBUNGAN MASYARAKAT POLISI REPUBLIK INDONESIA (HUMAS POLRI)
// </p>
// <p className='text-xs md:text-md lg:text-base pt-5'>
// Layanan ini merupakan fasilitas daring yang disediakan bagi para pemohon informasi publik, sebagai bagian dari <br /> implementasi prinsip keterbukaan informasi publik di Pusat Informasi dan Dokumentasi (PPID) Utama.
// </p>
// {/* <div className='pt-4 w-[50%]'>
// <Input
// type="email"
// placeholder="Informasi Berkala"
// classNames={{
// inputWrapper: 'bg-white'
// }}
// startContent={
// <SearchIcons className=" text-default-400 pointer-events-none flex-shrink-0" />
// }
// />
// </div> */}
// </div>
// </div>
)
}

29
components/SocialMedia/Facebook.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useEffect } from 'react';
const YoutubeWidget = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"></div>
);
};
export default YoutubeWidget;

18
components/icons.tsx
View File

@ -734,4 +734,22 @@ export const Calender = ({
</clipPath>
</defs>
</svg>
);
export const WorldIcon = ({
size = 24,
width,
height,
...props
}: IconSvgProps) => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1095_7338)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.65552 0.473048C6.33564 1.14785 4.27321 2.50663 2.73763 4.37189C1.20205 6.23715 0.264727 8.52218 0.0480957 10.9285H5.53381C5.85183 7.26685 6.91347 3.70859 8.65381 0.471334L8.65552 0.473048ZM5.53381 13.0713H0.0480957C0.264274 15.4777 1.2012 17.763 2.73647 19.6285C4.27175 21.4941 6.33399 22.8533 8.65381 23.5285C6.91347 20.2912 5.85183 16.733 5.53381 13.0713ZM11.4035 23.9862C9.32375 20.6904 8.04935 16.9512 7.68352 13.0713H16.315C15.9491 16.9512 14.6747 20.6904 12.595 23.9862C12.198 24.0055 11.8004 24.0055 11.4035 23.9862ZM15.3464 23.5268C17.6659 22.8517 19.728 21.4928 21.2633 19.6275C22.7985 17.7623 23.7356 15.4774 23.9521 13.0713H18.4664C18.1484 16.733 17.0867 20.2912 15.3464 23.5285V23.5268ZM18.4664 10.9285H23.9521C23.7359 8.52209 22.799 6.23684 21.2637 4.37127C19.7284 2.50569 17.6662 1.14653 15.3464 0.471334C17.0868 3.70858 18.1484 7.26684 18.4664 10.9285ZM11.4035 0.0136195C11.801 -0.00584192 12.1992 -0.00584192 12.5967 0.0136195C14.6758 3.30952 15.9496 7.04872 16.315 10.9285H7.68524C8.05724 7.02505 9.33438 3.28276 11.4035 0.0136195Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_1095_7338">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
);

11
components/layout/PPIDLayout.tsx
View File

@ -1,11 +1,8 @@
"use client";
import React from "react";
import { PPIDNavbar } from "../Portal PPID/ppid-navbar";
import PPIDBanner from "../Portal PPID/ppid-banner";
import PPIDbody from "../Portal PPID/PpidMain";
import NavbarHumas from "../navbar/NavbarHumas";
import Footer from "../Landing Page/Footer";
import FooterPPID from "../Portal PPID/FooterPPID";
import NavbarPPID from "../navbar/NavbarPPID";
import PPIDBanner from "../Portal PPID/ppid-banner";
interface Props {
children: React.ReactNode;
@ -18,8 +15,8 @@ export const PPIDLayout = ({ children, pageTitle }: Props) => {
<section>
<NavbarPPID />
<PPIDBanner />
<PPIDbody />
<Footer />
{/* <PPIDbody /> */}
<FooterPPID />
</section>
);
};

7
components/navbar/NavbarPPID.tsx
View File

@ -2,10 +2,11 @@ import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle } from
import React from 'react'
import { ThemeSwitch } from '../theme-switch'
import { FbIcon, IdnIcon, IgIcon, TtIcon, TwIcon, YtIcon } from '../icons'
import { Link, LinkIcon } from '@nextui-org/link'
export default function NavbarPPID() {
return (
<Navbar maxWidth='full' className='h-28 md:h-32'>
<Navbar maxWidth='full' height="8rem">
<div className='w-full'>
<div className='hidden md:flex items-end justify-end'>
<div className='flex items-center justify-between gap-1 md:gap-10'>
@ -21,7 +22,9 @@ export default function NavbarPPID() {
</div>
<div className='flex'>
<div className='w-1/3 lg:w-2/12'>
<img src="/e-ppid.png" alt="logo" className='w-48' />
<Link href={'/'}>
<img src="/e-ppid.png" alt="logo" className='w-48' />
</Link>
</div>
<div className='w-2/3 lg:w-9/12 hidden md:flex flex-wrap items-center justify-evenly '>
<NavbarItem>Beranda</NavbarItem>

BIN
public/banner-ppid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 KiB

10
public/temp/word.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1095_7338)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.65552 0.473048C6.33564 1.14785 4.27321 2.50663 2.73763 4.37189C1.20205 6.23715 0.264727 8.52218 0.0480957 10.9285H5.53381C5.85183 7.26685 6.91347 3.70859 8.65381 0.471334L8.65552 0.473048ZM5.53381 13.0713H0.0480957C0.264274 15.4777 1.2012 17.763 2.73647 19.6285C4.27175 21.4941 6.33399 22.8533 8.65381 23.5285C6.91347 20.2912 5.85183 16.733 5.53381 13.0713ZM11.4035 23.9862C9.32375 20.6904 8.04935 16.9512 7.68352 13.0713H16.315C15.9491 16.9512 14.6747 20.6904 12.595 23.9862C12.198 24.0055 11.8004 24.0055 11.4035 23.9862ZM15.3464 23.5268C17.6659 22.8517 19.728 21.4928 21.2633 19.6275C22.7985 17.7623 23.7356 15.4774 23.9521 13.0713H18.4664C18.1484 16.733 17.0867 20.2912 15.3464 23.5285V23.5268ZM18.4664 10.9285H23.9521C23.7359 8.52209 22.799 6.23684 21.2637 4.37127C19.7284 2.50569 17.6662 1.14653 15.3464 0.471334C17.0868 3.70858 18.1484 7.26684 18.4664 10.9285ZM11.4035 0.0136195C11.801 -0.00584192 12.1992 -0.00584192 12.5967 0.0136195C14.6758 3.30952 15.9496 7.04872 16.315 10.9285H7.68524C8.05724 7.02505 9.33438 3.28276 11.4035 0.0136195Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1095_7338">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB