From 2310a4f781a8648a972d83cb008dfff18b78c9c2 Mon Sep 17 00:00:00 2001
From: huang0h <averyhuang2003@gmail.com>
Date: Sun, 15 Sep 2024 02:12:24 -0400
Subject: [PATCH] draft changes

---
 apps/dotcom/src/app/App.tsx                   |   2 +
 apps/dotcom/src/app/components/NavBar.tsx     |   8 +
 apps/dotcom/src/app/pages/contact/Contact.tsx | 145 ++++++++++++++++++
 apps/dotcom/src/app/pages/contact/contact.svg |   1 +
 .../dotcom/src/app/pages/contact/functions.ts |  12 ++
 5 files changed, 168 insertions(+)
 create mode 100644 apps/dotcom/src/app/pages/contact/Contact.tsx
 create mode 100644 apps/dotcom/src/app/pages/contact/contact.svg
 create mode 100644 apps/dotcom/src/app/pages/contact/functions.ts

diff --git a/apps/dotcom/src/app/App.tsx b/apps/dotcom/src/app/App.tsx
index 9d4a2a2e..b002b4cd 100644
--- a/apps/dotcom/src/app/App.tsx
+++ b/apps/dotcom/src/app/App.tsx
@@ -16,6 +16,7 @@ import NotFound from './pages/notfound/NotFound';
 import People from './pages/people/People';
 import Projects from './pages/projects/Projects';
 import theme from './theme';
