Home, styles

frontend/pages/[slug]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
 
 export default function Page(page) {
   return (
-    <Box>
+    <Box className="page">
       <Heading>{page.title}</Heading>
       <div dangerouslySetInnerHTML={{ __html: page.content }}></div>
     </Box>

frontend/pages/_app.js

@@ -2,6 +2,7 @@ import App from 'next/app'
 import { ChakraProvider } from '@chakra-ui/react'
 import Layout from '~/components/layout'
 import theme from '~/src/theme'
+import '~/src/style.scss'
 
 export default function MyApp({ Component, pageProps, globals, menus }) {
   return (

frontend/pages/index.js

@@ -1,7 +1,9 @@
-export default function Home() {
-  return (
-    <main>
-      <pre>{JSON.stringify(new Date().toISOString().split('T').join(' ').substring(0, 16), null, 2)}</pre>
-    </main>
-  )
+import Page, { getStaticProps as gsp } from '~/pages/[slug]'
+
+export const getStaticProps = async () => {
+  return gsp({ params: { slug: 'home' } })
+}
+
+export default function Home(props) {
+  return <Page {...props} />
 }

frontend/pages/vendors/[slug]/index.js

@@ -39,7 +39,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
 
 export default function VendorPage(vendor) {
   return (
-    <>
+    <Box className="vendor">
       <Flex justifyContent="space-between" direction={['column', 'column', 'row']}>
         <Heading marginY="6">{vendor.name}</Heading>
         <Image
@@ -52,18 +52,7 @@ export default function VendorPage(vendor) {
           bg="#fff"
         />
       </Flex>
-      <Box
-        dangerouslySetInnerHTML={{ __html: vendor.long_description }}
-        sx={{
-          h5: {
-            fontFamily: 'var(--chakra-fonts-heading)',
-            fontWeight: 'var(--chakra-fontWeights-bold)',
-            fontSize: 'var(--chakra-fontSizes-xl)',
-            marginTop: 'var(--chakra-space-6)',
-            marginBottom: 'var(--chakra-space-1)',
-          },
-        }}
-      ></Box>
+      <Box dangerouslySetInnerHTML={{ __html: vendor.long_description }}></Box>
 
       <SimpleGrid columns={[1, 2, 3]} spacing={10}>
         <Box>
@@ -168,6 +157,6 @@ export default function VendorPage(vendor) {
           )}
         </Box>
       </SimpleGrid>
-    </>
+    </Box>
   )
 }

frontend/pages/vendors/index.js

@@ -134,7 +134,7 @@ export default function VendorsPage({ categories }) {
   }
 
   return (
-    <>
+    <Box className="vendors">
       <Flex alignItems="center" justifyContent="space-between" direction={['column', 'row']} mb="5" gap="5">
         <Heading size="lg">Vendors</Heading>
         <Box>{isValidating && <Spinner />}</Box>
@@ -302,6 +302,6 @@ export default function VendorsPage({ categories }) {
           </HStack>
         </>
       )}
-    </>
+    </Box>
   )
 }