7 files changed, 175 insertions, 0 deletions
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
new file mode 100644
index 00000000..ac43e2bc
--- /dev/null
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -0,0 +1,30 @@
+import ProductSlider from '@/lib/product/components/ProductSlider'
+import useCategoryHome from '../hooks/useCategoryHome'
+import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'
+
+const CategoryHome = ({ id }) => {
+  const { categoryHome } = useCategoryHome({ id })
+
+  return (
+    <div className='p-4 relative bg-yellow_r-2'>
+      {categoryHome.data ? (
+        <ProductSlider
+          products={{
+            products: categoryHome.data?.[0].products,
+            banner: {
+              image: categoryHome.data?.[0].image,
+              name: categoryHome.data?.[0].name,
+              url: `/shop/search?category=${categoryHome.data?.[0].name}`
+            }
+          }}
+          simpleTitle
+          bannerMode
+        />
+      ) : (
+        <PopularProductSkeleton />
+      )}
+    </div>
+  )
+}
+
+export default CategoryHome
diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx
new file mode 100644
index 00000000..c37a6af7
--- /dev/null
+++ b/src/lib/home/components/CategoryHomeId.jsx
@@ -0,0 +1,19 @@
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import useCategoryHomeId from '../hooks/useCategoryHomeId'
+import CategoryHome from './CategoryHome'
+
+const CategoryHomeId = () => {
+  const { categoryHomeIds } = useCategoryHomeId()
+
+  return (
+    <div className='flex flex-col gap-y-6'>
+      {categoryHomeIds.data?.map((id) => (
+        <LazyLoadComponent key={id}>
+          <CategoryHome id={id} />
+        </LazyLoadComponent>
+      ))}
+    </div>
+  )
+}
+
+export default CategoryHomeId
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
new file mode 100644
index 00000000..0ac14bad
--- /dev/null
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -0,0 +1,50 @@
+import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
+import useHeroBanner from '../hooks/useHeroBanner'
+import Image from '@/core/components/elements/Image/Image'
+
+// Swiper
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Pagination, Autoplay } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/autoplay'
+
+const swiperBanner = {
+  pagination: { dynamicBullets: true },
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay]
+}
+
+const HeroBanner = () => {
+  const { heroBanners } = useHeroBanner()
+
+  return (
+    <div className='min-h-[200px]'>
+      {heroBanners.isLoading && <ImageSkeleton />}
+      {!heroBanners.isLoading && (
+        <Swiper
+          slidesPerView={1}
+          pagination={swiperBanner.pagination}
+          modules={swiperBanner.modules}
+          autoplay={swiperBanner.autoplay}
+          className='border-b border-gray_r-6'
+        >
+          {heroBanners.data?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                className='w-full h-auto'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+    </div>
+  )
+}
+
+export default HeroBanner
diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx
new file mode 100644
index 00000000..d23275f7
--- /dev/null
+++ b/src/lib/home/components/PopularProduct.jsx
@@ -0,0 +1,24 @@
+import { Swiper, SwiperSlide } from 'swiper/react'
+import usePopularProduct from '../hooks/usePopularProduct'
+import ProductCard from '@/lib/product/components/ProductCard'
+import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'
+import ProductSlider from '@/lib/product/components/ProductSlider'
+
+const PopularProduct = () => {
+  const { popularProducts } = usePopularProduct()
+
+  return (
+    <div className='px-4'>
+      <div className='font-medium mb-4'>Produk Populer</div>
+      {popularProducts.isLoading && <PopularProductSkeleton />}
+      {!popularProducts.isLoading && (
+        <ProductSlider
+          products={popularProducts.data}
+          simpleTitle
+        />
+      )}
+    </div>
+  )
+}
+
+export default PopularProduct
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
new file mode 100644
index 00000000..3df3cdb7
--- /dev/null
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -0,0 +1,30 @@
+import { Swiper, SwiperSlide } from 'swiper/react'
+import usePreferredBrand from '../hooks/usePreferredBrand'
+import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
+import BrandCard from '@/lib/brand/components/BrandCard'
+
+const PreferredBrand = () => {
+  const { preferredBrands } = usePreferredBrand()
+
+  return (
+    <div className='px-4'>
+      <div className='font-medium mb-4'>Brand Pilihan</div>
+      {preferredBrands.isLoading && <PreferredBrandSkeleton />}
+      {!preferredBrands.isLoading && (
+        <Swiper
+          slidesPerView={3.5}
+          spaceBetween={12}
+          freeMode
+        >
+          {preferredBrands.data?.manufactures.map((brand) => (
+            <SwiperSlide key={brand.id}>
+              <BrandCard brand={brand} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+    </div>
+  )
+}
+
+export default PreferredBrand
diff --git a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx
new file mode 100644
index 00000000..18a1b3d3
--- /dev/null
+++ b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx
@@ -0,0 +1,10 @@
+import ProductCardSkeleton from '@/core/components/elements/Skeleton/ProductCardSkeleton'
+
+const PopularProductSkeleton = () => (
+  <div className='grid grid-cols-2 gap-x-3'>
+    <ProductCardSkeleton />
+    <ProductCardSkeleton />
+  </div>
+)
+
+export default PopularProductSkeleton
diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
new file mode 100644
index 00000000..00589342
--- /dev/null
+++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
@@ -0,0 +1,12 @@
+import BrandSkeleton from '@/core/components/elements/Skeleton/BrandSkeleton'
+
+const PreferredBrandSkeleton = () => (
+  <div className='grid grid-cols-4 gap-x-3'>
+    <BrandSkeleton />
+    <BrandSkeleton />
+    <BrandSkeleton />
+    <BrandSkeleton />
+  </div>
+)
+
+export default PreferredBrandSkeleton