import React from 'react'
import { Link } from 'react-router-dom'
import { VStack, Image, Button, Heading, Flex, Center } from '@chakra-ui/react'

const Home = () => {
  return (
    <Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
      <Center w={'100%'}>
        <VStack spacing={4} align={'center'} margin={'auto'}>
          <Image src="/assets/Logo.svg" alt="Games Database Logo"/>
          <Heading as="h2" fontSize={'1.7em'} fontWeight={'normal'}>Welcome to your Games Database</Heading>
          <Button as={Link} to="/login" size='lg' variant='outline' fontSize='1.25rem'>
            Login
          </Button>
        </VStack>
      </Center>
    </Flex>
  )
}

export default Home
