fix: fixed issues on landing page

packages/web/components/Landing/IntroHero.tsx

@@ -1,70 +0,0 @@
-import { Button, Heading, Stack, Text } from '@metafam/ds';
-import { JoinButton } from 'components/JoinButton';
-import { useOnScreen } from 'lib/hooks/useOnScreen';
-import { useRouter } from 'next/router';
-import { useRef } from 'react';
-import { BsArrowDown } from 'react-icons/bs';
-
-export const IntroHero: React.FC = () => {
-  const { push } = useRouter();
-  const heroRef = useRef<HTMLDivElement>(null);
-  const onScreen = useOnScreen(heroRef);
-
-  const handleSectionNav = (sectionId: string) => {
-    push(`#${sectionId}`);
-  };
-
-  return (
-    <Stack
-      ref={heroRef}
-      pos="relative"
-      align="center"
-      justify="left"
-      spacing={8}
-      pb={10}
-      direction={{ base: 'column', lg: 'column' }}
-      maxW="lg"
-      zIndex={100}
-      transform={`translate3d(0, ${onScreen ? '0' : '50px'}, 0)`}
-      opacity={onScreen ? 1 : 0}
-      transition="transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in"
-    >
-      <Heading
-        fontFamily="body"
-        fontSize={{ base: '5xl', md: '7xl' }}
-        fontWeight="300"
-        color="white"
-        textAlign="center"
-      >
-        MetaGame
-      </Heading>
-
-      <Text
-        className="gradient"
-        fontSize={{ base: 'md', md: '2xl' }}
-        textAlign="center"
-      >
-        A Massive Online Coordination Game
-      </Text>
-
-      <Stack
-        spacing={{ base: 4, md: 8 }}
-        justifyContent="space-evenly"
-        direction={{ base: 'column', sm: 'row' }}
-        transform={`translate3d(0, ${onScreen ? '0' : '50px'}, 0)`}
-        opacity={onScreen ? 1 : 0}
-        transition="transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in"
-      >
-        <JoinButton text="Start Playing" />
-        <Button
-          colorScheme="white"
-          size="lg"
-          rightIcon={<BsArrowDown />}
-          onClick={() => handleSectionNav('wtf-is-a-metagame')}
-        >
-          Explore
-        </Button>
-      </Stack>
-    </Stack>
-  );
-};

packages/web/pages/index.tsx

@@ -14,7 +14,6 @@ import { HeadComponent } from 'components/Seo';
 // import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
 import { useRouter } from 'next/router';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { BsArrowUp } from 'react-icons/bs';
 import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa';
 
 export const getStaticProps = async () => ({
@@ -23,6 +22,35 @@ export const getStaticProps = async () => ({
   },
 });
 
+const ArrowUp: React.FC = () => (
+  <svg
+    strokeWidth="0"
+    viewBox="0 0 16 16"
+    focusable="false"
+    height="1em"
+    width="1em"
+  >
+    <defs>
+      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" style={{ stopColor: '#FF61E6', stopOpacity: 1 }} />
+        <stop offset="100%" style={{ stopColor: '#7C56FF', stopOpacity: 1 }} />
+      </linearGradient>
+    </defs>
+    <path
+      fill="url(#grad1)"
+      fillRule="evenodd"
+      d="M8 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="url(#grad1)"
+      fillRule="evenodd"
+      d="M7.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8 3.707 5.354 6.354a.5.5 0 11-.708-.708l3-3z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const Landing: React.FC = () => {
   const scrollContainer =
     typeof document !== 'undefined'
@@ -103,8 +131,13 @@ const Landing: React.FC = () => {
         opacity={section === 0 ? 0 : 1}
         transform={`translate3d(0,${section === 0 ? '30px' : '0px'},0)`}
         transition="transform 0.3s 0.3s ease-in-out, opacity 0.3s 0.3s ease-in-out"
+        _hover={{ textDecor: 'none' }}
       >
-        <Button colorScheme="white" rightIcon={<BsArrowUp />}>
+        <Button
+          className="gradient-text"
+          colorScheme="white"
+          rightIcon={<ArrowUp />}
+        >
           Back to top
         </Button>
       </MetaLink>