feat: mobile complete

Misfits-Labs · Nov 6, 2023 · 1bfffb8 · 1bfffb8
1 parent 1b449da
commit 1bfffb8
Show file tree

Hide file tree

Showing 26 changed files with 479 additions and 606 deletions.
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
     </script>
   </head>
   <body>
-    <div id="root" style="position: relative; z-index: -10; overflow-y: hidden"></div>
+    <div id="root" style="position: relative; z-index: -10; overflow: hidden"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/assets/images/OwnTheYardGraphicMobile.tsx b/src/assets/images/OwnTheYardGraphicMobile.tsx
diff --git a/src/common/FloatingOrbs/index.tsx b/src/common/FloatingOrbs/index.tsx
@@ -24,9 +24,8 @@ export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & Re
   return !children ? (
    <FloatingOrbContainer {...props}>
     <FloatingOrbBlurContainer></FloatingOrbBlurContainer>
-    <div tw="relative flex justify-center items-center w-[100vw] h-[100vh]" ref={orbContainerRef}>
-      <div className="orb"
-      tw="dark:bg-[#C836E0] 
+    <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 
       absolute w-[350px] h-[350px] 
       rounded-[100%]
@@ -47,9 +46,9 @@ export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & Re
       translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div>
     </div>
    </FloatingOrbContainer> 
-  ) : <FloatingOrbContainer tw="relative mt-[unset] w-[max-content] h-[max-content]" {...props}>
-      <div tw="absolute flex justify-center items-center w-full h-full" ref={orbContainerRef}>
-        <FloatingOrbBlurContainer></FloatingOrbBlurContainer>
+  ) : <FloatingOrbContainer tw="relative w-full h-full" {...props}>
+      <FloatingOrbBlurContainer tw="rounded-[inherit]"></FloatingOrbBlurContainer>
+      <div tw="absolute flex justify-center items-center w-full h-full overflow-clip rounded-[inherit]" ref={orbContainerRef}>
         <div className="orb"
         tw="dark:bg-[#C836E0] 
         pointer-events-none 

diff --git a/src/common/FloatingOrbs/types.ts b/src/common/FloatingOrbs/types.ts
@@ -1,14 +1,15 @@
 import tw, {styled} from 'twin.macro';
 
 export const FloatingOrbContainer = styled.div`
- ${tw`mt-[-5rem] absolute top-0 right-0 w-full h-full z-[-51] flex justify-center items-center`}
+ ${tw`sm:mt-[-5rem] absolute top-0 right-0 w-full h-full z-[-51] flex justify-center items-center`}
 `
 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];

