More styling to the sections

- hoked up the section markers
- Added in other section images

packages/web/components/Landing/Build.tsx

@@ -1,5 +1,5 @@
-import { Flex, Text } from '@metafam/ds';
-import BackgroundImage from 'assets/landing/build-background.png';
+import { Container, Flex, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/sections/section-3.jpg';
 import { FullPageContainer } from 'components/Container';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
 import { useRef } from 'react';
@@ -18,30 +18,43 @@ export const Build: React.FC = () => {
       position="relative"
       color="white"
     >
-      <Flex
-        ref={ref}
-        direction="column"
-        justify="center"
-        fontSize={{ base: '1.5rem', lg: '2.375rem' }}
-        lineHeight={{ base: '2.35rem', lg: '3.5rem' }}
-        maxWidth={{ base: 'unset', md: 'md', lg: 'lg' }}
-        pl={0}
-        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"
+      <Container
+        d="flex"
+        maxW={{ base: '100%', xl: '7xl', '2xl': 'full' }}
+        px={14}
+        height="100%"
+        alignItems="center"
+        justifyContent="flex-end"
       >
-        <Text>
-          Many have already woken up to the world-shaping potential of Web3
-          technologies.
-        </Text>
+        <Flex
+          ref={ref}
+          direction="column"
+          justify="center"
+          fontSize={{ base: '1.5rem', lg: '3xl' }}
+          lineHeight={{ base: '2.35rem', lg: '3xl' }}
+          maxWidth={{ base: 'unset', md: 'md', lg: '2xl' }}
+          pl={0}
+          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"
+        >
+          <Text fontSize={{ base: 'lg', lg: '4xl' }}>
+            People are waking up to the{' '}
+            <strong>world-shaping potential of Web3 technologies</strong>.
+          </Text>
 
-        <Text pt={{ base: 4, md: 8 }}>
-          Some are grabbing the opportunity to build the future they want to
-          live in.
-        </Text>
-      </Flex>
-      <LandingNextButton section="a-revolution" />
+          <Text pt={{ base: 4, md: 8 }}>
+            They are grabbing the opportunity to{' '}
+            <strong>build the future</strong> they want to live in.
+          </Text>
+          <Text pt={{ base: 4, md: 8 }}>
+            Web3 technologies are allowing us to{' '}
+            <strong>reimagine socioeconomic systems</strong> from the ground up.
+          </Text>
+        </Flex>
+      </Container>
+      <LandingNextButton section="the-wild-web" />
     </FullPageContainer>
   );
 };

packages/web/components/Landing/Game.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, Text } from '@metafam/ds';
-import BackgroundImage from 'assets/landing/game-background.png';
+import BackgroundImage from 'assets/landing/sections/section-2.jpg';
 import { FullPageContainer } from 'components/Container';
 import { MetaLink } from 'components/Link';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
