Added Home Page Component

webapp/src/App.jsx

@@ -1,14 +1,15 @@
-import React, { useState, useEffect } from 'react'
-import { Route, Routes } from 'react-router-dom'
-import Debug from './pages/Debug/Debug'
-import Threads from './components/GdbComponents/Threads/Threads'
-import LocalVariable from './components/GdbComponents/LocalVariable/LocalVariable'
-import Context from './components/GdbComponents/Context/Context'
-import MemoryMap from './components/GdbComponents/MemoryMap/MemoryMap'
-import BreakPoints from './components/GdbComponents/BreakPoints/BreakPoints'
-import Footer from './components/Footer/Footer'
-import Header from './components/Header/Header'
-import { DataState } from './context/DataContext'
+import React, { useState, useEffect } from "react";
+import { Route, Routes } from "react-router-dom";
+import Debug from "./pages/Debug/Debug";
+import Threads from "./components/GdbComponents/Threads/Threads";
+import LocalVariable from "./components/GdbComponents/LocalVariable/LocalVariable";
+import Context from "./components/GdbComponents/Context/Context";
+import MemoryMap from "./components/GdbComponents/MemoryMap/MemoryMap";
+import BreakPoints from "./components/GdbComponents/BreakPoints/BreakPoints";
+import Footer from "./components/Footer/Footer";
+import Header from "./components/Header/Header";
+import { DataState } from "./context/DataContext";
+import Home from "./pages/Home/Home";
 
 const App = () => {
   const { setDark, dark, isDarkMode, setDarkMode } = DataState()
@@ -28,8 +29,8 @@ const App = () => {
         toggleDarkMode={toggleDarkMode}
         dark={dark}
       />
-
       <Routes>
+        <Route path="/" element={<Home />} />
         <Route path="debug" element={<Debug />}>
           <Route path="threads" element={<Threads />} />
           <Route path="localVariable" element={<LocalVariable />} />

webapp/src/pages/Home/Home.css

@@ -0,0 +1,38 @@
+.home-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 62vh;
+  padding: 20px;
+  background-color: var(--main-background-color);
+  color: var(--main-color);
+  text-align: center;
+}
+
+.home-title {
+  color: #d77a30;
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+}
+
+.home-overview {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  max-width: 875px;
+}
+
+.start-debugging-button {
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  color: #fff;
+  background-color: var(--primary-orange, #e88f40);
+  border: none;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+}
+
+.start-debugging-button:hover {
+  background-color: #d77a30;
+}

webapp/src/pages/Home/Home.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Home.css';
+
+function Home() {
+  return (
+    <div className="home-container">
+      <h1 className="home-title">Welcome to GDB-UI</h1>
+      <p className="home-overview">
+        GDB-UI is a user-friendly interface built for the GNU Debugger (GDB). 
+        It provides a modern web-based UI for debugging applications, allowing developers to monitor program execution, inspect variables, set breakpoints, and more through an intuitive interface. 
+        GDB-UI simplifies the debugging process by integrating powerful GDB features with a sleek design, making it particularly useful for developers working with languages like C, C++, and Ada. 
+        This interface offers a more accessible and visual approach to debugging, facilitating easier identification and resolution of code issues.
+      </p>
+      <Link to="/debug" className="start-debugging-button">Start Debugging</Link>
+    </div>
+  );
+}
+
+export default Home;