diff --git a/src/common/HoveringOrbs/index.tsx b/src/common/HoveringOrbs/index.tsx
@@ -0,0 +1,84 @@
+import { useRef, useLayoutEffect } from 'react';
+import { FloatingOrbContainer, FloatingOrbBlurContainer } from '../FloatingOrbs/types';
+import { gsap, Linear } from 'gsap';
+import "twin.macro"
+// interface FloatingOrbsProps {} 
+interface HoveringOrbsProps extends React.AllHTMLAttributes<HTMLDivElement>, React.Attributes {
+ isHovering: number;
+}
+const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...props}: HoveringOrbsProps) => {
+  // const orbContainerRef = useRef<any>(null);
+  const background = useRef<any>();
+  useLayoutEffect(()=> {
+    const banner = background.current.querySelectorAll('.orb');
+    const start = 0;
+    const end = 1000;
+    if(isHovering) {
+      gsap.to([...banner], {  duration: 0.5, x: end - 200, ease: Linear.easeInOut});
+    } else { 
+      gsap.to([...banner], {  duration: 0.5, x: start, ease: Linear.easeInOut });
+    }
+    const context = gsap.context(() => {
+     gsap.to(banner[0], { y: "-2rem", scale: 0.95, duration: 2, stagger: 0.2, yoyo: true, repeat: -1, ease: Linear.easeInOut })
+     gsap.to(banner[1], { y: "2rem", scale: 1.2, duration: 2, stagger: 0.2, yoyo: true, repeat: -1, ease: Linear.easeInOut })
+     gsap.to(banner[2], { y: "-2rem", scale: 0.7, duration: 2, stagger: 0.2, yoyo: true, repeat: -1, ease: Linear.easeInOut })
+    }, background.current)
+    return () => context.revert(); 
+  }, [isHovering]);
+
+  return !children ? (
+   <FloatingOrbContainer {...props}>
+    <FloatingOrbBlurContainer ></FloatingOrbBlurContainer>
+    <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 
+      absolute w-[350px] h-[350px] 
+      rounded-[100%]
+      translate-x-[5rem] translate-y-[5rem] z-[-27]"
+      ></div>
+      <div className="orb" tw="
+      dark:bg-[#B80D57] 
+      pointer-events-none 
+      absolute 
+      w-[350px] 
+      h-[350px] 
+      rounded-[100%]
+      translate-x-[-15rem] translate-y-[5rem] z-[-26]
+      "></div>
+      <div className="orb" tw="dark:bg-oranjo 
+      pointer-events-none
+      absolute w-[350px] h-[350px] rounded-[100%] 
+      translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div>
+    </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}>
+        <div className="orb"
+        tw="dark:bg-[#C836E0] 
+        pointer-events-none 
+        absolute w-[350px] h-[350px]
+        left-[12rem]
+        rounded-[100%]
+        z-[-27]"
+        ></div>
+        <div className="orb" tw="
+        dark:bg-[#B80D57] 
+        pointer-events-none 
+        absolute 
+        w-[350px] 
+        h-[350px] 
+        rounded-[100%]
+        left-[9rem] z-[-26]
+        "></div>
+        <div className="orb" tw="
+        dark:bg-oranjo 
+        pointer-events-none 
+        absolute w-[350px] h-[350px] rounded-[100%] 
+        left-[3rem] z-[-25]"></div>
+      </div>
+      {children}
+    </FloatingOrbContainer>
+   }
+
+export default HoveringOrbs;
diff --git a/src/common/Section/types.tsx b/src/common/Section/types.tsx
@@ -22,11 +22,9 @@ export const SectionHeader = styled.span`
   font-family: League Spartan;
 `
 export const SectionHeaderSubtitle = styled.span`
-  font-family: League Spartan;
-  font-size: 21px;
+  ${tw`font-primary text-start sm:text-center text-[21px] leading-[19px]`}
   font-style: normal;
   font-weight: 400;
-  line-height: 19px; /* 90.476% */ 
 `
 
 export const SectionHeaderTitleLarge = styled.span`
@@ -39,16 +37,10 @@ export const SectionHeaderTitleLarge = styled.span`
   justify-content: center;
 `
 export const SectionHeaderContainer = styled.div`
-  margin-bottom: 48px;
-  height: calc(var(--font-size) * 1.5);
-  display: flex;
+  ${tw`font-normal w-full flex flex-col items-start sm:items-center justify-center h-[max-content] gap-y-[16px] sm:gap-y-[24px]`}
 `
 export const SectionHeaderTitle = styled.span`
-  --font-size: 51px;
+  ${tw`text-[38px] sm:text-[51px] leading-[35px] sm:leading-[47px] text-left sm:text-center`}
   font-style: normal;
   font-weight: 600;
-  line-height: 47px
-  text-align: center;
-  font-size: var(--font-size);
-  line-height: calc(var(--font-size) * 1.5);
   justify-content: center;`
diff --git a/src/common/typography/types.ts b/src/common/typography/types.ts
@@ -1,19 +1,14 @@
-import { styled } from 'twin.macro'; 
+import tw, { styled } from 'twin.macro'; 
 
 export const NormalText = styled.span`
- font-size: 16px;
+ ${tw`font-primary font-normal text-[16px] sm:text-[21px] leading-[15px] sm:leading-[19px]`}
  font-style: normal;
- font-weight: 400;
- line-height: 15px;
 `
 
 export const LargeText = styled.span`
- font-family: League Spartan;
- font-size: 28px;
+ ${tw`font-primary font-semibold sm:font-medium text-[21px] sm:text-[32px] leading-[19px] sm:leading-[32px]`}
  font-style: normal;
- font-weight: 500;
- line-height: 32px;
-`
+ `
 export const ExtraLargeText = styled.span`
  font-family: League Spartan;
  font-size: 38px;

diff --git a/src/components/LandingHeroPlayerCard/index.tsx b/src/components/LandingHeroPlayerCard/index.tsx
@@ -37,8 +37,8 @@ export const LeftPlayerCard = () => {
 }
 export const LeftPlayerCardMobile = () => {
   return  (
-    <PlayerCardContainer tw="flex flex-row justify-end min-w-[261.36px] min-h-[unset] gap-x-[10px] p-[8px] rounded-[8px] border border-[1px] border-shinishi">
-      <div tw="flex h-full flex-col gap-y-[10px] items-end justify-center">
+    <PlayerCardContainer tw="flex flex-row justify-end  min-h-[unset] gap-x-[10px] p-[8px] rounded-[8px] border border-[1px] border-shinishi">
+      <div tw="flex h-full flex-col gap-y-[10px] items-end justify-center w-[261.36px]">
         <NormalText tw="font-primary">#392</NormalText>
         <SmallText tw="font-primary">BAYC</SmallText>
         <NormalText tw="font-primary">38.1 ETH</NormalText>
@@ -50,9 +50,9 @@ export const LeftPlayerCardMobile = () => {
 }
 export const RightPlayerCardMobile = () => {
   return  (
-    <PlayerCardContainer tw="flex flex-row justify-start min-w-[261.36px] min-h-[unset] gap-x-[10px] p-[8px] rounded-[8px] border border-[1px] border-shinishi">
+    <PlayerCardContainer tw="flex flex-row justify-start min-h-[unset] gap-x-[10px] p-[8px] rounded-[8px] border border-[1px] border-shinishi">
       <img src={rightWidgetImage} alt="left-wager"/>
-      <div tw="flex flex-col h-full gap-y-[10px] items-start justify-center">
+      <div tw="flex flex-col h-full gap-y-[10px] items-start justify-center w-[261.36px]">
         <NormalText tw="font-primary">#392</NormalText>
         <SmallText tw="font-primary">Noun</SmallText>
         <NormalText tw="font-primary">38.0 ETH</NormalText>

diff --git a/src/components/LandingPageHero/index.tsx b/src/components/LandingPageHero/index.tsx
@@ -4,17 +4,16 @@ import { Dice } from "../Dice";
 import { useRoll, useAutoRoll } from "../Dice/animations";
 import { LeftPlayerCard, RightPlayerCard } from "../LandingHeroPlayerCard";
 import Button from "../Button";
-import { SectionHeader } from '../../common/Section/types';
 import 'twin.macro';
 
 const LandingPageHero = () => {
  const diceRef = useRef<any>(null);
  const triggerDice = useRoll(diceRef);
  useAutoRoll(diceRef);
 
- return ( <>
-    <PlayGameContainer tw="flex flex-col gap-[20.66px]">
-    <div tw="flex gap-x-[20.657px] items-center justify-center"> 
+ return ( 
+    <PlayGameContainer tw="flex flex-col gap-[21px]">
+    <div tw="flex gap-x-[21px] items-center justify-center"> 
       <LeftPlayerCard />
       <Dice diceRef={diceRef} />
       <RightPlayerCard />
@@ -23,6 +22,6 @@ const LandingPageHero = () => {
         Roll
       </Button>
    </PlayGameContainer>
-   <SectionHeader tw="w-full text-center pt-[32px]">Play multiple P2P betting games with your NFTs.</SectionHeader> </> ) 
+    ) 
 }
 export default  LandingPageHero;
diff --git a/src/components/LandingPageHeroMobile/index.tsx b/src/components/LandingPageHeroMobile/index.tsx
@@ -14,7 +14,7 @@ const LandingPageHeroMobile = () => {
  return (
   <div tw="relative flex flex-col items-center mt-[85px]" >
    <VersusIcon tw="relative top-0 mt-[-3rem] mx-auto mb-[-1.5rem] z-[20]" />
-   <div tw="relative flex gap-x-[8.5px] self-center">
+   <div tw="relative flex gap-x-[8.5px] self-center ">
     <LeftPlayerCardMobile />
     <RightPlayerCardMobile />
    </div>

diff --git a/src/components/LandingPageHeroSection/index.tsx b/src/components/LandingPageHeroSection/index.tsx
@@ -1,5 +1,5 @@
 import Section from "../../common/Section"
-import { SectionHeaderContainer, SectionHeaderTitleLarge  } from "../../common/Section/types"
+import { SectionHeaderContainer, SectionHeaderTitleLarge, SectionHeader  } from "../../common/Section/types"
 import { FloatingOrbs } from '../../common/FloatingOrbs';
 import LandingPageHero from '../LandingPageHero';
 import 'twin.macro';
@@ -12,10 +12,11 @@ const LandingPageHeroSection = () => {
         direction='col'
         tw="relative"
         hdr={
-          <SectionHeaderContainer tw="flex-col items-center ">
+          <SectionHeaderContainer tw="flex-col items-center mb-[48px]">
           <SectionHeaderTitleLarge tw="max-w-[803px] font-primary leading-[68px]">
             {"Your NFTs’ Favourite Playground"}<span tw="text-oranjo">.</span>
             </SectionHeaderTitleLarge>
+            <SectionHeader tw="w-full break-words text-center text-[#D9D9D9]">Play multiple P2P betting games with your NFTs.</SectionHeader>
           </SectionHeaderContainer>
         }>
           <LandingPageHero />

diff --git a/src/components/LandingPageHeroSectionMobile/index.tsx b/src/components/LandingPageHeroSectionMobile/index.tsx
@@ -7,7 +7,7 @@ import LandingPageHeroMobile from "../LandingPageHeroMobile";
 const LandingPageHeroSectionMobile = () => {
   return (
     <>
-      <FloatingOrbs tw="translate-y-[-32%] flex justify-center items-center" />
+      <FloatingOrbs tw="translate-y-[-40%] flex justify-center items-center overflow-x-hidden"/>
         <Section
         direction='col'
         tw="relative w-full"