@@ -20,7 +20,8 @@ export const Game: React.FC = () => {
     >
       <Container
         d="flex"
-        maxW={{ base: '100%', xl: '7xl', '2xl': '8xl' }}
+        maxW={{ base: '100%', xl: '7xl', '2xl': 'full' }}
+        px={14}
         height="100%"
         alignItems="center"
       >
@@ -29,9 +30,9 @@ export const Game: React.FC = () => {
           display="flex"
           flexDirection="column"
           justifyContent="center"
-          maxWidth={{ base: 'unset', md: 'lg', lg: 'xl', '2xl': '3xl' }}
-          fontSize={{ base: '1.5rem', '2xl': '2.375rem' }}
-          lineHeight={{ base: '2.35rem', '2xl': '3.5rem' }}
+          maxWidth={{ base: 'unset', md: 'lg', lg: 'xl', '2xl': 'xl' }}
+          fontSize={{ base: '1.5rem', '2xl': '2xl' }}
+          lineHeight={{ base: '2.35rem', '2xl': '2xl' }}
           pl={{ base: 0, md: 0 }}
           zIndex={100}
           transform={`translate3d(0, ${onScreen ? '0' : '50px'}, 0)`}
@@ -49,6 +50,7 @@ export const Game: React.FC = () => {
           <Text textAlign="right">
             - From{' '}
             <MetaLink
+              className="gradient"
               href="https://en.wikipedia.org/wiki/Metagaming"
               fontWeight="normal"
               textDecoration="none"

packages/web/components/Landing/Intro.tsx

@@ -6,7 +6,6 @@ import {
   Heading,
   Image,
   Stack,
-  SVG,
   Text,
 } from '@metafam/ds';
 // import { animated, config, useSpring } from '@react-spring/web';
@@ -54,9 +53,6 @@ export const Intro: React.FC<{ currentSection: number }> = ({
       id="start"
       bgImageUrl={BackgroundImage}
       backgroundPosition="top"
-      // backgroundSize="cover"
-      // backgroundBlendMode="screen"
-      // mixBlendMode="screen"
       spacing={{ base: 8, xl: 20 }}
       justify="flex-end"
     >
@@ -180,6 +176,7 @@ export const QuoteLayer = ({
     position="fixed"
     bottom={0}
     width="100vw"
+    // height={300}
     textAlign="center"
     onMouseEnter={handleScrollHover}
     onMouseLeave={handleScrollHover}
@@ -192,9 +189,9 @@ export const QuoteLayer = ({
       left={0}
       minW="100vw"
       height="100%"
-      pointerEvents="none"
       transition="transform 0.3s 0.3s ease-in-out"
       transform={`translate3d(0, ${showQuote ? -50 : 300}px, 0)`}
+      zIndex={0}
       sx={{
         img: {
           position: 'absolute',
@@ -226,8 +223,9 @@ export const QuoteLayer = ({
       maxW="4xl"
       opacity={showQuote ? 1 : 0}
       textAlign="left"
-      transition="transform 0.3s 0.2s ease-in-out, opacity 0.2s 0.4s ease-in"
+      transition="transform 0.3s 0.2s ease-in-out, opacity 0.3s 0.4s ease-in"
       transform={`translate3d(0, ${showQuote ? -50 : 300}px, 0)`}
+      zIndex={2}
       sx={{
         '&::before': {
           content: '""',

packages/web/components/Landing/JoinUs.tsx

@@ -1,11 +1,10 @@
 import { Box, Button, Container, HStack, Text, VStack } from '@metafam/ds';
-import BackgroundImage from 'assets/landing/just-watch-background.png';
+import BackgroundImage from 'assets/landing/sections/section-6.png';
 import { FullPageContainer } from 'components/Container';
 import { StartButton } from 'components/Landing/StartButton';
 import { MetaLink } from 'components/Link';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
 import { useRef } from 'react';
-import { BsArrowRight } from 'react-icons/bs';
 
 import { LandingFooter } from './LandingFooter';
 
@@ -24,6 +23,7 @@ export const JoinUs: React.FC = () => {
       <Container
         d="flex"
         maxW={{ base: '100%', md: '7xl' }}
+        flexFlow="column"
         height="100%"
         alignItems="center"
         justifyContent="center"
@@ -31,6 +31,9 @@ export const JoinUs: React.FC = () => {
         <Box
           ref={ref}
           display="flex"
+          color="landing500"
+          textShadow="0 0 5px"
+          textShadowColor="landing500"
           flexDirection="column"
           justifyContent="center"
           maxWidth={{ base: '100%', md: '2xl' }}
@@ -40,19 +43,33 @@ export const JoinUs: React.FC = () => {
           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"
+          sx={{
+            '.screen-esque': {
+              background: 'landing150',
+              border: '1px solid #6916DA',
+              color: 'landing500',
+              textShadow: '0 0 5px',
+              textShadowColor: 'landing500',
+              '&--alt': {
+                background: 'rgba(66, 4, 150, 0.29)',
+                border: '1px solid #6916DA',
+                color: 'landing500',
+                textShadow: '0 0 5px',
+                textShadowColor: 'landing500',
+              },
+            },
+          }}
         >
-          <VStack>
+          <VStack maxH="30vh" flex={0}>
             <Text
               fontSize={{ base: '4xl', md: '6xl' }}
               lineHeight={{ base: '2.5rem', md: '3rem' }}
               fontWeight="700"
-              color="white"
               mb="2.188rem"
             >
               The revolution will be televized, but{' '}
               <Text
                 as="span"
-                className="gradient-text"
                 opacity={onScreen ? 1 : 0}
                 transition="opacity 0.5s 0.6s ease-in"
               >
@@ -64,19 +81,23 @@ export const JoinUs: React.FC = () => {
               opacity={onScreen ? 1 : 0}
               transition="transform 0.3s 0.1s ease-in-out, opacity 0.5s 1s ease-in"
             >
-              <StartButton text="Enter" />
               <MetaLink _hover={{}} href="/dashboard">
                 <Button
+                  className="screen-esque--alt"
                   colorScheme="white"
                   size="lg"
-                  rightIcon={<BsArrowRight />}
+                  minW="7rem"
                 >
-                  Explore More
+                  Watch
                 </Button>
               </MetaLink>
+              <StartButton text="Join" />
             </HStack>
           </VStack>
         </Box>
+        <Box className="footer-content">
+          <Text>Text</Text>
+        </Box>
       </Container>
       <LandingFooter />
     </FullPageContainer>

packages/web/components/Landing/LandingHeader.tsx

@@ -80,8 +80,8 @@ export const LandingHeader: React.FC = () => {
               position: 'relative',
               flexDirection: 'column',
               justifyContent: 'space-around',
-              width: ['1.5rem', '1.5rem', '2rem'],
-              height: ['1.5rem', '1.5rem', '2rem'],
+              width: ['1.5rem', '1.5rem', '2.5rem'],
+              height: ['1.5rem', '1.5rem', '2.5rem'],
               background: 'transparent',
               border: 'none',
               cursor: 'pointer',
@@ -95,32 +95,15 @@ export const LandingHeader: React.FC = () => {
                 boxShadow: 'none',
               },
               div: {
-                width: ['1.5rem', '1.5rem', '2rem'],
+                width: ['1.5rem', '1.5rem', '2.5rem'],
                 // height: ['0.08rem', '0.1rem', '0.2rem'],
                 borderRadius: ['5px', '5px', '10px'],
                 transition: 'all 0.3s linear',
                 position: 'relative',
                 transformOrigin: '1px',
-                // opacity: toggle ? 0.7 : 0.8,
-                // '&:first-of-type': {
-                //   transform: toggle
-                //     ? 'rotate(45deg) translate3d(2px, -1px, 0)'
-                //     : 'rotate(0)',
-                // },
-                // '&:nth-of-type(2)': {
-                //   opacity: toggle ? '0' : '0.6',
-                //   transform: toggle
-                //     ? 'translate3d(-20px, 0, 0)'
-                //     : 'translate3d(0, 0, 0)',
-                // },
-                // '&:nth-of-type(3)': {
-                //   transform: toggle
-                //     ? 'rotate(-45deg) translate3d(-1px, -1px, 0)'
-                //     : 'rotate(0)',
-                // },
               },
               'path, circle': {
-                // fill: toggle ? 'landing600' : 'landing250',
+                fill: toggle ? 'landing600' : 'transparent',
                 transition: 'all 0.2s 0.2s ease',
               },
             }}
@@ -288,7 +271,7 @@ export const MenuIcon2SVG: React.FC = () => (
   <Box>
     <Box
       as="svg"
-      width={['1.5rem', '1.5rem', '2rem']}
+      width={['1.5rem', '1.5rem', '2.5rem']}
       left={0}
       bottom={0}
       top={0}

packages/web/components/Landing/StartButton.tsx

@@ -8,11 +8,12 @@ export const StartButton: React.FC<{ text: string }> = ({
 
   return (
     <Button
-      className="border-grad"
+      className="screen-esque"
+      background="landing150"
       colorScheme="white"
       rounded="md"
       size="lg"
-      minW="8rem"
+      minW="7rem"
       onClick={() => router.push('/start')}
     >
       <Text as="span">{text}</Text>

packages/web/components/Landing/WhatDo.tsx

@@ -0,0 +1,50 @@
+import { Box, Container } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/whatWeDo-background.png';
+import { FullPageContainer } from 'components/Container';
+import { useOnScreen } from 'lib/hooks/useOnScreen';
+import { useRef } from 'react';
+
+import { LandingNextButton } from './LandingNextButton';
+
+export const WhatDo: React.FC = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const onScreen = useOnScreen(ref);
+  const section = 'what-do';
+
+  return (
+    <FullPageContainer
+      bgImageUrl={BackgroundImage}
+      id={section}
+      position="relative"
+    >
+      <Container
+        d="flex"
+        maxW={{ base: '100%', md: '7xl', '2xl': '8xl' }}
+        height="100%"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Box
+          ref={ref}
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          fontSize={{ base: 'md', md: '3xl', xl: '3xl', '2xl': '6xl' }}
+          lineHeight={{
+            base: '1.25rem',
+            md: '2.4rem',
+            xl: '2rem',
+            '2xl': '3.5rem',
+          }}
+          maxWidth={{ base: '95%', md: '3xl', xl: '2xl', '2xl': '5xl' }}
+          pl={{ base: 0, md: 0 }}
+          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"
+        ></Box>
+      </Container>
+      <LandingNextButton section="play-life" />
+    </FullPageContainer>
+  );
+};

packages/web/components/Landing/WildWeb.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, Text } from '@metafam/ds';
-import BackgroundImage from 'assets/landing/wildweb-background.png';
+import BackgroundImage from 'assets/landing/sections/section-4.jpg';
 import { FullPageContainer } from 'components/Container';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
 import { useRef } from 'react';
@@ -19,19 +19,20 @@ export const WildWeb: React.FC = () => {
     >
       <Container
         d="flex"
-        maxW={{ base: '100%', md: '7xl', '2xl': '8xl' }}
-        h="100%"
+        maxW={{ base: '100%', md: '7xl', '2xl': 'full' }}
+        height="100%"
         alignItems="center"
-        justifyContent="center"
+        justifyContent="flex-start"
+        px={14}
       >
         <Box
           {...{ ref }}
           display="flex"
           flexDirection="column"
           justifyContent="center"
-          maxWidth={{ base: '95%', md: 'md', xl: '2xl', '2xl': '5xl' }}
-          fontSize={{ base: 'md', md: '3xl', '2xl': '6xl' }}
-          lineHeight={{ base: '1.5rem', md: '2.4rem', '2xl': '3.5rem' }}
+          maxWidth={{ base: '95%', md: 'md', xl: '2xl', '2xl': 'xl' }}
+          fontSize={{ base: 'md', md: '3xl', '2xl': '2xl' }}
+          lineHeight={{ base: '1.5rem', md: '2.4rem', '2xl': '2xl' }}
           fontWeight="normal"
           pl={0}
           zIndex={100}
@@ -39,14 +40,12 @@ export const WildWeb: React.FC = () => {
           opacity={onScreen ? 1 : 0}
           transition="transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in"
         >
-          <Text pb={{ base: '1.188rem', '2xl': '2.188rem' }}>
-            Web3 technologies are allowing us to{' '}
-            <Text as="strong">reimagine socioeconomic systems</Text> from the
-            ground up.
-          </Text>
-          <Text pb={{ base: '1.188rem', '2xl': '2.188rem' }}>
-            A new world is being built, but it's{' '}
-            <Text as="strong">hard to navigate</Text>.
+          <Text
+            pb={{ base: '1.188rem', '2xl': '2.188rem' }}
+            fontSize={{ base: 'md', md: '3xl', '2xl': '4xl' }}
+          >
+            A new world is being built but it's{' '}
+            <Text as="strong">hard to navigate.</Text>
           </Text>
           <Text pb={{ base: '1.188rem', '2xl': '2.188rem' }}>
             The resources, building blocks, &amp; tools are all over the place{' '}
@@ -62,7 +61,7 @@ export const WildWeb: React.FC = () => {
           </Text>
         </Box>
       </Container>
-      <LandingNextButton py={8} right="35vw" section="human-coordination" />
+      <LandingNextButton section="join-us" />
     </FullPageContainer>
   );
 };

packages/web/pages/index.tsx

@@ -5,14 +5,11 @@ import { Game } from 'components/Landing/Game';
 import { Intro } from 'components/Landing/Intro';
 import { JoinUs } from 'components/Landing/JoinUs';
 import { LandingHeader } from 'components/Landing/LandingHeader';
-import { Optimal } from 'components/Landing/Optimal';
-import { Revolution } from 'components/Landing/Revolution';
-import { Together } from 'components/Landing/Together';
-import { WhatWeDo } from 'components/Landing/WhatWeDo';
-import { Who } from 'components/Landing/Who';
+import { WhatDo } from 'components/Landing/WhatDo';
 import { WildWeb } from 'components/Landing/WildWeb';
 import { MetaLink } from 'components/Link';
 import { HeadComponent } from 'components/Seo';
+import { useRouter } from 'next/router';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa';
 
@@ -93,7 +90,7 @@ const Landing: React.FC = () => {
       scrollContainer?.removeEventListener('scroll', handleScroll);
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [handleScroll, handleKeyDown, scrollContainer]);
+  }, [handleScroll, handleKeyDown, scrollContainer, section]);
 
   return (
     <>
@@ -108,15 +105,11 @@ const Landing: React.FC = () => {
         <Intro currentSection={section} /> {/* section 0 */}
         <Game /> {/* section 1 */}
         <Build /> {/* section 2 */}
-        <Revolution /> {/* section 3 */}
-        <WildWeb /> {/* section 4 */}
-        <Together /> {/* section 5 */}
-        <WhatWeDo /> {/* section 6 */}
-        <Optimal /> {/* section 7 */}
-        <Who /> {/* section 8 */}
-        <JoinUs /> {/* section 9 */}
+        <WildWeb /> {/* section 3 */}
+        <WhatDo /> {/* section 4 */}
+        <JoinUs /> {/* section 5 */}
       </PageContainer>
-      <SectionWayPoints />
+      <SectionWayPoints currentWaypoint={section} />
       <Socials />
       <MetaLink
         position="fixed"
@@ -187,84 +180,122 @@ export const Socials: React.FC = () => (
   </VStack>
 );
 
-export const SectionWayPoints: React.FC = () => {
-  // const sections = 6
-  // const Waypoint = <MetaLink href="#">dot</MetaLink>
-  // const waypoints = []
-  const active = true;
-  const activeSection = '01';
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const SectionWayPoints = ({
+  currentWaypoint,
+}: {
+  currentWaypoint: number;
+}) => {
+  const { push } = useRouter();
+
+  const handleSectionNav = (sectionId: string) => {
+    push(`#${sectionId}`);
+  };
 
   return (
-    <VStack
+    <Box
       className="section-waypoints"
       position="fixed"
-      top="66%"
       left={5}
-      spacing={2}
       minW={5}
+      height="100vh"
+      minH="100vh"
       zIndex={400}
-      sx={{
-        button: {
-          background: 'transparent',
-          borderRadius: '50%',
-          width: '20px',
-          height: '20px',
-          minW: '20px',
-          maxH: '20px',
-          p: 0,
-          '& > span': {
-            border: `1px solid ${'transparent'}`,
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '10px',
-            height: '10px',
-            maxW: '10px',
-            maxH: '10px',
-            p: '10px',
-            overflow: 'clip',
-            textIndent: '-9999rem',
-            '&::after': {
-              content: '""',
-              display: 'block',
-              background: 'white',
-              borderRadius: '50%',
-              width: '5px',
-              height: '5px',
-              minW: '5px',
-              minH: '5px',
-            },
-          },
-          '&.active': {
-            '& > span': {
-              border: `1px solid ${'white'}`,
-            },
-          },
-        },
-      }}
     >
-      <Box fontSize="xs" fontWeight={100}>
-        {activeSection}
+      <Box position="relative" display="flex" alignItems="center" height="100%">
+        <VStack
+          spacing={2}
+          minW={5}
+          zIndex={400}
+          sx={{
+            button: {
+              background: 'transparent',
+              borderRadius: '50%',
+              width: '20px',
+              height: '20px',
+              minW: '20px',
+              maxH: '20px',
+              p: 0,
+              '& > span': {
+                border: `1px solid rgba(255,255,255,0.0)`,
+                borderRadius: '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '10px',
+                height: '10px',
+                maxW: '10px',
+                maxH: '10px',
+                p: '10px',
+                overflow: 'clip',
+                textIndent: '-9999rem',
+                transition: 'all 0.3s 0.2s ease-in-out',
+                '&::after': {
+                  content: '""',
+                  display: 'block',
+                  background: 'white',
+                  borderRadius: '50%',
+                  width: '5px',
+                  height: '5px',
+                  minW: '5px',
+                  minH: '5px',
+                },
+              },
+              '&.active': {
+                '& > span': {
+                  border: `1px solid  rgba(255,255,255,1)`,
+                },
+              },
+            },
+          }}
+        >
+          <Box fontSize="xs" fontWeight={200}>
+            {`0${currentWaypoint + 1}`}
+          </Box>
+          <Button
+            className={currentWaypoint === 0 ? 'active' : ''}
+            colorScheme="ghost"
+            onClick={() => handleSectionNav('start')}
+          >
+            <Text as="span">01</Text>
+          </Button>
+          <Button
+            className={currentWaypoint === 1 ? 'active' : ''}
+            colorScheme="ghost"
+            onClick={() => handleSectionNav('wtf-is-a-metagame')}
+          >
+            <Text as="span">02</Text>
+          </Button>
+          <Button
+            className={currentWaypoint === 2 ? 'active' : ''}
+            colorScheme="ghost"
+            onClick={() => handleSectionNav('build-the-future')}
+          >
+            <Text as="span">03</Text>
+          </Button>
+          <Button
+            className={currentWaypoint === 3 ? 'active' : ''}
+            colorScheme="ghost"
+            onClick={() => handleSectionNav('the-wild-web')}
+          >
+            <Text as="span">04</Text>
+          </Button>
+          <Button
+            className={currentWaypoint === 4 ? 'active' : ''}
+            colorScheme="ghost"
+            onClick={() => handleSectionNav('what-do')}
+          >
+            <Text as="span">05</Text>
+          </Button>
+          <Button
+            className={currentWaypoint === 5 ? 'active' : ''}
+            colorScheme="ghost"
+            onClick={() => handleSectionNav('join-us')}
+          >
+            <Text as="span">06</Text>
+          </Button>
+        </VStack>
       </Box>
-      <Button className={active && 'active'} colorScheme="ghost">
-        <Text as="span">01</Text>
-      </Button>
-      <Button colorScheme="ghost">
-        <Text as="span">02</Text>
-      </Button>
-      <Button colorScheme="ghost">
-        <Text as="span">03</Text>
-      </Button>
-      <Button colorScheme="ghost">
-        <Text as="span">04</Text>
-      </Button>
-      <Button colorScheme="ghost">
-        <Text as="span">05</Text>
-      </Button>
-      <Button colorScheme="ghost">
-        <Text as="span">06</Text>
-      </Button>
-    </VStack>
+    </Box>
   );
 };