contact us page (#791)

web-app/public/locales/en/contactUs.json

@@ -0,0 +1,23 @@
+{
+    "title": "Contact Us",
+    "email": {
+        "title": "Email Us",
+        "description": "For general inquiries regarding the Mobility Database API, please email us at"
+    },
+    "slack": {
+        "title": "Join our Slack",
+        "description": "Join the MobilityData Slack channel to ask questions, share feedback, and connect with others",
+        "action": "Join Slack"
+    },
+    "contribute": {
+        "title": "Contribute",
+        "description": "Help us improve the Mobility Database by contributing to our open-source projects on GitHub",
+        "action": "View on GitHub"
+    },
+    "addFeeds": {
+        "title": "Add Feeds",
+        "description": "Looking to add many feeds? You can contribute by heading over to our GitHub catalog repository",
+        "action": "View Catalogs Repository"
+    }
+
+}

web-app/src/app/constants/Navigation.ts

@@ -52,15 +52,14 @@ export function buildNavigationItems(
         color: 'inherit',
       },
       {
-        title: 'API Docs',
-        target:
-          'https://mobilitydata.github.io/mobility-feed-api/SwaggerUI/index.html',
+        title: 'Contact Us',
+        target: 'contact-us',
         color: 'inherit',
-        external: true,
       },
       {
-        title: 'Contact Us',
-        target: 'mailto:[email protected]',
+        title: 'API Docs',
+        target:
+          'https://mobilitydata.github.io/mobility-feed-api/SwaggerUI/index.html',
         color: 'inherit',
         external: true,
       },

web-app/src/app/router/Router.tsx

@@ -33,6 +33,7 @@ import GTFSFeatureAnalytics from '../screens/Analytics/GTFSFeatureAnalytics';
 import GBFSFeedAnalytics from '../screens/Analytics/GBFSFeedAnalytics';
 import GBFSNoticeAnalytics from '../screens/Analytics/GBFSNoticeAnalytics';
 import GBFSVersionAnalytics from '../screens/Analytics/GBFSVersionAnalytics';
+import ContactUs from '../screens/ContactUs';
 
 export const AppRouter: React.FC = () => {
   const navigateTo = useNavigate();
@@ -88,6 +89,7 @@ export const AppRouter: React.FC = () => {
       <Route path='forgot-password' element={<ForgotPassword />} />
       <Route path='faq' element={<FAQ />} />
       <Route path='about' element={<About />} />
+      <Route path='contact-us' element={<ContactUs />} />
       <Route path='feeds' element={<Feeds />} />
       <Route path='feeds/:feedId' element={<Feed />} />
       <Route path='contribute' element={<FeedSubmission />} />

web-app/src/app/screens/ContactUs.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { Button, Card, styled, Typography } from '@mui/material';
+import { theme } from '../Theme';
+import EmailIcon from '@mui/icons-material/Email';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { useTranslation } from 'react-i18next';
+
+const ContactUsItem = styled(Card)(({ theme }) => ({
+  padding: theme.spacing(2),
+  margin: theme.spacing(1),
+  textAlign: 'center',
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    width: 'calc(50% - 50px)',
+  },
+  '.item-container': {
+    textAlign: 'center',
+  },
+  '.mui-icon': {
+    fontSize: '4rem',
+  },
+  '.text-body': {
+    textAlign: 'left',
+    padding: `0 ${theme.spacing(2)}`,
+  },
+  '.action-button': {
+    margin: theme.spacing(1),
+    marginTop: theme.spacing(2),
+  },
+}));
+
+const SlackSvg = (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='4rem'
+    height='4rem'
+    viewBox='0 0 24 24'
+  >
+    <path
+      fill={theme.palette.primary.main}
+      d='M6 15a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2h2zm1 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2zm2-8a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2v2zm0 1a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2a2 2 0 0 1 2-2zm8 2a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-2zm-1 0a2 2 0 0 1-2 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2a2 2 0 0 1 2 2zm-2 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-2zm0-1a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2a2 2 0 0 1-2 2z'
+    />
+  </svg>
+);
+
+export default function ContactUs(): React.ReactElement {
+  const { t } = useTranslation('contactUs');
+  return (
+    <Container component='main'>
+      <Box sx={{ maxWidth: '1000px', width: '100%', mx: 'auto' }}>
+        <Typography variant='h4' color='primary' sx={{ fontWeight: 700 }}>
+          {t('title')}
+        </Typography>
+        <Box
+          sx={{
+            mt: 2,
+            display: 'flex',
+            flexWrap: 'wrap',
+          }}
+        >
+          <ContactUsItem variant='outlined'>
+            <Box className='item-container'>
+              <EmailIcon color='primary' className='mui-icon' />
+              <Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
+                {t('email.title')}
+              </Typography>
+            </Box>
+            <Typography variant='body1'>
+              {t('email.description')}{' '}
+              <a href='mailto:[email protected]'>[email protected]</a>
+            </Typography>
+          </ContactUsItem>
+
+          <ContactUsItem variant='outlined'>
+            <Box className='item-container'>
+              {SlackSvg}
+              <Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
+                {t('slack.title')}
+              </Typography>
+            </Box>
+            <Typography variant='body1'>{t('slack.description')}</Typography>
+            <Button
+              variant={'contained'}
+              className='action-button'
+              href='https://share.mobilitydata.org/slack'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {t('slack.action')}
+            </Button>
+          </ContactUsItem>
+
+          <ContactUsItem variant='outlined'>
+            <Box className='item-container'>
+              <GitHubIcon color='primary' className='mui-icon' />
+              <Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
+                {t('contribute.title')}
+              </Typography>
+            </Box>
+            <Typography variant='body1' className='text-body'>
+              {t('contribute.description')}
+            </Typography>
+            <Button
+              variant={'contained'}
+              className='action-button'
+              href='https://github.com/MobilityData/mobility-feed-api'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {t('contribute.action')}
+            </Button>
+          </ContactUsItem>
+
+          <ContactUsItem variant='outlined'>
+            <Box className='item-container'>
+              <GitHubIcon color='primary' className='mui-icon' />
+              <Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
+                {t('addFeeds.title')}
+              </Typography>
+            </Box>
+            <Typography variant='body1' className='text-body'>
+              {t('addFeeds.description')}
+            </Typography>
+            <Button
+              variant={'contained'}
+              className='action-button'
+              href='https://github.com/MobilityData/mobility-database-catalogs'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {t('addFeeds.action')}
+            </Button>
+          </ContactUsItem>
+        </Box>
+      </Box>
+    </Container>
+  );
+}

web-app/src/i18n.ts

@@ -13,7 +13,7 @@ i18n
     fallbackLng: 'en',
     debug: false,
     supportedLngs: supportedLanguages,
-    ns: ['common', 'account', 'feeds'], // List your namespaces here
+    ns: ['common', 'account', 'feeds', 'contactUs'], // List your namespaces here
     defaultNS: 'common', // Default namespace
     interpolation: {
       escapeValue: false, // React already escapes by default