+import Contact from './pages/contact/Contact';
 
 const App: React.FC = () => {
   return (
@@ -47,6 +48,7 @@ const App: React.FC = () => {
             />
             <Route path="/projects" Component={Projects} />
             <Route path="/people" Component={People} />
+            <Route path="/contact" Component={Contact} />
             <Route path="*" Component={NotFound} />
           </Routes>
           <Footer />
diff --git a/apps/dotcom/src/app/components/NavBar.tsx b/apps/dotcom/src/app/components/NavBar.tsx
index e4a111d6..edbdd3b0 100644
--- a/apps/dotcom/src/app/components/NavBar.tsx
+++ b/apps/dotcom/src/app/components/NavBar.tsx
@@ -120,6 +120,11 @@ const NavBar: React.FC = () => {
                   People
                 </Typography>
               </Button>
+              <Button component={Link} to="/contact">
+                <Typography variant="h6" className={classes.navlink}>
+                  Contact
+                </Typography>
+              </Button>
             </ButtonGroup>
 
             {/* Mobile only */}
@@ -151,6 +156,9 @@ const NavBar: React.FC = () => {
               <MenuItem onClick={handleClose} component={Link} to="/people">
                 <Typography variant="body1">People</Typography>
               </MenuItem>
+              <MenuItem onClick={handleClose} component={Link} to="/people">
+                <Typography variant="body1">Contact</Typography>
+              </MenuItem>
             </Menu>
           </div>
         </Toolbar>
diff --git a/apps/dotcom/src/app/pages/contact/Contact.tsx b/apps/dotcom/src/app/pages/contact/Contact.tsx
new file mode 100644
index 00000000..a3a16c68
--- /dev/null
+++ b/apps/dotcom/src/app/pages/contact/Contact.tsx
@@ -0,0 +1,145 @@
+import { Container, Grid, Box, TextField, RadioGroup, FormControlLabel, Radio, FormLabel, Divider, withStyles, createStyles, Theme, styled, Button, Snackbar } from '@material-ui/core';
+import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
+import Hero from '../../components/Hero';
+import { ReactComponent as ContactSvg } from './contact.svg';
+import Alert from '@material-ui/lab/Alert';
+import { submitFormData } from './functions';
+
+const StyledDivider = styled(Divider)({
+  margin: '20px'
+});
+
+const StyledButton = styled(Button)({
+  float: 'right',
+  borderRadius: '10px',
+  color: 'white',
+  padding: '10px 20px',
+  background: "linear-gradient(127deg, rgba(12,0,213,1) 0%, rgba(248,0,255,1) 100%)" 
+});
+
+const Contact: React.FC = () => {
+
+  interface ContactData {
+    firstName: string;
+    lastName: string;
+    email: string;
+    year: string;
+    major: string;
+    // TODO: ask if we still want to do user-submitted questions
+    questions: any[];
+    role: string;
+  }
+
+  const [data, setData] = useState({ firstName: '', lastName: '', email: '', year: '', major: '', questions: [], role: '' } as ContactData);
+  const [showAlert, setShowAlert] = useState<boolean>(false)
+
+  return (
+    <div>
+      <Container maxWidth="md">
+        <Helmet>
+          <title>Projects</title>
+          <meta
+            name="description"
+            content="C4C delivers web applications to Boston-based nonprofits."
+          />
+        </Helmet>
+        <Hero
+          subtitle="Want to stay in touch? Fill out your contact info below!"
+          title="Contact Us"
+          SvgNode={ContactSvg}
+        />
+      </Container>
+      <Container maxWidth="md">
+        <Box marginTop={5}>
+          <Grid container>
+            <TextField 
+              label="First Name"
+              value={data.firstName}
+              onChange={(event) => setData({...data, firstName: event.target.value})}
+            />
+            <TextField 
+              label="Last Name"
+              value={data.lastName}
+              onChange={(event) => setData({...data, lastName: event.target.value})}
+            />
+            <TextField 
+              label="Email"
+              value={data.email}
+              onChange={(event) => setData({...data, email: event.target.value})}
+            />
+            <TextField 
+              label="Graduation Year"
+              value={data.year}
+              onChange={(event) => setData({...data, year: event.target.value})}
+            />
+            <TextField 
+              label="Major"
+              value={data.major}
+              onChange={(event) => setData({...data, major: event.target.value})}
+            />
+          </Grid>
+          <StyledDivider />
+          <FormLabel component="legend">Which positions are you interested in?</FormLabel>        
+          <RadioGroup value={data.role} row>
+            <FormControlLabel value="developer" control={<Radio />} label="Developer" 
+              onChange={(event: any) => setData({...data, role: "developer"})}
+            />
+            <FormControlLabel value="designer" control={<Radio />} label="Designer"
+              onChange={(event: any) => setData({...data, role: "designer"})}
+            />
+            <FormControlLabel value="productmanager" control={<Radio />} label="Product Manager"
+              onChange={(event: any) => setData({...data, role: "productmanager"})}
+            />
+          </RadioGroup>
+          <StyledButton onClick={(event) => {
+            console.log('submitting form', data);
+
+            if (data.email.indexOf('@') === -1) {
+              setShowAlert(true);
+              return;
+            }
+
+            if (data.email.indexOf('.') === -1) {
+              setShowAlert(true);
+              return;
+            }
+
+            const gradYear = parseInt(data.year);
+            if (isNaN(gradYear)) {
+              setShowAlert(true);
+              return;
+            }
+            const submitData = {...data, gradYear};
+
+            submitFormData({
+              url: 'https://<some api url>',
+              data: submitData,
+              accessToken: 'some API token',
+              secretToken: 'some secret API token',
+            }).then((data: any) => {
+              const { success, errorMessage } = data;
+
+              if (success) {
+                console.info("API submit successful")
+              } else {
+                console.info(`warning: ${errorMessage}`);
+                setShowAlert(true);
+                setData({ firstName: '', lastName: '', email: '', year: '', major: '', questions: [], role: '' })
+              }
+            }).catch((error) => {
+              setShowAlert(true);
+            })
+          }}>
+            Submit
+          </StyledButton>
+        </Box>
+      </Container>
+      <Snackbar open={showAlert} autoHideDuration={3000} onClose={() => setShowAlert(false)} anchorOrigin={{vertical: 'top', horizontal: 'center'}}>
+        <Alert severity="info">Error submiting data</Alert>
+      </Snackbar>
+    </div>
+  );
+};
+
+export default Contact;
diff --git a/apps/dotcom/src/app/pages/contact/contact.svg b/apps/dotcom/src/app/pages/contact/contact.svg
new file mode 100644
index 00000000..8d158530
--- /dev/null
+++ b/apps/dotcom/src/app/pages/contact/contact.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2485.12" height="1200" viewBox="0 0 2485.12 3304.93"><defs><clipPath id="clip-0"><path clip-rule="nonzero" d="M 0 0 L 2485.121094 0 L 2485.121094 3304.929688 L 0 3304.929688 Z M 0 0 "/></clipPath><clipPath id="clip-1"><path clip-rule="evenodd" d="M 1683.609375 0 L 2213.980469 0 C 2363.488281 0 2485.121094 121.628906 2485.121094 271.140625 L 2485.121094 1230.480469 L 1683.609375 1230.480469 Z M 0 1230.480469 L 0 271.140625 C 0 121.628906 121.648438 0 271.164062 0 L 1634.179688 0 L 1634.179688 1230.480469 Z M 0 2239.691406 L 0 1279.898438 L 2485.121094 1279.898438 L 2485.121094 2239.691406 Z M 441.46875 459.890625 L 1261.5 459.890625 C 1331.359375 459.890625 1388.179688 516.691406 1388.179688 586.558594 L 1388.179688 712.71875 C 1388.179688 782.589844 1331.359375 839.390625 1261.5 839.390625 L 441.46875 839.390625 C 371.613281 839.390625 314.804688 782.589844 314.804688 712.71875 L 314.804688 586.558594 C 314.804688 516.691406 371.613281 459.890625 441.46875 459.890625 Z M 1261.5 888.820312 C 1358.570312 888.820312 1437.578125 809.789062 1437.578125 712.71875 L 1437.578125 586.558594 C 1437.578125 489.480469 1358.570312 410.460938 1261.5 410.460938 L 441.46875 410.460938 C 344.390625 410.460938 265.386719 489.480469 265.386719 586.558594 L 265.386719 712.71875 C 265.386719 809.800781 344.390625 888.820312 441.46875 888.820312 Z M 2166.648438 365.300781 C 2180.308594 365.300781 2191.371094 354.230469 2191.371094 340.578125 C 2191.371094 326.921875 2180.308594 315.871094 2166.648438 315.871094 L 1933.289062 315.871094 C 1919.628906 315.871094 1908.570312 326.921875 1908.570312 340.578125 C 1908.570312 354.238281 1919.628906 365.300781 1933.289062 365.300781 Z M 2166.648438 674.351562 C 2180.308594 674.351562 2191.371094 663.28125 2191.371094 649.628906 C 2191.371094 635.980469 2180.308594 624.929688 2166.648438 624.929688 L 1933.289062 624.929688 C 1919.628906 624.929688 1908.570312 635.980469 1908.570312 649.628906 C 1908.570312 663.289062 1919.628906 674.351562 1933.289062 674.351562 Z M 2166.648438 983.398438 C 2180.308594 983.398438 2191.371094 972.328125 2191.371094 958.679688 C 2191.371094 945.03125 2180.308594 933.980469 2166.648438 933.980469 L 1933.289062 933.980469 C 1919.628906 933.980469 1908.570312 945.03125 1908.570312 958.679688 C 1908.570312 972.339844 1919.628906 983.398438 1933.289062 983.398438 Z M 409.949219 1626.800781 L 611.800781 1626.808594 C 632.785156 1626.808594 650.171875 1644.199219 650.171875 1665.179688 L 650.171875 1854.429688 C 650.171875 1875.410156 632.796875 1892.828125 611.800781 1892.828125 L 409.949219 1892.800781 C 388.9375 1892.800781 371.574219 1875.410156 371.574219 1854.398438 L 371.574219 1665.171875 C 371.574219 1644.171875 388.949219 1626.800781 409.949219 1626.800781 Z M 409.949219 1577.390625 C 361.570312 1577.390625 322.144531 1616.800781 322.144531 1665.179688 L 322.144531 1854.429688 C 322.144531 1902.808594 361.542969 1942.199219 409.949219 1942.199219 L 611.800781 1942.199219 C 660.191406 1942.199219 699.589844 1902.808594 699.589844 1854.398438 L 699.589844 1665.171875 C 699.589844 1616.789062 660.179688 1577.378906 611.800781 1577.378906 Z M 2138.261719 1577.160156 C 2151.921875 1577.160156 2162.980469 1566.078125 2162.980469 1552.441406 C 2162.980469 1538.78125 2151.921875 1527.71875 2138.261719 1527.71875 L 1283.558594 1527.71875 C 1269.929688 1527.71875 1258.851562 1538.78125 1258.851562 1552.441406 C 1258.851562 1566.101562 1269.898438 1577.160156 1283.558594 1577.160156 Z M 2138.261719 1991.898438 C 2151.921875 1991.898438 2162.980469 1980.839844 2162.980469 1967.179688 C 2162.980469 1953.519531 2151.921875 1942.46875 2138.261719 1942.46875 L 1283.558594 1942.46875 C 1269.929688 1942.46875 1258.851562 1953.519531 1258.851562 1967.179688 C 1258.851562 1980.839844 1269.898438 1991.898438 1283.558594 1991.898438 Z M 1873.378906 2629.648438 C 1852.359375 2629.648438 1834.980469 2647.03125 1834.980469 2668.050781 L 1834.980469 2857.289062 C 1834.980469 2878.300781 1852.359375 2895.691406 1873.378906 2895.691406 L 2075.199219 2895.691406 C 2096.210938 2895.691406 2113.601562 2878.300781 2113.601562 2857.289062 L 2113.601562 2668.050781 C 2113.601562 2647.03125 2096.210938 2629.648438 2075.199219 2629.648438 Z M 2075.199219 2945.070312 C 2123.609375 2945.070312 2163 2905.699219 2163 2857.289062 L 2163 2668.050781 C 2163 2619.640625 2123.609375 2580.269531 2075.199219 2580.269531 L 1873.378906 2580.269531 C 1824.96875 2580.269531 1785.601562 2619.640625 1785.601562 2668.050781 L 1785.601562 2857.289062 C 1785.601562 2905.699219 1824.96875 2945.070312 1873.378906 2945.070312 Z M 1201.570312 2580.011719 C 1215.230469 2580.011719 1226.289062 2568.949219 1226.289062 2555.289062 C 1226.289062 2541.628906 1215.230469 2530.570312 1201.570312 2530.570312 L 346.886719 2530.570312 C 333.230469 2530.570312 322.171875 2541.628906 322.171875 2555.289062 C 322.171875 2568.949219 333.230469 2580.011719 346.886719 2580.011719 Z M 1201.570312 2994.710938 C 1215.230469 2994.710938 1226.289062 2983.648438 1226.289062 2969.988281 C 1226.289062 2956.339844 1215.230469 2945.28125 1201.570312 2945.28125 L 346.886719 2945.28125 C 333.230469 2945.28125 322.171875 2956.339844 322.171875 2969.988281 C 322.171875 2983.648438 333.230469 2994.710938 346.886719 2994.710938 Z M 2213.980469 3304.929688 L 271.164062 3304.929688 C 121.648438 3304.929688 0 3183.289062 0 3033.820312 L 0 2289.121094 L 2485.121094 2289.121094 L 2485.121094 3033.820312 C 2485.121094 3183.289062 2363.488281 3304.929688 2213.980469 3304.929688 "/></clipPath><linearGradient id="linear-pattern-0" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(2485.12, 0, 0, 2485.12, 0, 1652.46)"><stop offset="0" stop-color="rgb(11.372375%, 37.254333%, 37.646484%)" stop-opacity="1"/><stop offset="0.0078125" stop-color="rgb(11.326599%, 37.156677%, 37.547302%)" stop-opacity="1"/><stop offset="0.015625" stop-color="rgb(11.238098%, 36.964417%, 37.35199%)" stop-opacity="1"/><stop offset="0.0234375" stop-color="rgb(11.149597%, 36.77063%, 37.155151%)" stop-opacity="1"/><stop offset="0.03125" stop-color="rgb(11.061096%, 36.578369%, 36.959839%)" stop-opacity="1"/><stop offset="0.0390625" stop-color="rgb(10.971069%, 36.384583%, 36.763%)" stop-opacity="1"/><stop offset="0.046875" stop-color="rgb(10.882568%, 36.192322%, 36.567688%)" stop-opacity="1"/><stop offset="0.0546875" stop-color="rgb(10.794067%, 35.998535%, 36.37085%)" stop-opacity="1"/><stop offset="0.0625" stop-color="rgb(10.705566%, 35.806274%, 36.175537%)" stop-opacity="1"/><stop offset="0.0703125" stop-color="rgb(10.617065%, 35.612488%, 35.978699%)" stop-opacity="1"/><stop offset="0.078125" stop-color="rgb(10.527039%, 35.420227%, 35.783386%)" stop-opacity="1"/><stop offset="0.0859375" stop-color="rgb(10.438538%, 35.22644%, 35.586548%)" stop-opacity="1"/><stop offset="0.09375" stop-color="rgb(10.350037%, 35.03418%, 35.391235%)" stop-opacity="1"/><stop offset="0.101562" stop-color="rgb(10.261536%, 34.840393%, 35.194397%)" stop-opacity="1"/><stop offset="0.109375" stop-color="rgb(10.171509%, 34.648132%, 34.999084%)" stop-opacity="1"/><stop offset="0.117188" stop-color="rgb(10.083008%, 34.454346%, 34.802246%)" stop-opacity="1"/><stop offset="0.125" stop-color="rgb(9.994507%, 34.262085%, 34.606934%)" stop-opacity="1"/><stop offset="0.132812" stop-color="rgb(9.906006%, 34.068298%, 34.410095%)" stop-opacity="1"/><stop offset="0.140625" stop-color="rgb(9.815979%, 33.876038%, 34.214783%)" stop-opacity="1"/><stop offset="0.148438" stop-color="rgb(9.727478%, 33.682251%, 34.017944%)" stop-opacity="1"/><stop offset="0.15625" stop-color="rgb(9.638977%, 33.48999%, 33.822632%)" stop-opacity="1"/><stop offset="0.164062" stop-color="rgb(9.550476%, 33.296204%, 33.625793%)" stop-opacity="1"/><stop offset="0.171875" stop-color="rgb(9.461975%, 33.103943%, 33.430481%)" stop-opacity="1"/><stop offset="0.179688" stop-color="rgb(9.371948%, 32.911682%, 33.233643%)" stop-opacity="1"/><stop offset="0.1875" stop-color="rgb(9.283447%, 32.717896%, 33.03833%)" stop-opacity="1"/><stop offset="0.195312" stop-color="rgb(9.194946%, 32.525635%, 32.841492%)" stop-opacity="1"/><stop offset="0.203125" stop-color="rgb(9.106445%, 32.331848%, 32.646179%)" stop-opacity="1"/><stop offset="0.210938" stop-color="rgb(9.016418%, 32.139587%, 32.449341%)" stop-opacity="1"/><stop offset="0.21875" stop-color="rgb(8.927917%, 31.945801%, 32.254028%)" stop-opacity="1"/><stop offset="0.226562" stop-color="rgb(8.839417%, 31.75354%, 32.05719%)" stop-opacity="1"/><stop offset="0.234375" stop-color="rgb(8.750916%, 31.559753%, 31.861877%)" stop-opacity="1"/><stop offset="0.242188" stop-color="rgb(8.662415%, 31.367493%, 31.665039%)" stop-opacity="1"/><stop offset="0.25" stop-color="rgb(8.572388%, 31.173706%, 31.469727%)" stop-opacity="1"/><stop offset="0.257812" stop-color="rgb(8.483887%, 30.981445%, 31.272888%)" stop-opacity="1"/><stop offset="0.265625" stop-color="rgb(8.395386%, 30.787659%, 31.077576%)" stop-opacity="1"/><stop offset="0.273438" stop-color="rgb(8.306885%, 30.595398%, 30.880737%)" stop-opacity="1"/><stop offset="0.28125" stop-color="rgb(8.216858%, 30.401611%, 30.685425%)" stop-opacity="1"/><stop offset="0.289062" stop-color="rgb(8.128357%, 30.209351%, 30.488586%)" stop-opacity="1"/><stop offset="0.296875" stop-color="rgb(8.039856%, 30.015564%, 30.293274%)" stop-opacity="1"/><stop offset="0.304688" stop-color="rgb(7.951355%, 29.823303%, 30.096436%)" stop-opacity="1"/><stop offset="0.3125" stop-color="rgb(7.861328%, 29.629517%, 29.901123%)" stop-opacity="1"/><stop offset="0.320312" stop-color="rgb(7.772827%, 29.437256%, 29.704285%)" stop-opacity="1"/><stop offset="0.328125" stop-color="rgb(7.684326%, 29.243469%, 29.508972%)" stop-opacity="1"/><stop offset="0.335938" stop-color="rgb(7.595825%, 29.051208%, 29.312134%)" stop-opacity="1"/><stop offset="0.34375" stop-color="rgb(7.507324%, 28.857422%, 29.116821%)" stop-opacity="1"/><stop offset="0.351562" stop-color="rgb(7.417297%, 28.665161%, 28.919983%)" stop-opacity="1"/><stop offset="0.359375" stop-color="rgb(7.328796%, 28.471375%, 28.72467%)" stop-opacity="1"/><stop offset="0.367188" stop-color="rgb(7.240295%, 28.279114%, 28.527832%)" stop-opacity="1"/><stop offset="0.375" stop-color="rgb(7.151794%, 28.085327%, 28.33252%)" stop-opacity="1"/><stop offset="0.382812" stop-color="rgb(7.061768%, 27.893066%, 28.135681%)" stop-opacity="1"/><stop offset="0.390625" stop-color="rgb(6.973267%, 27.69928%, 27.940369%)" stop-opacity="1"/><stop offset="0.398438" stop-color="rgb(6.884766%, 27.507019%, 27.74353%)" stop-opacity="1"/><stop offset="0.40625" stop-color="rgb(6.796265%, 27.313232%, 27.548218%)" stop-opacity="1"/><stop offset="0.414062" stop-color="rgb(6.707764%, 27.120972%, 27.351379%)" stop-opacity="1"/><stop offset="0.421875" stop-color="rgb(6.617737%, 26.927185%, 27.156067%)" stop-opacity="1"/><stop offset="0.429688" stop-color="rgb(6.529236%, 26.734924%, 26.959229%)" stop-opacity="1"/><stop offset="0.4375" stop-color="rgb(6.440735%, 26.541138%, 26.763916%)" stop-opacity="1"/><stop offset="0.445312" stop-color="rgb(6.352234%, 26.348877%, 26.567078%)" stop-opacity="1"/><stop offset="0.453125" stop-color="rgb(6.262207%, 26.15509%, 26.371765%)" stop-opacity="1"/><stop offset="0.460938" stop-color="rgb(6.173706%, 25.96283%, 26.174927%)" stop-opacity="1"/><stop offset="0.46875" stop-color="rgb(6.085205%, 25.769043%, 25.979614%)" stop-opacity="1"/><stop offset="0.476562" stop-color="rgb(5.996704%, 25.576782%, 25.782776%)" stop-opacity="1"/><stop offset="0.484375" stop-color="rgb(5.906677%, 25.382996%, 25.587463%)" stop-opacity="1"/><stop offset="0.492188" stop-color="rgb(5.818176%, 25.190735%, 25.390625%)" stop-opacity="1"/><stop offset="0.5" stop-color="rgb(5.729675%, 24.996948%, 25.195312%)" stop-opacity="1"/><stop offset="0.507812" stop-color="rgb(5.641174%, 24.804688%, 24.998474%)" stop-opacity="1"/><stop offset="0.515625" stop-color="rgb(5.552673%, 24.610901%, 24.803162%)" stop-opacity="1"/><stop offset="0.523438" stop-color="rgb(5.462646%, 24.41864%, 24.606323%)" stop-opacity="1"/><stop offset="0.53125" stop-color="rgb(5.374146%, 24.224854%, 24.411011%)" stop-opacity="1"/><stop offset="0.539062" stop-color="rgb(5.285645%, 24.032593%, 24.214172%)" stop-opacity="1"/><stop offset="0.546875" stop-color="rgb(5.197144%, 23.838806%, 24.01886%)" stop-opacity="1"/><stop offset="0.554688" stop-color="rgb(5.107117%, 23.646545%, 23.822021%)" stop-opacity="1"/><stop offset="0.5625" stop-color="rgb(5.018616%, 23.452759%, 23.626709%)" stop-opacity="1"/><stop offset="0.570312" stop-color="rgb(4.930115%, 23.260498%, 23.429871%)" stop-opacity="1"/><stop offset="0.578125" stop-color="rgb(4.841614%, 23.066711%, 23.234558%)" stop-opacity="1"/><stop offset="0.585938" stop-color="rgb(4.753113%, 22.874451%, 23.03772%)" stop-opacity="1"/><stop offset="0.59375" stop-color="rgb(4.663086%, 22.680664%, 22.842407%)" stop-opacity="1"/><stop offset="0.601562" stop-color="rgb(4.574585%, 22.488403%, 22.645569%)" stop-opacity="1"/><stop offset="0.609375" stop-color="rgb(4.486084%, 22.294617%, 22.450256%)" stop-opacity="1"/><stop offset="0.617188" stop-color="rgb(4.397583%, 22.102356%, 22.253418%)" stop-opacity="1"/><stop offset="0.625" stop-color="rgb(4.307556%, 21.908569%, 22.058105%)" stop-opacity="1"/><stop offset="0.632812" stop-color="rgb(4.219055%, 21.716309%, 21.861267%)" stop-opacity="1"/><stop offset="0.640625" stop-color="rgb(4.130554%, 21.522522%, 21.665955%)" stop-opacity="1"/><stop offset="0.648438" stop-color="rgb(4.042053%, 21.330261%, 21.469116%)" stop-opacity="1"/><stop offset="0.65625" stop-color="rgb(3.952026%, 21.136475%, 21.273804%)" stop-opacity="1"/><stop offset="0.664062" stop-color="rgb(3.863525%, 20.944214%, 21.076965%)" stop-opacity="1"/><stop offset="0.671875" stop-color="rgb(3.775024%, 20.750427%, 20.881653%)" stop-opacity="1"/><stop offset="0.679688" stop-color="rgb(3.686523%, 20.558167%, 20.684814%)" stop-opacity="1"/><stop offset="0.6875" stop-color="rgb(3.598022%, 20.36438%, 20.489502%)" stop-opacity="1"/><stop offset="0.695312" stop-color="rgb(3.507996%, 20.172119%, 20.292664%)" stop-opacity="1"/><stop offset="0.703125" stop-color="rgb(3.419495%, 19.978333%, 20.097351%)" stop-opacity="1"/><stop offset="0.710938" stop-color="rgb(3.330994%, 19.786072%, 19.900513%)" stop-opacity="1"/><stop offset="0.71875" stop-color="rgb(3.242493%, 19.592285%, 19.7052%)" stop-opacity="1"/><stop offset="0.726562" stop-color="rgb(3.152466%, 19.400024%, 19.508362%)" stop-opacity="1"/><stop offset="0.734375" stop-color="rgb(3.063965%, 19.206238%, 19.313049%)" stop-opacity="1"/><stop offset="0.742188" stop-color="rgb(2.975464%, 19.013977%, 19.116211%)" stop-opacity="1"/><stop offset="0.75" stop-color="rgb(2.886963%, 18.82019%, 18.920898%)" stop-opacity="1"/><stop offset="0.757812" stop-color="rgb(2.798462%, 18.62793%, 18.72406%)" stop-opacity="1"/><stop offset="0.765625" stop-color="rgb(2.708435%, 18.434143%, 18.528748%)" stop-opacity="1"/><stop offset="0.773438" stop-color="rgb(2.619934%, 18.241882%, 18.331909%)" stop-opacity="1"/><stop offset="0.78125" stop-color="rgb(2.531433%, 18.048096%, 18.136597%)" stop-opacity="1"/><stop offset="0.789062" stop-color="rgb(2.442932%, 17.855835%, 17.939758%)" stop-opacity="1"/><stop offset="0.796875" stop-color="rgb(2.352905%, 17.662048%, 17.744446%)" stop-opacity="1"/><stop offset="0.804688" stop-color="rgb(2.264404%, 17.469788%, 17.547607%)" stop-opacity="1"/><stop offset="0.8125" stop-color="rgb(2.175903%, 17.276001%, 17.352295%)" stop-opacity="1"/><stop offset="0.820312" stop-color="rgb(2.087402%, 17.08374%, 17.155457%)" stop-opacity="1"/><stop offset="0.828125" stop-color="rgb(1.997375%, 16.889954%, 16.960144%)" stop-opacity="1"/><stop offset="0.835938" stop-color="rgb(1.908875%, 16.697693%, 16.763306%)" stop-opacity="1"/><stop offset="0.84375" stop-color="rgb(1.820374%, 16.503906%, 16.567993%)" stop-opacity="1"/><stop offset="0.851562" stop-color="rgb(1.731873%, 16.311646%, 16.371155%)" stop-opacity="1"/><stop offset="0.859375" stop-color="rgb(1.643372%, 16.119385%, 16.175842%)" stop-opacity="1"/><stop offset="0.867188" stop-color="rgb(1.553345%, 15.925598%, 15.979004%)" stop-opacity="1"/><stop offset="0.875" stop-color="rgb(1.464844%, 15.733337%, 15.783691%)" stop-opacity="1"/><stop offset="0.882812" stop-color="rgb(1.376343%, 15.539551%, 15.586853%)" stop-opacity="1"/><stop offset="0.890625" stop-color="rgb(1.287842%, 15.34729%, 15.391541%)" stop-opacity="1"/><stop offset="0.898438" stop-color="rgb(1.197815%, 15.153503%, 15.194702%)" stop-opacity="1"/><stop offset="0.90625" stop-color="rgb(1.109314%, 14.961243%, 14.99939%)" stop-opacity="1"/><stop offset="0.914062" stop-color="rgb(1.020813%, 14.767456%, 14.802551%)" stop-opacity="1"/><stop offset="0.921875" stop-color="rgb(0.932312%, 14.575195%, 14.607239%)" stop-opacity="1"/><stop offset="0.929688" stop-color="rgb(0.843811%, 14.381409%, 14.4104%)" stop-opacity="1"/><stop offset="0.9375" stop-color="rgb(0.753784%, 14.189148%, 14.215088%)" stop-opacity="1"/><stop offset="0.945312" stop-color="rgb(0.665283%, 13.995361%, 14.01825%)" stop-opacity="1"/><stop offset="0.953125" stop-color="rgb(0.576782%, 13.803101%, 13.822937%)" stop-opacity="1"/><stop offset="0.960938" stop-color="rgb(0.488281%, 13.609314%, 13.626099%)" stop-opacity="1"/><stop offset="0.96875" stop-color="rgb(0.398254%, 13.417053%, 13.430786%)" stop-opacity="1"/><stop offset="0.976562" stop-color="rgb(0.309753%, 13.223267%, 13.233948%)" stop-opacity="1"/><stop offset="0.984375" stop-color="rgb(0.221252%, 13.031006%, 13.038635%)" stop-opacity="1"/><stop offset="0.992188" stop-color="rgb(0.132751%, 12.837219%, 12.841797%)" stop-opacity="1"/><stop offset="1" stop-color="rgb(0.0442505%, 12.644958%, 12.646484%)" stop-opacity="1"/></linearGradient></defs><g clip-path="url(#clip-0)"><g clip-path="url(#clip-1)"><path fill-rule="nonzero" fill="url(#linear-pattern-0)" d="M 0 0 L 0 3304.929688 L 2485.121094 3304.929688 L 2485.121094 0 Z M 0 0 "/></g></g></svg>
\ No newline at end of file
diff --git a/apps/dotcom/src/app/pages/contact/functions.ts b/apps/dotcom/src/app/pages/contact/functions.ts
new file mode 100644
index 00000000..72798cc6
--- /dev/null
+++ b/apps/dotcom/src/app/pages/contact/functions.ts
@@ -0,0 +1,12 @@
+// DEMO NOTE: this function is just to mock an actual API request
+// In reality there would be some logic and a call to another service
+// but for the sake of demonstration, this just prints any given parameters
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+export function submitFormData(...parameters) {
+    return new Promise((resolve, reject) => {
+        console.log(parameters);
+        resolve(0);
+    });
+}