upgrade

frontend/src/layouts/Default.tsx

@@ -0,0 +1,28 @@
+import Footer from "../components/Footer/footer";
+import ContactMeForm from "../components/Forms/ContactMe/ContactMeForm";
+import HomeNav from "../components/navbar/HomeNav";
+import Drone from "../components/ads/Drone/Drone";
+import Portfolio from "../components/ads/Portfolio/Portfolio";
+import Home from "../pages/home/home";
+import { Outlet } from "react-router";
+
+export default function HomeLayout(){
+    return(
+        <>
+            {/* Example usage of imported components, adjust as needed */}
+            
+            <HomeNav />
+            
+            <Home /> {/*page*/}
+            <div style={{margin: "10em 0"}}>
+                <Drone />
+            </div>
+            <Outlet />
+            <Portfolio />
+            <div style={{ margin: "6em auto", marginTop: "15em", maxWidth: "80vw" }}>
+                <ContactMeForm />
+            </div>
+            <Footer />
+        </>
+    )
+}

frontend/src/layouts/HomeLayout.tsx

@@ -0,0 +1,13 @@
+import Footer from "../components/Footer/footer";
+import { Outlet } from "react-router";
+import SiteNav from "../components/navbar/SiteNav";
+
+export default function HomeLayout(){
+    return(
+        <>
+            <SiteNav />
+            <Outlet />
+            <Footer />
+        </>
+    )
+}

frontend/src/layouts/LAYOUTS.md

@@ -0,0 +1,69 @@
+# Layouts in React Router
+
+## 📌 What is a Layout?
+A **layout** in React Router is just a **React component** that wraps multiple pages with shared structure or styling (e.g., header, footer, sidebar).
+
+Layouts usually contain:
+- Global UI elements (navigation, footer, etc.)
+- An `<Outlet />` component where nested routes will render their content
+
+---
+
+## 📂 Folder Structure Example
+
+src/  
+layouts/  
+├── MainLayout.jsx  
+└── AdminLayout.jsx  
+pages/  
+├── HomePage.jsx  
+├── AboutPage.jsx  
+└── DashboardPage.jsx  
+
+
+---
+
+## 🛠 How Layouts Are Used in Routes
+
+### 1. Layout as a Parent Route
+Use the layout component as the `element` of a **parent route** and place **pages** inside as nested routes.
+
+```jsx
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import MainLayout from "./layouts/MainLayout";
+import HomePage from "./pages/HomePage";
+import AboutPage from "./pages/AboutPage";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+```
+
+### 2. Inside the MainLayout.jsx
+
+```jsx
+import { Outlet } from "react-router-dom";
+
+export default function MainLayout() {
+  return (
+    <>
+      <header>Header</header>
+      <main>
+        <Outlet />
+      </main>
+      <footer>Footer</footer>
+    </>
+  );
+}
+```