diff options
Diffstat (limited to 'src/core/components/elements/Footer/BasicFooter.jsx')
| -rw-r--r-- | src/core/components/elements/Footer/BasicFooter.jsx | 88 |
1 files changed, 61 insertions, 27 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} /> |