diff options
Diffstat (limited to 'src/core/components/elements/Footer/BasicFooter.jsx')
| -rw-r--r-- | src/core/components/elements/Footer/BasicFooter.jsx | 280 |
1 files changed, 215 insertions, 65 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx index 23bca677..28a3764c 100644 --- a/src/core/components/elements/Footer/BasicFooter.jsx +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -1,14 +1,14 @@ -import NextImage from 'next/image' -import IndoteknikLogo from '@/images/logo.png' +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' -import MobileView from '../../views/MobileView' -import DesktopView from '../../views/DesktopView' -import whatsappUrl from '@/core/utils/whatsappUrl' + PhoneArrowUpRightIcon, +} from '@heroicons/react/24/outline'; +import Link from '../Link/Link'; +import MobileView from '../../views/MobileView'; +import DesktopView from '../../views/DesktopView'; +import whatsappUrl from '@/core/utils/whatsappUrl'; const BasicFooter = () => { return ( @@ -17,9 +17,16 @@ const BasicFooter = () => { <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'> <div className='w-1/2 flex flex-col gap-y-8 pr-2'> <div> - <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} /> + <NextImage + src={IndoteknikLogo} + alt='Logo Indoteknik' + width={90} + height={30} + /> - <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div> + <div className='font-semibold mt-2'> + PT. Indoteknik Dotcom Gemilang + </div> </div> <OfficeLocation /> @@ -37,7 +44,8 @@ const BasicFooter = () => { </div> <div className='w-full mt-8 leading-5 text-caption-2 text-gray_r-12/80'> - Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang + Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom + Gemilang </div> </footer> </MobileView> @@ -46,8 +54,15 @@ const BasicFooter = () => { <footer className='bg-gray_r-3 py-6'> <div className='container mx-auto flex flex-wrap justify-between'> <div className='w-3/12'> - <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={180} height={60} /> - <div className='font-semibold mt-2 mb-4'>PT. Indoteknik Dotcom Gemilang</div> + <NextImage + src={IndoteknikLogo} + alt='Logo Indoteknik' + width={180} + height={60} + /> + <div className='font-semibold mt-2 mb-4'> + PT. Indoteknik Dotcom Gemilang + </div> <InformationCenter /> </div> <CustomerGuide /> @@ -64,7 +79,8 @@ const BasicFooter = () => { <hr className='w-full my-4 border-gray_r-7' /> <div className='w-full flex justify-between items-center'> <div className='text-caption-1'> - Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang + Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik + Dotcom Gemilang </div> <div> <SocialMedias /> @@ -74,39 +90,51 @@ const BasicFooter = () => { </footer> </DesktopView> </> - ) -} + ); +}; -const headerClassName = 'font-semibold mb-4' +const headerClassName = 'font-semibold mb-4'; const OfficeLocation = () => ( <div> <div className={headerClassName}>Kantor Pusat</div> <div className='leading-6 text-gray_r-12/80'> - <a href='https://goo.gl/maps/3DCJxtki8jUV32pR7' target='_blank' rel='noreferrer' className='text-gray_r-12/80'> - Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara</a> + <a + href='https://goo.gl/maps/3DCJxtki8jUV32pR7' + target='_blank' + rel='noreferrer' + className='text-gray_r-12/80' + > + Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. + Penjaringan, Jakarta Utara + </a> </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 + Jl. Bandengan Utara Komp. 85 A dan B, Penjaringan, Kec. Penjaringan, + Jakarta Utara </div> </div> -) +); const AboutUs = () => ( <div> <div className={headerClassName}>Tentang Kami</div> <ul className='flex flex-col gap-y-3'> <li> - <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink> + <InternalItemLink href='/tentang-kami'> + Company Profile + </InternalItemLink> </li> <li> - <InternalItemLink href='/pelanggan-kami'>Pelanggan Kami</InternalItemLink> + <InternalItemLink href='/pelanggan-kami'> + Pelanggan Kami + </InternalItemLink> </li> <li> <InternalItemLink href='/hubungi-kami'>Hubungi Kami</InternalItemLink> @@ -115,30 +143,42 @@ const AboutUs = () => ( <InternalItemLink href='/karir'>Karir</InternalItemLink> </li> <li> - <InternalItemLink href='/syarat-ketentuan'>Syarat & Ketentuan</InternalItemLink> + <InternalItemLink href='/syarat-ketentuan'> + Syarat & Ketentuan + </InternalItemLink> </li> <li> - <InternalItemLink href='/kebijakan-privasi'>Kebijakan Privasi</InternalItemLink> + <InternalItemLink href='/kebijakan-privasi'> + Kebijakan Privasi + </InternalItemLink> </li> </ul> </div> -) +); const CustomerGuide = () => ( <div> <div className={headerClassName}>Bantuan & Panduan</div> <ul className='flex flex-col gap-y-3'> <li> - <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink> + <InternalItemLink href='/metode-pembayaran'> + Metode Pembayaran + </InternalItemLink> </li> <li> - <InternalItemLink href='/metode-pengiriman'>Metode Pengiriman</InternalItemLink> + <InternalItemLink href='/metode-pengiriman'> + Metode Pengiriman + </InternalItemLink> </li> <li> - <InternalItemLink href='/panduan-belanja'>Panduan Belanja</InternalItemLink> + <InternalItemLink href='/panduan-belanja'> + Panduan Belanja + </InternalItemLink> </li> <li> - <InternalItemLink href='/panduan-quotation'>Panduan Quotation</InternalItemLink> + <InternalItemLink href='/panduan-quotation'> + Panduan Quotation + </InternalItemLink> </li> <li> <InternalItemLink href='/pengembalian-barang-dana'> @@ -146,40 +186,56 @@ const CustomerGuide = () => ( </InternalItemLink> </li> <li> - <InternalItemLink href='/informasi-garansi'>Informasi Garansi</InternalItemLink> + <InternalItemLink href='/informasi-garansi'> + Informasi Garansi + </InternalItemLink> </li> <li> - <InternalItemLink href='/panduan-pick-up-service'>Panduan Pick Up Service</InternalItemLink> + <InternalItemLink href='/panduan-pick-up-service'> + Panduan Pick Up Service + </InternalItemLink> </li> </ul> </div> -) +); const Form = () => ( <div> <div className={headerClassName}>Formulir</div> <ul className='flex flex-col gap-y-3'> <li> - <InternalItemLink href='/my/request-for-quotation'>Request for Quotation</InternalItemLink> + <InternalItemLink href='/my/request-for-quotation'> + Request for Quotation + </InternalItemLink> </li> <li> - <InternalItemLink href='/my/kunjungan-sales'>Kunjungan Sales</InternalItemLink> + <InternalItemLink href='/my/kunjungan-sales'> + Kunjungan Sales + </InternalItemLink> </li> <li> - <InternalItemLink href='/my/kunjungan-service'>Kunjungan Service</InternalItemLink> + <InternalItemLink href='/my/kunjungan-service'> + Kunjungan Service + </InternalItemLink> </li> <li> - <InternalItemLink href='/my/pembayaran-tempo'>Pembayaran Tempo</InternalItemLink> + <InternalItemLink href='/my/pembayaran-tempo'> + Pembayaran Tempo + </InternalItemLink> </li> <li> - <InternalItemLink href='/my/surat-dukungan'>Surat Dukungan</InternalItemLink> + <InternalItemLink href='/my/surat-dukungan'> + Surat Dukungan + </InternalItemLink> </li> <li> - <InternalItemLink href='/my/daftar-merchant'>Daftar Merchant</InternalItemLink> + <InternalItemLink href='/my/daftar-merchant'> + Daftar Merchant + </InternalItemLink> </li> </ul> </div> -) +); const InformationCenter = () => ( <div> @@ -187,11 +243,15 @@ const InformationCenter = () => ( <ul className='flex flex-col gap-y-3'> <li className='text-gray_r-12/80 flex items-center'> <PhoneArrowUpRightIcon className='w-[18px] mr-2' /> - <a href='tel:02129338828' target='_blank' rel='noreferrer'>(021) 2933-8828 / 29</a> + <a href='tel:02129338828' target='_blank' rel='noreferrer'> + (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' target='_blank' rel='noreferrer'>sales@indoteknik.com</a> + <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'> + sales@indoteknik.com + </a> </li> <li className='text-gray_r-12/80 flex items-center'> <DevicePhoneMobileIcon className='w-[18px] mr-2' /> @@ -201,7 +261,7 @@ const InformationCenter = () => ( </li> </ul> </div> -) +); const OpenHours = () => ( <div> @@ -217,44 +277,124 @@ const OpenHours = () => ( </li> </ul> </div> -) +); const SocialMedias = () => ( <div> <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div> - <div className='flex flex-wrap gap-3 mt-2'> + <div className='flex flex-wrap gap-3 mt-2 items-center'> + <a + target='_blank' + rel='noreferrer' + href='https://www.youtube.com/@indoteknikb2bindustriale-c778' + > + <NextImage + src='/images/socials/youtube.webp' + alt='Youtube - Indoteknik.com' + width={24} + height={24} + /> + </a> + <a + target='_blank' + rel='noreferrer' + href='https://www.tiktok.com/@indoteknikcom' + > + <NextImage + src='/images/socials/tiktok.png' + alt='TikTok - Indoteknik.com' + width={24} + height={24} + /> + </a> <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}> - <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} /> + <NextImage + src='/images/socials/Whatsapp.png' + alt='Whatsapp - Indoteknik.com' + width={24} + height={24} + /> </a> - <a target='_blank' rel='noreferrer' href='https://www.facebook.com/indoteknikcom'> - <NextImage src='/images/socials/Facebook.png' alt='Facebook Logo' width={24} height={24} /> + <a + target='_blank' + rel='noreferrer' + href='https://www.facebook.com/indoteknikcom' + > + <NextImage + src='/images/socials/Facebook.png' + alt='Facebook - Indoteknik.com' + width={24} + height={24} + /> </a> - <a target='_blank' rel='noreferrer' href='https://www.instagram.com/indoteknikcom/'> + <a + target='_blank' + rel='noreferrer' + href='https://www.instagram.com/indoteknikcom/' + > <NextImage src='/images/socials/Instagram.png' - alt='Instagram Logo' + alt='Instagram - Indoteknik.com' width={24} height={24} /> </a> - <a target='_blank' rel='noreferrer' href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'> - <NextImage src='/images/socials/Linkedin.png' alt='Linkedin Logo' width={24} height={24} /> + <a + target='_blank' + rel='noreferrer' + href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/' + > + <NextImage + src='/images/socials/Linkedin.png' + alt='Linkedin - Indoteknik.com' + width={24} + height={24} + /> </a> - <a target='_blank' rel='noreferrer' href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'> - <NextImage src='/images/socials/g_maps.png' alt='Linkedin Logo' width={24} height={24} /> + <a + target='_blank' + rel='noreferrer' + href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A' + > + <NextImage + src='/images/socials/g_maps.png' + alt='Maps - Indoteknik.com' + width={24} + height={24} + /> </a> </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/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' @@ -273,15 +413,25 @@ const Payments = () => ( width={48} height={24} /> - <NextImage src='/images/payments/visa.png' alt='Visa 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' target="_blank" rel="noopener noreferrer"> + <Link + href={href} + className='!text-gray_r-12/80 font-normal line-clamp-1' + target='_blank' + rel='noopener noreferrer' + > {children} </Link> -) +); -export default BasicFooter +export default BasicFooter; |