Landing page.

rhaicode · Dec 30, 2021 · 6006107 · 6006107
1 parent 45fafe7
commit 6006107
Show file tree

Hide file tree

Showing 8 changed files with 240 additions and 8 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,30 @@
+import { Flex, Text } from '@chakra-ui/react'
+
+const Footer: React.FC = () => (
+  <Flex backgroundColor="targetBlue" color="white" height="250px">
+    <Flex
+      justifyContent="space-between"
+      alignItems="center"
+      my="auto"
+      w="100%"
+      borderTop="1px solid rgba(255,255,255,0.3)"
+      borderBottom="1px solid rgba(255,255,255,0.3)"
+      py="40px"
+    >
+      <Text as="span" textTransform="uppercase" fontSize="30px" ml="48px">
+        Greek Gods &amp; Mortals
+      </Text>
+      <Text
+        as="span"
+        textTransform="uppercase"
+        fontSize="18px"
+        className="plex"
+        mr="48px"
+      >
+        CONTACT
+      </Text>
+    </Flex>
+  </Flex>
+)
+
+export default Footer
diff --git a/src/components/Landing/WhoWillYouBe.tsx b/src/components/Landing/WhoWillYouBe.tsx
@@ -0,0 +1,45 @@
+import { Box, Grid, Text, Image, Flex } from '@chakra-ui/react'
+import styled from '@emotion/styled'
+
+const StyledBox = styled(Box)`
+  background: linear-gradient(105.6deg, #183544 16.92%, #0c2c3c 76.13%);
+  border: 1px solid rgba(255, 255, 255, 0.26);
+  padding: 20px 38px;
+`
+
+const WhoWillYouBe: React.FC = () => (
+  <Box backgroundColor="charcoal" color="white">
+    <Box maxW="1200px" mx="auto">
+      <Flex height="124px" />
+      <Flex alignItems="center" justifyContent="center" mb="60px">
+        <Text as="span" fontSize="5xl" mr="12px">
+          Who Will You Be?
+        </Text>
+        <Image src="/assets/png/kind.png" alt="sword" ml="8px" height="40px" />
+      </Flex>
+      <Grid templateColumns="repeat(2, 1fr)" columnGap="60px">
+        <Box>
+          <StyledBox height="450px" mb="40px" />
+          <Text as="span" fontSize="3xl">
+            Greek God
+          </Text>
+          <Text as="p" className="plex">
+            A further description of the game can go here.
+          </Text>
+        </Box>
+        <Box>
+          <StyledBox height="450px" mb="40px" />
+          <Text as="span" fontSize="3xl">
+            Human
+          </Text>
+          <Text as="p" className="plex">
+            A further description of the game can go here.
+          </Text>
+        </Box>
+      </Grid>
+    </Box>
+    <Flex height="300px" />
+  </Box>
+)
+
+export default WhoWillYouBe
diff --git a/src/components/Landing/YourWallet/Minting.tsx b/src/components/Landing/YourWallet/Minting.tsx
@@ -0,0 +1,59 @@
+import {
+  Box,
+  Flex,
+  Text,
+  Image,
+  NumberInput,
+  NumberInputField,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInputStepper,
+} from '@chakra-ui/react'
+import styled from '@emotion/styled'
+
+import ThemedButton from '../../../themed/Button'
+
+const StyledBox = styled(Box)`
+  background: linear-gradient(105.6deg, #183544 16.92%, #0c2c3c 76.13%);
+  border: 1px solid rgba(255, 255, 255, 0.26);
+  padding: 20px 38px;
+`
+const Minting: React.FC = () => (
+  <StyledBox position="relative">
+    <Flex alignItems="center">
+      <Text as="span" fontSize="4xl" mr="16px">
+        Minting
+      </Text>
+      <Image src="/assets/png/kind.png" alt="sword" ml="8px" height="40px" />
+    </Flex>
+    <Box>
+      <Flex className="plex">
+        <Text as="span" fontSize="lg" color="gold" mr="8px">
+          0/2000 GEN
+        </Text>
+        <Text as="span" fontSize="lg">
+          0 MINTED
+        </Text>
+      </Flex>
+    </Box>
+    <Flex
+      position="absolute"
+      w="calc(100% - 64px)"
+      direction="column"
+      mt="32px"
+    >
+      <NumberInput size="lg" min={1} max={10} step={1}>
+        <NumberInputField fontSize="22px" />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+      <ThemedButton size="lg" minW="160px" mt="24px" mx="auto">
+        MINT
+      </ThemedButton>
+    </Flex>
+  </StyledBox>
+)
+
+export default Minting
diff --git a/src/components/Landing/YourWallet/Staked.tsx b/src/components/Landing/YourWallet/Staked.tsx
@@ -0,0 +1,27 @@
+import { Box, Flex, Text, Image } from '@chakra-ui/react'
+import styled from '@emotion/styled'
+
+import ThemedButton from '../../../themed/Button'
+
+const StyledBox = styled(Box)`
+  background: linear-gradient(105.6deg, #183544 16.92%, #0c2c3c 76.13%);
+  border: 1px solid rgba(255, 255, 255, 0.26);
+  padding: 20px 38px;
+`
+const Staked: React.FC = () => (
+  <StyledBox>
+    <Flex alignItems="center">
+      <Text as="span" fontSize="4xl" mr="16px">
+        Staked
+      </Text>
+      <Image src="/assets/png/kind.png" alt="sword" ml="8px" height="40px" />
+    </Flex>
+    <Flex mt="24px">
+      <ThemedButton size="lg" minW="160px" mx="auto">
+        STAKE
+      </ThemedButton>
+    </Flex>
+  </StyledBox>
+)
+
+export default Staked
diff --git a/src/components/Landing/YourWallet/Unstaked.tsx b/src/components/Landing/YourWallet/Unstaked.tsx
@@ -0,0 +1,28 @@
+import { Box, Flex, Text, Image } from '@chakra-ui/react'
+import styled from '@emotion/styled'
+
+import ThemedButton from '../../../themed/Button'
+
+const StyledBox = styled(Box)`
+  background: linear-gradient(105.6deg, #183544 16.92%, #0c2c3c 76.13%);
+  border: 1px solid rgba(255, 255, 255, 0.26);
+  padding: 20px 38px;
+`
+
+const Unstaked: React.FC = () => (
+  <StyledBox>
+    <Flex alignItems="center">
+      <Text as="span" fontSize="4xl" mr="16px">
+        Unstaked
+      </Text>
+      <Image src="/assets/png/kind.png" alt="sword" ml="8px" height="40px" />
+    </Flex>
+    <Flex mt="24px">
+      <ThemedButton size="lg" minW="160px" mx="auto">
+        UNSTAKE
+      </ThemedButton>
+    </Flex>
+  </StyledBox>
+)
+
+export default Unstaked
diff --git a/src/components/Landing/YourWallet/index.tsx b/src/components/Landing/YourWallet/index.tsx
@@ -0,0 +1,33 @@
+import { Box, Flex, Grid, Text } from '@chakra-ui/react'
+
+import Minting from './Minting'
+import Staked from './Staked'
+import Unstaked from './Unstaked'
+
+const YourWallet: React.FC = () => (
+  <Box backgroundColor="charcoal" color="white" pb="40px">
+    <Box maxW="1200px" mx="auto">
+      <Flex pt="100px" textTransform="uppercase" fontSize="4xl">
+        <Text as="span">YOUR WALLET</Text>
+        <Text as="span" ml="36px" mr="16px">
+          0.00
+        </Text>
+        <Text as="span" color="gold">
+          $FAITH
+        </Text>
+      </Flex>
+      <Grid
+        templateColumns="repeat(3, 1fr)"
+        columnGap="24px"
+        height="300px"
+        mt="46px"
+      >
+        <Minting />
+        <Staked />
+        <Unstaked />
+      </Grid>
+    </Box>
+  </Box>
+)
+
+export default YourWallet
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
@@ -1,11 +1,21 @@
-import { Box } from '@chakra-ui/react'
 import Hero from '../components/Landing/Hero'
+import WhoWillYouBe from '../components/Landing/WhoWillYouBe'
+import YourWallet from '../components/Landing/YourWallet'
+import Footer from '../components/Footer'
 
-const Landing: React.FC = () => (
-  <>
-    <Hero />
-    <Box />
-  </>
-)
+import { useWallet } from '../hooks'
+
+const Landing: React.FC = () => {
+  const { currentAccount } = useWallet()
+
+  return (
+    <>
+      <Hero />
+      {currentAccount && <YourWallet />}
+      <WhoWillYouBe />
+      <Footer />
+    </>
+  )
+}
 
 export default Landing
diff --git a/src/theme.ts b/src/theme.ts
@@ -6,7 +6,7 @@ const theme = extendTheme({
     lightBlue: '#00A4F6',
     yellow: '#EDC433',
     gold: '#DDAC00',
-    charcoal: '#21262C',
+    charcoal: '#081C26',
   },
   fonts: {
     body: "'VT323', sans-serif",