text: import Head from "next/head";
  import {
    useColorMode,
    Heading,
    Text,
    Flex,
    Stack,
    Button,
  } from "@chakra-ui/react";
  
  import Container from "../components/Container";
  
  export default function Index() {
    const { colorMode } = useColorMode();
    const colorSecondary = {
      light: "gray.700",
      dark: "gray.400",
    };
    return (
      <Container>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta charSet="utf-8" />
          <meta name="description" content="lorem ipsum"></meta>
          <meta property="og:url" content="" />
          <meta property="og:type" content="website" />
          <meta property="og:locale" content="en" />
          <meta property="og:image" content="" />
          <title>Lorem Ipsum</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Stack
          as="main"
          spacing={8}
          justifyContent="center"
          alignItems="flex-start"
          m="0 auto 4rem auto"
          maxWidth="700px"
          px={2}>
          <Flex
            flexDirection="column"
            justifyContent="flex-start"
            alignItems="flex-start"
            maxWidth="700px">
            <Heading mb={2}>Hi, I'm Lorem Ipsum</Heading>
            <Text color={colorSecondary[colorMode]}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ante
              nunc, finibus sit amet purus quis, congue vulputate ipsum. Phasellus
              lobortis bibendum orci, quis imperdiet lectus imperdiet porttitor.
            </Text>
            <Button
              data-splitbee-event="Button Click"
              data-splitbee-event-type="Resume">
              View Resume
            </Button>
          </Flex>
        </Stack>
      </Container>
    );
  }
  