2 files changed, 98 insertions, 45 deletions
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} />
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 24366802..95c75473 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -1,6 +1,8 @@
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect } from 'react'
+import MobileView from '../../views/MobileView'
+import DesktopView from '../../views/DesktopView'
 
 const transition = { ease: 'linear', duration: 0.2 }
 
@@ -26,24 +28,41 @@ const BottomPopup = ({ children, active = false, title, close }) => {
               transition={transition}
               onClick={close}
             />
-            <motion.div
-              initial={{ bottom: '-100%' }}
-              animate={{ bottom: 0 }}
-              exit={{ bottom: '-100%' }}
-              transition={transition}
-              className='fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white'
-            >
-              <div className='flex justify-between py-4'>
-                <div className='font-semibold text-h-sm'>{title}</div>
-                <button
-                  type='button'
-                  onClick={close}
-                >
-                  <XMarkIcon className='w-5 stroke-2' />
-                </button>
-              </div>
-              {children}
-            </motion.div>
+            <MobileView>
+              <motion.div
+                initial={{ bottom: '-100%' }}
+                animate={{ bottom: 0 }}
+                exit={{ bottom: '-100%' }}
+                transition={transition}
+                className='fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white'
+              >
+                <div className='flex justify-between py-4'>
+                  <div className='font-semibold text-h-sm'>{title}</div>
+                  <button type='button' onClick={close}>
+                    <XMarkIcon className='w-5 stroke-2' />
+                  </button>
+                </div>
+                {children}
+              </motion.div>
+            </MobileView>
+
+            <DesktopView>
+              <motion.div
+                initial={{ bottom: '35%', opacity: 0 }}
+                animate={{ bottom: '50%', opacity: 1 }}
+                exit={{ bottom: '35%', opacity: 0 }}
+                transition={transition}
+                className='fixed left-1/2 -translate-x-1/2 w-2/5 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white'
+              >
+                <div className='flex justify-between py-4'>
+                  <div className='font-semibold text-h-sm'>{title}</div>
+                  <button type='button' onClick={close}>
+                    <XMarkIcon className='w-5 stroke-2' />
+                  </button>
+                </div>
+                {children}
+              </motion.div>
+            </DesktopView>
           </>
         )}
       </AnimatePresence>