summaryrefslogtreecommitdiff
path: root/src/lib/home/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/home/components')
-rw-r--r--src/lib/home/components/BannerSection.jsx20
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx137
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx174
-rw-r--r--src/lib/home/components/CategoryHomeId.jsx18
-rw-r--r--src/lib/home/components/CategoryPilihan.jsx265
-rw-r--r--src/lib/home/components/PromotionProgram.jsx118
-rw-r--r--src/lib/home/components/ServiceList.jsx34
7 files changed, 452 insertions, 314 deletions
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 2010503d..f83c36fc 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -1,12 +1,12 @@
-import Link from '@/core/components/elements/Link/Link'
-import Image from 'next/image'
+import Link from '@/core/components/elements/Link/Link';
+import Image from 'next/image';
-const { useQuery } = require('react-query')
-const { default: bannerSectionApi } = require('../api/bannerSectionApi')
+const { useQuery } = require('react-query');
+const { default: bannerSectionApi } = require('../api/bannerSectionApi');
const BannerSection = () => {
- const fetchBannerSection = async () => await bannerSectionApi()
- const bannerSection = useQuery('bannerSection', fetchBannerSection)
+ const fetchBannerSection = async () => await bannerSectionApi();
+ const bannerSection = useQuery('bannerSection', fetchBannerSection);
return (
bannerSection.data &&
@@ -17,7 +17,7 @@ const BannerSection = () => {
<Image
width={1024}
height={512}
- quality={100}
+ quality={85}
src={banner.image}
alt={banner.name}
className='h-auto w-full rounded'
@@ -26,7 +26,7 @@ const BannerSection = () => {
))}
</div>
)
- )
-}
+ );
+};
-export default BannerSection
+export default BannerSection;
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index ca104ada..49a9a93f 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -1,46 +1,44 @@
import React, { useEffect, useState, useCallback } from 'react';
-import {fetchCategoryManagementSolr} from '../api/categoryManagementApi'
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
import NextImage from 'next/image';
-import Link from "next/link";
+import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
-import odooApi from '@/core/api/odooApi';
import { Skeleton } from '@chakra-ui/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
-import { Navigation, Pagination, Autoplay } from 'swiper';
+import { Pagination } from 'swiper';
const CategoryDynamic = () => {
-
- const [categoryManagement, setCategoryManagement] = useState([])
- const [isLoading, setIsLoading] = useState(false)
+ const [categoryManagement, setCategoryManagement] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const loadBrand = useCallback(async () => {
- setIsLoading(true)
+ setIsLoading(true);
const items = await fetchCategoryManagementSolr();
-
- setIsLoading(false)
- setCategoryManagement(items)
- }, [])
+
+ setIsLoading(false);
+ setCategoryManagement(items);
+ }, []);
useEffect(() => {
- loadBrand()
- }, [loadBrand])
-
+ loadBrand();
+ }, [loadBrand]);
+
// const [categoryData, setCategoryData] = useState({});
// const [subCategoryData, setSubCategoryData] = useState({});
-
+
// useEffect(() => {
// const fetchCategoryData = async () => {
// if (categoryManagement && categoryManagement.data) {
// const updatedCategoryData = {};
// const updatedSubCategoryData = {};
-
+
// for (const category of categoryManagement.data) {
// const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
-
+
// updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
-
+
// for (const subCategory of countLevel1?.children) {
// updatedSubCategoryData[subCategory.id] = subCategory?.numFound;
// }
@@ -55,34 +53,45 @@ const CategoryDynamic = () => {
// }, [categoryManagement.isLoading]);
const swiperBanner = {
- modules: [Pagination, ],
- classNames:'mySwiper',
+ modules: [Pagination],
+ classNames: 'mySwiper',
slidesPerView: 3,
- spaceBetween:10,
+ spaceBetween: 10,
pagination: {
dynamicBullets: true,
clickable: true,
- }
+ },
};
-
+
return (
<div>
- {categoryManagement && categoryManagement?.map((category) => {
+ {categoryManagement &&
+ categoryManagement?.map((category) => {
// const countLevel1 = categoryData[category.categoryIdI] || 0;
return (
<Skeleton key={category.id} isLoaded={!isLoading}>
<div key={category.id}>
<div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
- <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+ {category.name}
+ </h1>
{/* <Skeleton isLoaded={countLevel1 != 0}>
<p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
</Skeleton> */}
- <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ category?.name,
+ category?.category_id
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
</div>
-
+
{/* Swiper for SubCategories */}
- <Swiper {...swiperBanner}
- >
+ <Swiper {...swiperBanner}>
{category.categories.map((subCategory) => {
// const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
@@ -92,39 +101,69 @@ const CategoryDynamic = () => {
<div className='p-3'>
<div className='flex flex-row border rounded mb-2 justify-start items-center'>
<NextImage
- src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"}
+ src={
+ subCategory.image
+ ? subCategory.image
+ : '/images/noimage.jpeg'
+ }
alt={subCategory.name}
width={90}
height={30}
className='object-fit p-4'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
- <div className='font-semibold text-lg mr-2'>{subCategory?.name}</div>
+ <h2 className='font-semibold text-lg mr-2'>
+ {subCategory?.name}
+ </h2>
{/* <Skeleton isLoaded={countLevel2 != 0}>
<p className={`text-gray_r-10 text-sm`}>
{countLevel2} Produk tersedia
</p>
</Skeleton> */}
- <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.id_level_2)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ subCategory?.name,
+ subCategory?.id_level_2
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
</div>
</div>
<div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
- {subCategory.child_frontend_id_i.map((childCategory) => (
- <div key={childCategory.id} className=''>
- <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.id_level_3)} className="flex flex-row gap-2 border rounded group hover:border-red-500">
- <NextImage
- src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"}
- alt={childCategory.name}
- className='p-2 ml-1'
- width={40}
- height={40}
- />
- <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
- <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div>
- </div>
- </Link>
- </div>
- ))}
+ {subCategory.child_frontend_id_i.map(
+ (childCategory) => (
+ <div key={childCategory.id} className=''>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ childCategory?.name,
+ childCategory?.id_level_3
+ )}
+ className='flex flex-row gap-2 border rounded group hover:border-red-500'
+ >
+ <NextImage
+ src={
+ childCategory.image
+ ? childCategory.image
+ : '/images/noimage.jpeg'
+ }
+ alt={childCategory.name}
+ className='p-2 ml-1'
+ width={40}
+ height={40}
+ />
+ <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+ <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+ {childCategory.name}
+ </h3>
+ </div>
+ </Link>
+ </div>
+ )
+ )}
</div>
</div>
</div>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 1061f3e4..4a8f13cf 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -1,38 +1,41 @@
import React, { useEffect, useState, useCallback } from 'react';
import NextImage from 'next/image';
-import Link from "next/link";
+import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
-import {fetchCategoryManagementSolr} from '../api/categoryManagementApi'
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
const CategoryDynamicMobile = () => {
const [selectedCategory, setSelectedCategory] = useState({});
- const [categoryManagement, setCategoryManagement] = useState([])
- const [isLoading, setIsLoading] = useState(false)
+ const [categoryManagement, setCategoryManagement] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const loadBrand = useCallback(async () => {
- setIsLoading(true)
+ setIsLoading(true);
const items = await fetchCategoryManagementSolr();
-
- setIsLoading(false)
- setCategoryManagement(items)
- }, [])
+
+ setIsLoading(false);
+ setCategoryManagement(items);
+ }, []);
useEffect(() => {
- loadBrand()
- }, [loadBrand])
+ loadBrand();
+ }, [loadBrand]);
useEffect(() => {
const loadPromo = async () => {
try {
if (categoryManagement?.length > 0) {
- const initialSelections = categoryManagement.reduce((acc, category) => {
- if (category.categories.length > 0) {
- acc[category.id] = category.categories[0].id_level_2;
- }
- return acc;
- }, {});
+ const initialSelections = categoryManagement.reduce(
+ (acc, category) => {
+ if (category.categories.length > 0) {
+ acc[category.id] = category.categories[0].id_level_2;
+ }
+ return acc;
+ },
+ {}
+ );
setSelectedCategory(initialSelections);
}
} catch (loadError) {
@@ -44,69 +47,102 @@ const CategoryDynamicMobile = () => {
}, [categoryManagement]);
const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
- setSelectedCategory(prev => ({
+ setSelectedCategory((prev) => ({
...prev,
- [categoryIdI]: idLevel2
+ [categoryIdI]: idLevel2,
}));
};
-
+
return (
<div className='p-4'>
- {categoryManagement && categoryManagement?.map((category) => (
- <div key={category.id}>
- <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
- <div className='font-semibold sm:text-h-sm mr-2'>{category?.name}</div>
- <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link>
- </div>
- <Swiper slidesPerView={2.3} spaceBetween={10}>
- {category.categories.map((index) => (
- <SwiperSlide key={index.id}>
- <div
- onClick={() => handleCategoryLevel2Click(category.id, index?.id_level_2)}
- className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.id_level_2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
- >
- <div className='p-1 flex justify-start items-center'>
- <div className='flex flex-row justify-center items-center'>
- <NextImage
- src={index.image ? index.image : "/images/noimage.jpeg"}
- alt={index.name}
- width={30}
- height={30}
- className=''
- />
- <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
- <div className='font-semibold text-[10px] line-clamp-1'>{index?.name}</div>
- </div>
- </div>
- </div>
- </div>
- </SwiperSlide>
- ))}
- </Swiper>
- <div className='p-3 mt-2 border'>
- <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+ {categoryManagement &&
+ categoryManagement?.map((category) => (
+ <div key={category.id}>
+ <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+ {category.name}
+ </h1>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ category?.name,
+ category?.category_id
+ )}
+ className='!text-red-500 font-semibold text-sm'
+ >
+ Lihat Semua
+ </Link>
+ </div>
+ <Swiper slidesPerView={2.3} spaceBetween={10}>
{category.categories.map((index) => (
- selectedCategory[category.id] === index?.id_level_2 && index?.child_frontend_id_i.map((x) => (
- <div key={x.id}>
- <Link href={createSlug('/shop/category/', x?.name, x?.id_level_3)} className="flex flex-row gap-1 border rounded group hover:border-red-500">
- <NextImage
- src={x.image ? x.image : "/images/noimage.jpeg"}
- alt={x.name}
- width={40}
- height={40}
- className='p-2'
- />
- <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
- <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x?.name}</div>
+ <SwiperSlide key={index.id}>
+ <div
+ onClick={() =>
+ handleCategoryLevel2Click(category.id, index?.id_level_2)
+ }
+ className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${
+ selectedCategory[category.id] === index?.id_level_2
+ ? 'bg-red-50 border-red-500 text-red-500'
+ : 'border-gray-200 text-gray-900'
+ }`}
+ >
+ <div className='p-1 flex justify-start items-center'>
+ <div className='flex flex-row justify-center items-center'>
+ <NextImage
+ src={
+ index.image ? index.image : '/images/noimage.jpeg'
+ }
+ alt={index.name}
+ width={30}
+ height={30}
+ className=''
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
+ <h2 className='font-semibold text-[10px] line-clamp-1'>
+ {index?.name}
+ </h2>
+ </div>
</div>
- </Link>
+ </div>
</div>
- ))
+ </SwiperSlide>
))}
+ </Swiper>
+ <div className='p-3 mt-2 border'>
+ <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+ {category.categories.map(
+ (index) =>
+ selectedCategory[category.id] === index?.id_level_2 &&
+ index?.child_frontend_id_i.map((x) => (
+ <div key={x.id}>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ x?.name,
+ x?.id_level_3
+ )}
+ className='flex flex-row gap-1 border rounded group hover:border-red-500'
+ >
+ <NextImage
+ src={x.image ? x.image : '/images/noimage.jpeg'}
+ alt={x.name}
+ width={40}
+ height={40}
+ className='p-2'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
+ <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
+ {x?.name}
+ </h3>
+ </div>
+ </Link>
+ </div>
+ ))
+ )}
+ </div>
</div>
</div>
- </div>
- ))}
+ ))}
</div>
);
};
diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx
index 71428e27..9f436dac 100644
--- a/src/lib/home/components/CategoryHomeId.jsx
+++ b/src/lib/home/components/CategoryHomeId.jsx
@@ -1,13 +1,15 @@
-import { LazyLoadComponent } from 'react-lazy-load-image-component'
-import useCategoryHomeId from '../hooks/useCategoryHomeId'
-import CategoryHome from './CategoryHome'
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+import useCategoryHomeId from '../hooks/useCategoryHomeId';
+import CategoryHome from './CategoryHome';
const CategoryHomeId = () => {
- const { categoryHomeIds } = useCategoryHomeId()
+ const { categoryHomeIds } = useCategoryHomeId();
return (
<div>
- <div className='font-semibold sm:text-h-lg mb-6 px-4 sm:px-0'>Kategori Pilihan</div>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg mb-6 px-4 sm:px-0'>
+ Kategori Pilihan
+ </h1>
<div className='flex flex-col gap-y-10'>
{categoryHomeIds.data?.map((id) => (
<LazyLoadComponent key={id}>
@@ -16,7 +18,7 @@ const CategoryHomeId = () => {
))}
</div>
</div>
- )
-}
+ );
+};
-export default CategoryHomeId
+export default CategoryHomeId;
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 6dbf771e..2e5ca721 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -1,123 +1,168 @@
-import Image from 'next/image'
-import useCategoryHome from '../hooks/useCategoryHome'
-import Link from '@/core/components/elements/Link/Link'
-import { createSlug } from '@/core/utils/slug'
+import Image from 'next/image';
+import useCategoryHome from '../hooks/useCategoryHome';
+import Link from '@/core/components/elements/Link/Link';
+import { createSlug } from '@/core/utils/slug';
import { useEffect, useState } from 'react';
import { bannerApi } from '../../../api/bannerApi';
-const { useQuery } = require('react-query')
+const { useQuery } = require('react-query');
import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
import useCategoryPilihan from '../hooks/useCategoryPilihan';
-import useDevice from '@/core/hooks/useDevice'
+import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
const CategoryPilihan = ({ id, categories }) => {
- const { isDesktop, isMobile } = useDevice()
- const { categoryPilihan } = useCategoryPilihan();
- const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
- return (
- categoryPilihan.length > 0 && (
- <section>
- {isDesktop && (
- <div>
- <div className='flex flex-row items-center mb-4'>
- <div className='font-semibold sm:text-h-lg mr-2'>LOB Kategori Pilihan</div>
- <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
- </div>
- {heroBanner.data &&
- heroBanner.data?.length > 0 && (
- <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'>
- <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
- <Image
- width={1260}
- height={170}
- quality={100}
- src={heroBanner.data[0].image}
- alt={heroBanner.data[0].name}
- className='h-full object-cover w-full'
- />
- </Link>
- </div>
- )}
- <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
- {categoryPilihan?.data?.map((category) => (
- <div key={category.id} className="KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group">
- <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
- <div className="group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible">
- <div className=' h-36 flex justify-end items-end'>
- <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'} width={120} height={120} alt={category?.name} />
- </div>
- <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
- </div>
- </div>
- <div className='KartuA relative inset-0 flex h-36 w-60 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
- <Link
- href={createSlug('/shop/lob/', category?.industries, category?.id)}
- className='category-mega-box__parent text-white rounded-lg'
- >
- Lihat semua
- </Link>
- </div>
- </div>
- ))}
+ const { isDesktop, isMobile } = useDevice();
+ const { categoryPilihan } = useCategoryPilihan();
+ const heroBanner = useQuery(
+ 'categoryPilihan',
+ bannerApi({ type: 'banner-category-list' })
+ );
+ return (
+ categoryPilihan.length > 0 && (
+ <section>
+ {isDesktop && (
+ <div>
+ <div className='flex flex-row items-center mb-4'>
+ <div className='font-semibold sm:text-h-lg mr-2'>
+ LOB Kategori Pilihan
+ </div>
+ <p className='text-gray_r-10 text-sm'>
+ 200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!
+ </p>
+ </div>
+ {heroBanner.data && heroBanner.data?.length > 0 && (
+ <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'>
+ <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+ <Image
+ width={1260}
+ height={170}
+ quality={85}
+ src={heroBanner.data[0].image}
+ alt={heroBanner.data[0].name}
+ className='h-full object-cover w-full'
+ />
+ </Link>
+ </div>
+ )}
+ <div className='group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 '>
+ {categoryPilihan?.data?.map((category) => (
+ <div
+ key={category.id}
+ className='KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group'
+ >
+ <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
+ <div className='group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible'>
+ <div className=' h-36 flex justify-end items-end'>
+ <Image
+ className='group-hover:scale-105 transition-transform duration-300 '
+ src={
+ category?.image
+ ? category?.image
+ : '/images/noimage.jpeg'
+ }
+ width={120}
+ height={120}
+ alt={category?.name}
+ />
+ </div>
+ <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center'>
+ {category?.industries}
+ </h2>
</div>
+ </div>
+ <div className='KartuA relative inset-0 flex h-36 w-60 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+ <Link
+ href={createSlug(
+ '/shop/lob/',
+ category?.industries,
+ category?.id
+ )}
+ className='category-mega-box__parent text-white rounded-lg'
+ >
+ Lihat semua
+ </Link>
+ </div>
</div>
- )}
- {isMobile && (
- <div className='p-4'>
- <div className='flex flex-row items-center mb-4'>
- <div className='font-semibold sm:text-h-md mr-2'>LOB Kategori Pilihan</div>
- {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
+ ))}
+ </div>
+ </div>
+ )}
+ {isMobile && (
+ <div className='p-4'>
+ <div className='flex flex-row items-center mb-4'>
+ <div className='font-semibold sm:text-h-md mr-2'>
+ LOB Kategori Pilihan
+ </div>
+ {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
+ </div>
+ <div className='flex'>
+ {heroBanner.data && heroBanner.data?.length > 0 && (
+ <div className=' object-fill '>
+ <Link
+ key={heroBanner.data[0].id}
+ href={heroBanner.data[0].url}
+ >
+ <Image
+ width={439}
+ height={150}
+ quality={85}
+ src={heroBanner.data[0].image}
+ alt={heroBanner.data[0].name}
+ className='object-cover'
+ />
+ </Link>
+ </div>
+ )}
+ </div>
+ <Swiper slidesPerView={2.1} spaceBetween={10}>
+ {categoryPilihan?.data?.map((category) => (
+ <SwiperSlide key={category.id}>
+ <div
+ key={category.id}
+ className='KartuInti mt-2 h-48 w-48 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group'
+ >
+ <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
+ <div className='group/edit flex items-center justify-end h-48 w-48 flex-col group-hover/item:visible'>
+ <div className=' h-36 flex justify-end items-end'>
+ <Image
+ className='group-hover:scale-105 transition-transform duration-300 '
+ src={
+ category?.image
+ ? category?.image
+ : '/images/noimage.jpeg'
+ }
+ width={120}
+ height={120}
+ alt={category?.name}
+ />
+ </div>
+ <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center'>
+ {category?.industries}
+ </h2>
+ </div>
</div>
- <div className='flex'>
- {heroBanner.data &&
- heroBanner.data?.length > 0 && (
- <div className=' object-fill '>
- <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
- <Image
- width={439}
- height={150}
- quality={100}
- src={heroBanner.data[0].image}
- alt={heroBanner.data[0].name}
- className='object-cover'
- />
- </Link>
- </div>
- )}
+ <div className='KartuA relative inset-0 flex h-36 w-48 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+ <Link
+ href={createSlug(
+ '/shop/lob/',
+ category?.industries,
+ category?.id
+ )}
+ className='category-mega-box__parent text-white rounded-lg'
+ >
+ Lihat semua
+ </Link>
</div>
- <Swiper slidesPerView={2.1} spaceBetween={10}>
- {categoryPilihan?.data?.map((category) => (
- <SwiperSlide key={category.id}>
- <div key={category.id} className="KartuInti mt-2 h-48 w-48 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group">
- <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
- <div className="group/edit flex items-center justify-end h-48 w-48 flex-col group-hover/item:visible">
- <div className=' h-36 flex justify-end items-end'>
- <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'} width={120} height={120} alt={category?.name} />
- </div>
- <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
- </div>
- </div>
- <div className='KartuA relative inset-0 flex h-36 w-48 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
- <Link
- href={createSlug('/shop/lob/', category?.industries, category?.id)}
- className='category-mega-box__parent text-white rounded-lg'
- >
- Lihat semua
- </Link>
- </div>
- </div>
- </SwiperSlide>
- ))}
-
- </Swiper>
-
- </div>
- )}
- </section>
-
- )
- )
-}
+ </div>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ </div>
+ )}
+ </section>
+ )
+ );
+};
-export default CategoryPilihan
+export default CategoryPilihan;
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index ae8d5d6f..ae06bd4d 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -1,13 +1,16 @@
-import Link from '@/core/components/elements/Link/Link'
-import Image from 'next/image'
+import Link from '@/core/components/elements/Link/Link';
+import Image from 'next/image';
import { bannerApi } from '@/api/bannerApi';
-import useDevice from '@/core/hooks/useDevice'
+import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';
-import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
-const { useQuery } = require('react-query')
+import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+const { useQuery } = require('react-query');
const BannerSection = () => {
- const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
- const { isMobile, isDesktop } = useDevice()
+ const promotionProgram = useQuery(
+ 'promotionProgram',
+ bannerApi({ type: 'banner-promotion' })
+ );
+ const { isMobile, isDesktop } = useDevice();
if (promotionProgram.isLoading) {
return <BannerPromoSkeleton />;
@@ -16,60 +19,65 @@ const BannerSection = () => {
return (
<div className='px-4 sm:px-0'>
<div className='flex justify-between items-center mb-4 '>
- <h1 className='font-semibold text-[14px] sm:text-h-lg'> <Link href='/shop/promo' className='!text-black font-semibold' >Promo Tersedia</Link></h1>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg'>
+ {' '}
+ <Link href='/shop/promo' className='!text-black font-semibold'>
+ Promo Tersedia
+ </Link>
+ </h1>
{isDesktop && (
<Link href='/shop/promo' className='!text-red-500 font-semibold'>
- Lihat Semua
- </Link>
+ Lihat Semua
+ </Link>
)}
{isMobile && (
- <Link href='/shop/promo' className='!text-red-500 font-semibold sm:text-h-sm'>
- Lihat Semua
- </Link>
- )}
- </div>
- {isDesktop && (promotionProgram.data &&
- promotionProgram.data?.length > 0 && (
- <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'>
- {promotionProgram.data?.map((banner) => (
- <Link key={banner.id} href={banner.url}>
- <Image
- width={439}
- height={150}
- quality={100}
- src={banner.image}
- alt={banner.name}
- className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out'
- />
+ <Link
+ href='/shop/promo'
+ className='!text-red-500 font-semibold sm:text-h-sm'
+ >
+ Lihat Semua
</Link>
- ))}
+ )}
</div>
-
- ))}
+ {isDesktop &&
+ promotionProgram.data &&
+ promotionProgram.data?.length > 0 && (
+ <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'>
+ {promotionProgram.data?.map((banner) => (
+ <Link key={banner.id} href={banner.url}>
+ <Image
+ width={439}
+ height={150}
+ quality={85}
+ src={banner.image}
+ alt={banner.name}
+ className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+ />
+ </Link>
+ ))}
+ </div>
+ )}
-{isMobile && (
-
- <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
- {promotionProgram.data?.map((banner) => (
- <SwiperSlide key={banner.id}>
- <Link key={banner.id} href={banner.url}>
- <Image
- width={439}
- height={150}
- quality={100}
- src={banner.image}
- alt={banner.name}
- className='h-auto w-full rounded '
- />
- </Link>
- </SwiperSlide>
- ))}
- </Swiper>
-
- )}
+ {isMobile && (
+ <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
+ {promotionProgram.data?.map((banner) => (
+ <SwiperSlide key={banner.id}>
+ <Link key={banner.id} href={banner.url}>
+ <Image
+ width={439}
+ height={150}
+ quality={85}
+ src={banner.image}
+ alt={banner.name}
+ className='h-auto w-full rounded '
+ />
+ </Link>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ )}
</div>
-
- )
-}
+ );
+};
-export default BannerSection
+export default BannerSection;
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b8799d7d..5b16915d 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from '@/core/components/elements/Link/Link'
+import Image from 'next/image';
+import Link from '@/core/components/elements/Link/Link';
const ServiceList = () => {
return (
@@ -14,14 +14,16 @@ const ServiceList = () => {
<Image
width={24}
height={24}
- quality={100}
+ quality={85}
src='/images/icon_service/ONE-STOP-SOLUTIONS.svg'
alt=''
className='h-20 w-20 rounded'
/>
</div>
<div className=''>
- <h1 className='text-gray-900 font-semibold text-base'>One Stop Solution</h1>
+ <h1 className='text-gray-900 font-semibold text-base'>
+ One Stop Solution
+ </h1>
<p className='text-xs md:text-sm text-gray-500'>
Temukan Solusi Lengkap Anda dalam Satu Tempat.
</p>
@@ -37,14 +39,16 @@ const ServiceList = () => {
<Image
width={24}
height={24}
- quality={100}
+ quality={85}
src='/images/icon_service/WARRANTY.svg'
alt=''
className='h-20 w-20 rounded'
/>
</div>
<div>
- <h1 className='text-gray-900 font-semibold text-base'>Garansi Resmi</h1>
+ <h1 className='text-gray-900 font-semibold text-base'>
+ Garansi Resmi
+ </h1>
<p className='text-xs md:text-sm text-gray-500'>
Garansi Keaslian Barang dan Jaminan Purna Jual.
</p>
@@ -60,14 +64,16 @@ const ServiceList = () => {
<Image
width={24}
height={24}
- quality={100}
+ quality={85}
src='/images/icon_service/DUE-PAYMENT.svg'
alt=''
className='h-20 w-20 rounded'
/>
</div>
<div>
- <h1 className='text-gray-900 font-semibold text-base'>Pembayaran Tempo</h1>
+ <h1 className='text-gray-900 font-semibold text-base'>
+ Pembayaran Tempo
+ </h1>
<p className='text-xs md:text-sm text-gray-500'>
Lebih mudah mengatur pembelian dengan pembayaran tempo.
</p>
@@ -83,14 +89,16 @@ const ServiceList = () => {
<Image
width={24}
height={24}
- quality={100}
+ quality={85}
src='/images/icon_service/TAX.svg'
alt=''
className='h-20 w-20 rounded'
/>
</div>
<div>
- <h1 className='text-gray-900 font-semibold text-base'>Faktur Pajak</h1>
+ <h1 className='text-gray-900 font-semibold text-base'>
+ Faktur Pajak
+ </h1>
<p className='text-xs md:text-sm text-gray-500'>
Dapat Faktur pajak untuk setiap transaksi dengan indoteknik.com
</p>
@@ -99,7 +107,7 @@ const ServiceList = () => {
</div>
</div>
</div>
- )
-}
+ );
+};
-export default ServiceList
+export default ServiceList;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:32:53 +0000