Add thanks page

3 years ago · 8013c64eb5
parent 3bdac7c7d9
commit 8013c64eb5
1 changed files with 105 additions and 0 deletions
--- a/pages/thanks.tsx
+++ b/pages/thanks.tsx
@ -0,0 +1,105 @@
+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'
+              />
+            </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>
+  );
+}