Fix#2: Adds Landing Page

frontend/package.json

@@ -22,6 +22,8 @@
     "@mui/styled-engine-sc": "^6.4.6",
     "@mui/x-charts": "^7.27.1",
     "@mui/x-charts-pro": "^7.27.1",
+    "@mui/x-data-grid": "^7.28.2",
+    "@mui/x-date-pickers": "^7.28.2",
     "d3": "^7.9.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.485.0",

frontend/src/App.jsx

@@ -1,44 +1,26 @@
-import React, { useState } from 'react';
-import Navbar from './components/Navbar';
-import Dashboard from './components/Dashboard';
-import CheckLog from './components/CheckLog';
-import ChartLine from './components/ChartLine';
-import LogOut from './components/LogOut';
-import Collab from './components/Collab';
-import './App.css';
-
-function App() {
-  const [activeTab, setActiveTab] = useState('dashboard');
-
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'dashboard':
-        return <Dashboard />;
-      case 'checkLog':
-        return <CheckLog />;
-      case 'chartLine':
-        return <ChartLine />;
-      case 'logOut':
-        return <LogOut />;
-      default:
-        return <Dashboard />;
-    }
-  };
+import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import Divider from "@mui/material/Divider";
+import AppTheme from "./theme/AppTheme";
+import AppAppBar from "./components/AppAppBar";
+import Hero from "./components/Hero";
+import Features from "./components/Features";
+import FAQ from "./components/FAQ";
+import Footer from "./components/Footer";
 
+export default function App(props) {
   return (
-    <div className="flex">
-      <div className="fixed top-0 left-0 h-full w-30 p-5 bg-gradient-to-b from-gray-100 via-gray-200 to-gray-300">
-        <Navbar activeTab={activeTab} setActiveTab={setActiveTab} vertical />
-      </div>
-      <div className="ml-30 mr-80 w-full p-5 bg-gradient-to-b from-gray-100 via-gray-200 to-gray-300 h-screen overflow-y-auto scrollbar-hide">
-        {renderContent()}
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <AppAppBar />
+      <Hero />
+      <div>
+        <Features />
+        <Divider />
+        <FAQ />
+        <Divider />
+        <Footer />
       </div>
-
-      <div className='fixed top-0 right-0 h-full w-80 p-5 bg-gradient-to-t from-gray-100 via-gray-200 to-gray-300'>
-        <Collab />
-      </div>
-    </div>
+    </AppTheme>
   );
 }
-
-export default App;

frontend/src/components/AppAppBar.jsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Container from "@mui/material/Container";
+import Divider from "@mui/material/Divider";
+import MenuItem from "@mui/material/MenuItem";
+import Drawer from "@mui/material/Drawer";
+import MenuIcon from "@mui/icons-material/Menu";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import ColorModeIconDropdown from "../theme/ColorModeIconDropdown";
+import Sitemark from "./SitemarkIcon";
+
+const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexShrink: 0,
+  borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
+  backdropFilter: "blur(24px)",
+  border: "1px solid",
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
+    : alpha(theme.palette.background.default, 0.4),
+  boxShadow: (theme.vars || theme).shadows[1],
+  padding: "8px 12px",
+}));
+
+export default function AppAppBar() {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (newOpen) => () => {
+    setOpen(newOpen);
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      enableColorOnDark
+      sx={{
+        boxShadow: 0,
+        bgcolor: "transparent",
+        backgroundImage: "none",
+        mt: "calc(var(--template-frame-height, 0px) + 28px)",
+      }}
+    >
+      <Container maxWidth="lg">
+        <StyledToolbar variant="dense" disableGutters>
+          <Box
+            sx={{ flexGrow: 1, display: "flex", alignItems: "center", px: 0 }}
+          >
+            <Sitemark />
+            <Box sx={{ display: { xs: "none", md: "flex" } }}>
+              <Button variant="text" color="info" size="small">
+                Features
+              </Button>
+              <Button
+                variant="text"
+                color="info"
+                size="small"
+                sx={{ minWidth: 0 }}
+              >
+                FAQ
+              </Button>
+              <Button
+                variant="text"
+                color="info"
+                size="small"
+                sx={{ minWidth: 0 }}
+              >
+                Watch Demo
+              </Button>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              gap: 1,
+              alignItems: "center",
+            }}
+          >
+            <Button color="primary" variant="text" size="small">
+              Sign in
+            </Button>
+            <Button color="primary" variant="contained" size="small">
+              Sign up
+            </Button>
+            <ColorModeIconDropdown />
+          </Box>
+          <Box sx={{ display: { xs: "flex", md: "none" }, gap: 1 }}>
+            <ColorModeIconDropdown size="medium" />
+            <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
+              <MenuIcon />
+            </IconButton>
+            <Drawer
+              anchor="top"
+              open={open}
+              onClose={toggleDrawer(false)}
+              PaperProps={{
+                sx: {
+                  top: "var(--template-frame-height, 0px)",
+                },
+              }}
+            >
+              <Box sx={{ p: 2, backgroundColor: "background.default" }}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "flex-end",
+                  }}
+                >
+                  <IconButton onClick={toggleDrawer(false)}>
+                    <CloseRoundedIcon />
+                  </IconButton>
+                </Box>
+
+                <MenuItem>Features</MenuItem>
+                <MenuItem>FAQ</MenuItem>
+                <MenuItem>Watch Demo</MenuItem>
+                <Divider sx={{ my: 3 }} />
+                <MenuItem>
+                  <Button color="primary" variant="contained" fullWidth>
+                    Sign up
+                  </Button>
+                </MenuItem>
+                <MenuItem>
+                  <Button color="primary" variant="outlined" fullWidth>
+                    Sign in
+                  </Button>
+                </MenuItem>
+              </Box>
+            </Drawer>
+          </Box>
+        </StyledToolbar>
+      </Container>
+    </AppBar>
+  );
+}