fix formatting and add in data fetching

src/App.tsx

@@ -1,62 +1,64 @@
-import { useState, useEffect, useMemo } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { HelmetProvider, Helmet } from 'react-helmet-async';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-
-import getTheme from './theme/theme';
-import ColorModeContext from './utils/ColorModeContext';
-import Layout from './layout/Layout';
-import Home from './pages/Home';
+import { useState, useEffect, useMemo } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { HelmetProvider, Helmet } from 'react-helmet-async'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 
+import getTheme from './theme/theme'
+import ColorModeContext from './utils/ColorModeContext'
+import Layout from './layout/Layout'
+import Home from './pages/Home'
+import About from './pages/About'
+import Pricing from './pages/Pricing'
 
 const App = (): JSX.Element => {
-  const [mode, setMode] = useState('light');
-  const colorMode = useMemo(
-    () => ({
-      // The theme mode switch will invoke this method
-      toggleColorMode: () => {
-        window.localStorage.setItem(
-          'themeMode',
-          mode === 'dark' ? 'light' : 'dark'
-        );
-        setMode((prevMode) => (prevMode === 'dark' ? 'light' : 'dark'));
-      },
-    }),
-    [mode]
-  );
-
-  useEffect(() => {
-    try {
-      const localTheme = window.localStorage.getItem('themeMode');
-      localTheme ? setMode(localTheme) : setMode('light');
-    } catch {
-      setMode('light');
-    }
+    const [mode, setMode] = useState('light')
+    const colorMode = useMemo(
+        () => ({
+            // The theme mode switch will invoke this method
+            toggleColorMode: () => {
+                window.localStorage.setItem(
+                    'themeMode',
+                    mode === 'dark' ? 'light' : 'dark'
+                )
+                setMode((prevMode) => (prevMode === 'dark' ? 'light' : 'dark'))
+            },
+        }),
+        [mode]
+    )
 
-  }, []);
+    useEffect(() => {
+        try {
+            const localTheme = window.localStorage.getItem('themeMode')
+            localTheme ? setMode(localTheme) : setMode('light')
+        } catch {
+            setMode('light')
+        }
+    }, [])
 
-  return (
-    <HelmetProvider>
-      <Helmet
-        titleTemplate="%s | My Totally Serious Saas Business"
-        defaultTitle="My Totally Serious Saas Business | Seriously Saasy"
-      />
-      <ColorModeContext.Provider value={colorMode}>
-        <ThemeProvider theme={getTheme(mode)}>
-          <CssBaseline />
-          <BrowserRouter>
-            <Layout>
-              <Routes>
-                <Route path='/' element={<Home />} />
-                <Route path="*" element={<Home />} />
-              </Routes>
-            </Layout>
-          </BrowserRouter>
-        </ThemeProvider>
-      </ColorModeContext.Provider>
-    </HelmetProvider>
-  );
-};
+    return (
+        <HelmetProvider>
+            <Helmet
+                titleTemplate="%s | My Totally Serious Saas Business"
+                defaultTitle="My Totally Serious Saas Business | Seriously Saasy"
+            />
+            <ColorModeContext.Provider value={colorMode}>
+                <ThemeProvider theme={getTheme(mode)}>
+                    <CssBaseline />
+                    <BrowserRouter>
+                        <Layout>
+                            <Routes>
+                                <Route path="/" element={<Home />} />
+                                <Route path="/about" element={<About />} />
+                                <Route path="/pricing" element={<Pricing />} />
+                                <Route path="*" element={<Home />} />
+                            </Routes>
+                        </Layout>
+                    </BrowserRouter>
+                </ThemeProvider>
+            </ColorModeContext.Provider>
+        </HelmetProvider>
+    )
+}
 
-export default App;
+export default App

src/components/Saas.tsx

@@ -0,0 +1,64 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+import { SaasInfo } from '../pages/Home'
+
+let USDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+})
+
+const Saas: React.FC<SaasInfo> = ({ name, type, revenue }): JSX.Element => {
+    const theme = useTheme()
+
+    return (
+        <div id="saas">
+            <Box
+                sx={{
+                    pt: 5,
+                    pb: 10,
+                    px: 2,
+                    backgroundColor: theme.palette.background.default,
+                }}
+            >
+                <Box marginBottom={4}>
+                    <Typography
+                        variant="h5"
+                        align="center"
+                        fontWeight={700}
+                        marginTop={theme.spacing(1)}
+                        gutterBottom
+                        sx={{
+                            color: theme.palette.text.primary,
+                            textTransform: 'uppercase',
+                        }}
+                    >
+                        Saas Name: {name}
+                    </Typography>
+                    <Typography
+                        variant="subtitle1"
+                        align="center"
+                        marginTop={theme.spacing(1)}
+                        gutterBottom
+                        color={theme.palette.text.secondary}
+                    >
+                        business type: {type}
+                    </Typography>
+                    <Typography
+                        variant="subtitle1"
+                        align="center"
+                        fontWeight={'bold'}
+                        marginTop={theme.spacing(1)}
+                        gutterBottom
+                        color={theme.palette.text.secondary}
+                    >
+                        Current revenue: {USDollar.format(revenue)}
+                    </Typography>
+                </Box>
+            </Box>
+        </div>
+    )
+}
+
+export default Saas