() => {
  const Feature = (props) => (
    <Flex
      alignItems="center"
      color={null}
      _dark={{
        color: "white",
      }}
    >
      <Icon
        boxSize={4}
        mr={1}
        color="green.600"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fillRule="evenodd"
          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
          clipRule="evenodd"
        ></path>
      </Icon>
      {props.children}
    </Flex>
  );
  return (
    <Box px={4} py={32} mx="auto">
      <Box
        w={{
          base: "full",
          md: 11 / 12,
          xl: 8 / 12,
        }}
        textAlign={{
          base: "left",
          md: "center",
        }}
        mx="auto"
      >
        <chakra.h1
          mb={3}
          fontSize={{
            base: "4xl",
            md: "5xl",
          }}
          fontWeight={{
            base: "bold",
            md: "extrabold",
          }}
          color="gray.900"
          _dark={{
            color: "gray.100",
          }}
          lineHeight="shorter"
        >
          A secure, faster way to transfer.
        </chakra.h1>
        <chakra.p
          mb={6}
          fontSize={{
            base: "lg",
            md: "xl",
          }}
          color="gray.500"
          lineHeight="base"
        >
          We’re on a mission to bring transparency to finance. We charge as
          little as possible, and we always show you upfront. No hidden fees. No
          bad exchange rates. No surprises.
        </chakra.p>
        <SimpleGrid
          as="form"
          w={{
            base: "full",
            md: 7 / 12,
          }}
          columns={{
            base: 1,
            lg: 6,
          }}
          spacing={3}
          pt={1}
          mx="auto"
          mb={8}
        >
          <GridItem
            as="label"
            colSpan={{
              base: "auto",
              lg: 4,
            }}
          >
            <VisuallyHidden>Your Email</VisuallyHidden>
            <Input
              mt={0}
              size="lg"
              type="email"
              placeholder="Enter your email..."
              required
            />
          </GridItem>
          <Button
            as={GridItem}
            w="full"
            variant="solid"
            colSpan={{
              base: "auto",
              lg: 2,
            }}
            size="lg"
            type="submit"
            colorScheme="brand"
            cursor="pointer"
          >
            Get Started
          </Button>
        </SimpleGrid>
        <Stack
          display="flex"
          direction={{
            base: "column",
            md: "row",
          }}
          justifyContent={{
            base: "start",
            md: "center",
          }}
          mb={3}
          spacing={{
            base: 2,
            md: 8,
          }}
          fontSize="xs"
          color="gray.600"
        >
          <Feature>No credit card required</Feature>
          <Feature>14 days free</Feature>
          <Feature>Cancel anytime</Feature>
        </Stack>
      </Box>
    </Box>
  );
};

<Flex px={4} py={32} mx="auto">
  <Box
    mx="auto"
    w={{
      lg: 8 / 12,
      xl: 5 / 12,
    }}
  >
    <chakra.p
      mb={2}
      fontSize="xs"
      fontWeight="semibold"
      letterSpacing="wide"
      color="gray.400"
      textTransform="uppercase"
    >
      For Developers
    </chakra.p>
    <chakra.h1
      mb={3}
      fontSize={{
        base: "3xl",
        md: "4xl",
      }}
      fontWeight="bold"
      lineHeight="shorter"
      color="gray.900"
      _dark={{
        color: "white",
      }}
    >
      Focus on your apps
    </chakra.h1>
    <chakra.p
      mb={5}
      color="gray.500"
      fontSize={{
        md: "lg",
      }}
    >
      Today every company needs apps to engage their customers and run their
      businesses. Step up your ability to build, manage, and deploy great apps
      at scale with us.
    </chakra.p>
    <HStack>
      <Button
        as="a"
        w={{
          base: "full",
          sm: "auto",
        }}
        variant="solid"
        colorScheme="brand"
        size="lg"
        mb={{
          base: 2,
          sm: 0,
        }}
        cursor="pointer"
      >
        Sign up for free
      </Button>
      <Button
        as="a"
        w={{
          base: "full",
          sm: "auto",
        }}
        mb={{
          base: 2,
          sm: 0,
        }}
        size="lg"
        cursor="pointer"
      >
        Read our blog
      </Button>
    </HStack>
  </Box>
</Flex>;

<SimpleGrid
  columns={{
    base: 1,
    md: 2,
  }}
  spacing={0}
  _after={{
    bg: "brand.500",
    opacity: 0.25,
    pos: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    zIndex: -1,
    content: '" "',
  }}
