text: import { Box, Center, Heading, Stack, Text } from "@chakra-ui/react"
  import dynamic from "next/dynamic"
  import Link from "next/link"
  import { BiLockOpenAlt } from "react-icons/bi"
  import withSignOutRoute from "../components/Router/withSignOutRoute"
  
  const Card = dynamic(import("../components/Core/Card/Card"))
  const SignForm = dynamic(import("../components/Authentication/Form/SignForm"))
  
  const SignIn = () => {
    return (
      <Box
        bgGradient="linear(0deg, #d7c4d7 0%, #8ae8f4 100%)"
        minH="100vh"
        py="50"
        px={{ base: "4", lg: "8" }}
      >
        <Box maxW="md" mx="auto">
          <Card boxShadow="xl">
            <Center pb={5}>
              <Text fontSize="3xl">
                <BiLockOpenAlt />
              </Text>
            </Center>
            <Heading textAlign="center" size="xl" fontWeight="extrabold" pb={10}>
              Login
            </Heading>
            <SignForm submitLabel="Sign in" type="singIn" />
            <Stack spacing="6">
              <Text mt="4" align="center" maxW="md" fontWeight="small">
                You do not have an account? <br />
                <Link href="/signup">Sign up</Link>
              </Text>
            </Stack>
          </Card>
        </Box>
      </Box>
    )
  }
  
  export default withSignOutRoute(SignIn)
  