summaryrefslogtreecommitdiff
path: root/src/core/components/elements
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components/elements')
-rw-r--r--src/core/components/elements/Footer/BasicFooter.jsx127
-rw-r--r--src/core/components/elements/Footer/SimpleFooter.jsx2
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx129
-rw-r--r--src/core/components/elements/Navbar/TopBanner.jsx61
4 files changed, 215 insertions, 104 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 28a3764c..6129143d 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -41,6 +41,8 @@ const BasicFooter = () => {
<Form />
<CustomerGuide />
<Payments />
+ <Shippings />
+ <Secures />
</div>
<div className='w-full mt-8 leading-5 text-caption-2 text-gray_r-12/80'>
@@ -53,7 +55,7 @@ const BasicFooter = () => {
<DesktopView>
<footer className='bg-gray_r-3 py-6'>
<div className='container mx-auto flex flex-wrap justify-between'>
- <div className='w-3/12'>
+ <div className='w-4/12'>
<NextImage
src={IndoteknikLogo}
alt='Logo Indoteknik'
@@ -64,27 +66,40 @@ const BasicFooter = () => {
PT. Indoteknik Dotcom Gemilang
</div>
<InformationCenter />
+ <div className='h-4' />
+ <OfficeLocation />
+ <div className='h-4' />
+ <OpenHours />
</div>
- <CustomerGuide />
- <Form />
- <AboutUs />
+
+ <div className='w-2/12'>
+ <CustomerGuide />
+ <div className='h-6' />
+ <Form />
+ </div>
+
+ <div className='w-2/12'>
+ <AboutUs />
+ </div>
+
<div className='w-3/12'>
- <div className='grid grid-cols-1 gap-y-4'>
- <OfficeLocation />
- {/* <WarehouseLocation /> */}
- <OpenHours />
+ <div className='grid grid-cols-1 gap-y-6'>
<Payments />
+ <Shippings />
+ <Secures />
</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>
+ {/* <div>
<SocialMedias />
- </div>
+ </div> */}
</div>
</div>
</footer>
@@ -256,7 +271,7 @@ const InformationCenter = () => (
<li className='text-gray_r-12/80 flex items-center'>
<DevicePhoneMobileIcon className='w-[18px] mr-2' />
<a href={whatsappUrl()} target='_blank' rel='noreferrer'>
- 0812-8080-622
+ 0817-1718-1922
</a>
</li>
</ul>
@@ -286,7 +301,7 @@ const SocialMedias = () => (
<a
target='_blank'
rel='noreferrer'
- href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+ href='https://www.youtube.com/@indoteknikcom'
>
<NextImage
src='/images/socials/youtube.webp'
@@ -369,57 +384,43 @@ const SocialMedias = () => (
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/mandiri.png'
- alt='Bank Mandiri Logo'
- width={48}
- height={24}
- />
- <NextImage
- src='/images/payments/mastercard.png'
- alt='Mastercard Logo'
- width={48}
- height={24}
- />
- <NextImage
- src='/images/payments/permata.png'
- alt='Bank Permata Logo'
- width={48}
- height={24}
- />
- <NextImage
- src='/images/payments/visa.png'
- alt='Visa Logo'
- width={48}
- height={24}
- />
- </div>
+ <div className={headerClassName}>Metode Pembayaran</div>
+ <NextImage
+ src='/images/footer/payment-method-new.png'
+ alt='Metode Pembayaran - Indoteknik'
+ width={512}
+ height={512}
+ quality={100}
+ className='w-full'
+ />
+ </div>
+);
+
+const Shippings = () => (
+ <div>
+ <div className={headerClassName}>Jasa Pengiriman</div>
+ <NextImage
+ src='/images/footer/shippings.png'
+ alt='Jasa Pengiriman - Indoteknik'
+ width={512}
+ height={512}
+ quality={100}
+ className='w-full'
+ />
+ </div>
+);
+
+const Secures = () => (
+ <div>
+ <div className={headerClassName}>Keamanan Belanja</div>
+ <NextImage
+ src='/images/footer/secures.png'
+ alt='Keamanan Belanja - Indoteknik'
+ width={512}
+ height={512}
+ quality={100}
+ className='w-full'
+ />
</div>
);
diff --git a/src/core/components/elements/Footer/SimpleFooter.jsx b/src/core/components/elements/Footer/SimpleFooter.jsx
index 26f7f786..371b1652 100644
--- a/src/core/components/elements/Footer/SimpleFooter.jsx
+++ b/src/core/components/elements/Footer/SimpleFooter.jsx
@@ -22,7 +22,7 @@ const SimpleFooter = () => (
<li className='text-gray_r-12/80 flex items-center'>
<DevicePhoneMobileIcon className='w-[18px] mr-2' />
<a href={whatsappUrl()} target='_blank' rel='noreferrer'>
- 0812-8080-622
+ 081717181922
</a>
</li>
</ul>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 760e627d..8cb4239c 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -18,13 +18,10 @@ import { useEffect, useState } from 'react';
import DesktopView from '../../views/DesktopView';
import Link from '../Link/Link';
import NavbarUserDropdown from './NavbarUserDropdown';
-import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton';
+import NextImage from 'next/image';
const Search = dynamic(() => import('./Search'), { ssr: false });
-const TopBanner = dynamic(() => import('./TopBanner'), {
- ssr: false,
- loading: () => <TopBannerSkeleton />,
-});
+const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
const NavbarDesktop = () => {
const [isOpenCategory, setIsOpenCategory] = useState(false);
@@ -73,12 +70,17 @@ const NavbarDesktop = () => {
return (
<DesktopView>
<TopBanner />
- <div className='py-3 bg-warning-400' id='desktop-nav-top'>
+ <div className='py-2 bg-warning-400' id='desktop-nav-top'>
<div className='container mx-auto flex justify-between'>
- <Link href='/tentang-kami' className='!text-gray_r-12'>
- Tentang Indoteknik.com
- </Link>
+ <div className='flex items-start gap-5'>
+ <div>
+ <SocialMedias />
+ </div>
+ </div>
<div className='flex gap-x-6'>
+ <Link href='/tentang-kami' className='!text-gray_r-12'>
+ Tentang Indoteknik.com
+ </Link>
<Link href='/my/pembayaran-tempo' className='!text-gray_r-12'>
Pembayaran Tempo
</Link>
@@ -140,7 +142,7 @@ const NavbarDesktop = () => {
/>
<div>
<div className='font-semibold'>Whatsapp</div>
- 0812 8080 622 (Chat)
+ 0817 1718 1922 (Chat)
</div>
</a>
</div>
@@ -178,7 +180,9 @@ const NavbarDesktop = () => {
</Link>
<Link
href='/shop/brands'
- className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+ className={`${
+ router.asPath === '/shop/brands' && 'bg-gray_r-3'
+ } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
target='_blank'
rel='noreferrer'
>
@@ -186,7 +190,10 @@ const NavbarDesktop = () => {
</Link>
<Link
href='/shop/search?orderBy=stock'
- className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+ className={`${
+ router.asPath === '/shop/search?orderBy=stock' &&
+ 'bg-gray_r-3'
+ } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
target='_blank'
rel='noreferrer'
>
@@ -198,7 +205,15 @@ const NavbarDesktop = () => {
target='_blank'
rel='noreferrer noopener'
>
- Blog
+ Blog Indoteknik
+ </Link>
+ <Link
+ href='/video'
+ className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+ target='_blank'
+ rel='noreferrer'
+ >
+ Indoteknik TV
</Link>
</div>
@@ -238,4 +253,92 @@ const NavbarDesktop = () => {
);
};
+const SocialMedias = () => (
+ <div>
+ {/* <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div> */}
+ <div className='flex flex-wrap gap-3 items-start'>
+ <a
+ target='_blank'
+ rel='noreferrer'
+ href='https://www.youtube.com/@indoteknikcom'
+ >
+ <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 - 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 - Indoteknik.com'
+ width={24}
+ height={24}
+ />
+ </a>
+ <a
+ target='_blank'
+ rel='noreferrer'
+ href='https://www.instagram.com/indoteknikcom/'
+ >
+ <NextImage
+ src='/images/socials/Instagram.png'
+ 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 - 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='Maps - Indoteknik.com'
+ width={24}
+ height={24}
+ />
+ </a>
+ </div>
+ </div>
+);
+
export default NavbarDesktop;
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index a757c260..722a7501 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,33 +1,40 @@
-import odooApi from '@/core/api/odooApi'
-import { useQuery } from 'react-query'
-import Image from 'next/image'
-import Link from '../Link/Link'
-import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+
+import odooApi from '@/core/api/odooApi';
+import SmoothRender from '~/components/ui/smooth-render';
+import Link from '../Link/Link';
const TopBanner = () => {
- const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
- const topBanner = useQuery('topBanner', fetchTopBanner, { refetchOnWindowFocus: false })
+ const topBanner = useQuery({
+ queryKey: 'topBanner',
+ queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
+ refetchOnWindowFocus: false,
+ });
- if (topBanner.isLoading) {
- return <TopBannerSkeleton />
- }
+ const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+ const hasData = topBanner.data?.length > 0;
+ const data = topBanner.data?.[0] || null;
return (
- topBanner.isFetched &&
- topBanner.data?.length > 0 && (
- <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
- <Link href={topBanner.data[0]?.url}>
- <Image
- src={topBanner.data[0].image}
- alt={topBanner.data[0].name}
- width={1440}
- height={40}
- className='object-cover object-center h-full mx-auto'
- />
- </Link>
- </div>
- )
- )
-}
+ <SmoothRender
+ isLoaded={hasData}
+ height='36px'
+ duration='700ms'
+ delay='300ms'
+ style={{ backgroundColor }}
+ >
+ <Link href={data?.url}>
+ <Image
+ src={data?.image}
+ alt={data?.name}
+ width={1440}
+ height={40}
+ className='object-cover object-center h-full mx-auto'
+ />
+ </Link>
+ </SmoothRender>
+ );
+};
-export default TopBanner
+export default TopBanner;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:10:11 +0000