From a49f5a3f968dcc8c84759a382a0762abf0bc758b Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 23 Mar 2023 17:01:03 +0700
Subject: cart, checkout, quotation

---
 .../components/elements/Footer/BasicFooter.jsx     | 88 +++++++++++++++-------
 1 file changed, 61 insertions(+), 27 deletions(-)

(limited to 'src/core/components/elements/Footer/BasicFooter.jsx')

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 8819b87b..25f8f552 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -7,36 +7,70 @@ import {
 } from '@heroicons/react/24/outline'
 import Link from '../Link/Link'
 import MobileView from '../../views/MobileView'
+import DesktopView from '../../views/DesktopView'
 
 const BasicFooter = () => {
   return (
-    <MobileView>
-      <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} />
+    <>
+      <MobileView>
+        <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='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div>
+          <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
+            <AboutUs />
+            <CustomerGuide />
+            <Payments />
           </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>
-    </MobileView>
+          <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'>
+            Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang
+          </div>
+        </footer>
+      </MobileView>
+
+      <DesktopView>
+        <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>
+              <InformationCenter />
+            </div>
+            <CustomerGuide />
+            <AboutUs />
+            <div className='w-3/12'>
+              <div className='grid grid-cols-1 gap-y-4'>
+                <OfficeLocation />
+                <WarehouseLocation />
+                <OpenHours />
+                <Payments />
+              </div>
+            </div>
+            <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
+              </div>
+              <div>
+                <SocialMedias />
+              </div>
+            </div>
+          </div>
+        </footer>
+      </DesktopView>
+    </>
   )
 }
 
@@ -154,11 +188,11 @@ const OpenHours = () => (
   <div>
     <div className={headerClassName}>Jam Operasional</div>
     <ul className='flex flex-col gap-y-1'>
-      <li>
+      <li className='block md:flex md:gap-x-2'>
         <div className='text-gray_r-12'>Senin - Jumat:</div>
         <div className='text-gray_r-12/80'>08:30 - 17:00</div>
       </li>
-      <li>
+      <li className='block md:flex md:gap-x-2'>
         <div className='text-gray_r-12'>Sabtu:</div>
         <div className='text-gray_r-12/80'>08:30 - 14:00</div>
       </li>
@@ -168,7 +202,7 @@ const OpenHours = () => (
 
 const SocialMedias = () => (
   <div>
-    <div className={headerClassName}>Temukan Kami</div>
+    <div className={headerClassName + 'block md:hidden'}>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} />
-- 
cgit v1.2.3

