feat(layout): add site-wide layout and navigation

Introduced a consistent layout component, including a new footer and a navigation bar, to improve the overall user experience and maintain a uniform structure across the application. Updated routes to embed all pages within the new layout. Simplified Home component structure by removing redundant Container.

src/components/Footer.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+
+const Footer = () => (
+  <footer className="bg-dark text-white mt-5 p-4 text-center">
+    <Container>
+      <Row>
+        <Col>
+          <p>&copy; {new Date().getFullYear()} CaffeinatedDomains. All rights reserved.</p>
+        </Col>
+      </Row>
+    </Container>
+  </footer>
+);
+
+export default Footer;

src/components/Home.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Container } from 'react-bootstrap';
 import './Home.css';
 
 const Home = () => (
-    <Container className="jumbotron">
-        <h1>Welcome to CaffeinatedDomains</h1>
-        <p>Your one-stop solution for domain management and leasing.</p>
-    </Container>
+  <div className="jumbotron">
+    <h1>Welcome to CaffeinatedDomains</h1>
+    <p>Your one-stop solution for domain management and leasing.</p>
+  </div>
 );
 
 export default Home;

src/components/Layout.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import Navbar from './Navbar';
+import Footer from './Footer';
+
+const Layout = ({ children }) => (
+  <div>
+    <Navbar />
+    <Container className="mt-5">
+      {children}
+    </Container>
+    <Footer />
+  </div>
+);
+
+export default Layout;

src/components/Navbar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const NavigationBar = () => (
+  <Navbar bg="dark" variant="dark" expand="lg">
+    <Container>
+      <Navbar.Brand as={Link} to="/">CaffeinatedDomains</Navbar.Brand>
+      <Navbar.Toggle aria-controls="basic-navbar-nav" />
+      <Navbar.Collapse id="basic-navbar-nav">
+        <Nav className="me-auto">
+          <Nav.Link as={Link} to="/">Home</Nav.Link>
+          <Nav.Link as={Link} to="/domains">Domains</Nav.Link>
+          <Nav.Link as={Link} to="/offers">Offers</Nav.Link>
+        </Nav>
+        <Nav>
+          <Nav.Link as={Link} to="/login">Login</Nav.Link>
+          <Nav.Link as={Link} to="/register">Register</Nav.Link>
+        </Nav>
+      </Navbar.Collapse>
+    </Container>
+  </Navbar>
+);
+
+export default NavigationBar;

src/routes/Routes.js

@@ -6,16 +6,19 @@ import Register from '../components/Register';
 import Domains from '../components/Domains';
 import Offers from '../components/Offers';
 import PrivateRoute from './PrivateRoute';
+import Layout from '../components/Layout';
 
 const AppRoutes = () => (
   <Router>
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/register" element={<Register />} />
-      <Route path="/domains" element={<PrivateRoute element={Domains} />} />
-      <Route path="/offers" element={<PrivateRoute element={Offers} />} />
-    </Routes>
+    <Layout>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/domains" element={<PrivateRoute element={Domains} />} />
+        <Route path="/offers" element={<PrivateRoute element={Offers} />} />
+      </Routes>
+    </Layout>
   </Router>
 );