add layout

web/src/App.tsx

@@ -5,9 +5,8 @@ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
-import './index.css'
+import { Layout } from './layouts'
 
 const extendedTheme = extendTheme(theme)
 
@@ -17,7 +16,7 @@ const App = () => (
       <ColorModeScript />
       <ChakraProvider theme={extendedTheme}>
         <RedwoodApolloProvider>
-          <Routes />
+          <Layout />
         </RedwoodApolloProvider>
       </ChakraProvider>
     </RedwoodProvider>

web/src/Routes.tsx

@@ -9,10 +9,13 @@
 
 import { Router, Route } from '@redwoodjs/router'
 
+import { HomePage } from './pages/HomePage'
+
 const Routes = () => {
   return (
     <Router>
       <Route notfound page={NotFoundPage} />
+      <Route path="/" page={HomePage} name="home" />
     </Router>
   )
 }

web/src/layouts/index.ts

+export * from './layout'

web/src/layouts/layout.tsx

+import React from 'react'
+
+import { Box, Container, Flex, HStack } from '@chakra-ui/react'
+
+import Routes from 'src/Routes'
+
+export const Layout: React.FC = () => {
+  return (
+    <HStack>
+      <Box bgColor="teal.50">{/* navbar */}</Box>
+      <Flex h="100vh" flexGrow="1" bgColor="white">
+        <Container maxW="lg" py="10" flexGrow="1">
+          <Routes />
+        </Container>
+      </Flex>
+    </HStack>
+  )
+}

web/src/pages/HomePage/home-page.tsx

+import React from 'react'
+
+import { Box, Heading, Text } from '@chakra-ui/react'
+
+export const HomePage: React.FC = () => {
+  return (
+    <Box>
+      <Heading as="h1" size="xl" mb="6">
+        Welcome to My App
+      </Heading>
+      <Text fontSize="lg" mb="4">
+        This is a simple example of how to add content to your app.
+      </Text>
+    </Box>
+  )
+}

web/src/pages/HomePage/index.ts

+export * from './home-page'