web-humas-fe/components/Portal PPID/ppid-banner.tsx

'use client'
import { Input } from "@nextui-org/input";
import { SearchIcon } from "../icons";

export default function PPIDBanner() {
    return (
        <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 className="absolute top-5 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>
    )
}