WIP

frontend/app/components/footer.js

@@ -0,0 +1,53 @@
+'use client'
+
+import { Box, Flex, Link, Stack, useColorMode, useColorModeValue } from '~/app/ui'
+
+export default function Footer({ siteName }) {
+  return (
+    <>
+      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
+        <Flex h={16} alignItems={'center'}>
+          <FooterMenu />
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+const FooterMenu = () => {
+  const linkColor = useColorModeValue('gray.600', 'gray.200')
+  const linkHoverColor = useColorModeValue('gray.800', 'white')
+
+  return (
+    <Stack direction={'row'} spacing={4} pl="4">
+      {NAV_ITEMS.map((navItem) => (
+        <Box key={navItem.label}>
+          <Link
+            p={2}
+            href={navItem.href ?? '#'}
+            fontSize={'sm'}
+            fontWeight={500}
+            color={linkColor}
+            _hover={{
+              textDecoration: 'none',
+              color: linkHoverColor,
+            }}
+          >
+            {navItem.label}
+          </Link>
+        </Box>
+      ))}
+    </Stack>
+  )
+}
+
+const NAV_ITEMS = [
+  {
+    label: 'Vendors',
+    href: '/vendors',
+  },
+  {
+    label: 'About Us',
+    href: '/about-us',
+  },
+]

frontend/app/layout.js

@@ -1,4 +1,5 @@
 import Header from '~/app/components/header'
+import Footer from '~/app/components/footer'
 import { Providers } from '~/app/providers'
 import { Container } from '~/app/ui'
 import directus from '~/lib/directus'
@@ -26,6 +27,7 @@ export default async function RootLayout({ children }) {
           <Container maxW="3xl">
             <Header siteName={globals.site_name} />
             {children}
+            <Footer />
           </Container>
         </Providers>
       </body>

frontend/app/vendors/page.js

@@ -1,5 +1,4 @@
-import Link from 'next/link'
-import { notFound } from 'next/navigation'
+import { Card, CardBody, Heading, Image, Link, LinkBox, LinkOverlay, SimpleGrid } from '~/app/ui'
 import directus from '~/lib/directus'
 
 const PER_PAGE = 50
@@ -21,16 +20,26 @@ export default async function VendorsPage({ params }) {
 
   return (
     <div>
-      <h1>Vendors ({meta.filter_count} total)</h1>
-      <ul>
+      <Heading size="lg" my={8}>
+        Vendors <small>({meta.filter_count} total)</small>
+      </Heading>
+      <SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
         {vendors.map((v) => (
-          <li>
-            <Link href={`/vendors/${v.slug}`} prefetch={false}>
-              {v.name}
-            </Link>
-          </li>
+          <LinkBox as={Card} rounded={4}>
+            <Image
+              roundedTop={4}
+              objectFit="cover"
+              src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
+              alt="Chakra UI"
+            />
+            <CardBody>
+              <LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
+                {v.name}
+              </LinkOverlay>
+            </CardBody>
+          </LinkBox>
         ))}
-      </ul>
+      </SimpleGrid>
     </div>
   )
 }