feat: landing page for big screens done

Misfits-Labs · Nov 1, 2023 · f3edb93 · f3edb93
1 parent b790047
commit f3edb93
Show file tree

Hide file tree

Showing 23 changed files with 126 additions and 599 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,3 +1,3 @@
-//npm.greensock.com/:_authToken=fe08e2d9-98fc-477f-85ee-d690f1d3d9b5
-@gsap:registry=https://npm.greensock.com
-# //registry.npmjs.org/:_authToken=${NPM_TOKEN}
+always-auth=true
+//npm.greensock.com/:_authToken=5b8296c2-d882-401b-be86-87707a83f99d
+@gsap:registry=https://npm.greensock.com
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "axios": "^1.4.0",
     "ethers": "^5.7.2",
     "firebase": "^10.3.1",
+    "gsap": "npm:@gsap/shockingly@^3.12.2",
     "joi": "^17.9.2",
     "react": "^18.2.0",
     "react-blockies": "^1.4.1",

diff --git a/src/assets/images/OwnTheYardGraphic.tsx b/src/assets/images/OwnTheYardGraphic.tsx
@@ -1,27 +1,32 @@
 
-import { SVGProps, useLayoutEffect, useRef, forwardRef } from "react";
+import { SVGProps, useLayoutEffect, useRef} from "react";
 import { gsap, Power1 } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
-
 gsap.registerPlugin(ScrollTrigger);
 gsap.registerPlugin(DrawSVGPlugin);
 
