add sponsors grid

Author: VeckoTheGecko

src/components/sponsors.js

@@ -6,8 +6,11 @@ import {
   UnorderedList,
   ListItem,
   Link,
+  SimpleGrid,
+  Flex,
 } from '@chakra-ui/react'
 import React from 'react'
+import { Sponsors as data } from '@/data/sponsors'
 
 import { Heading } from '@/components/mdx'
 
@@ -135,6 +138,7 @@ const FundingSources = () => {
 }
 
 export const Sponsors = () => {
+  const sponsors = React.useMemo(() => data, [])
   return (
     <Box id={'sponsors'} as='section'>
       <Container maxW='container.lg' centerContent>
@@ -149,6 +153,29 @@ export const Sponsors = () => {
           </Text>
           <Image src={'funderlogos.png'} alt={'Collage of funder logos.'} />
 
+          <SimpleGrid
+            columns={{ base: 1, sm: 2, md: 2, lg: 4 }}
+            my={4}
+            spacing={'space-between'}
+            align={'center'}
+            justify={'center'}
+          >
+            {sponsors.map((sponsor, index) => (
+              <Flex
+                as={Link}
+                href={sponsor.url}
+                key={index}
+                w={64}
+                h={64}
+                align={'center'}
+                justify={'center'}
+                rounded={'full'}
+              >
+                <Image w={36} h={36} src={sponsor.logo} alt={sponsor.name} />
+              </Flex>
+            ))}
+          </SimpleGrid>
+
           <FundingSources />
         </Box>
       </Container>

src/data/sponsors.js

@@ -0,0 +1,12 @@
+export const Sponsors = [
+  {
+    name: 'Parcels',
+    logo: '/parcels-assets/logo-horo.svg',
+    url: 'https://www.example.com/',
+  },
+  {
+    name: 'Parcels',
+    logo: '/parcels-assets/logo-horo.svg',
+    url: 'https://www.example.com/',
+  }, // TODO: Update
+]