2 files changed, 23 insertions, 86 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 5f5f3aca..ba51022d 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,13 +1,12 @@
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useProductContext } from '@/contexts/ProductContext';
 import odooApi from '@/core/api/odooApi';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import Navbar from '../elements/Navbar/Navbar';
-import styles from './BasicLayout.module.css'; // Import modul CSS
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -20,15 +19,10 @@ const BasicLayout = ({ children }) => {
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
   const [urlPath, setUrlPath] = useState(null);
-  const [highlight, setHighlight] = useState(false);
-  const [buttonPosition, setButtonPosition] = useState(null);
-  const [wobble, setWobble] = useState(false);
 
   const router = useRouter();
-  const buttonRef = useRef(null);
 
   const { product } = useProductContext();
-
   useEffect(() => {
     if (
       router.pathname === '/shop/product/[slug]' ||
@@ -45,32 +39,6 @@ const BasicLayout = ({ children }) => {
     }
   }, [product, router]);
 
-  useEffect(() => {
-    const handleMouseOut = (event) => {
-      const rect = buttonRef.current.getBoundingClientRect();
-      if (event.clientY <= 0) {
-        setButtonPosition(rect)
-        setHighlight(true);
-      } else {
-        setHighlight(false);
-      }
-    };
-
-    window.addEventListener('mouseout', handleMouseOut);
-
-    return () => {
-      window.removeEventListener('mouseout', handleMouseOut);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (highlight) {
-      // Set wobble animation after overlay highlight animation completes
-      const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed
-      return () => clearTimeout(timer);
-    }
-  }, [highlight]);
-
   const recordActivity = async (pathname) => {
     const ONLY_ON_PATH = false;
     const recordedPath = [];
@@ -92,50 +60,32 @@ const BasicLayout = ({ children }) => {
 
   return (
     <>
-    {highlight && buttonPosition && (
-        <div
-          className={styles['overlay-highlight']}
-          style={{
-            '--button-x': `${buttonPosition.x + buttonPosition.width  / 2}px`,
-            '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
-            '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
-          }}
-          onAnimationEnd={() => setHighlight(false)}
-        />
-      )}
       <Navbar />
       <AnimationLayout>
         {children}
         <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
-        <div className='flex flex-row items-center'>
-            <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'>
-              <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}>
-                Whatsapp
-              </span>
-            </a>
-            <a
-              href={whatsappUrl(templateWA, payloadWA, urlPath)}
-              className='elemen-whatsapp p-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
-              rel='noopener noreferrer'
-              target='_blank'
-              ref={buttonRef}
-            >
-              <Image
-                src='/images/socials/WHATSAPP.svg'
-                alt='Whatsapp'
-                className='block sm:hidden'
-                width={36}
-                height={36}
-              />
-              <Image
-                src='/images/socials/WHATSAPP.svg'
-                alt='Whatsapp'
-                className='hidden sm:block'
-                width={44}
-                height={44}
-              />
-            </a>
-          </div>
+          <a
+            href={whatsappUrl(templateWA, payloadWA, urlPath)}
+            className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+            rel='noopener noreferrer'
+            target='_blank'
+          >
+            <Image
+              src='/images/socials/WHATSAPP.svg'
+              alt='Whatsapp'
+              className='block sm:hidden'
+              width={36}
+              height={36}
+            />
+            <Image
+              src='/images/socials/WHATSAPP.svg'
+              alt='Whatsapp'
+              className='hidden sm:block'
+              width={44}
+              height={44}
+            />
+            <span className='text-white font-bold ml-1.5'>Whatsapp</span>
+          </a>
         </div>
       </AnimationLayout>
       <BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
deleted file mode 100644
index 4945c420..00000000
--- a/src/core/components/layouts/BasicLayout.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.overlay-highlight {
-    @apply fixed top-0 left-0 w-full h-full  bg-[#4FB84A]/30 z-[900];
-    animation: closeOverlay 1s forwards;
-  }
-  
-  @keyframes closeOverlay {
-    from {
-        clip-path: circle(100% at 50% 50%);
-    }
-    to {
-      clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
-    }
-  }