-const SvgComponent = forwardRef((props: SVGProps<SVGSVGElement>, ref: any)=> {
+const SvgComponent = (props: SVGProps<SVGSVGElement>)=> {
   const svgRef = useRef<any>(null);
-  // console.log(ref)
   useLayoutEffect(() => {
     const context = gsap.context(() => {
       const tl = gsap.timeline();
       const duration = 0.75;
-
-      tl.scrollTrigger({ scrollTrigger: { trigger: ref.current }});
+      const playHardPaths = document.querySelectorAll('#play-hard > path');
+      const playHardTextPaths = document.querySelectorAll('#play-hard-text > path');
+      const ownHardTextPaths = document.querySelectorAll('#own-hard-text > path');
+      const ownHardPaths = document.querySelectorAll('#own-hard > path');
+      tl.repeatDelay(1.5);
       tl.to('#pyramid', { ease: Power1.easeInOut, opacity: 1, duration });
       tl.to('#two', { ease: Power1.easeInOut, opacity: 1, duration }, ">");
       tl.to('#three', { ease: Power1.easeInOut, opacity: 1, duration }, ">");
-      tl.to('#play-hard', { ease: Power1.easeInOut, opacity: 1, duration, drawSVG: "0%" }, ">");
-      tl.to('#dice', { opacity: 1, duration, ease: Power1.easeInOut }, ">" );
-      tl.to('#own-hard', { opacity: 1, duration, ease: Power1.easeInOut, drawSVG: "0%" }, '>')
+      tl.to('#play-hard', { opacity: 1, ease: Power1.easeInOut, duration, drawSVG: "0%" }, ">");
+      tl.from([...playHardPaths], { ease: Power1.easeInOut, duration, drawSVG: "0%" }, "<");
+      tl.from([...playHardTextPaths], { ease: Power1.easeInOut, duration, drawSVG: "0%" }, "<");
+      tl.to('#dice', { opacity: 1, duration, ease: Power1.easeInOut }, "<" );
+      tl.to('#own-hard', { opacity: 1, duration, ease: Power1.easeInOut }, '>');
+      tl.from([...ownHardPaths], { duration, ease: Power1.easeInOut, drawSVG: "0%" }, '<');
+      tl.from([...ownHardTextPaths], { ease: Power1.easeInOut, duration, drawSVG: "0%" }, ">");
       tl.repeat(-1);
     }, svgRef.current);
     return () => context.revert(); 
@@ -97,7 +102,7 @@ const SvgComponent = forwardRef((props: SVGProps<SVGSVGElement>, ref: any)=> {
           />
         </g>
         <g id="play-hard" style={{ opacity: 0 }}>
-          <g id="Play hard">
+          <g id="play-hard-text">
             <path
               d="M179.113 129.365L181.925 126.623C182.546 126.017 183.205 125.575 183.901 125.297C184.598 125.008 185.304 124.936 186.02 125.078C186.736 125.221 187.431 125.638 188.106 126.329C188.776 127.016 189.183 127.729 189.327 128.468C189.471 129.207 189.403 129.934 189.121 130.649C188.84 131.353 188.389 132.008 187.768 132.614L186.242 134.102L190.076 138.034L188.791 139.287L179.113 129.365ZM185.193 133.028L186.366 131.884C186.792 131.468 187.117 131.029 187.34 130.567C187.569 130.1 187.647 129.623 187.573 129.137C187.505 128.646 187.237 128.16 186.767 127.679C186.293 127.193 185.819 126.917 185.345 126.852C184.87 126.777 184.404 126.855 183.946 127.087C183.488 127.309 183.046 127.627 182.62 128.043L181.447 129.187L185.193 133.028ZM197.834 130.467L196.519 131.75L186.431 121.407L187.746 120.124L197.834 130.467ZM204.679 123.79L203.506 122.588C203.588 122.752 203.639 123.04 203.659 123.451C203.683 123.857 203.616 124.314 203.456 124.822C203.296 125.32 202.991 125.789 202.54 126.229C201.969 126.786 201.318 127.157 200.588 127.341C199.863 127.52 199.126 127.501 198.376 127.283C197.627 127.056 196.932 126.614 196.291 125.958C195.651 125.301 195.229 124.598 195.026 123.848C194.822 123.088 194.819 122.348 195.016 121.628C195.213 120.898 195.598 120.254 196.169 119.697C196.615 119.262 197.079 118.966 197.561 118.808C198.048 118.646 198.492 118.575 198.893 118.595C199.298 118.61 199.592 118.675 199.774 118.791L198.645 117.634L199.938 116.373L205.957 122.544L204.679 123.79ZM197.584 124.697C198.019 125.143 198.493 125.433 199.006 125.568C199.519 125.704 200.019 125.71 200.506 125.587C200.993 125.455 201.414 125.215 201.77 124.868C202.151 124.496 202.403 124.074 202.528 123.6C202.653 123.126 202.644 122.641 202.502 122.144C202.355 121.643 202.068 121.174 201.643 120.738C201.218 120.302 200.759 120.007 200.266 119.852C199.768 119.692 199.28 119.669 198.804 119.782C198.322 119.89 197.891 120.129 197.51 120.501C197.154 120.848 196.907 121.265 196.767 121.754C196.632 122.237 196.626 122.737 196.748 123.253C196.871 123.77 197.149 124.251 197.584 124.697ZM209.102 117.144L206.331 110.137L207.638 108.862L212.543 122.221L211.22 123.512L209.569 119.021L201.009 115.328L202.339 114.03L209.102 117.144Z"
               fill="#F26D21"
@@ -182,7 +187,7 @@ const SvgComponent = forwardRef((props: SVGProps<SVGSVGElement>, ref: any)=> {
             fill="#F26D21"
           />
         </g>
-        <g id="own-hard" style={{ opacity: 0 }} >
+        <g id="own-hard" style={{ opacity: 0 }}>
           <path
             id="Vector 251"
             d="M396.553 175.745C388.294 175.745 380.766 170.129 372.429 169.842C369.885 169.754 367.322 169.842 364.776 169.842C362.531 169.842 358.391 173.608 356.504 174.834C349.803 179.19 346.045 189.223 346.045 196.881C346.045 200.72 345.933 203.708 347.357 207.267C349.013 211.408 352.514 214.018 354.901 217.69C359.144 224.218 367.564 225.597 374.652 225.597C382.515 225.597 392.05 225.176 397.865 219.038C402.899 213.725 400.273 202.808 399.87 196.553C399.551 191.622 397.209 187.274 397.209 182.305"
@@ -204,7 +209,7 @@ const SvgComponent = forwardRef((props: SVGProps<SVGSVGElement>, ref: any)=> {
             strokeWidth={3}
             strokeLinecap="round"
           />
-          <g id="Own hard">
+          <g id="own-hard-text">
             <path
               d="M469.736 197.059C469.736 198.088 469.95 199.016 470.377 199.842C470.811 200.668 471.406 201.326 472.162 201.816C472.918 202.299 473.786 202.54 474.766 202.54C475.753 202.54 476.621 202.299 477.37 201.816C478.126 201.326 478.717 200.668 479.144 199.842C479.571 199.016 479.785 198.088 479.785 197.059C479.785 196.03 479.571 195.106 479.144 194.287C478.717 193.461 478.126 192.807 477.37 192.324C476.621 191.841 475.753 191.599 474.766 191.599C473.786 191.599 472.918 191.841 472.162 192.324C471.406 192.807 470.811 193.461 470.377 194.287C469.95 195.106 469.736 196.03 469.736 197.059ZM467.878 197.059C467.878 196.051 468.049 195.113 468.392 194.245C468.742 193.37 469.229 192.607 469.852 191.956C470.475 191.305 471.203 190.798 472.036 190.434C472.876 190.07 473.786 189.888 474.766 189.888C475.753 189.888 476.663 190.07 477.496 190.434C478.336 190.798 479.064 191.305 479.68 191.956C480.303 192.607 480.786 193.37 481.129 194.245C481.472 195.113 481.643 196.051 481.643 197.059C481.643 198.074 481.472 199.019 481.129 199.894C480.793 200.762 480.313 201.525 479.69 202.183C479.074 202.834 478.35 203.342 477.517 203.706C476.684 204.07 475.767 204.252 474.766 204.252C473.765 204.252 472.841 204.07 471.994 203.706C471.154 203.342 470.426 202.834 469.81 202.183C469.194 201.525 468.718 200.762 468.382 199.894C468.046 199.019 467.878 198.074 467.878 197.059ZM489.364 197.542L487.169 204H485.279L482.938 195.379H484.88L486.445 202.005L488.608 195.547H490.12L492.262 202.005L493.837 195.379H495.79L493.448 204H491.558L489.364 197.542ZM502.407 195.127C502.974 195.127 503.524 195.246 504.056 195.484C504.595 195.722 505.036 196.1 505.379 196.618C505.729 197.129 505.904 197.798 505.904 198.624V204H504.056V198.981C504.056 198.127 503.856 197.507 503.457 197.122C503.058 196.73 502.544 196.534 501.914 196.534C501.501 196.534 501.102 196.653 500.717 196.891C500.339 197.122 500.027 197.444 499.782 197.857C499.537 198.263 499.415 198.725 499.415 199.243V204H497.588V195.379H499.415V196.912C499.478 196.674 499.649 196.415 499.929 196.135C500.209 195.855 500.566 195.617 501 195.421C501.434 195.225 501.903 195.127 502.407 195.127Z"
               fill="#F26D21"
@@ -218,5 +223,5 @@ const SvgComponent = forwardRef((props: SVGProps<SVGSVGElement>, ref: any)=> {
       </g>
     </g>
   </svg>
-)})
+)}
 export default SvgComponent
diff --git a/src/common/FloatingOrbs/index.tsx b/src/common/FloatingOrbs/index.tsx
@@ -1,22 +1,38 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useLayoutEffect, useRef } from 'react';
 import { FloatingOrbContainer, FloatingOrbBlurContainer } from './types';
+import { gsap, Sine } from 'gsap';
 import "twin.macro"
-
 // interface FloatingOrbsProps {} 
 
-export const FloatingOrbs = () => (
-   <FloatingOrbContainer>
+export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & React.Attributes> = ({ children, ...props}: React.AllHTMLAttributes<HTMLDivElement> & React.Attributes) => {
+  const orbContainerRef = useRef<any>(null);
+
+  useLayoutEffect(() => {
+    const context = gsap.context(() => {
+      const tl = gsap.timeline();
+      const duration = 5;
+      const orbs = orbContainerRef.current.querySelectorAll('.orb');
+      tl.repeatDelay(0.25);
+      tl.fromTo(orbs[0], { scale: 1.1, rotate: '0deg', x: "-=5rem", y: "+=3rem" }, { scale: 1.05 , rotate: '180deg', x: "+=3rem", y: "-=5rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, 'start')
+      tl.fromTo(orbs[1], { scale: 1.05, rotate: '0deg', x: "-=3rem", y: "+=3rem" }, { scale: 1.1 , rotate: '180deg', x: "+=3rem", y: "-=3rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, '<')
+      tl.fromTo(orbs[2], { scale: 1.2, rotate: '0deg', x: "-=3rem", y: "+=3rem" }, { scale: 1 , rotate: '180deg', x: "+=3rem", y: "-=6rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, '<')
+      tl.yoyo(true);
+    }, orbContainerRef.current);
+    return () => context.revert(); 
+  });
+
+  return !children ? (
+   <FloatingOrbContainer {...props}>
     <FloatingOrbBlurContainer></FloatingOrbBlurContainer>
-    <div tw="relative flex justify-center items-center w-full h-full">
-      <div 
-      tw="
-      dark:bg-[#C836E0] 
+    <div tw="relative flex justify-center items-center w-full h-full" ref={orbContainerRef}>
+      <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 tw="
+      <div className="orb" tw="
       dark:bg-[#B80D57] 
       pointer-events-none 
       absolute 
@@ -25,12 +41,38 @@ export const FloatingOrbs = () => (
       rounded-[100%]
       translate-x-[-15rem] translate-y-[5rem] z-[-26]
       "></div>
-      <div tw="
+      <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> ) : <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>
+        <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>
+      {children}
+    </FloatingOrbContainer>
+   }
 
diff --git a/src/common/FloatingOrbs/types.ts b/src/common/FloatingOrbs/types.ts
@@ -1,7 +1,7 @@
 import tw, {styled} from 'twin.macro';
 
 export const FloatingOrbContainer = styled.div`
- ${tw`absolute top-0 right-0 w-full h-full z-[-20] flex justify-center items-center`}
+ ${tw`mt-[-5rem] absolute top-0 right-0 w-full h-full z-[-51] flex justify-center items-center`}
 `
 export const FloatingOrbBlurContainer = styled.div`
   content: '';

diff --git a/src/components/LandingPageHeroSection/index.tsx b/src/components/LandingPageHeroSection/index.tsx
@@ -1,8 +1,10 @@
 import { useRef } from 'react';
+import { Link } from 'react-router-dom';
 import Section from "../../common/Section"
 import { SectionHeaderContainer, SectionHeaderTitleLarge, SectionHeader  } from "../../common/Section/types"
 import { PlayGameContainer } from './types'
 import { LeftPlayerCard, RightPlayerCard } from '../LandingHeroPlayerCard';
+import { FloatingOrbs } from '../../common/FloatingOrbs';
 import Button from "../Button";
 import { Dice } from "../Dice";
 import { useRoll } from "../Dice/animations";
@@ -12,27 +14,32 @@ const LandingPageHeroSection = () => {
  const diceRef = useRef<any>(null);
  useRoll(diceRef);
  return (
-  <Section
-   direction='col'
-   hdr={
-    <SectionHeaderContainer tw="flex-col items-center">
-     <SectionHeaderTitleLarge>
-      {"NFTs' Playground"}<span tw="text-oranjo">.</span>
-      </SectionHeaderTitleLarge>
-     </SectionHeaderContainer>
-   }>
-   <PlayGameContainer>
-   <div tw="flex gap-x-[25px] items-center justify-center">
-     <LeftPlayerCard />
-     <Dice diceRef={diceRef} />
-     <RightPlayerCard />
-   </div>
-   <Button buttonType="primary" tw="w-[25%] flex justify-center items-center">
-    <a href="http://35.208.209.92:8080/#/" target="_blank" rel="noreferrer">Play Beta</a>
-   </Button>
-   </PlayGameContainer>
-   <SectionHeader tw="w-full text-center pt-[32px]">Play multiple P2P betting games with your NFTs.</SectionHeader>
-  </Section>
+    <FloatingOrbs tw="mt-[-5rem] w-full h-[100vh] flex justify-center">
+      <Section
+      direction='col'
+      tw="relative"
+      hdr={
+        <SectionHeaderContainer tw="flex-col items-center">
+        <SectionHeaderTitleLarge>
+          {"NFTs' Playground"}<span tw="text-oranjo">.</span>
+          </SectionHeaderTitleLarge>
+        </SectionHeaderContainer>
+      }>
+      <PlayGameContainer>
+      <div tw="flex gap-x-[25px] items-center justify-center">
+        <LeftPlayerCard />
+        <Dice diceRef={diceRef} />
+        <RightPlayerCard />
+      </div>
+      <Link to="http://35.208.209.92:8080/#/">
+        <Button buttonType="primary" tw="flex justify-center items-center">
+          Play Beta
+        </Button>
+      </Link>
+      </PlayGameContainer>
+      <SectionHeader tw="w-full text-center pt-[32px]">Play multiple P2P betting games with your NFTs.</SectionHeader>
+      </Section>
+    </FloatingOrbs>
  )
 }
 export default LandingPageHeroSection;
diff --git a/src/components/LandingPageOwnTheYardSection/index.tsx b/src/components/LandingPageOwnTheYardSection/index.tsx
@@ -22,6 +22,8 @@ const LandingPageOwnTheYardSection = () => {
   return (
   <Section
    direction='col'
+   tw="mt-[10rem] gap-y-[5rem]"
+
    hdr={
     <SectionHeaderContainer tw="flex-col justify-center items-center">
      <SectionHeaderTitle>
@@ -40,7 +42,6 @@ const LandingPageOwnTheYardSection = () => {
         radius: "25px",
         }
     }/>
-
     <div tw="relative w-full h-full flex flex-row gap-x-[10px] items-center justify-center px-[35px] rounded-[25px]">
       <div tw="flex flex-col rounded-[25px]">
         <LargeText>Powered by Wega Protocol</LargeText>

diff --git a/src/components/LandingPagePlaySection/index.tsx b/src/components/LandingPagePlaySection/index.tsx
@@ -10,15 +10,16 @@ const LandingPagePlaySection = () => {
  return (
   <Section
    direction='col'
+   tw="mt-[2.5rem]"
    hdr={
-    <SectionHeaderContainer tw="flex-col justify-center items-center">
+    <SectionHeaderContainer tw=" flex-col justify-center items-center">
      <SectionHeaderTitle>
       All fun & Games
       </SectionHeaderTitle>
       <SectionHeaderSubtitle>Use your NFTs as a ticket to your next big win</SectionHeaderSubtitle>
      </SectionHeaderContainer>
    }>
-   <div tw="container mx-auto p-0 flex flex-row justify-center items-center gap-[32px]">
+   <div tw="container mx-auto p-0 flex flex-row justify-center items-center gap-[32px] mt-[5rem]">
      <DiceGameCard />
      <CoinFlipGameCard />
      <RaffleGameCard />

diff --git a/src/components/LandingPageWagerTypeSection/index.tsx b/src/components/LandingPageWagerTypeSection/index.tsx
@@ -10,15 +10,17 @@ const LandingPageWagerTypeSection = () => {
  return (
   <Section
    direction='col'
+   tw="mt-[10rem]"
+
    hdr={
     <SectionHeaderContainer tw="flex-col justify-center items-center">
      <SectionHeaderTitle>
       Every Asset can sit at this table
       </SectionHeaderTitle>
      </SectionHeaderContainer>
    }>
-   <div tw='flex flex-col md:flex-row gap-[54px] h-[370px] justify-center items-center mt-44 md:mt-0'>
-    <div tw='flex flex-col items-center gap-[24px]  h-full w-[50%]'>
+   <div tw='flex flex-col md:flex-row gap-[54px] h-[370px] justify-center items-center mt-[5rem]'>
+    <div tw='flex flex-col items-center gap-[24px] h-full w-[50%]'>
       <div tw='w-full flex items-center justify-around mb-[-60px] md:mb-0'>
        <img src={wagerCurrenciesSource} alt="wager currencies"/>
       </div>

diff --git a/src/components/MainContainer/index.tsx b/src/components/MainContainer/index.tsx
@@ -3,7 +3,7 @@ import 'twin.macro';
 
 const MainContainer: React.FC<MainPropsContainerProps> = ({ children, ...rest }: MainPropsContainerProps) => {
   return (
-    <main tw="container mt-36 flex flex-col items-center gap-y-[10rem] w-full mx-auto" {...rest}>
+    <main tw="container mt-36 flex flex-col items-center w-full mx-auto lg:px-[unset]" {...rest}>
       {children}
     </main>
   )