Create layout

Author: Jamesllllllllll

src/App.tsx

@@ -0,0 +1,13 @@
+import Header from "./Header";
+import Footer from "./Footer";
+import { Outlet } from "react-router";
+
+export default function Layout() {
+  return (
+    <>
+      <Header />
+      <Outlet />
+      <Footer />
+    </>
+  );
+}

src/components/Layout.tsx

@@ -30,6 +30,7 @@ a:hover {
 
 #root {
   width: 100vw;
+  min-height: 100vh;
 }
 
 body {

src/index.css

@@ -1,16 +1,23 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router";
+import { BrowserRouter, Routes, Route } from "react-router";
 import "./index.css";
-import App from "./App.tsx";
+import Layout from "./components/Layout.tsx";
+import Home from "./routes/Home.tsx";
+import About from "./routes/About.tsx";
 
 const root = document.getElementById("root");
 
 if (root) {
   createRoot(root).render(
     <StrictMode>
       <BrowserRouter>
-        <App />
+        <Routes>
+          <Route element={<Layout />}>
+            <Route index element={<Home />} />
+            <Route path="/about" element={<About />} />
+          </Route>
+        </Routes>
       </BrowserRouter>
     </StrictMode>,
   );

src/main.tsx

@@ -0,0 +1,7 @@
+export default function About() {
+  return (
+    <main className="min-h-[75vh] grid place-items-center bg-primary">
+      <p className="text-xl">About page</p>
+    </main>
+  );
+}

src/routes/About.tsx

@@ -0,0 +1,13 @@
+import Hero from "../components/Hero";
+import Features from "../components/Features";
+import CTA from "../components/CTA";
+
+export default function Home() {
+  return (
+    <>
+      <Hero />
+      <Features />
+      <CTA />
+    </>
+  );
+}