From ffa261e6adef70a2845878cf93e6e492eb8cee62 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 27 Feb 2023 10:49:45 +0700
Subject: footer

---
 .../components/elements/Footer/BasicFooter.jsx     | 269 +++++++++++++++++++++
 src/core/components/layouts/AppLayout.jsx          |   2 +
 src/core/components/layouts/BasicLayout.jsx        |   2 +
 3 files changed, 273 insertions(+)
 create mode 100644 src/core/components/elements/Footer/BasicFooter.jsx

(limited to 'src/core/components')

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
diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx
index 3e3c8ee5..006c47c7 100644
--- a/src/core/components/layouts/AppLayout.jsx
+++ b/src/core/components/layouts/AppLayout.jsx
@@ -1,4 +1,5 @@
 import AppBar from '../elements/Appbar/Appbar'
+import BasicFooter from '../elements/Footer/BasicFooter'
 import AnimationLayout from './AnimationLayout'
 
 const AppLayout = ({ children, title }) => {
@@ -7,6 +8,7 @@ const AppLayout = ({ children, title }) => {
       <AnimationLayout>
         <AppBar title={title} />
         {children}
+        <BasicFooter />
       </AnimationLayout>
     </>
   )
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 6f176737..1a7185cd 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic'
+import BasicFooter from '../elements/Footer/BasicFooter'
 
 const Navbar = dynamic(() => import('../elements/Navbar/Navbar'))
 const AnimationLayout = dynamic(() => import('./AnimationLayout'))
@@ -8,6 +9,7 @@ const BasicLayout = ({ children }) => {
     <>
       <Navbar />
       <AnimationLayout>{children}</AnimationLayout>
+      <BasicFooter />
     </>
   )
 }
-- 
cgit v1.2.3