<Flex
  w="full"
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  alignItems="center"
  justifyContent="center"
>
  <Box
    maxW="7xl"
    px={4}
    mx="auto"
    textAlign={{
      base: "left",
      md: "center",
    }}
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    rounded="md"
    shadow="base"
  >
    <Box
      px={[0, , 4]}
      py={20}
      borderWidth="1"
      color="gray.100"
      _dark={{
        color: "gray.700",
      }}
    >
      <Box w={["full", , "60%"]} mx="auto">
        <Text
          mb={2}
          fontSize="5xl"
          fontWeight={["bold", , "extrabold"]}
          lineHeight="tight"
        >
          $9
          <chakra.span
            fontSize="2xl"
            fontWeight="medium"
            color="gray.600"
            _dark={{
              color: "gray.400",
            }}
          >
            {" "}
            per month
          </chakra.span>
        </Text>
        <chakra.p
          mb={6}
          fontSize={["lg", , "xl"]}
          color="gray.600"
          _dark={{
            color: "gray.400",
          }}
        >
          One plan for any organization—from startups to Fortune 500s. We offer
          50% off of for all students and universities. Please get in touch with
          us and provide proof of your status. We’ll get back to you with a
          discount.
        </chakra.p>
        <Stack
          display={["block", , "flex"]}
          spacing={2}
          justifyContent="center"
          direction={["column", , "row"]}
        >
          <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",
            }}
          >
            Contact Us
          </Link>
        </Stack>
      </Box>
    </Box>
  </Box>
</Flex>;

() => {
  const topBg = useColorModeValue("gray.100", "gray.700");
  const bottomBg = useColorModeValue("white", "gray.800");

  const Feature = (props) => {
    return (
      <Flex align="center">
        <Flex shrink={0}>
          <Icon
            boxSize={5}
            mt={1}
            mr={2}
            color="brand.500"
            _dark={{
              color: "brand.300",
            }}
            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>
        </Flex>
        <Box ml={4}>
          <chakra.span
            mt={2}
            color="gray.500"
            _dark={{
              color: "gray.400",
            }}
          >
            {props.children}
          </chakra.span>
        </Box>
      </Flex>
    );
  };

  return (
    <Flex
      boxSize="full"
      bg="#F9FAFB"
      _dark={{
        bg: "gray.600",
      }}
      p={10}
      alignItems="center"
      justifyContent="center"
    >
      <Box
        mx="auto"
        textAlign={{
          base: "left",
          md: "center",
        }}
        rounded="md"
        shadow="base"
        w="full"
        bg={bottomBg}
      >
        <Box pt={20} rounded="md" bg={topBg}>
          <Box w="full" px={[10, , 4]} mx="auto">
            <Text
              mb={2}
              fontSize="5xl"
              fontWeight="bold"
              lineHeight="tight"
              bgGradient="linear(to-r, brand.300, brand.600)"
              bgClip="text"
            >
              Simple transparent pricing
            </Text>
            <chakra.p
              mb={6}
              fontSize={["lg", , "xl"]}
              color="gray.600"
              _dark={{
                color: "gray.400",
              }}
            >
              If you're not satisfied, contact us and we'll refund you within
              the first 20 days.
            </chakra.p>
          </Box>
          <Box bgGradient={`linear(to-b, ${topBg} 50%, ${bottomBg} 50%)`}>
            <Flex
              rounded="md"
              mx={10}
              bg={bottomBg}
              shadow="xl"
              mb="100px"
              textAlign="left"
              direction={{
                base: "column",
                lg: "row",
              }}
            >
              <Stack spacing={8} p="45px" flex="0.7">
                <Text fontSize="3xl" fontWeight="bold" lineHeight="tight">
                  Lifetime Membership
                </Text>
                <chakra.p
                  fontSize={["sm", , "md"]}
                  color="gray.600"
                  _dark={{
                    color: "gray.400",
                  }}
                >
                  One plan for any organization—from startups to Fortune 500s.
                  We offer 50% off of for all students and universities. Please
                  get in touch with us and provide proof of your status.
                </chakra.p>
                <Flex align="center">
                  <Text
                    fontFamily="body"
                    whiteSpace="nowrap"
                    fontWeight="semibold"
                    textTransform="uppercase"
                    color="brand.400"
                  >
                    What's included
                  </Text>
                  <Flex
                    ml="15px"
                    w="full"
                    borderTopWidth="1px"
                    h="3px"
                    borderTopColor={topBg}
                  />
                </Flex>
                <SimpleGrid columns={[1, , 2, 1, 2]} spacingY={4}>
                  <Feature>Unlimited Projects</Feature>
                  <Feature>Email Tracking and Analytics </Feature>
                  <Feature>Email APIs, SMTP Relay, and Webhooks</Feature>
                  <Feature>1 Dedicated IP (Foundation 100k and up)</Feature>
                </SimpleGrid>
              </Stack>
              <Stack
                p="45px"
                flex="0.3"
                justify="center"
                align="center"
                bg="#F9FAFB"
                _dark={{
                  bg: "gray.900",
                }}
                borderRightRadius="md"
              >
                <Text fontSize="xl" fontWeight="semibold">
                  Pay once, use anytime
                </Text>
                <Flex
                  align="center"
                  fontSize="5xl"
                  fontWeight={["bold", , "extrabold"]}
                  lineHeight="tight"
                >
                  $500
                  <chakra.span
                    ml={2}
                    fontSize="2xl"
                    fontWeight="medium"
                    color="gray.500"
                    _dark={{
                      color: "gray.400",
                    }}
                  >
                    {" "}
                    USD
                  </chakra.span>
                </Flex>
                <Stack spacing={6}>
                  <Text
                    textDecor="underline"
                    color="gray.600"
                    _dark={{
                      color: "gray.400",
                    }}
                  >
                    Learn more about our membership
                  </Text>
                  <Button w="300px" colorScheme="brand" py={6}>
                    Get Access
                  </Button>
                  <Text align="center" fontWeight="semibold">
                    Get a free sample
                    <chakra.span
                      ml={2}
                      color="gray.500"
                      _dark={{
                        color: "gray.400",
                      }}
                      fontWeight="medium"
                    >
                      (50MB)
                    </chakra.span>
                  </Text>
                </Stack>
              </Stack>
            </Flex>
          </Box>
        </Box>
      </Box>
    </Flex>
  );
};

