feat: ruben updates

Misfits-Labs · Nov 7, 2023 · 5d6e380 · 5d6e380
1 parent 874a57a
commit 5d6e380
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 23 deletions.
diff --git a/src/common/FloatingOrbs/types.ts b/src/common/FloatingOrbs/types.ts
@@ -8,20 +8,19 @@ export const FloatingOrbBlurContainer = styled.div`
   height: 100%;
   width: 100%;
   position: absolute;
-  border-radius: inherit;
   top: 0;
   left: 0;
-  ${tw`z-[-21] bg-pretu bg-opacity-[0.3]`}
-  ${tw`backdrop-blur-[80px]`}
+  ${tw`bg-pretu bg-opacity-[0.3]`}
+  ${tw` z-[-21] backdrop-blur-[80px]`}
 `
 
 export const FloatingOrbBlurContainerWithoutBackdrop = styled.div`
   content: '';
   height: 100%;
   width: 100%;
   position: absolute;
-  border-radius: inherit;
   top: 0;
   left: 0;
-  ${tw`z-[-21] bg-pretu bg-opacity-[0.3]`}
+  ${tw`z-[-21] bg-pretu bg-opacity-[0.01]`}
+  -webkit-overflow: clip;
 `
diff --git a/src/common/HoveringOrbs/index.tsx b/src/common/HoveringOrbs/index.tsx
@@ -1,5 +1,5 @@
 import { useRef, useLayoutEffect } from 'react';
-import { FloatingOrbContainer, FloatingOrbBlurContainer } from '../FloatingOrbs/types';
+import { FloatingOrbContainer, FloatingOrbBlurContainerWithoutBackdrop } from '../FloatingOrbs/types';
 import { gsap, Linear } from 'gsap';
 import "twin.macro"
 // interface FloatingOrbsProps {} 
@@ -27,8 +27,8 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
   }, [isHovering]);
 
   return !children ? (
-   <FloatingOrbContainer {...props}>
-    <FloatingOrbBlurContainer ></FloatingOrbBlurContainer>
+   <FloatingOrbContainer tw="w-full h-full overflow-clip" {...props}>
+    <FloatingOrbBlurContainerWithoutBackdrop ></FloatingOrbBlurContainerWithoutBackdrop>
     <div tw="relative flex justify-center items-center w-full sm:w-[100vw] sm:h-[100vh]" ref={background}>
       <div className="orb" tw="dark:bg-[#C836E0] 
       pointer-events-none 
@@ -52,16 +52,16 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
     </div>
    </FloatingOrbContainer> 
   ) : <FloatingOrbContainer tw="relative w-full h-full overflow-clip" {...props}>
-      <FloatingOrbBlurContainer tw="rounded-[inherit]"></FloatingOrbBlurContainer>
-      <div tw="absolute left-[-10rem] flex justify-center items-start w-full h-full rounded-[inherit]" ref={background}>
+      <FloatingOrbBlurContainerWithoutBackdrop tw="rounded-[inherit]"></FloatingOrbBlurContainerWithoutBackdrop>
+      <div tw="absolute left-[-10rem] flex justify-center items-start w-full h-full rounded-[inherit] p-[inherit]" ref={background}>
         <div className="orb"
         tw="dark:bg-[#C836E0] 
         pointer-events-none 
         absolute w-[350px] h-[350px]
         blur-[75px]
-        left-[12rem]
+        left-[11rem]
         rounded-[100%]
-        z-[-27]"
+        z-[-25]"
         ></div>
         <div className="orb" tw="
         dark:bg-[#B80D57] 
@@ -80,7 +80,7 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
         absolute w-[350px] h-[350px] rounded-[100%] 
         left-[3rem] z-[-25]"></div>
       </div>
-      {children}
+        {children}
     </FloatingOrbContainer>
    }
 

