Merged in Feature/all-promotion (pull request #202)

Feature/all promotion

Approved-by: trisusilo

2 files changed, 47 insertions, 12 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 9de761a2..7d9e4264 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -27,6 +27,7 @@ import {
   MenuList,
   useDisclosure,
 } from '@chakra-ui/react';
+import style from "./style/NavbarDesktop.module.css";
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
 const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -203,45 +204,65 @@ const NavbarDesktop = () => {
               </div>
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
+            <Link
+                href="/shop/promo"
+                className={`${
+                  router.asPath === '/shop/promo' && 'bg-gray_r-3'
+                }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
+                target="_blank"
+                rel="noreferrer"
+              >
+                <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
+                {/* <div className='w-full h-full flex justify-end items-start'> 
+                  <Image
+                    src='/images/ICON PROMO DISKON.svg'
+                    alt='promo'
+                    width={100}
+                    height={100}
+                    quality={100}
+                    className={`inline-block  z-20`}
+                  />
+                </div> */}
+              </Link>
+
+
               <Link
                 href='/shop/brands'
-                className={`${
+                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`}
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Semua Brand
+               <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p>
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
                 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`}
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Ready Stock
+                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p>
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                Blog Indoteknik
+                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p>
               </Link>
-              <Link
+              {/* <Link
                 href='/video'
-                className={`${
-                  router.asPath === '/video' && '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`}
+                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>
+              </Link> */}
             </div>
 
             <div className='w-3/12 flex gap-x-1 relative'>
diff --git a/src/core/components/elements/Navbar/style/NavbarDesktop.module.css b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css
new file mode 100644
index 00000000..9cddb127
--- /dev/null
+++ b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css
@@ -0,0 +1,14 @@
+/* navbarDesktop.module.css */
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.blink {
+  animation: blink 0.8s infinite;
+}
+