developer-roadmap/pages/thanks.tsx

import React from 'react';
import {
  Box, Button,
  Container,
  Flex,
  Heading,
  Image,
  Link,
  ListItem,
  SimpleGrid,
  Stack,
  Text,
  UnorderedList
} from '@chakra-ui/react';
import { GlobalHeader } from '../components/global-header';
import { OpensourceBanner } from '../components/opensource-banner';
import { UpdatesBanner } from '../components/updates-banner';
import { Footer } from '../components/footer';

export default function Thanks() {
  return (
    <Box bg='gray.50' minH='100vh'>
      <GlobalHeader />
      <Box mb='60px'>
        <Container maxW={'container.sm'} position='relative'>
          <Box mt='60px'>
            <Flex alignItems='center'>
              <Box width='100%'>
                <Heading mb='10px' fontWeight={700}>Thanks!</Heading>
                <Text>The project has been made possible by the all the wonderful humans and companies supporting the
                  project on <Link
                    fontWeight={600} textDecoration='underline' href='#'>GitHub Sponsors</Link> and we are truly
                  grateful for that.</Text>
              </Box>
              <Image width='140px'
                     rounded='100%'
                     src='https://media.giphy.com/media/l0HUgXEoxsNZjZNq8/giphy.gif?cid=790b76114c74e11ed7ce8d65995b6893524407ed7b7748bc&rid=giphy.gif&ct=g'
                     ml='50px'
                     d={['none', 'block']}
              />
            </Flex>

            <Box mt='30px'>
              <Heading mb='15px' fontSize='25px' as='h2'>Companies</Heading>

              <Stack spacing='10px'>
                <Box borderWidth={1} borderRadius='5px' p='20px' bg='teal.50'>
                  <Image
                    w='400px'
                    src='https://sindresorhus.com/assets/thanks/oss-capital-logo.svg'
                  />
                </Box>
                <Box borderWidth={1} borderRadius='5px' p='20px' bg='teal.50'>
                  <Image
                    w='250px'
                    src='https://logos-download.com/wp-content/uploads/2016/05/Forbes_logo_black-1.png'
                  />
                </Box>
                <Box borderWidth={1} borderRadius='5px' p='20px' bg='teal.50'>
                  <Image
                    w='300px'
                    src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Zalando_logo.svg'
                  />
                </Box>
              </Stack>
            </Box>

            <Box mt='40px'>
              <Heading mb='15px' fontSize='25px' as='h2'>Monthly Sponsors</Heading>
              <UnorderedList>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/MelnikovAG'>Alexander Blake</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/josephjacks'>Joseph Jacks</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/MustafaMagdi'>Mustafa Magdi</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/dmytbolko'>Dmytro Bolkachov</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/liquidaty'>Liquidaty</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/Lazy-AL'>Anri Lazash</Link></ListItem>
              </UnorderedList>
            </Box>

            <Box mt='40px'>
              <Heading mb='15px' fontSize='25px' as='h2'>Past or One Time Sponsors</Heading>
              <UnorderedList>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://digitalocean.com'>DigitalOcean</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/gabcvit'>Gabriel Checchia</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/hadasbro'>Slawomir Hadas</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/tugotron'>Victor Sevelev</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/matheusfelipeog'>Matheus Felipe</Link></ListItem>
                <ListItem mb='5px'><Link color='blue.500' fontWeight={500} href='https://github.com/emretanriverdi'>Emre Tanriverdi</Link></ListItem>
              </UnorderedList>
            </Box>

            <Box mt='40px' borderWidth={1} padding='20px' rounded='5px'>
              <Heading as='h2' mb='10px'>Support the Project</Heading>
              <Text mb='15px'>Sponsor me on GitHub to help ensure the continuity of the project.</Text>
              <Button colorScheme='green'>Sponsor me on GitHub</Button>
            </Box>
          </Box>
        </Container>
      </Box>

      <OpensourceBanner />
      <UpdatesBanner />
      <Footer />
    </Box>
  );
}