diff --git a/src/components/LandingPageOwnTheYardSection/index.tsx b/src/components/LandingPageOwnTheYardSection/index.tsx
@@ -23,7 +23,7 @@ const LandingPageOwnTheYardSection = () => {
  return (
   <Section
    direction="col"
-   tw="px-5 w-full md:mt-[7.5rem] gap-y-[54px] overflow-x-hidden"
+   tw="px-5 w-full md:mt-[7.5rem] gap-y-[54px] z-[inherit]"
    hdr={
     <SectionHeaderContainer tw="flex-col justify-center items-center">
      <SectionHeaderTitle>Play Hard, Own the Yard</SectionHeaderTitle>
@@ -33,18 +33,18 @@ const LandingPageOwnTheYardSection = () => {
     </SectionHeaderContainer>
    }
   >
-   <div tw="self-center mb-[1rem] md:mb-[30px] mr-[4rem]">
+   <div tw="self-center mb-[1rem] md:mb-[30px] ">
     <OwnTheYardGraphic />
    </div>
    {/* gradient banner */}
    <HoveringOrbs
     isHovering={isHoveringOnGradientBackground}
-    tw="relative h-[102px] mt-[1rem] w-[75%] self-center z-auto rounded-[25px]"
+    tw="relative mt-[1rem] w-[75%] self-center rounded-[25px]"
     onMouseEnter={() => handleGradientBackgroundHover("enter")}
     onMouseLeave={() => handleGradientBackgroundHover("leave")}
    >
-    <div tw="border border-[2px] border-blanc relative w-full h-full flex flex-row items-center justify-center px-[35px] rounded-[25px]">
-     <div tw="flex flex-col sm:mr-[3rem]">
+    <div tw="border border-[2px] border-blanc relative w-full h-full flex flex-row items-center justify-center rounded-[25px] px-[40px] py-[20px] overflow-clip">
+     <div tw="flex flex-col sm:mr-[3rem] gap-y-[16px] ">
       <LargeText>Powered by Wega Protocol</LargeText>
       <NormalText tw="text-[21px] leading-[19px] text-blanc">
        The leading NFT betting protocol aimed at expanding NFT use cases across different platforms.

diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx
@@ -23,15 +23,15 @@ const Footer = () => {
   return (
     <footer tw="relative z-[0] w-full">
       <div tw="container dark:text-blanc mt-5 flex flex py-[56px] font-primary w-full justify-between mt-[5rem]">
-        <BrandContainer tw="mb-[4px] w-[20%]">
+        <BrandContainer tw="mb-[4px]">
           <div tw="mr-5">
             <Link to="/"><LogoDarkWo /></Link>
           </div>
           <Brand><Link to="/">Wega</Link></Brand>
         </BrandContainer>
         <div tw="flex flex-col items-center w-full shrink">
           <NormalText tw="text-[21px] leading-[19px] text-[#D3D3D3] mb-[32px] w-full text-center">Learn, follow or inspect us.</NormalText>
-          <div tw="flex gap-x-[35px] justify-center mb-[12rem]">
+          <div tw="flex gap-x-[35px] justify-center mb-[56px]">
             <a href="https://wega.gitbook.io/wega-litepaper/" css={hoverStrokeOranjoStyle} target="_blank" tw="w-[44px]" rel="noreferrer">
             <WhitepaperIcon width="100%" height="100%" />
             </a>
@@ -48,9 +48,9 @@ const Footer = () => {
           <Link to="https://wega.gitbook.io/wega-litepaper/" target="_blank">
             <NormalText>Documentation</NormalText>
           </Link>
-          <Link tw="w-[max-content]" to="http://app.wega.fun" target="_blank">
+          {/* <Link tw="w-[max-content]" to="http://app.wega.fun" target="_blank">
             <NormalText >Play Beta</NormalText>
-          </Link>
+          </Link> */}
         </div>
       </div> 
     </footer>

diff --git a/src/containers/NavigationMobile/index.tsx b/src/containers/NavigationMobile/index.tsx
@@ -48,7 +48,7 @@ export const NavigationMobile = () => {
   return (
    <>
     <NavigationBar tw="fixed font-primary z-[755]">
-     <div tw="container dark:text-blanc flex items-center relative z-[inherit]">
+     <div tw="container dark:text-blanc flex items-center relative z-[756]">
        <NavigationLinksContainer tw="box-border flex w-full gap-x-[30px]">
          <BrandContainer tw="mb-[4px] py-[20px]">
            <Brand tw="font-[32px] font-semibold" ><Link to="/">Wega<span className="font-[32px] dark:text-oranjo">.</span></Link></Brand>