GI-19 Create Volunteer Page

apps/frontend/src/main.tsx

@@ -3,17 +3,19 @@ import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import MapPage from './pages/mapPage/MapPage';
+import VolunteerPage from './pages/volunteerPage/VolunteerPage';
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<MapPage />} />
-          </Routes>
-        </BrowserRouter>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MapPage />} />
+          <Route path="/volunteer_page" element={<VolunteerPage />} />
+        </Routes>
+      </BrowserRouter>
     </QueryClientProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

apps/frontend/src/pages/volunteerPage/Header.tsx

@@ -0,0 +1,28 @@
+export default function Header() {
+  return (
+    <div
+      style={{
+        padding: '0px 50px 50px',
+        display: 'flex',
+        alignItems: 'center',
+        background: 'var(--Foreground, #F2F2F2)',
+      }}
+    >
+      <p
+        style={{
+          fontSize: '40px',
+          fontWeight: 'bold',
+          margin: 15,
+          fontFamily: 'Montserrat',
+          lineHeight: '49px',
+          textAlign: 'left',
+          color: 'black',
+          width: '100%',
+          borderBottom: '4px solid rgba(0, 0, 0, 1)',
+        }}
+      >
+        Welcome back, Volunteer!
+      </p>
+    </div>
+  );
+}

apps/frontend/src/pages/volunteerPage/Resources.tsx

@@ -0,0 +1,125 @@
+import { Box, Grid, ThemeProvider } from '@mui/material';
+import { VolunteerResource, VOLUNTEER_RESOURCES } from './volunteerResources';
+import CircleIcon from '@mui/icons-material/Circle';
+
+export default function Resources() {
+  const title = {
+    color: 'var(--Text-Primary, #091F2F)',
+    fontFamily: 'Helvetica',
+    fontSize: '27px',
+    fontStyle: 'bold',
+    fontWeight: 'bold',
+    lineHeight: 'normal',
+    textDecorationLine: 'underline',
+    margin: '0',
+  };
+
+  const headings = {
+    color: 'var(--Text-Second, #288BE4)',
+    fontFamily: 'Lora',
+    fontSize: '25px',
+    fontStyle: 'italic',
+    fontWeight: '400',
+    lineHeight: 'normal',
+    margin: '0',
+  };
+
+  const content = {
+    color: 'var(--text-primary-2, #58585B)',
+    fontFamily: 'Lora',
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 'normal',
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        padding: '34px 45px 49px 45px',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: '15px',
+        flexShrink: '0',
+        background: 'white',
+      }}
+    >
+      <p style={title}>
+        <u>FEATURED RESOURCES &rarr;</u>
+      </p>
+      <Grid
+        container
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          alignItems: 'center',
+        }}
+      >
+        {VOLUNTEER_RESOURCES.map((resource: VolunteerResource) => {
+          return (
+            <Grid xs={4} item>
+              <FlippableTile textContent={resource.resourceName} />
+            </Grid>
+          );
+        })}
+      </Grid>
+    </div>
+  );
+}
+
+interface PanelProps {
+  textContent: string;
+}
+function FlippableTile(props: PanelProps) {
+  return (
+    <ThemeProvider
+      theme={{
+        palette: {
+          primary: {
+            main: '#F2F2F2',
+            dark: '#B1F1F1',
+          },
+        },
+      }}
+    >
+      <Box
+        sx={{
+          width: '330px',
+          height: '253px',
+          marginTop: '28px',
+          marginBottom: '49px',
+          borderRadius: 1,
+          bgcolor: 'primary.main',
+          '&:hover': {
+            bgcolor: 'primary.dark',
+          },
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <CircleIcon
+          sx={{
+            width: '100px',
+            height: '100px',
+            marginTop: '48px',
+            marginBottom: '24px',
+            color: '#FFFDFD',
+          }}
+        />
+        <span
+          style={{
+            color: '#288BE4',
+            fontSize: '20px',
+            fontStyle: 'italic',
+            marginBottom: '50px',
+          }}
+        >
+          {props.textContent}
+        </span>
+      </Box>
+    </ThemeProvider>
+  );
+}

apps/frontend/src/pages/volunteerPage/VolunteerPage.tsx

@@ -0,0 +1,52 @@
+import Map from '../../components/map/Map';
+import React, { useState } from 'react';
+import Divider from '../Divider';
+import Resources from './Resources';
+import Header from './Header';
+import MapPreview from '../../assets/images/siteIcons/mapPreview.png';
+import Navbar from '../Navbar';
+import { SITE_STATUS_ROADMAP } from '../../constants';
+
+const icons: string[] = SITE_STATUS_ROADMAP.map((option) => option.image);
+
+export default function VolunteerPage() {
+  return (
+    <div style={{ background: 'var(--Foreground, #F2F2F2)' }}>
+      <Navbar />
+      <div style={{ marginTop: '50px' }} />
+      <Header />
+      <div
+        style={{
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-evenly',
+          background: 'white',
+          padding: '50px 40px',
+          gap: '20px',
+          flexWrap: 'wrap',
+        }}
+      >
+        <img src={MapPreview} />
+        <a
+          href="/"
+          style={{
+            top: '50%',
+            left: '50%',
+            fontSize: '27px',
+            fontWeight: 'bold',
+            fontFamily: 'Helvetica',
+            lineHeight: '49px',
+            color: '#091F2F',
+          }}
+        >
+          VIEW THE INTERACTIVE MAP &rarr;
+        </a>
+      </div>
+      <Divider />
+      <Resources />
+      <Divider />
+      <div style={{ paddingTop: '15px' }} />
+    </div>
+  );
+}

apps/frontend/src/pages/volunteerPage/volunteerResources.ts

@@ -0,0 +1,25 @@
+export interface VolunteerResource {
+    resourceName: string
+}
+
+export const VOLUNTEER_RESOURCES: VolunteerResource[] = [
+    {
+        resourceName: 'Submit a Maintenance Report'
+    },
+    {
+        resourceName: 'Adopt a GI Feature'
+    },
+    {
+        resourceName: "Submit a Condition Assessment"
+    },
+    {
+        resourceName: "*resource4*"
+    },
+    {
+        resourceName: "*resource5*"
+    },
+    {
+        resourceName: "*resource6*"
+    },
+
+]