<Flex
  w="full"
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  alignItems="center"
  justifyContent="center"
>
  <SimpleGrid
    columns={[1, , 2]}
    gap="24px"
    mx="auto"
    textAlign={["left", , "center"]}
  >
    <Box
      bg="white"
      _dark={{
        bg: "gray.800",
      }}
      px={4}
      py={24}
      shadow="base"
      rounded="md"
    >
      <chakra.p
        mb={1}
        fontSize="xs"
        fontWeight="bold"
        letterSpacing="wide"
        textTransform="uppercase"
        color="gray.500"
        _dark={{
          color: "gray.400",
        }}
      >
        For Developers
      </chakra.p>
      <Text
        mb={2}
        fontSize="5xl"
        fontWeight={["bold", "extrabold"]}
        color="gray.900"
        _dark={{
          color: "gray.50",
        }}
        lineHeight="tight"
      >
        $9
        <chakra.span
          fontSize="2xl"
          fontWeight="medium"
          color="gray.600"
          _dark={{
            color: "gray.400",
          }}
        >
          {" "}
          per month
        </chakra.span>
      </Text>
      <chakra.p
        mb={6}
        fontSize="lg"
        color="gray.600"
        _dark={{
          color: "gray.500",
        }}
      >
        One plan for any organization—from startups to Fortune 500s. We offer
        50% off of for all students and universities. Please get in touch with
        us and provide proof of your status.
      </chakra.p>
      <Stack
        display={["block", , "flex"]}
        spacing={2}
        justifyContent="center"
        direction={["column", , "row"]}
      >
        <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",
          }}
        >
          Contact Us
        </Link>
      </Stack>
    </Box>

    <Box
      bg="white"
      _dark={{
        bg: "gray.800",
      }}
      px={4}
      py={24}
      shadow="base"
      rounded="md"
    >
      <chakra.p
        mb={1}
        fontSize="xs"
        fontWeight="bold"
        letterSpacing="wide"
        textTransform="uppercase"
        color="gray.500"
        _dark={{
          color: "gray.400",
        }}
      >
        For Designers
      </chakra.p>
      <Text
        mb={2}
        fontSize="5xl"
        fontWeight={["bold", "extrabold"]}
        color="gray.900"
        _dark={{
          color: "gray.50",
        }}
        lineHeight="tight"
      >
        $19
        <chakra.span
          fontSize="2xl"
          fontWeight="medium"
          color="gray.600"
          _dark={{
            color: "gray.400",
          }}
        >
          {" "}
          per month
        </chakra.span>
      </Text>
      <chakra.p
        mb={6}
        fontSize="lg"
        color="gray.600"
        _dark={{
          color: "gray.500",
        }}
      >
        One plan for any organization—from startups to Fortune 500s. We offer
        50% off of for all students and universities. Please get in touch with
        us and provide proof of your status.
      </chakra.p>
      <Stack
        display={["block", , "flex"]}
        spacing={2}
        justifyContent="center"
        direction={["column", , "row"]}
      >
        <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",
          }}
        >
          Contact Us
        </Link>
      </Stack>
    </Box>
  </SimpleGrid>
