developer-roadmap/components/updates-banner.tsx

import {
  Box,
  Button,
  Container,
  Flex,
  Heading,
  Link,
  Text,
} from '@chakra-ui/react';
import siteConfig from '../content/site.json';

export function UpdatesBanner() {
  return (
    <Box
      borderTopWidth={1}
      pt={['40px', '40px', '70px']}
      pb={['40px', '45px', '80px']}
      textAlign="left"
      bg="brand.footer"
    >
      <Container maxW="container.md">
        <Heading
          color={'gray.100'}
          fontSize={['25px', '25px', '35px']}
          mb={['5px', '5px', '15px']}
        >
          Stay Informed
        </Heading>
        <Text
          color="gray.400"
          lineHeight="26px"
          fontSize={['15px', '15px', '16px']}
          mb="20px"
        >
          Subscribe yourself to get updates, new guides, videos and roadmaps in
          your inbox.
        </Text>

        <Flex flexDirection={['column', 'column', 'row']}>
          <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
            <Button
              as={Link}
              href="/signup"
              width={['full', 'auto']}
              fontSize={['14px', '14px', '16px']}
              variant="outline"
              borderWidth={2}
              colorScheme="green"
              _hover={{ color: 'green.200', textDecoration: 'none' }}
            >
              Subscribe to Updates
            </Button>
            <Text color="gray.500" fontSize="13px" mt="5px">
              Free subscription for updates
            </Text>
          </Box>
          <Box>
            <Button
              as={Link}
              href={siteConfig.url.sponsor}
              target="_blank"
              width={['full', 'auto']}
              fontSize={['14px', '14px', '16px']}
              _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
              colorScheme="yellow"
            >
              Updates & Paid Content
            </Button>
            <Text color="gray.500" fontSize="13px" mt="5px">
              Support the project by paying as little as{' '}
              <Text as="span" fontWeight={600}>
                5$ per month
              </Text>
            </Text>
          </Box>
        </Flex>
      </Container>
    </Box>
  );
}