diff options
Diffstat (limited to 'src/core/components/elements/Footer/BasicFooter.jsx')
| -rw-r--r-- | src/core/components/elements/Footer/BasicFooter.jsx | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx new file mode 100644 index 00000000..76a7cac2 --- /dev/null +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -0,0 +1,268 @@ +import NextImage from 'next/image' +import IndoteknikLogo from '@/images/logo.png' +import { + DevicePhoneMobileIcon, + EnvelopeIcon, + PhoneArrowUpRightIcon +} from '@heroicons/react/24/outline' +import Link from '../Link/Link' + +const BasicFooter = () => { + return ( + <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'> + <div className='w-1/2 flex flex-col gap-y-4 pr-1.5'> + <div> + <NextImage + src={IndoteknikLogo} + alt='Logo Indoteknik' + width={90} + height={30} + /> + + <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div> + </div> + + <OfficeLocation /> + <WarehouseLocation /> + <InformationCenter /> + <OpenHours /> + <SocialMedias /> + </div> + + <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'> + <AboutUs /> + <CustomerGuide /> + <Payments /> + </div> + + <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'> + Copyright © 2007 - 2022, PT. Indoteknik Dotcom Gemilang + </div> + </footer> + ) +} + +const headerClassName = 'font-semibold mb-2' + +const OfficeLocation = () => ( + <div> + <div className={headerClassName}>Kantor Pusat</div> + <div className='leading-6 text-gray_r-12/80'> + Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara + </div> + </div> +) + +const WarehouseLocation = () => ( + <div> + <div className={headerClassName}>Gudang Indoteknik</div> + <div className='leading-6 text-gray_r-12/80'> + Jl. Bandengan Utara Komp. 85 A dan B, Penjaringan, Kec. Penjaringan, Jakarta Utara + </div> + </div> +) + +const AboutUs = () => ( + <div> + <div className={`${headerClassName} mb-3`}>Tentang Kami</div> + <ul className='flex flex-col gap-y-2'> + <li> + <InternalItemLink href='/'>Company Profile</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Karir</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Pelanggan Kami</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Menjadi Supplier</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Garansi dan Pengembalian</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Metode Pembayaran</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Metode Pengiriman</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Testimonial</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Kebijakan Privacy</InternalItemLink> + </li> + </ul> + </div> +) + +const CustomerGuide = () => ( + <div> + <div className={`${headerClassName} mb-3`}>Panduan Pelanggan</div> + <ul className='flex flex-col gap-y-2'> + <li> + <InternalItemLink href='/'>Panduan Belanja</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>F.A.Q</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Kebijakan Privasi</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Pengajuan Tempo</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Garansi Produk</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Online Quotation</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Pengiriman</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Pembayaran</InternalItemLink> + </li> + <li> + <InternalItemLink href='/'>Syarat & Ketentuan</InternalItemLink> + </li> + </ul> + </div> +) + +const InformationCenter = () => ( + <div> + <div className={`${headerClassName} mb-3`}>Layanan Informasi</div> + <ul className='flex flex-col gap-y-2'> + <li className='text-gray_r-12/80 flex items-center'> + <PhoneArrowUpRightIcon className='w-[18px] mr-2' /> + <a href='tel:02129338828'>(021) 2933-8828 / 29</a> + </li> + <li className='text-gray_r-12/80 flex items-center'> + <EnvelopeIcon className='w-[18px] mr-2' /> + <a href='mailto:sales@indoteknik.com'>sales@indoteknik.com</a> + </li> + <li className='text-gray_r-12/80 flex items-center'> + <DevicePhoneMobileIcon className='w-[18px] mr-2' /> + <a href='https://wa.me/+628128080622'>0812-8080-622</a> + </li> + </ul> + </div> +) + +const OpenHours = () => ( + <div> + <div className={headerClassName}>Jam Operasional</div> + <ul className='flex flex-col gap-y-1'> + <li> + <div className='text-gray_r-12'>Senin - Jumat:</div> + <div className='text-gray_r-12/80'>08:30 - 17:00</div> + </li> + <li> + <div className='text-gray_r-12'>Sabtu:</div> + <div className='text-gray_r-12/80'>08:30 - 14:00</div> + </li> + </ul> + </div> +) + +const SocialMedias = () => ( + <div> + <div className={headerClassName}>Temukan Kami</div> + <div className='flex flex-wrap gap-2'> + <NextImage + src='/images/socials/Whatsapp.png' + alt='Whatsapp Logo' + width={24} + height={24} + /> + <NextImage + src='/images/socials/Facebook.png' + alt='Facebook Logo' + width={24} + height={24} + /> + <NextImage + src='/images/socials/Twitter.png' + alt='Twitter Logo' + width={24} + height={24} + /> + <NextImage + src='/images/socials/Linkedin.png' + alt='Linkedin Logo' + width={24} + height={24} + /> + </div> + </div> +) + +const Payments = () => ( + <div> + <div className={headerClassName}>Pembayaran</div> + <div className='flex flex-wrap gap-2'> + <NextImage + src='/images/payments/bca.png' + alt='Bank BCA Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/bni.png' + alt='Bank BNI Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/bri.png' + alt='Bank BRI Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/gopay.png' + alt='Gopay Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/mandiri.png' + alt='Bank Mandiri Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/mastercard.png' + alt='Mastercard Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/permata.png' + alt='Bank Permata Logo' + width={48} + height={24} + /> + <NextImage + src='/images/payments/visa.png' + alt='Visa Logo' + width={48} + height={24} + /> + </div> + </div> +) + +const InternalItemLink = ({ href, children }) => ( + <Link + href={href} + className='!text-gray_r-12/80 font-normal line-clamp-1' + > + {children} + </Link> +) + +export default BasicFooter |