import * as React from "react";
import { Heading, Text, Flex, SlideFade } from "@chakra-ui/react";
import { motion } from "framer-motion";

export default function HeroSection() {
  return (
    <>
      <Flex h={"55vh"} justifyContent="center" align="center">
        <SlideFade in={true} offsetY="50vh">
          <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
            <Heading
              fontWeight={600}
              fontSize={{ base: "2xl", sm: "4xl", md: "6xl" }}
              lineHeight={"110%"}
            >
              <Text textShadow="1px 1px #9c1786">Make notes for </Text>
              <Text
                as={"span"}
                color={"green.400"}
                bgGradient="linear(to-r, green.200, pink.500)"
                bgClip="text"
              >
                your daily work
              </Text>
            </Heading>
          </motion.div>
        </SlideFade>
      </Flex>
    </>
  );
}