<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  w="full"
  alignItems="center"
  justifyContent="center"
>
  <Box
    bg="gray.50"
    _dark={{
      bg: "gray.800",
    }}
  >
    <Box
      maxW="7xl"
      w={{
        md: "3xl",
        lg: "4xl",
      }}
      mx="auto"
      py={{
        base: 12,
        lg: 16,
      }}
      px={{
        base: 4,
        lg: 8,
      }}
      display={{
        lg: "flex",
      }}
      alignItems={{
        lg: "center",
      }}
      justifyContent={{
        lg: "space-between",
      }}
    >
      <chakra.h2
        fontSize={{
          base: "3xl",
          sm: "4xl",
        }}
        fontWeight="extrabold"
        letterSpacing="tight"
        lineHeight="shorter"
        color="gray.900"
        _dark={{
          color: "gray.100",
        }}
      >
        <chakra.span display="block">Ready to dive in?</chakra.span>
        <chakra.span
          display="block"
          color="brand.600"
          _dark={{
            color: "gray.500",
          }}
        >
          Start your free trial today.
        </chakra.span>
      </chakra.h2>
      <Stack
        direction={{
          base: "column",
          sm: "row",
        }}
        mt={{
          base: 8,
          lg: 0,
        }}
        flexShrink={{
          lg: 0,
        }}
      >
        <Link
          w={["full", , "auto"]}
          display="inline-flex"
          alignItems="center"
          justifyContent="center"
          px={5}
          py={3}
          border="solid transparent"
          fontWeight="bold"
          rounded="md"
          shadow="md"
          _light={{
            color: "white",
          }}
          bg="brand.600"
          _dark={{
            bg: "brand.500",
          }}
          _hover={{
            bg: "brand.700",
            _dark: {
              bg: "brand.600",
            },
          }}
        >
          Get started
        </Link>
        <Link
          w={["full", , "auto"]}
          display="inline-flex"
          alignItems="center"
          justifyContent="center"
          px={5}
          py={3}
          border="solid transparent"
          fontWeight="bold"
          rounded="md"
          shadow="md"
          color="brand.600"
          bg="white"
          _hover={{
            bg: "brand.50",
          }}
        >
          Learn More
        </Link>
      </Stack>
    </Box>
  </Box>
</Flex>;

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  w="full"
  alignItems="center"
  justifyContent="center"
>
  <Box
    bgGradient="linear(to-r, white, purple.300)"
    _dark={{
      bg: "gray.800",
    }}
  >
    <SimpleGrid
      maxW="7xl"
      w={{
        md: "3xl",
        lg: "4xl",
      }}
      alignItems="center"
      columns={{
        base: 1,
        lg: 2,
        xl: 3,
      }}
      spacing={4}
      mx="auto"
      py={{
        base: 12,
        lg: 16,
      }}
      px={{
        base: 4,
        lg: 8,
      }}
      display={{
        lg: "flex",
      }}
    >
      <Box>
        <chakra.h2
          fontSize={{
            base: "3xl",
            sm: "4xl",
          }}
          fontWeight="extrabold"
          letterSpacing="tight"
          lineHeight="shorter"
          color="gray.900"
          _dark={{
            color: "gray.100",
          }}
          mb={6}
        >
          <chakra.span display="block">Ready to dive in?</chakra.span>
          <chakra.span
            display="block"
            color="brand.600"
            _dark={{
              color: "gray.500",
            }}
          >
            Start your free trial today.
          </chakra.span>
        </chakra.h2>
        <Stack
          direction={{
            base: "column",
            sm: "row",
          }}
          spacing={2}
        >
          <Box display="inline-flex" rounded="md" shadow="md">
            <chakra.a
              display="inline-flex"
              alignItems="center"
              justifyContent="center"
              px={5}
              py={3}
              border="solid transparent"
              fontWeight="bold"
              w="full"
              rounded="md"
              _light={{
                color: "white",
              }}
              bg="brand.600"
              _dark={{
                bg: "brand.500",
              }}
              _hover={{
                bg: "brand.700",
                _dark: {
                  bg: "brand.600",
                },
              }}
            >
              Get started
            </chakra.a>
          </Box>
          <Box ml={3} display="inline-flex" rounded="md" shadow="md">
            <chakra.a
              w="full"
              display="inline-flex"
              alignItems="center"
              justifyContent="center"
              px={5}
              py={3}
              border="solid transparent"
              fontWeight="bold"
              rounded="md"
              color="brand.600"
              bg="white"
              _hover={{
                bg: "brand.50",
              }}
            >
              Learn more
            </chakra.a>
          </Box>
        </Stack>
      </Box>
    </SimpleGrid>
  </Box>
</Flex>;

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  w="full"
  alignItems="center"
  justifyContent="center"