>
  <Flex
    direction="column"
    alignItems="start"
    justifyContent="center"
    px={{
      base: 4,
      lg: 20,
    }}
    py={24}
  >
    <Badge
      color="white"
      px={3}
      py={1}
      mb={3}
      variant="solid"
      colorScheme="brand"
      rounded="full"
    >
      Pre Beta
    </Badge>
    <chakra.h1
      mb={6}
      fontSize={{
        base: "4xl",
        md: "4xl",
        lg: "5xl",
      }}
      fontWeight="bold"
      color="brand.600"
      _dark={{
        color: "gray.300",
      }}
      lineHeight="shorter"
    >
      Great customer relationships start here.
    </chakra.h1>
    <chakra.form w="full" mb={6}>
      <VisuallyHidden>Your Email</VisuallyHidden>
      <Box
        display={{
          base: "block",
          lg: "none",
        }}
      >
        <Input
          size="lg"
          color="brand.900"
          type="email"
          placeholder="Enter your email..."
          bg="white"
        />
        <Button
          w="full"
          mt={2}
          color="white"
          variant="solid"
          colorScheme="brand"
          size="lg"
          type="submit"
        >
          Get Started
        </Button>
      </Box>
      <InputGroup
        size="lg"
        w="full"
        display={{
          base: "none",
          lg: "flex",
        }}
      >
        <Input
          size="lg"
          color="brand.900"
          type="email"
          placeholder="Enter your email..."
          bg="white"
        />
        <InputRightElement w="auto">
          <Button
            color="white"
            variant="solid"
            colorScheme="brand"
            size="lg"
            type="submit"
            roundedLeft={0}
          >
            Get Started
          </Button>
        </InputRightElement>
      </InputGroup>
    </chakra.form>
    <chakra.p
      pr={{
        base: 0,
        lg: 16,
      }}
      mb={4}
      fontSize="sm"
      color="brand.600"
      _dark={{
        color: "gray.400",
      }}
      letterSpacing="wider"
    >
      Get the #1 Business Messenger and start delivering personalized
      experiences at every stage of the customer journey.
    </chakra.p>
  </Flex>
  <Box>
    <Image
      src="https://images.unsplash.com/photo-1531548731165-c6ae86ff6491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80"
      alt="3 women looking at a laptop"
      fit="cover"
      w="full"
      h={{
        base: 64,
        md: "full",
      }}
      bg="gray.100"
      loading="lazy"
    />
  </Box>
</SimpleGrid>;

<Box px={8} py={24} mx="auto">
  <Box
    w={{
      base: "full",
      md: 11 / 12,
      xl: 9 / 12,
    }}
    mx="auto"
    textAlign={{
      base: "left",
      md: "center",
    }}
  >
    <chakra.h1
      mb={6}
      fontSize={{
        base: "4xl",
        md: "6xl",
      }}
      fontWeight="bold"
      lineHeight="none"
      letterSpacing={{
        base: "normal",
        md: "tight",
      }}
      color="gray.900"
      _dark={{
        color: "gray.100",
      }}
    >
      All your{" "}
      <Text
        display={{
          base: "block",
          lg: "inline",
        }}
        w="full"
        bgClip="text"
        bgGradient="linear(to-r, green.400,purple.500)"
        fontWeight="extrabold"
      >
        customer feedback
      </Text>{" "}
      in one single place.
    </chakra.h1>
    <chakra.p
      px={{
        base: 0,
        lg: 24,
      }}
      mb={6}
      fontSize={{
        base: "lg",
        md: "xl",
      }}
      color="gray.600"
      _dark={{
        color: "gray.300",
      }}
    >
      Hellonext is a feature voting software where you can allow your users to
      vote on features, publish roadmap, and complete your customer feedback
      loop.
    </chakra.p>
    <Stack
      direction={{
        base: "column",
        sm: "row",
      }}
      mb={{
        base: 4,
        md: 8,
      }}
      spacing={2}
      justifyContent={{
        sm: "left",
        md: "center",
      }}
    >
      <Button
        as="a"
        variant="solid"
        colorScheme="brand"
        display="inline-flex"
        alignItems="center"
        justifyContent="center"
        w={{
          base: "full",
          sm: "auto",
        }}
        mb={{
          base: 2,
          sm: 0,
        }}
        size="lg"
        cursor="pointer"
      >
        Get Started
        <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
          <path
            fillRule="evenodd"
            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
            clipRule="evenodd"
          />
        </Icon>
      </Button>
      <Button
        as="a"
        colorScheme="gray"
        display="inline-flex"
        alignItems="center"
        justifyContent="center"
        w={{
          base: "full",
          sm: "auto",
        }}
        mb={{
          base: 2,
          sm: 0,
        }}
        size="lg"
        cursor="pointer"
      >
        Book a Demo
        <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
          <path
            fillRule="evenodd"
            d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
            clipRule="evenodd"
          />
        </Icon>
      </Button>
    </Stack>
  </Box>
  <Box
    w={{
      base: "full",
      md: 10 / 12,
    }}
    mx="auto"
    mt={20}
    textAlign="center"
  >
    <Image
      w="full"
      rounded="lg"
      shadow="2xl"
      src="https://kutty.netlify.app/hero.jpg"
      alt="Hellonext feedback boards software screenshot"
    />
  </Box>