</Flex>;

() => {
  const topBg = useColorModeValue("gray.800", "gray.700");
  const bottomBg = useColorModeValue("white", "gray.800");
  const [bottomBgHex] = useToken("colors", [bottomBg]);

  const Feature = (props) => {
    return (
      <Flex align="center">
        <Flex shrink={0}>
          <Icon
            boxSize={5}
            mt={1}
            mr={2}
            color="brand.500"
            _dark={{
              color: "brand.300",
            }}
            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>
        </Flex>
        <Box ml={4}>
          <chakra.span
            mt={2}
            color="gray.700"
            _dark={{
              color: "gray.400",
            }}
          >
            {props.children}
          </chakra.span>
        </Box>
      </Flex>
    );
  };

  return (
    <Flex
      boxSize="full"
      bg="#F9FAFB"
      _dark={{
        bg: "gray.600",
      }}
      p={10}
      alignItems="center"
      justifyContent="center"
    >
      <Box
        mx="auto"
        textAlign={{
          base: "left",
          md: "center",
        }}
        rounded="md"
        shadow="base"
        w="full"
        bg={bottomBg}
      >
        <Box pt={20} rounded="md" bg={topBg}>
          <Box w="full" px={[10, , 4]} mx="auto">
            <chakra.p
              fontSize={["lg", , "xl"]}
              color="gray.300"
              textTransform="uppercase"
              fontWeight="semibold"
            >
              Pricing
            </chakra.p>
            <Text
              mb={2}
              fontSize={["2xl", , "5xl"]}
              fontWeight="bold"
              lineHeight="tight"
              color="white"
            >
              The right price for you, whoever you are
            </Text>
            <chakra.p mb={6} fontSize={["lg", , "xl"]} color="gray.400">
              Our plans scale for any organization—from startups to Fortune
              500s.
            </chakra.p>
          </Box>
          <Box
            bg={`linear-gradient(180deg, transparent 70%, ${bottomBgHex} 30%)`}
          >
            <SimpleGrid
              columns={[1, , , 2]}
              gap="24px"
              rounded="md"
              mx={[10, , 24]}
              textAlign="left"
            >
              <Box
                bg="white"
                _dark={{
                  bg: "gray.800",
                }}
                pt={10}
                shadow="lg"
                rounded="md"
              >
                <Flex direction="column">
                  <Box px={10} pb={5}>
                    <Badge
                      mb={1}
                      fontSize="xs"
                      letterSpacing="wide"
                      colorScheme="brand"
                      fontWeight="medium"
                      rounded="full"
                      px={4}
                      py={1}
                    >
                      Standard
                    </Badge>
                    <Text
                      mb={2}
                      fontSize="5xl"
                      fontWeight={["bold", "extrabold"]}
                      color="gray.900"
                      _dark={{
                        color: "gray.50",
                      }}
                      lineHeight="tight"
                    >
                      $52
                      <chakra.span
                        fontSize="2xl"
                        fontWeight="medium"
                        color="gray.600"
                        _dark={{
                          color: "gray.400",
                        }}
                      >
                        {" "}
                        /mo{" "}
                      </chakra.span>
                    </Text>
                    <chakra.p
                      mb={6}
                      fontSize="md"
                      color="gray.500"
                      _dark={{
                        color: "gray.500",
                      }}
                    >
                      One plan for any organization—from startups to Fortune
                      500s. We offer 50% off of for all students and
                      universities. Please get in touch with us and provide
                      proof of your status.
                    </chakra.p>
                  </Box>
                  <Flex
                    px={10}
                    pt={5}
                    pb={10}
                    direction="column"
                    bg="gray.50"
                    _dark={{
                      bg: "gray.900",
                    }}
                    roundedBottom="md"
                  >
                    <Stack mb={5} spacing={4}>
                      <Feature>Granular access controls</Feature>
                      <Feature>Custom components</Feature>
                      <Feature>Deploy on-premises</Feature>
                      <Feature>Identity management</Feature>
                    </Stack>
                    <Link
                      w="full"
                      display="inline-flex"
                      alignItems="center"
                      justifyContent="center"
                      px={5}
                      py={3}
                      border="solid transparent"
                      fontWeight="semibold"
                      rounded="md"
                      shadow="md"
                      _light={{
                        color: "white",
                      }}
                      bg="gray.800"
                      _dark={{
                        bg: "brand.500",
                      }}
                      _hover={{
                        bg: "gray.700",
                        _dark: {
                          bg: "brand.600",
                        },
                      }}
                    >
                      Get started
                    </Link>
                  </Flex>
                </Flex>
              </Box>
              <Box
                bg="white"
                _dark={{
                  bg: "gray.800",
                }}
                pt={10}
                shadow="lg"
                rounded="md"
              >
                <Flex direction="column">
                  <Box px={10} pb={5}>
                    <Badge
                      mb={1}
                      fontSize="xs"
                      letterSpacing="wide"
                      colorScheme="brand"
                      fontWeight="medium"
                      rounded="full"
                      px={4}
                      py={1}
                    >
                      Enterprise
                    </Badge>
                    <Text
                      mb={2}
                      fontSize="5xl"
                      fontWeight={["bold", "extrabold"]}
                      color="gray.900"
                      _dark={{
                        color: "gray.50",
                      }}
                      lineHeight="tight"
                    >
                      $82
                      <chakra.span
                        fontSize="2xl"
                        fontWeight="medium"
                        color="gray.600"
                        _dark={{
                          color: "gray.400",
                        }}
                      >
                        {" "}
                        /mo{" "}
                      </chakra.span>
                    </Text>
                    <chakra.p
                      mb={6}
                      fontSize="md"
                      color="gray.500"
                      _dark={{
                        color: "gray.500",
                      }}
                    >
                      One plan for any organization—from startups to Fortune
                      500s. We offer 50% off of for all students and
                      universities. Please get in touch with us and provide
                      proof of your status.
                    </chakra.p>
                  </Box>
                  <Flex
                    px={10}
                    pt={5}
                    pb={10}
                    direction="column"
                    bg="gray.50"
                    _dark={{
                      bg: "gray.900",
                    }}
                    roundedBottom="md"
                  >
                    <Stack mb={5} spacing={4}>
                      <Feature>Granular access controls</Feature>
                      <Feature>Custom components</Feature>
                      <Feature>Deploy on-premises</Feature>
                      <Feature>Identity management</Feature>
                    </Stack>
                    <Link
                      w="full"
                      display="inline-flex"
                      alignItems="center"
                      justifyContent="center"
                      px={5}
                      py={3}
                      border="solid transparent"
                      fontWeight="semibold"
                      rounded="md"
                      shadow="md"
                      _light={{
                        color: "white",
                      }}
                      bg="gray.800"
                      _dark={{
                        bg: "brand.500",
                      }}
                      _hover={{
                        bg: "gray.700",
                        _dark: {
                          bg: "brand.600",
                        },
                      }}
                    >
                      Get started
                    </Link>
                  </Flex>
                </Flex>
              </Box>
            </SimpleGrid>
            <Flex
              mb="100px"
              mx={[10, , 24]}
              p={10}
              mt={5}
              rounded="md"
              bg="#F9FAFB"
              _dark={{
                bg: "gray.700",
              }}
              align="center"
              direction={["column", , "row"]}
            >
              <Stack flex="0.8" pr={10}>
                <Badge
                  mb={1}
                  fontSize="xs"
                  letterSpacing="wide"
                  colorScheme="gray"
                  fontWeight="medium"
                  rounded="full"
                  px={4}
                  py={1}
                  w="fit-content"
                >
                  Discounted
                </Badge>
                <Text textAlign="left">
                  We offer <chakra.span fontWeight="bold">50%</chakra.span> off
                  of for all students and universities. Please get in touch with
                  us and provide proof of your status.
                </Text>
              </Stack>
              <Link
                w={["full", , "auto"]}
                display="inline-flex"
                alignItems="center"
                justifyContent="center"
                px={5}
                py={3}
                mt={[5, , 0]}
                border="solid transparent"
                fontWeight="semibold"
                rounded="md"
                shadow="md"
                h="fit-content"
                color="brand.600"
                _dark={{
                  color: "white",
                }}
                bg="white"
                _hover={{
                  bg: "brand.50",
                  _dark: {
                    bg: "gray.900",
                  },
                }}
                flex="0.2"
              >
                Get Discount
              </Link>
            </Flex>
          </Box>
        </Box>
      </Box>
    </Flex>
  );
};

