2nd half of initial commit

src/App.js

@@ -5,12 +5,14 @@ import Register from './pages/Dashboard/Dashboard';
 import Login from './pages/Login/Login';
 import Profile from './pages/Profile/Profile';
 import NotFound from './pages/NotFound/NotFound';
+import Home from './pages/Home/Home';
 
 const App = () => {
  return (
     <Router>
       <Routes>
-        <Route path="/" element={<Dashboard />} />
+		<Route path="/" element={<Home />} />
+		<Route path="/dashboard" element={<Dashboard />} />
         <Route path="/register" element={<Register />} />
         <Route path="/login" element={<Login />} />
         <Route path="/profile" element={<Profile />} />

src/pages/Home/Home.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Typography, Button, Modal, Container } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import './Home.css'; // Import the CSS file
+
+const Home = () => {
+ const [open, setOpen] = useState(true); // Assuming the modal should be open by default
+ const navigate = useNavigate();
+ const theme = useTheme();
+
+ // Simulate checking if the user is a returning user
+ const isReturningUser = false; // This should be replaced with actual logic
+
+ const handleClose = () => {
+    setOpen(false);
+ };
+
+ const handleNavigate = () => {
+    if (isReturningUser) {
+      navigate('/login');
+    } else {
+      navigate('/register');
+    }
+ };
+
+ useEffect(() => {
+    // This is where you would check if the user is a returning user
+    // For demonstration, we're setting isReturningUser to false
+    // In a real application, you would replace this with actual logic
+    // For example, checking localStorage or a backend service
+ }, []);
+
+ return (
+    <Container maxWidth="sm">
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="home-modal-title"
+        aria-describedby="home-modal-description"
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 400,
+            bgcolor: theme.palette.background.paper,
+            boxShadow: 24,
+            p: 4,
+          }}
+        >
+          <Typography id="home-modal-title" variant="h6" component="h2">
+            RadioLogger
+          </Typography>
+          <Typography id="home-modal-description" variant="body1">
+            A software tool that helps radio enthusiasts keep track of their radio communications and log their listening experiences.
+          </Typography>
+          <Button variant="contained" color="primary" onClick={handleNavigate}>
+            Go to {isReturningUser ? 'Login' : 'Register'}
+          </Button>
+        </Box>
+      </Modal>
+    </Container>
+ );
+};
+
+export default Home;

src/pages/NotFound/NotFound.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, Typography, Link } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+const NotFound = () => {
+ const navigate = useNavigate();
+
+ return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        backgroundColor: '#f5f5f5',
+        textAlign: 'center',
+      }}
+    >
+      <Typography variant="h1" sx={{ fontSize: '8em', color: '#4a4a4a' }}>
+        404
+      </Typography>
+      <Typography variant="body1" sx={{ fontSize: '1.5em', color: '#4a4a4a' }}>
+        Oops! The page you're looking for doesn't exist.
+      </Typography>
+      <Link
+        href="/"
+        underline="none"
+        sx={{
+          color: '#4a4a4a',
+          fontSize: '1.2em',
+          borderBottom: '1px solid #4a4a4a',
+          paddingBottom: '2px',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            color: '#2e2e2e',
+            borderBottomColor: '#2e2e2e',
+          },
+        }}
+        onClick={(e) => {
+          e.preventDefault();
+          navigate('/');
+        }}
+      >
+        Go Home
+      </Link>
+    </Box>
+ );
+};
+
+export default NotFound;

src/pages/Register/Register.jsx

@@ -1,20 +1,18 @@
 import React, { useState } from 'react';
 import { Button, TextField, Box, Typography } from '@mui/material';
-import { useHistory } from 'react-router-dom';
 import '../Login/Login.css'; // Import the CSS file
 
 const Register = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
- const history = useHistory();
 
  const handleRegister = (e) => {
     e.preventDefault();
     // Implement your registration logic here
     console.log('Registering user:', username, password, email);
     // After successful registration, redirect to login or dashboard
-    history.push('/login');
+    // history.push('/login');
  };
 
  return (