diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index aa773dc..ae63847 100644 --- a/webapp/src/App.jsx +++ b/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} /> - + } /> }> } /> } /> diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css new file mode 100644 index 0000000..25f3ac9 --- /dev/null +++ b/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; +} diff --git a/webapp/src/pages/Home/Home.jsx b/webapp/src/pages/Home/Home.jsx new file mode 100644 index 0000000..90e1d86 --- /dev/null +++ b/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 ( +
+

Welcome to GDB-UI

+

+ 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. +

+ Start Debugging +
+ ); +} + +export default Home; \ No newline at end of file