footer

1 files changed, 269 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..2831d4d6
--- /dev/null
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -0,0 +1,269 @@
+import NextImage from 'next/image'
+import IndoteknikLogo from '@/images/logo.png'
+import {
+  DevicePhoneMobileIcon,
+  EnvelopeIcon,
+  MapPinIcon,
+  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'>
+        <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
+        <a href='tel:02129338828'>(021) 2933-8828 / 29</a>
+      </li>
+      <li className='text-gray_r-12/80 flex'>
+        <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'>
+        <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