Merged in master (pull request #8)

Master

4 files changed, 35 insertions, 20 deletions

diff --git a/src/core/components/elements/DelayRender/DelayRender.jsx b/src/core/components/elements/DelayRender/DelayRender.jsx
new file mode 100644
index 00000000..2d412be7
--- /dev/null
+++ b/src/core/components/elements/DelayRender/DelayRender.jsx
@@ -0,0 +1,19 @@
+const { useState, useEffect } = require('react')
+
+const DelayRender = ({ renderAfter = 200, children }) => {
+  const [renderComponent, setRenderComponent] = useState(false)
+
+  useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      setRenderComponent(true)
+    }, renderAfter)
+
+    return () => {
+      clearTimeout(renderTimeout)
+    }
+  }, [renderAfter])
+
+  return renderComponent && children
+}
+
+export default DelayRender
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 75e9926d..9f68c2f7 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -15,7 +15,7 @@ const BasicFooter = () => {
     <>
       <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 className='w-1/2 flex flex-col gap-y-8 pr-2'>
             <div>
               <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} />
 
@@ -30,13 +30,13 @@ const BasicFooter = () => {
             <SocialMedias />
           </div>
 
-          <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
+          <div className='w-1/2 flex flex-col gap-y-8 pl-2'>
             <Form />
             <CustomerGuide />
             <Payments />
           </div>
 
-          <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'>
+          <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
           </div>
         </footer>
@@ -77,7 +77,7 @@ const BasicFooter = () => {
   )
 }
 
-const headerClassName = 'font-semibold mb-2'
+const headerClassName = 'font-semibold mb-4'
 
 const OfficeLocation = () => (
   <div>
@@ -99,8 +99,8 @@ const WarehouseLocation = () => (
 
 const AboutUs = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Tentang Kami</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Tentang Kami</div>
+    <ul className='flex flex-col gap-y-3'>
       <li>
         <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink>
       </li>
@@ -125,8 +125,8 @@ const AboutUs = () => (
 
 const CustomerGuide = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Bantuan & Panduan</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Bantuan & Panduan</div>
+    <ul className='flex flex-col gap-y-3'>
       <li>
         <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink>
       </li>
@@ -156,8 +156,8 @@ const CustomerGuide = () => (
 
 const Form = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Formulir</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Formulir</div>
+    <ul className='flex flex-col gap-y-3'>
       <li>
         <InternalItemLink href='/my/request-for-quotation'>Request for Quotation</InternalItemLink>
       </li>
@@ -182,8 +182,8 @@ const Form = () => (
 
 const InformationCenter = () => (
   <div>
-    <div className={`${headerClassName} mb-3`}>Layanan Informasi</div>
-    <ul className='flex flex-col gap-y-2'>
+    <div className={headerClassName}>Layanan Informasi</div>
+    <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'>(021) 2933-8828 / 29</a>
@@ -205,7 +205,7 @@ const InformationCenter = () => (
 const OpenHours = () => (
   <div>
     <div className={headerClassName}>Jam Operasional</div>
-    <ul className='flex flex-col gap-y-1'>
+    <ul className='flex flex-col gap-y-3'>
       <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>
@@ -221,7 +221,7 @@ const OpenHours = () => (
 const SocialMedias = () => (
   <div>
     <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div>
-    <div className='flex flex-wrap gap-2 mt-2'>
+    <div className='flex flex-wrap gap-3 mt-2'>
       <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
         <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
       </a>
diff --git a/src/core/components/elements/Spinner/LogoSpinner.jsx b/src/core/components/elements/Spinner/LogoSpinner.jsx
index 73b84e84..94da5f1d 100644
--- a/src/core/components/elements/Spinner/LogoSpinner.jsx
+++ b/src/core/components/elements/Spinner/LogoSpinner.jsx
@@ -1,9 +1,8 @@
 import Image from 'next/image'
-import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png'
 
 const LogoSpinner = ({ ...props }) => (
   <Image
-    src={IndoteknikLogo}
+    src='/images/logo-indoteknik-gear.png'
     alt='Indoteknik Logo'
     width={64}
     height={64}
diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx
index 7acf21dc..eeaa8751 100644
--- a/src/core/components/layouts/AnimationLayout.jsx
+++ b/src/core/components/layouts/AnimationLayout.jsx
@@ -1,9 +1,6 @@
-import useDevice from '@/core/hooks/useDevice'
 import { motion } from 'framer-motion'
 
 const AnimationLayout = ({ children, ...props }) => {
-  const { isMobile } = useDevice()
-
   const initialConfig = {
     opacity: 0,
     x: 0,
@@ -19,7 +16,7 @@ const AnimationLayout = ({ children, ...props }) => {
 
   const exitConfig = {
     opacity: 0,
-    x: isMobile ? 30 : 0,
+    x: 0,
     y: 0,
     transition: { duration: 0.2, ease: 'easeInOut' }
   }