</Box>;

<Box px={8} py={24} mx="auto">
  <SimpleGrid
    alignItems="center"
    w={{
      base: "full",
      xl: 11 / 12,
    }}
    columns={{
      base: 1,
      lg: 11,
    }}
    gap={{
      base: 0,
      lg: 24,
    }}
    mx="auto"
  >
    <GridItem
      colSpan={{
        base: "auto",
        lg: 7,
      }}
      textAlign={{
        base: "center",
        lg: "left",
      }}
    >
      <chakra.h1
        mb={4}
        fontSize={{
          base: "3xl",
          md: "4xl",
        }}
        fontWeight="bold"
        lineHeight={{
          base: "shorter",
          md: "none",
        }}
        color="gray.900"
        _dark={{
          color: "gray.200",
        }}
        letterSpacing={{
          base: "normal",
          md: "tight",
        }}
      >
        Ready to start your journey?
      </chakra.h1>
      <chakra.p
        mb={{
          base: 10,
          md: 4,
        }}
        fontSize={{
          base: "lg",
          md: "xl",
        }}
        fontWeight="thin"
        color="gray.500"
        letterSpacing="wider"
      >
        Low-latency voice and video feels like you’re in the same room. Wave
        hello over video, watch friends stream their games, or gather up and
        have a drawing session with screen share.
      </chakra.p>
    </GridItem>
    <GridItem
      colSpan={{
        base: "auto",
        md: 4,
      }}
    >
      <Box as="form" mb={6} rounded="lg" shadow="xl">
        <Center
          pb={0}
          color="gray.700"
          _dark={{
            color: "gray.600",
          }}
        >
          <chakra.p pt={2}>Start talking now</chakra.p>
        </Center>
        <SimpleGrid
          columns={1}
          px={6}
          py={4}
          spacing={4}
          borderBottom="solid 1px"
          color="gray.200"
          _dark={{
            color: "gray.700",
          }}
        >
          <Flex>
            <VisuallyHidden>First Name</VisuallyHidden>
            <Input mt={0} type="text" placeholder="First Name" />
          </Flex>
          <Flex>
            <VisuallyHidden>Email Address</VisuallyHidden>
            <Input mt={0} type="email" placeholder="Email Address" />
          </Flex>
          <Flex>
            <VisuallyHidden>Password</VisuallyHidden>
            <Input mt={0} type="password" placeholder="Password" />
          </Flex>
          <Button colorScheme="brand" w="full" py={2} type="submit">
            Sign up for free
          </Button>
        </SimpleGrid>
        <Flex px={6} py={4}>
          <Button
            py={2}
            w="full"
            colorScheme="blue"
            leftIcon={
              <Icon
                mr={1}
                aria-hidden="true"
                boxSize={6}
                viewBox="0 0 24 24"
                fill="currentColor"
                stroke="transparent"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28	c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233	c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934	C20.485,11.453,20.404,10.884,20.283,10.356z" />
              </Icon>
            }
          >
            Continue with Google
          </Button>
        </Flex>
      </Box>
      <chakra.p fontSize="xs" textAlign="center" color="gray.600">
        By signing up you agree to our{" "}
        <chakra.a color="brand.500">Terms of Service</chakra.a>
      </chakra.p>
    </GridItem>
  </SimpleGrid>
</Box>;