feat: add outgoing twitter link on cta^

Misfits-Labs · Nov 14, 2023 · 1ae3633 · 1ae3633
1 parent 943b47a
commit 1ae3633
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -8,18 +8,20 @@
     <link rel="manifest" href="/site.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wega. Win together, Own together</title>
-    <!-- <script>
-      // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
-      if (
-        localStorage.getItem('color-theme') === 'dark' ||
-        (!('color-theme' in localStorage) &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches)
-      ) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
-    </script> -->
+    <script>
+      // // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
+      // if (
+      //   localStorage.getItem('color-theme') === 'dark' ||
+      //   (!('color-theme' in localStorage) &&
+      //     window.matchMedia('(prefers-color-scheme: dark)').matches)
+      // ) {
+      //   document.documentElement.classList.add('dark');
+      // } else {
+      //   document.documentElement.classList.remove('dark');
+      // }
+      const htmlElement = document.documentElement;
+      if(htmlElement && !htmlElement.classList.contains('dark')) htmlElement.classList.add('dark');
+    </script>
   </head>
   <body>
     <div id="root" style="position: relative; z-index: -10; overflow: hidden"></div>

diff --git a/src/assets/images/ownTheYard.png b/src/assets/images/ownTheYard.png
diff --git a/src/assets/images/ownTheYardMobile.png b/src/assets/images/ownTheYardMobile.png
diff --git a/src/assets/images/wager-currencies.png b/src/assets/images/wager-currencies.png
diff --git a/src/assets/images/wager-types.png b/src/assets/images/wager-types.png
diff --git a/src/components/LandingPageHeroMobile/index.tsx b/src/components/LandingPageHeroMobile/index.tsx
@@ -2,9 +2,10 @@ import { useRef } from 'react';
 import { Dice } from "../Dice";
 import { useAutoRoll } from "../Dice/animations";
 import { LeftPlayerCardMobile, RightPlayerCardMobile} from "../LandingHeroPlayerCard";
+import { Link } from 'react-router-dom';
 import Button from "../Button";
-
-import { VersusIcon } from '../../assets/icons'; 
+import {TwitterIcon, VersusIcon} from '../../assets/icons';
+import { BlackFillWrapperForSVG } from '../../containers/Navigation/types'
 import 'twin.macro';
 
 const LandingPageHeroMobile = () => {
@@ -19,10 +20,14 @@ const LandingPageHeroMobile = () => {
     <RightPlayerCardMobile />
    </div>
    <Dice tw="rounded-[15px] w-[115px] h-[115px] p-[14px] border-[2.5px] mt-[-0.75rem]" diceRef={diceRef} />
-   <Button 
-    buttonType="primary" tw="z-[-20] shadow-primary-button py-[9.92px] px-[19.83px] min-w-[162px] min-h-[35px] mt-[5rem]" >
-        Coming soon
+   <Link to="https://twitter.com/PlayWega" 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]">
+          <TwitterIcon width="16px" height="16px"/>
+        </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/OwnTheYardGraphic";
+import OwnTheYardGraphic from "../../assets/images/ownTheYard.png";
 import HoveringOrbs from "../../common/HoveringOrbs"
 import "twin.macro"
 
@@ -33,13 +33,13 @@ const LandingPageOwnTheYardSection = () => {
     </SectionHeaderContainer>
    }
   >
-   <div tw="self-center mb-[1rem] md:mb-[30px] ">
-    <OwnTheYardGraphic />
+   <div tw="self-center mb-[1rem] md:mb-[30px] max-w-[408px]">
+    <img src={OwnTheYardGraphic}  alt="own-the-yard-illustration" tw="w-full" />
    </div>
    {/* gradient banner */}
    <HoveringOrbs
     isHovering={isHoveringOnGradientBackground}
-    tw="relative mt-[1rem] w-[75%] self-center rounded-[25px]"
+    tw="relative mt-[3rem] w-[75%] self-center rounded-[25px]"
     onMouseEnter={() => handleGradientBackgroundHover("enter")}
     onMouseLeave={() => handleGradientBackgroundHover("leave")}
    >

diff --git a/src/components/LandingPageOwnTheYardSectionMobile/index.tsx b/src/components/LandingPageOwnTheYardSectionMobile/index.tsx
@@ -11,7 +11,7 @@ import {
   LargeText,
   MediumText
 } from '../../common/typography/types'
-import OwnTheYardGraphic from '../../assets/images/OwnTheYardGraphicMobile';
+import OwnTheYardGraphic from '../../assets/images/ownTheYardMobile.png';
 import 'twin.macro';
 
 
@@ -32,7 +32,7 @@ const LandingPageOwnTheYardSectionMobile = () => {
      </SectionHeaderContainer>
    }>
    <div tw='self-center w-full' >
-    <OwnTheYardGraphic width="100%" />
+    <img src={OwnTheYardGraphic}  alt="own-the-yard-illustration" tw="mx-auto"/>
    </div>
    {/* gradient banner */}
    <div tw="relative rounded-[25px] h-[217px] border-[2px] border-blanc z-[inherit]">

diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import LanguageProvider from '../LanguageProvider';
 import { localeSelector } from '../LanguageProvider/intlSlice';
@@ -10,11 +9,6 @@ import 'twin.macro';
 
 function App() {
   const locale = useAppSelector(state => localeSelector(state));
-
-  useEffect(()=>{
-    const htmlElement = document.documentElement;
-    if(htmlElement && !htmlElement.classList.contains('dark')) htmlElement.classList.add('dark');
-  })
   return (
     <LanguageProvider locale={locale}>
       <HelmetProvider>

diff --git a/src/containers/LandingPage/index.tsx b/src/containers/LandingPage/index.tsx
@@ -7,6 +7,7 @@ import LandingPageOwnTheYardSection from '../../components/LandingPageOwnTheYard
 import LandingPageOwnTheYardSectionMobile from '../../components/LandingPageOwnTheYardSectionMobile';
 import MainContainer from '../../components/MainContainer';
 import { useMediaQuery } from '../../hooks';
+
 const LandingPage = () => {
     const { isMobile } = useMediaQuery();
     return (

diff --git a/src/containers/Navigation/index.tsx b/src/containers/Navigation/index.tsx
@@ -2,14 +2,17 @@
 
 import { Link } from 'react-router-dom';
 import { LogoDarkWo } from '../../assets/images';
+import { TwitterIcon } from '../../assets/icons';
 import { 
   BrandContainer, 
   Brand, 
   NavigationLinksContainer,
-  NavigationBar
+  NavigationBar,
+  BlackFillWrapperForSVG
 } from './types';
 import { useAnimateNav } from '../../hooks';
 import Button from '../../components/Button';
+
 import 'twin.macro'
 
 const Navigation = () => {
@@ -26,8 +29,11 @@ const Navigation = () => {
           </BrandContainer>
         </NavigationLinksContainer>
         <div>
-          <Button buttonType="primary" tw="flex justify-center items-center w-[max-content]">
-            Coming soon
+          <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>
         </div>
       </div>

diff --git a/src/containers/Navigation/types.ts b/src/containers/Navigation/types.ts
@@ -1,5 +1,10 @@
 import tw, { styled } from 'twin.macro';
 
+export const BlackFillWrapperForSVG = styled.span`
+  svg path {
+    ${tw`fill-pretu`}
+  }
+`
 
 export const BrandContainer = styled.div`
  display: flex;