Update socials icon on footer

1 files changed, 215 insertions, 65 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 23bca677..28a3764c 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -1,14 +1,14 @@
-import NextImage from 'next/image'
-import IndoteknikLogo from '@/images/logo.png'
+import NextImage from 'next/image';
+import IndoteknikLogo from '@/images/logo.png';
 import {
   DevicePhoneMobileIcon,
   EnvelopeIcon,
-  PhoneArrowUpRightIcon
-} from '@heroicons/react/24/outline'
-import Link from '../Link/Link'
-import MobileView from '../../views/MobileView'
-import DesktopView from '../../views/DesktopView'
-import whatsappUrl from '@/core/utils/whatsappUrl'
+  PhoneArrowUpRightIcon,
+} from '@heroicons/react/24/outline';
+import Link from '../Link/Link';
+import MobileView from '../../views/MobileView';
+import DesktopView from '../../views/DesktopView';
+import whatsappUrl from '@/core/utils/whatsappUrl';
 
 const BasicFooter = () => {
   return (
@@ -17,9 +17,16 @@ const BasicFooter = () => {
         <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'>
           <div className='w-1/2 flex flex-col gap-y-8 pr-2'>
             <div>
-              <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} />
+              <NextImage
+                src={IndoteknikLogo}
+                alt='Logo Indoteknik'
+                width={90}
+                height={30}
+              />
 
-              <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div>
+              <div className='font-semibold mt-2'>
+                PT. Indoteknik Dotcom Gemilang
+              </div>
             </div>
 
             <OfficeLocation />
@@ -37,7 +44,8 @@ const BasicFooter = () => {
           </div>
 
           <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
+            Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom
+            Gemilang
           </div>
         </footer>
       </MobileView>
@@ -46,8 +54,15 @@ const BasicFooter = () => {
         <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>
+              <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 />
@@ -64,7 +79,8 @@ const BasicFooter = () => {
             <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
+                Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik
+                Dotcom Gemilang
               </div>
               <div>
                 <SocialMedias />
@@ -74,39 +90,51 @@ const BasicFooter = () => {
         </footer>
       </DesktopView>
     </>
-  )
-}
+  );
+};
 
-const headerClassName = 'font-semibold mb-4'
+const headerClassName = 'font-semibold mb-4';
 
 const OfficeLocation = () => (
   <div>
     <div className={headerClassName}>Kantor Pusat</div>
     <div className='leading-6 text-gray_r-12/80'>
-      <a href='https://goo.gl/maps/3DCJxtki8jUV32pR7' target='_blank' rel='noreferrer' className='text-gray_r-12/80'>
-      Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara</a>
+      <a
+        href='https://goo.gl/maps/3DCJxtki8jUV32pR7'
+        target='_blank'
+        rel='noreferrer'
+        className='text-gray_r-12/80'
+      >
+        Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec.
+        Penjaringan, Jakarta Utara
+      </a>
     </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
+      Jl. Bandengan Utara Komp. 85 A dan B, Penjaringan, Kec. Penjaringan,
+      Jakarta Utara
     </div>
   </div>
-)
+);
 
 const AboutUs = () => (
   <div>
     <div className={headerClassName}>Tentang Kami</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink>
+        <InternalItemLink href='/tentang-kami'>
+          Company Profile
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/pelanggan-kami'>Pelanggan Kami</InternalItemLink>
+        <InternalItemLink href='/pelanggan-kami'>
+          Pelanggan Kami
+        </InternalItemLink>
       </li>
       <li>
         <InternalItemLink href='/hubungi-kami'>Hubungi Kami</InternalItemLink>
@@ -115,30 +143,42 @@ const AboutUs = () => (
         <InternalItemLink href='/karir'>Karir</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/syarat-ketentuan'>Syarat & Ketentuan</InternalItemLink>
+        <InternalItemLink href='/syarat-ketentuan'>
+          Syarat & Ketentuan
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/kebijakan-privasi'>Kebijakan Privasi</InternalItemLink>
+        <InternalItemLink href='/kebijakan-privasi'>
+          Kebijakan Privasi
+        </InternalItemLink>
       </li>
     </ul>
   </div>
-)
+);
 
 const CustomerGuide = () => (
   <div>
     <div className={headerClassName}>Bantuan & Panduan</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink>
+        <InternalItemLink href='/metode-pembayaran'>
+          Metode Pembayaran
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/metode-pengiriman'>Metode Pengiriman</InternalItemLink>
+        <InternalItemLink href='/metode-pengiriman'>
+          Metode Pengiriman
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/panduan-belanja'>Panduan Belanja</InternalItemLink>
+        <InternalItemLink href='/panduan-belanja'>
+          Panduan Belanja
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/panduan-quotation'>Panduan Quotation</InternalItemLink>
+        <InternalItemLink href='/panduan-quotation'>
+          Panduan Quotation
+        </InternalItemLink>
       </li>
       <li>
         <InternalItemLink href='/pengembalian-barang-dana'>
@@ -146,40 +186,56 @@ const CustomerGuide = () => (
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/informasi-garansi'>Informasi Garansi</InternalItemLink>
+        <InternalItemLink href='/informasi-garansi'>
+          Informasi Garansi
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/panduan-pick-up-service'>Panduan Pick Up Service</InternalItemLink>
+        <InternalItemLink href='/panduan-pick-up-service'>
+          Panduan Pick Up Service
+        </InternalItemLink>
       </li>
     </ul>
   </div>
-)
+);
 
 const Form = () => (
   <div>
     <div className={headerClassName}>Formulir</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/my/request-for-quotation'>Request for Quotation</InternalItemLink>
+        <InternalItemLink href='/my/request-for-quotation'>
+          Request for Quotation
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/kunjungan-sales'>Kunjungan Sales</InternalItemLink>
+        <InternalItemLink href='/my/kunjungan-sales'>
+          Kunjungan Sales
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/kunjungan-service'>Kunjungan Service</InternalItemLink>
+        <InternalItemLink href='/my/kunjungan-service'>
+          Kunjungan Service
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/pembayaran-tempo'>Pembayaran Tempo</InternalItemLink>
+        <InternalItemLink href='/my/pembayaran-tempo'>
+          Pembayaran Tempo
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/surat-dukungan'>Surat Dukungan</InternalItemLink>
+        <InternalItemLink href='/my/surat-dukungan'>
+          Surat Dukungan
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/daftar-merchant'>Daftar Merchant</InternalItemLink>
+        <InternalItemLink href='/my/daftar-merchant'>
+          Daftar Merchant
+        </InternalItemLink>
       </li>
     </ul>
   </div>
-)
+);
 
 const InformationCenter = () => (
   <div>
@@ -187,11 +243,15 @@ const InformationCenter = () => (
     <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' target='_blank' rel='noreferrer'>(021) 2933-8828 / 29</a>
+        <a href='tel:02129338828' target='_blank' rel='noreferrer'>
+          (021) 2933-8828 / 29
+        </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
         <EnvelopeIcon className='w-[18px] mr-2' />
-        <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'>sales@indoteknik.com</a>
+        <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'>
+          sales@indoteknik.com
+        </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
         <DevicePhoneMobileIcon className='w-[18px] mr-2' />
@@ -201,7 +261,7 @@ const InformationCenter = () => (
       </li>
     </ul>
   </div>
-)
+);
 
 const OpenHours = () => (
   <div>
@@ -217,44 +277,124 @@ const OpenHours = () => (
       </li>
     </ul>
   </div>
-)
+);
 
 const SocialMedias = () => (
   <div>
     <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div>
-    <div className='flex flex-wrap gap-3 mt-2'>
+    <div className='flex flex-wrap gap-3 mt-2 items-center'>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+      >
+        <NextImage
+          src='/images/socials/youtube.webp'
+          alt='Youtube - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.tiktok.com/@indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/tiktok.png'
+          alt='TikTok - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
       <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
-        <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
+        <NextImage
+          src='/images/socials/Whatsapp.png'
+          alt='Whatsapp - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://www.facebook.com/indoteknikcom'>
-        <NextImage src='/images/socials/Facebook.png' alt='Facebook Logo' width={24} height={24} />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.facebook.com/indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/Facebook.png'
+          alt='Facebook - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://www.instagram.com/indoteknikcom/'>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.instagram.com/indoteknikcom/'
+      >
         <NextImage
           src='/images/socials/Instagram.png'
-          alt='Instagram Logo'
+          alt='Instagram - Indoteknik.com'
           width={24}
           height={24}
         />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'>
-        <NextImage src='/images/socials/Linkedin.png' alt='Linkedin Logo' width={24} height={24} />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
+      >
+        <NextImage
+          src='/images/socials/Linkedin.png'
+          alt='Linkedin - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'>
-        <NextImage src='/images/socials/g_maps.png' alt='Linkedin Logo' width={24} height={24} />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
+      >
+        <NextImage
+          src='/images/socials/g_maps.png'
+          alt='Maps - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
     </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/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'
@@ -273,15 +413,25 @@ const Payments = () => (
         width={48}
         height={24}
       />
-      <NextImage src='/images/payments/visa.png' alt='Visa 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' target="_blank" rel="noopener noreferrer">
+  <Link
+    href={href}
+    className='!text-gray_r-12/80 font-normal line-clamp-1'
+    target='_blank'
+    rel='noopener noreferrer'
+  >
     {children}
   </Link>
-)
+);
 
-export default BasicFooter
+export default BasicFooter;