Merge pull request #91 from hotosm/enhance/home

Enhanced Home Landing Page

frontend/src/components/Header/Header.js

@@ -18,8 +18,7 @@ import authContext from "../../Context/AuthContext";
 import UserProfile from "./UserProfile";
 
 const pages = [
-  { name: "Get Started", path: "/get-started" },
-  { name: "Why fAIr?", path: "/why-fair" },
+  { name: "Learn", path: "/learn" },
   { name: "Training Datasets", path: "/training-datasets" },
   { name: "AI Models", path: "/ai-models" },
   { name: "Start Mapping", path: "/start-mapping" },

frontend/src/components/Layout/Home/Home.js

@@ -1,12 +1,75 @@
-import React from 'react'
+import React from "react";
+import { useNavigate, Link } from "react-router-dom";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
 
-const Home = props => {
+const GetStarted = () => {
+  const navigate = useNavigate();
 
-    return <>
-    <div style={{height: "600px", width:"500px"}} >
-    <p>Home page content</p>
-
+  return (
+    <div
+      style={{
+        background: "#FFFFFF",
+        padding: "50px",
+        textAlign: "center",
+      }}
+    >
+      <Typography
+        variant="h3"
+        component="h1"
+        style={{ color: "#E53E3E", fontWeight: "bold", marginBottom: "30px" }}
+      >
+        Welcome to fAIr
+      </Typography>
+      <Typography
+        variant="body1"
+        style={{ color: "#3D3D3D", fontSize: "18px", marginBottom: "50px" }}
+      >
+        fAIr is an open AI-assisted mapping service developed by the
+        Humanitarian OpenStreetMap Team (HOT) that aims to improve the
+        efficiency and accuracy of mapping efforts for humanitarian purposes.
+        The service uses AI models, specifically computer vision techniques, to
+        detect objects such as buildings, roads, waterways, and trees from
+        satellite and UAV imagery. The name fAIr is derived from the following
+        terms:
+        <br />
+        <br />
+        <ul style={{ listStyleType: "none", paddingLeft: 0 }}>
+          <li>f: for freedom and free and open-source software</li>
+          <li>AI: for Artificial Intelligence</li>
+          <li>
+            r: for resilience and our responsibility for our communities and the
+            role we play within humanitarian mapping
+          </li>
+        </ul>
+      </Typography>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Button
+          variant="contained"
+          color="secondary"
+          sx={{ marginRight: "30px" }}
+          onClick={() => navigate("/training-datasets")}
+        >
+          Start Creating Dataset
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          component={Link}
+          to="/learn"
+        >
+          Tutorial
+        </Button>
+      </div>
     </div>
-    </>;
-}
-export default Home
+  );
+};
+
+export default GetStarted;

frontend/src/components/Layout/Learn/Learn.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Learn = (props) => {
+  return (
+    <>
+      <div style={{ height: "600px", width: "500px" }}>Learn Componenet</div>
+    </>
+  );
+};
+
+export default Learn;

frontend/src/routes.js

@@ -11,9 +11,7 @@ const AIModels = React.lazy(() =>
 const Documentation = React.lazy(() =>
   import("./components/Layout/Documentation/Documentation")
 );
-const GetStarted = React.lazy(() =>
-  import("./components/Layout/GetStarted/GetStarted")
-);
+const Learn = React.lazy(() => import("./components/Layout/Learn/Learn"));
 const Start = React.lazy(() => import("./components/Layout/Start/Start"));
 const Why = React.lazy(() => import("./components/Layout/Why/Why"));
 
@@ -30,9 +28,9 @@ export const publicRoutes = [
     name: "Training Datasets",
     element: <Documentation />,
   },
-  { path: "/get-started", name: "Training Datasets", element: <GetStarted /> },
+  { path: "/learn", name: "Learn", element: <Learn /> },
   { path: "/start-mapping/*", name: "Training Datasets", element: <Start /> },
-  { path: "/why-fair", name: "Training Datasets", element: <Why /> },
+  // { path: "/why-fair", name: "Training Datasets", element: <Why /> },
   { path: "/authenticate", name: "Authenticate", element: <Authenticate /> },
   { path: "/", name: "Home", element: <Home /> },
 ];