feat: add new ill on own the yard and direct links to app

Misfits-Labs · Dec 2, 2023 · 8e9c5f0 · 8e9c5f0
1 parent cdebb0c
commit 8e9c5f0
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 23 deletions.
diff --git a/src/assets/images/OwnTheYardSVGIllustration.tsx b/src/assets/images/OwnTheYardSVGIllustration.tsx
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
@@ -23,9 +23,13 @@ interface ButtonProps {
 
 export const PrimaryButton = styled(BaseButton)<ButtonProps>(
   ({disabled}) => !disabled ? [
-    tw`dark:text-pretu dark:bg-gradient-to-r from-oranjo-blanc to-oranjo border border-transparent border-[1.5px] hover:border-blanc`,
+    tw`dark:text-pretu dark:bg-gradient-to-r from-oranjo-blanc to-oranjo`,
     `
     box-shadow: 0px 1px 5px 0px #090300;
+    &:hover {
+      outline: 1.5px solid #FDFDFD;
+      --webkit-outline: 1.5px solid #FDFDFD;
+    }
     `
   ] : [
     tw`dark:text-pretu dark:opacity-50 dark:bg-gradient-to-r from-oranjo-blanc to-oranjo`,

diff --git a/src/components/LandingPageHeroMobile/index.tsx b/src/components/LandingPageHeroMobile/index.tsx
@@ -4,8 +4,7 @@ import { useAutoRoll } from "../Dice/animations";
 import { LeftPlayerCardMobile, RightPlayerCardMobile} from "../LandingHeroPlayerCard";
 import { Link } from 'react-router-dom';
 import Button from "../Button";
-import {TwitterIcon, VersusIcon} from '../../assets/icons';
-import { BlackFillWrapperForSVG } from '../../containers/Navigation/types'
+import { VersusIcon } from '../../assets/icons';
 import 'twin.macro';
 
 const LandingPageHeroMobile = () => {
@@ -20,12 +19,12 @@ const LandingPageHeroMobile = () => {
     <RightPlayerCardMobile />
    </div>
    <Dice tw="rounded-[15px] w-[115px] h-[115px] p-[14px] border-[2.5px] mt-[-0.75rem]" diceRef={diceRef} />
-   <Link to="https://twitter.com/PlayWega" target="_blank" rel="noreferrer">
+   <Link to="https://app.wega.fun" target="_blank" rel="noreferrer">
     <Button buttonType="primary" tw="z-[-20] flex flex-row justify-center px-[24px] py-[12px] items-center mt-[5rem]" >
-        Follow on
-        <BlackFillWrapperForSVG tw="ms-[8px]">
+        Play
+        {/* <BlackFillWrapperForSVG tw="ms-[8px]">
           <TwitterIcon width="16px" height="16px"/>
-        </BlackFillWrapperForSVG>
+        </BlackFillWrapperForSVG> */}
       </Button>
    </Link>
   </div>

diff --git a/src/components/LandingPageOwnTheYardSection/index.tsx b/src/components/LandingPageOwnTheYardSection/index.tsx
@@ -7,7 +7,7 @@ import {
  SectionHeaderSubtitle
 } from "../../common/Section/types"
 import { NormalText, LargeText, MediumText } from "../../common/typography/types"
-import OwnTheYardGraphic from "../../assets/images/ownTheYard.png";
+import OwnTheYardGraphic from "../../assets/images/OwnTheYardSVGIllustration";
 import HoveringOrbs from "../../common/HoveringOrbs"
 import "twin.macro"
 
@@ -33,8 +33,8 @@ const LandingPageOwnTheYardSection = () => {
     </SectionHeaderContainer>
    }
   >
-   <div tw="self-center mb-[1rem] md:mb-[30px] max-w-[408px]">
-    <img src={OwnTheYardGraphic}  alt="own-the-yard-illustration" tw="w-full" />
+   <div tw="self-center mb-[1rem] md:mb-[30px] w-[fit-content]">
+   <OwnTheYardGraphic width="549.75px" height="164.73px"/>
    </div>
    {/* gradient banner */}
    <HoveringOrbs

diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx
@@ -32,7 +32,7 @@ const Footer = () => {
         <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-[56px]">
-            <a href="https://wega.gitbook.io/wega-litepaper/" css={hoverStrokeOranjoStyle} target="_blank" tw="w-[44px]" rel="noreferrer">
+            <a href="https://wega-1.gitbook.io/wega-lite-paper/" css={hoverStrokeOranjoStyle} target="_blank" tw="w-[44px]" rel="noreferrer">
             <WhitepaperIcon width="100%" height="100%" />
             </a>
             <a href="https://twitter.com/PlayWega" css={hoverFillOranjoStyle} target="_blank" tw="w-[44px]" rel="noreferrer">
@@ -45,7 +45,7 @@ const Footer = () => {
           <NormalText tw="text-[21px] leading-[19px] text-blanc w-full text-center">Play together, Own together.</NormalText>
         </div>
         <div tw="flex gap-x-[15px] items-end grow">
-          <Link to="https://wega.gitbook.io/wega-litepaper/" target="_blank">
+          <Link to="https://wega-1.gitbook.io/wega-lite-paper/" target="_blank">
             <NormalText>Documentation</NormalText>
           </Link>
           {/* <Link tw="w-[max-content]" to="http://app.wega.fun" target="_blank">

diff --git a/src/containers/FooterMobile/index.tsx b/src/containers/FooterMobile/index.tsx
@@ -37,7 +37,7 @@ const FooterMobile = () => {
 
             <div tw="flex flex-col items-center">
               <div tw="flex gap-x-[24px] w-full justify-center">
-                <a href="https://wega.gitbook.io/wega-litepaper/" css={hoverStrokeOranjoStyle} target="_blank" tw="w-[24px]" rel="noreferrer">
+                <a href="https://wega-1.gitbook.io/wega-lite-paper/" css={hoverStrokeOranjoStyle} target="_blank" tw="w-[24px]" rel="noreferrer">
                 <WhitepaperIcon width="100%" height="100%" />
                 </a>
                 <a href="https://twitter.com/PlayWega" css={hoverFillOranjoStyle} target="_blank" tw="w-[24px]" rel="noreferrer">
@@ -50,7 +50,7 @@ const FooterMobile = () => {
             </div>
 
             <div tw="flex flex-col gap-x-[15px] items-center">
-              <Link to="https://wega.gitbook.io/wega-litepaper/" target="_blank">
+              <Link to="https://wega-1.gitbook.io/wega-lite-paper/" target="_blank">
                 <NormalText>Documentation</NormalText>
               </Link>
               <Link to="https://app.wega.fun/#/" target="_blank">

diff --git a/src/containers/Navigation/index.tsx b/src/containers/Navigation/index.tsx
@@ -2,13 +2,11 @@
 
 import { Link } from 'react-router-dom';
 import { LogoDarkWo } from '../../assets/images';
-import { TwitterIcon } from '../../assets/icons';
 import { 
   BrandContainer, 
   Brand, 
   NavigationLinksContainer,
-  NavigationBar,
-  BlackFillWrapperForSVG
+  NavigationBar
 } from './types';
 import { useAnimateNav } from '../../hooks';
 import Button from '../../components/Button';
@@ -29,12 +27,11 @@ const Navigation = () => {
           </BrandContainer>
         </NavigationLinksContainer>
         <div>
-          <Button buttonType="primary" tw="font-secondary font-bold flex justify-center items-center w-[max-content]">
-            Follow on
-            <BlackFillWrapperForSVG tw="ms-[8px]">
-              <TwitterIcon width="16px" height="16px"/>
-            </BlackFillWrapperForSVG>
-          </Button>
+          <Link to="https://app.wega.fun" target="_blank" rel="noreferrer">
+            <Button buttonType="primary" tw="font-secondary font-bold flex justify-center items-center w-[max-content]">
+              Play
+            </Button>
+          </Link>
         </div>
       </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>  */}