() => {
  const Feature = (props) => {
    return (
      <Flex alignSelf="start" w="full">
        <Icon
          boxSize={5}
          mt={1}
          mr={2}
          _light={{
            color: "green.500",
          }}
          viewBox="0 0 20 20"
          fill="currentColor"
          as={IoCheckmark}
        />
        <chakra.p
          fontSize="lg"
          color="gray.600"
          _dark={{
            color: "gray.400",
          }}
          {...props}
        />
      </Flex>
    );
  };

  return (
    <Flex
      bg="#edf3f8"
      _dark={{
        bg: "#3e3e3e",
      }}
      p={10}
      w="full"
      justifyContent="center"
      alignItems="center"
    >
      <Box w="full" pt={8}>
        <Flex
          direction={{
            base: "column",
            md: "row",
          }}
          justifyContent="center"
          mb={{
            base: 6,
            sm: 0,
          }}
        >
          <Flex
            flex={{
              sm: 1,
              lg: "initial",
            }}
            w={{
              lg: 2.3 / 7,
            }}
            rounded="lg"
            borderTopRightRadius={0}
            borderBottomLeftRadius="lg"
            bg="white"
            _dark={{
              bg: "gray.700",
            }}
            my={6}
            direction="column"
          >
            <VStack
              spacing={1}
              justifyContent="center"
              p={8}
              textAlign="center"
              w="full"
              shadow="xl"
            >
              <chakra.span fontSize="3xl" fontWeight="bold">
                Hobby
              </chakra.span>
              <HStack spacing={3}>
                <chakra.span
                  fontWeight="bold"
                  fontSize="6xl"
                  textShadow="2px 0 currentcolor"
                >
                  $79
                </chakra.span>
                <chakra.span
                  alignSelf="center"
                  fontSize="3xl"
                  _light={{
                    color: "gray.400",
                  }}
                >
                  /month
                </chakra.span>
              </HStack>
            </VStack>
            <VStack
              fontSize="sm"
              spacing={8}
              h="full"
              bg="gray.100"
              _dark={{
                bg: "gray.800",
              }}
              borderBottomLeftRadius="lg"
              p={12}
            >
              <VStack
                spacing={4}
                w="full"
                direction="column"
                alignItems="start"
              >
                <Feature>Suppression Management</Feature>
                <Feature>Email Tracking and Analytics </Feature>
                <Feature>99.99% Guaranteed Uptime SLA</Feature>
              </VStack>
              <Box
                w="full"
                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"
                  _dark={{
                    color: "gray.100",
                  }}
                  bg="white"
                  _hover={{
                    bg: "brand.50",
                    _dark: {
                      bg: "gray.700",
                    },
                  }}
                  cursor="pointer"
                >
                  Start your trial{" "}
                </chakra.a>
              </Box>
            </VStack>
          </Flex>

          <Flex
            flex={{
              base: 1,
              lg: "initial",
            }}
            w={{
              lg: 2.4 / 7,
            }}
            rounded="lg"
            bg="white"
            _dark={{
              bg: "gray.700",
            }}
            mt={{
              base: 4,
              sm: -4,
            }}
            shadow="xl"
            zIndex={30}
            direction="column"
          >
            <VStack
              spacing={1}
              justifyContent="center"
              p={8}
              textAlign="center"
              w="full"
              shadow="xl"
            >
              <chakra.span fontSize="3xl" fontWeight="bold">
                Growth
              </chakra.span>
              <HStack spacing={3}>
                <chakra.span
                  fontWeight="bold"
                  fontSize="6xl"
                  textShadow="2px 0 currentcolor"
                >
                  $149
                </chakra.span>
                <chakra.span
                  alignSelf="center"
                  fontSize="3xl"
                  _light={{
                    color: "gray.400",
                  }}
                >
                  /month
                </chakra.span>
              </HStack>
            </VStack>
            <VStack
              fontSize="sm"
              h="full"
              roundedBottom="lg"
              spacing={8}
              bg="gray.100"
              _dark={{
                bg: "gray.800",
              }}
              p={12}
            >
              <VStack
                spacing={4}
                w="full"
                direction="column"
                alignItems="start"
              >
                <Feature>Suppression Management</Feature>
                <Feature>Email Tracking and Analytics </Feature>
                <Feature>99.99% Guaranteed Uptime SLA</Feature>
                <Feature>1,000 Email Address Validations</Feature>
                <Feature>Limited 24/7 Ticket Support</Feature>
              </VStack>
              <Box display="inline-flex" rounded="md" shadow="md" w="full">
                <chakra.a
                  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",
                    },
                  }}
                  cursor="pointer"
                >
                  Get started
                </chakra.a>
              </Box>
            </VStack>
          </Flex>

          <Flex
            flex={{
              sm: 1,
              lg: "initial",
            }}
            w={{
              lg: 2.3 / 7,
            }}
            roundedTop="lg"
            borderBottomRightRadius="lg"
            borderTopLeftRadius={0}
            bg="white"
            _dark={{
              bg: "gray.700",
            }}
            my={6}
            direction="column"
          >
            <VStack
              spacing={1}
              justifyContent="center"
              p={8}
              textAlign="center"
              w="full"
              shadow="xl"
            >
              <chakra.span fontSize="3xl" fontWeight="bold">
                Scale
              </chakra.span>
              <HStack spacing={3}>
                <chakra.span
                  fontWeight="bold"
                  fontSize="6xl"
                  textShadow="2px 0 currentcolor"
                >
                  $349
                </chakra.span>
                <chakra.span
                  alignSelf="center"
                  fontSize="3xl"
                  _light={{
                    color: "gray.400",
                  }}
                >
                  /month
                </chakra.span>
              </HStack>
            </VStack>
            <VStack
              fontSize="sm"
              spacing={8}
              h="full"
              bg="gray.100"
              _dark={{
                bg: "gray.800",
              }}
              borderBottomRightRadius="lg"
              p={12}
            >
              <VStack
                spacing={4}
                w="full"
                direction="column"
                alignItems="start"
              >
                <Feature>Suppression Management</Feature>
                <Feature>Email Tracking and Analytics </Feature>
                <Feature>99.99% Guaranteed Uptime SLA</Feature>
              </VStack>
              <Box
                w="full"
                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"
                  _dark={{
                    color: "gray.100",
                  }}
                  bg="white"
                  _hover={{
                    bg: "brand.50",
                    _dark: {
                      bg: "gray.700",
                    },