From baa7cb664e662cee23cdad92c78d9c14cab2445d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 3 May 2023 15:19:35 +0700
Subject: add whatsapp widget and page not found

---
 src/core/components/layouts/BasicLayout.jsx | 17 +++++++++--------
 src/lib/brand/components/Brand.jsx          | 20 +++++++++++++++-----
 src/lib/home/components/HeroBanner.jsx      |  9 +++++++--
 src/pages/404.jsx                           | 22 ++++++++++++++++++++++
 src/pages/shop/product/[slug].jsx           |  3 +++
 5 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/404.jsx

(limited to 'src')

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 1440fbf0..8f45d947 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -11,22 +11,23 @@ const BasicLayout = ({ children }) => {
       <Navbar />
       <AnimationLayout>
         {children}
-        <div className='fixed bottom-4 right-4 sm:bottom-8 sm:right-8 z-50'>
-          <a href='https://wa.me/628128080622'>
+        <div className='fixed bottom-4 right-4 sm:bottom-10 sm:right-8 z-50'>
+          <a href='https://wa.me/628128080622' className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'>
             <Image
-              src='/images/socials/Whatsapp-2.png'
+              src='/images/socials/WHATSAPP.svg'
               alt='Whatsapp'
               className='block sm:hidden'
-              width={48}
-              height={48}
+              width={36}
+              height={36}
             />
             <Image
-              src='/images/socials/Whatsapp-2.png'
+              src='/images/socials/WHATSAPP.svg'
               alt='Whatsapp'
               className='hidden sm:block'
-              width={60}
-              height={60}
+              width={44}
+              height={44}
             />
+            <span className='text-white font-bold ml-1.5'>Whatsapp</span>
           </a>
         </div>
       </AnimationLayout>
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index d570aa8b..3c411969 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -1,5 +1,5 @@
 import useBrand from '../hooks/useBrand'
-import Image from '@/core/components/elements/Image/Image'
+import Image from 'next/image'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Pagination, Autoplay } from 'swiper'
@@ -33,8 +33,9 @@ const Brand = ({ id }) => {
               <Image
                 src='/images/default-banner-brand.jpg'
                 alt='Brand - Indoteknik'
-                className='w-full'
-                h-auto
+                width={1024}
+                height={512}
+                className='w-full h-auto'
               />
             )}
             {brand.data && (
@@ -51,6 +52,8 @@ const Brand = ({ id }) => {
                       <Image
                         src={banner}
                         alt={`Brand ${brand.data?.name} - Indoteknik`}
+                        width={1024}
+                        height={512}
                         className='w-full h-auto'
                       />
                     </SwiperSlide>
@@ -63,6 +66,8 @@ const Brand = ({ id }) => {
                       src={brand?.data?.logo}
                       alt={brand?.data?.name}
                       className='w-32 p-2 border borde-gray_r-6 rounded'
+                      width={256}
+                      height={128}
                     />
                   )}
                   {!brand?.data?.logo && (
@@ -86,8 +91,9 @@ const Brand = ({ id }) => {
               <Image
                 src='/images/default-banner-brand.jpg'
                 alt='Brand - Indoteknik'
-                className='w-full'
-                h-auto
+                width={1024}
+                height={512}
+                className='w-full h-auto'
               />
             )}
             {brand.data && (
@@ -104,6 +110,8 @@ const Brand = ({ id }) => {
                       <Image
                         src={banner}
                         alt={`Brand ${brand.data?.name} - Indoteknik`}
+                        width={1024}
+                        height={512}
                         className='w-full h-auto'
                       />
                     </SwiperSlide>
@@ -116,6 +124,8 @@ const Brand = ({ id }) => {
                       src={brand?.data?.logo}
                       alt={brand?.data?.name}
                       className='w-32 p-2 border borde-gray_r-6 rounded'
+                      width={1024}
+                      height={512}
                     />
                   )}
                   {!brand?.data?.logo && (
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index e6136e03..50cfc0ff 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -10,6 +10,7 @@ import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
+import Link from '@/core/components/elements/Link/Link'
 
 const HeroBanner = () => {
   const { heroBanners } = useHeroBanner()
@@ -41,7 +42,9 @@ const HeroBanner = () => {
             <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerMobile}>
               {heroBanners.data?.map((banner, index) => (
                 <SwiperSlide key={index}>
-                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  <Link href={banner.url || ''} className='w-full h-auto'>
+                    <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  </Link>
                 </SwiperSlide>
               ))}
             </Swiper>
@@ -50,7 +53,9 @@ const HeroBanner = () => {
             <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerDesktop}>
               {heroBanners.data?.map((banner, index) => (
                 <SwiperSlide key={index}>
-                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  <Link href={banner.url || ''} className='w-full h-auto'>
+                    <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                  </Link>
                 </SwiperSlide>
               ))}
             </Swiper>
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
new file mode 100644
index 00000000..f73e6383
--- /dev/null
+++ b/src/pages/404.jsx
@@ -0,0 +1,22 @@
+import Seo from '@/core/components/Seo'
+import Link from '@/core/components/elements/Link/Link'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import Image from 'next/image'
+
+export default function PageNotFound() {
+  return (
+    <BasicLayout>
+      <Seo title='Halaman tidak ditemukan - Indoteknik.com' />
+      <div className='container mx-auto'>
+        <Image
+          src='/images/page-not-found.svg'
+          alt='Page not found - Indoteknik'
+          className='w-full'
+          width={1024}
+          height={512}
+        />
+        <Link href='/' className='btn-yellow text-black mx-auto mt-4'>Kembali ke halaman utama</Link>
+      </div>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index ed6c27d5..cdba90c0 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -2,6 +2,7 @@ import Seo from '@/core/components/Seo'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 import { getIdFromSlug } from '@/core/utils/slug'
 import productApi from '@/lib/product/api/productApi'
+import PageNotFound from '@/pages/404'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 
@@ -32,6 +33,8 @@ export async function getServerSideProps(context) {
 export default function ProductDetail({ product }) {
   const router = useRouter()
 
+  if (!product) return <PageNotFound />
+
   return (
     <BasicLayout>
       <Seo
-- 
cgit v1.2.3