>
  <Flex
    justify="center"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    w="full"
  >
    <Box
      w={{
        base: "full",
        md: "75%",
        lg: "50%",
      }}
      px={4}
      py={20}
      textAlign={{
        base: "left",
        md: "center",
      }}
    >
      <chakra.span
        fontSize={{
          base: "3xl",
          sm: "4xl",
        }}
        fontWeight="extrabold"
        letterSpacing="tight"
        lineHeight="shorter"
        color="gray.900"
        _dark={{
          color: "gray.100",
        }}
        mb={6}
      >
        <chakra.span display="block">Ready to dive in?</chakra.span>
        <chakra.span
          display="block"
          color="brand.600"
          _dark={{
            color: "gray.500",
          }}
        >
          Start your free trial today.
        </chakra.span>
      </chakra.span>
      <Stack
        justifyContent={{
          base: "left",
          md: "center",
        }}
        direction={{
          base: "column",
          sm: "row",
        }}
        spacing={2}
        mt={2}
      >
        <Box display="inline-flex" rounded="md" shadow="md">
          <Link
            w="full"
            display="inline-flex"
            alignItems="center"
            justifyContent="center"
            px={5}
            py={3}
            border="solid transparent"
            fontWeight="bold"
            rounded="md"
            _light={{
              color: "white",
            }}
            bg="brand.600"
            _dark={{
              bg: "brand.500",
            }}
            _hover={{
              bg: "brand.700",
              _dark: {
                bg: "brand.600",
              },
            }}
          >
            Get started
          </Link>
        </Box>
        <Box ml={3} display="inline-flex" rounded="md" shadow="md">
          <Link
            w="full"
            display="inline-flex"
            alignItems="center"
            justifyContent="center"
            px={5}
            py={3}
            border="solid transparent"
            fontWeight="bold"
            rounded="md"
            color="brand.600"
            bg="white"
            _hover={{
              bg: "brand.50",
            }}
          >
            Learn more
          </Link>
        </Box>
      </Stack>
    </Box>
  </Flex>
</Flex>;

<SimpleGrid
  columns={{
    base: 1,
    md: 2,
  }}
  spacing={0}
>
  <Flex bg="brand.400">
    <Image
      src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80"
      alt="3 women looking at a laptop"
      fit="cover"
      w="full"
      h={{
        base: 64,
        md: "full",
      }}
      bg="gray.100"
      loading="lazy"
      opacity={0.4}
    />
  </Flex>
  <Flex
    direction="column"
    alignItems="start"
    justifyContent="center"
    px={{
      base: 4,
      md: 8,
      lg: 20,
    }}
    py={24}
    zIndex={3}
  >
    <chakra.span
      color="brand.600"
      _dark={{
        color: "gray.300",
      }}
      fontSize="lg"
      textTransform="uppercase"
      fontWeight="extrabold"
    >
      Award winning support
    </chakra.span>
    <chakra.h1
      mb={4}
      fontSize={{
        base: "4xl",
        md: "4xl",
        lg: "5xl",
      }}
      fontWeight="bold"
      color="brand.600"
      _dark={{
        color: "gray.300",
      }}
      lineHeight="shorter"
      textShadow="2px 0 currentcolor"
    >
      We&apos;re here to help
    </chakra.h1>
    <chakra.p
      pr={{
        base: 0,
        lg: 16,
      }}
      mb={4}
      fontSize="lg"
      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>
    <Box display="inline-flex" rounded="md" shadow="md">
      <chakra.a
        mt={2}
        display="inline-flex"
        alignItems="center"
        justifyContent="center"
        px={5}
        py={3}
        border="solid transparent"
        fontWeight="bold"
        w="full"
        rounded="md"
        _light={{
          color: "white",
        }}
        bg="brand.600"
        _dark={{
          bg: "brand.500",
        }}
        _hover={{
          bg: "brand.700",
          _dark: {
            bg: "brand.600",
          },
        }}
      >
        Visit the Help Centre
        <Icon as={FiExternalLink} ml={2} />
      </chakra.a>
    </Box>
  </Flex>
</SimpleGrid>;

<Flex
  direction={{
    base: "column",
    md: "row",
  }}
  _light={{
    bg: "brand.500",
  }}
  px={8}
  py={24}
  mx="auto"
>
  <Box
    w={{
      base: "full",
      md: 11 / 12,
      xl: 9 / 12,
    }}
    mx="auto"
    pr={{
      md: 20,
    }}
  >
    <chakra.h2
      fontSize={{
        base: "3xl",
        sm: "4xl",
      }}
      fontWeight="extrabold"
      lineHeight="shorter"
      color="white"
      _dark={{
        color: "gray.100",
      }}
      mb={6}
    >
      <chakra.span display="block">Ready to dive in?</chakra.span>
      <chakra.span
        display="block"
        color="white"
        _dark={{
          color: "gray.500",
        }}
      >
        Start your free trial today.
      </chakra.span>
    </chakra.h2>
    <chakra.p
      mb={6}
      fontSize={{
        base: "lg",
        md: "xl",
      }}
      color="gray.100"
      _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}
    >
      <Box display="inline-flex" rounded="md" shadow="md">
        <chakra.a
          display="inline-flex"
          alignItems="center"
          justifyContent="center"
          px={5}
          py={3}
          border="solid transparent"
          fontWeight="bold"
          w="full"
          rounded="md"
          _light={{
            color: "white",
          }}
          bg="brand.600"
          _dark={{
            bg: "brand.500",
          }}
          _hover={{
            bg: "brand.700",
            _dark: {
              bg: "brand.600",
            },
          }}
        >
          Sign up for free
        </chakra.a>
      </Box>
    </Stack>
  </Box>
  <Box
    w={{
      base: "full",
      md: 10 / 12,
    }}
    mx="auto"
    textAlign="center"
  >
    <Image
      w="full"
      rounded="lg"
      shadow="2xl"
      src="https://kutty.netlify.app/hero.jpg"
      alt="Hellonext feedback boards software screenshot"
    />
  </Box>
</Flex>;