✨ Basic layout

src/pages/_app.tsx

@@ -1,6 +1,8 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 import { Roboto } from "next/font/google";
+import { CapAppBar } from "@/components/CapAppBar";
 
 const fontRoboto = Roboto({
   subsets: ["latin"],
@@ -8,6 +10,18 @@ const fontRoboto = Roboto({
   display: "swap",
 });
 
+const siteTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#3949ab",
+    },
+    secondary: {
+      main: "#1e88e5",
+    },
+  },
+});
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
@@ -16,7 +30,13 @@ export default function App({ Component, pageProps }: AppProps) {
           font-family: ${fontRoboto.style.fontFamily};
         }
       `}</style>
-      <Component {...pageProps} />
+
+      <ThemeProvider theme={siteTheme}>
+        <CssBaseline />
+
+        <CapAppBar />
+        <Component {...pageProps} />
+      </ThemeProvider>
     </>
   );
 }

src/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}

src/pages/index.tsx

@@ -1,9 +1,14 @@
-import { Button } from "@mui/material";
+import { Container, Typography } from "@mui/material";
 
 export default function Home() {
   return (
-    <div>
-      <Button>Say woah!</Button>
-    </div>
+    <main>
+      <Container sx={{ mt: 12 }}>
+        <Typography variant="h3" component="h1">
+          Welcome to <br />
+          the Solsynth Capital.
+        </Typography>
+      </Container>
+    </main>
   );
 }