summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/core/components/elements/Image/Image.jsx43
-rw-r--r--src/lib/home/components/ServiceList.jsx105
-rw-r--r--src/lib/product/components/ProductSlider.jsx3
-rw-r--r--src/pages/index.jsx5
4 files changed, 141 insertions, 15 deletions
diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index ba6bf50d..be275e8d 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -1,5 +1,6 @@
-import { LazyLoadImage } from 'react-lazy-load-image-component'
-import 'react-lazy-load-image-component/src/effects/opacity.css'
+import NextImage from 'next/image'
+import { useState } from 'react'
+import classNames from 'classnames'
/**
* The `Image` component is used to display lazy-loaded images.
@@ -9,18 +10,32 @@ import 'react-lazy-load-image-component/src/effects/opacity.css'
* @param {string} props.alt - Alternative text to be displayed if the image is not found.
* @returns {JSX.Element} - Rendered `Image` component.
*/
-const Image = ({ ...props }) => (
- <>
- <LazyLoadImage
- {...props}
- src={props.src || '/images/noimage.jpeg'}
- placeholderSrc='/images/indoteknik-placeholder.png'
- alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
- wrapperClassName='bg-white'
- />
- </>
-)
+const Image = ({ ...props }) => {
+ const [isLoading, setIsLoading] = useState(true)
-Image.defaultProps = LazyLoadImage.defaultProps
+ const imageClassNames = classNames(
+ 'duration-500 ease-in-out',
+ {
+ 'blur-2xl grayscale': isLoading,
+ 'blur-0 grayscale-0': !isLoading
+ },
+ props.className
+ )
+
+ return (
+ <>
+ <NextImage
+ {...props}
+ src={props.src || '/images/noimage.jpeg'}
+ alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
+ key={props.src || '/images/noimage.jpeg'}
+ className={imageClassNames}
+ width={256}
+ height={256}
+ onLoadingComplete={() => setIsLoading(false)}
+ />
+ </>
+ )
+}
export default Image
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
new file mode 100644
index 00000000..b8799d7d
--- /dev/null
+++ b/src/lib/home/components/ServiceList.jsx
@@ -0,0 +1,105 @@
+import Image from 'next/image'
+import Link from '@/core/components/elements/Link/Link'
+
+const ServiceList = () => {
+ return (
+ <div className='px-4 sm:px-0'>
+ <div className='grid md:grid-cols-4 grid-cols-2 justify-between gap-2 items-center'>
+ <div className='w-full'>
+ <Link
+ href='/tentang-kami'
+ className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
+ >
+ <div className=''>
+ <Image
+ width={24}
+ height={24}
+ quality={100}
+ 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>
+ <p className='text-xs md:text-sm text-gray-500'>
+ Temukan Solusi Lengkap Anda dalam Satu Tempat.
+ </p>
+ </div>
+ </Link>
+ </div>
+ <div className='w-full'>
+ <Link
+ href='/tentang-kami'
+ className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
+ >
+ <div className=''>
+ <Image
+ width={24}
+ height={24}
+ quality={100}
+ 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>
+ <p className='text-xs md:text-sm text-gray-500'>
+ Garansi Keaslian Barang dan Jaminan Purna Jual.
+ </p>
+ </div>
+ </Link>
+ </div>
+ <div className='w-full '>
+ <Link
+ href='/tentang-kami'
+ className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
+ >
+ <div className=''>
+ <Image
+ width={24}
+ height={24}
+ quality={100}
+ 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>
+ <p className='text-xs md:text-sm text-gray-500'>
+ Lebih mudah mengatur pembelian dengan pembayaran tempo.
+ </p>
+ </div>
+ </Link>
+ </div>
+ <div className='w-full'>
+ <Link
+ href='/tentang-kami'
+ className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
+ >
+ <div className=''>
+ <Image
+ width={24}
+ height={24}
+ quality={100}
+ 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>
+ <p className='text-xs md:text-sm text-gray-500'>
+ Dapat Faktur pajak untuk setiap transaksi dengan indoteknik.com
+ </p>
+ </div>
+ </Link>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default ServiceList
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index dedbd6ab..2f8101b0 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -10,7 +10,7 @@ import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
const bannerClassName =
- 'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] idt-transition border border-gray_r-6'
+ 'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] border border-gray_r-6'
const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
const bannerRef = useRef('')
@@ -52,6 +52,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
{bannerMode && (
<div ref={bannerRef}>
<Image
+ ref={bannerRef}
src={products.banner.image}
alt={products.banner.name}
style={{ opacity: 1 }}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 47a0a493..64f3ac10 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -31,6 +31,7 @@ const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'),
const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection'))
const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId'))
const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews'))
+const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'))
export default function Home() {
const bannerRef = useRef(null)
@@ -72,6 +73,7 @@ export default function Home() {
</div>
<div className='my-16 flex flex-col gap-y-16'>
+ <ServiceList />
<PreferredBrand />
<FlashSale />
<PromotinProgram />
@@ -88,6 +90,9 @@ export default function Home() {
</DelayRender>
<div className='flex flex-col gap-y-12 my-6'>
<DelayRender renderAfter={400}>
+ <ServiceList />
+ </DelayRender>
+ <DelayRender renderAfter={400}>
<PreferredBrand />
</DelayRender>
<DelayRender renderAfter={600}>
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-04 00:12:51 +0000