Merge pull request #51 from hicsail/add-placeholder-image

Add 'Why Our Work is Important' component

packages/client/src/gql.jsx

@@ -106,6 +106,24 @@ export const GET_HOMEPAGE_INFOPANEL_BOTTOM = gql`
     }
   }
 `;
+export const GET_WHYOURWORK_IMG = gql`
+  query GetWhyOurWorkIsImportantImage {
+    whyOurWorkIsImportant {
+      data {
+        attributes {
+          Image {
+            data {
+              attributes {
+                alternativeText
+                url
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
 export const GET_TREATMENTS_AND_SERVICES = gql`
   query GetTreatmentsAndServices {
     treatmentsAndServices {

packages/client/src/main.jsx

@@ -12,7 +12,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 
 import Home from './pages/Home.jsx';
 import Layout from './pages/Layout.jsx';
-import AboutMission from './pages/AboutMission.jsx';
+import About from './pages/About.jsx';
 import TreatmentsServices from './pages/TreatmentsServices.jsx';
 import { ServicesToTheHealthSystem, ServicesToOurPatients } from './pages/TreatmentsServices.jsx';
 import TeamMemberGrid from './pages/Team.jsx';
@@ -54,7 +54,7 @@ const router = createBrowserRouter([
       },
       {
         path: 'about',
-        element: <AboutMission />
+        element: <About />
       },
       {
         path: 'treatments-and-services',

packages/client/src/pages/About.jsx

@@ -0,0 +1,98 @@
+import { Box, Typography } from '@mui/material';
+import { InfoPanelA } from '../components/InfoPanelA.jsx';
+import { prependStrapiURL } from '../utils.jsx';
+import { theme } from '../theme.jsx';
+import { useQuery } from '@apollo/client';
+import { GET_WHYOURWORK_IMG } from '../gql.jsx';
+
+function Mission() {
+  return (
+    <InfoPanelA
+      id="our-mission"
+      title="Our Mission"
+      subtitle={
+        <>
+          <p>
+            RESTORE stands for: <strong>RE</strong>covery from <strong>S</strong>tress and <strong>T</strong>rauma
+            through <strong>O</strong>utpatient care, <strong>R</strong>esearch and <strong>E</strong>ducation.
+          </p>
+          <p>The RESTORE Center aims to</p>
+          {/* Override InfoPanelA's responsive textAlign styling in the specific case of <ul>;
+                otherwise the center-aligned bullet list looks pretty awful */}
+          <ul style={{ textAlign: 'left' }}>
+            <li>
+              <span style={{ color: theme.palette.purple.dark }}>
+                <strong>improve access</strong>
+              </span>{' '}
+              to high-quality services for PTSD across the health system
+            </li>
+            <li>
+              <span style={{ color: theme.palette.purple.dark }}>
+                <strong>remove barriers</strong>
+              </span>{' '}
+              to treatment for our patients.
+            </li>
+          </ul>
+        </>
+      }
+      imageUrl={prependStrapiURL('/uploads/ourmission_95ef74d5f3.png')}
+    />
+  );
+}
+
+function Strategies() {
+  return (
+    <InfoPanelA
+      id="our-strategies"
+      title="Our Strategies"
+      subtitle={
+        <Typography>
+          RESTORE uses various strategies to achieve these goals, including:
+          {/* Override InfoPanelA's responsive textAlign styling in the specific case of <ul>;
+              otherwise the center-aligned bullet list looks pretty awful */}
+          <ul style={{ textAlign: 'left' }}>
+            <li>Clinical training and consultation initiatives</li>
+            <li>Offering web-delivered mental health applications</li>
+            <li>Tailoring treatments to fit usual care settings</li>
+            <li>Patient education and outreach to reduce mental health stigma and build trust</li>
+            <li>Expanding the capacity of the mental health workforce</li>
+            <li>Community health worker-supported services</li>
+            <li>Cultural tailoring of treatments to increase quality and fit with our patients</li>
+            <li>Offering coping skills training to increase readiness for intensive treatments</li>
+            <li>Improving the patient experience through measurement-based care</li>
+            <li>Partnering with the community through various advisory boards</li>
+          </ul>
+        </Typography>
+      }
+    />
+  );
+}
+
+function WhyOurWorkIsImportant() {
+  const { loading, error, data } = useQuery(GET_WHYOURWORK_IMG);
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  const imgdata = data.whyOurWorkIsImportant.data.attributes.Image.data;
+
+  return (
+    imgdata && (
+      <Box
+        component="img"
+        alt={imgdata.attributes.alternativeText}
+        src={prependStrapiURL(imgdata.attributes.url)}
+        sx={{ display: 'block', margin: '2em auto' }}
+      />
+    )
+  );
+}
+
+export default function About() {
+  return (
+    <>
+      <Mission />
+      <WhyOurWorkIsImportant />
+      <Strategies />
+    </>
+  );
+}