feat: fix nav and boxes

babel-plugin-macros.config.js

@@ -0,0 +1,9 @@
+
+/* eslint-disable no-undef */
+import path from 'path';
+module.exports = {
+ twin: {
+   config: path.resolve(__dirname, './', 'tailwind.config.js'), 
+   preset: "emotion"
+ },
+}

src/common/FloatingOrbs/index.tsx

@@ -22,17 +22,19 @@ export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & Re
   });
 
   return !children ? (
-   <FloatingOrbContainer {...props}>
-    <FloatingOrbBlurContainer></FloatingOrbBlurContainer>
+   <FloatingOrbContainer tw="overflow-clip" {...props}>
+    <FloatingOrbBlurContainer />
     <div tw="relative flex justify-center items-center w-full sm:w-[100vw] sm:h-[100vh]" ref={orbContainerRef}>
       <div className="orb" tw="dark:bg-[#C836E0] 
-      pointer-events-none 
+      pointer-events-none
+      blur-[75px] 
       absolute w-[350px] h-[350px] 
       rounded-[100%]
       translate-x-[5rem] translate-y-[5rem] z-[-27]"
       ></div>
       <div className="orb" tw="
       dark:bg-[#B80D57] 
+      blur-[75px]
       pointer-events-none 
       absolute 
       w-[350px] 
@@ -42,6 +44,7 @@ export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & Re
       "></div>
       <div className="orb" tw="dark:bg-oranjo 
       pointer-events-none
+      blur-[75px]
       absolute w-[350px] h-[350px] rounded-[100%] 
       translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div>
     </div>

src/common/FloatingOrbs/types.ts

@@ -5,13 +5,11 @@ export const FloatingOrbContainer = styled.div`
 `
 export const FloatingOrbBlurContainer = styled.div`
   content: '';
-  display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   border-radius: inherit;
   top: 0;
   left: 0;
-  z-index: z-[-21];
-  ${tw`backdrop-blur-[80px]`}
+  ${tw`z-[-21] bg-pretu bg-opacity-[0.3]`}
 `

src/containers/LandingPage/index.tsx

@@ -31,5 +31,4 @@ const LandingPage = () => {
         </>
     )
 }
-
 export default LandingPage

src/containers/Navigation/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-unknown-property */
+
 import { Link } from 'react-router-dom';
 import { LogoDarkWo } from '../../assets/images';
 import { 
@@ -30,8 +31,9 @@ const Navigation = () => {
           </Button>
         </div>
       </div>
-    <div tw="absolute top-0 right-0 w-full h-full opacity-[0.85] bg-pretu z-[750] shadow-wega-nav transition-wega-nav shadow-inner"></div> {/** box-shadow container */}
-    <div tw="absolute top-0 right-0 w-full h-full z-[745] transition-wega-nav backdrop-blur-[20rem] backdrop-opacity-[0.97]"></div>
+    {/* <div tw="absolute top-0 right-0 w-full h-full opacity-[0.85] bg-pretu z-[750] shadow-wega-nav shadow-inner"></div>  */}
+    {/** box-shadow container */}
+    {/* <div tw="absolute top-0 right-0 w-full h-full z-[745] backdrop-blur-[10rem] backdrop-brightness-[0.6] backdrop-opacity-95"></div> */}
     </NavigationBar>
   )
 }

src/containers/Navigation/types.ts

@@ -60,10 +60,33 @@ export const NavigationBar = styled.nav`
       opacity: 0.95;
     }
     &::before {
-      opacity: 0.85;
+      opacity: 0.99;
     }
   }
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    ${tw`bg-opacity-[0.99] bg-pretu z-[750] blur-[1rem] shadow-wega-nav`}
+    opacity: 0;
+    transition: all 500ms ease-out 60ms;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    ${tw`z-[745] blur-[10rem] bg-pretu`}
+    transition: all 500ms ease-out 60ms;
+  }
   &.nav-hide {
     transform: translateY(-100%);
   }

src/containers/NavigationMobile/index.tsx

@@ -47,7 +47,7 @@ export const NavigationMobile = () => {
 
   return (
    <>
-    <NavigationBar tw="fixed font-primary z-[700]">
+    <NavigationBar tw="fixed font-primary z-[755]">
      <div tw="container dark:text-blanc flex items-center relative z-[inherit]">
        <NavigationLinksContainer tw="box-border flex w-full gap-x-[30px]">
          <BrandContainer tw="mb-[4px] py-[20px]">
@@ -57,8 +57,9 @@ export const NavigationMobile = () => {
        <div tw="flex items-end w-[22px]" onClick={toggleNav} ><HamburgerIcon /></div>
      </div>
 
-    <div tw="absolute top-0 right-0 w-full h-full opacity-[0.85] bg-pretu z-[695] shadow-wega-nav transition-wega-nav shadow-inner"></div> {/** box-shadow container */}
-    <div tw="absolute top-0 right-0 w-full h-full z-[690] transition-wega-nav backdrop-blur-[20rem] backdrop-opacity-[0.97]"></div>
+    {/* <div tw="absolute top-0 right-0 w-full h-full opacity-[0.85] bg-pretu z-[695] shadow-wega-nav transition-wega-nav shadow-inner"></div>  */}
+    {/** box-shadow container */}
+    {/* <div tw="absolute top-0 right-0 w-full h-full z-[690] transition-wega-nav backdrop-blur-[20rem] backdrop-opacity-[0.97]"></div> */}
    </NavigationBar>
    <div ref={mobileLinksContainerRef} tw="z-[800] fixed top-0 w-full flex flex-col items-center translate-y-[-25rem]">
      <div tw="relative flex flex-col mx-auto w-[385px] z-[inherit]">

tailwind.config.cjs

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+
 /** @type {import('tailwindcss').Config} */
 // import defaultTheme from 'tailwindcss/defaultTheme'
 
@@ -62,7 +64,7 @@ export default {
         }
       },
       transitionProperty: {
-        'wega-nav': 'transform 500ms ease-out 60ms',
+        'wega-nav': 'translate 500ms ease-out 60ms',
       }
     },
     container: {
@@ -73,5 +75,8 @@ export default {
     }
   },
   darkMode: 'class',
-  plugins: [],
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ],
 }