Merge pull request #63 from RENCI/feature/improve-contacts-section

Feature/improve contacts section

src/components/sections/key-contacts.js

@@ -1,23 +1,52 @@
 import React from 'react'
 import { Section } from '../section'
-import { ParagraphGrid } from '../paragraph-grid';
 import Grid from '@mui/joy/Grid';
+import { Card, CardContent, AspectRatio, Typography } from '@mui/joy';
+import { Link } from '../link'
 
 export const KeyContacts = ({ content }) => {
-  
+
   return (
     <Section  
       backgroundColor="#1A1B2F"
       title={content.title}
       textColor="#fff"
     >
-      <Grid container spacing={2}>
+      <Grid container spacing={2} mb={3}>
         {
           content.people.map((person) => (
-            <ParagraphGrid key={`contact-${person.name}`} heading={person.name} body={person.description} color="#fff"/>
+            <Grid key={`contact-${person.name}`} xs={12} sm={12} md={6} >
+              <Card orientation="horizontal" size="lg"
+                sx={{ backgroundColor: '#ECF1F2' }}
+              >
+                <AspectRatio flex ratio="1" maxHeight={182} sx={{ minWidth: 182 }}>
+                  <img loading="lazy" alt=""
+                    src={person.photoURL}                    
+                  />
+                </AspectRatio>
+                <CardContent>
+                  <Typography fontSize="xl" fontWeight="lg" >
+                    {person.name}
+                  </Typography>
+                  <Typography>
+                    {person.description}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid> 
           ))
         }
       </Grid>
+
+      <Typography level="h3" sx={{
+        textAlign: 'center', color: '#fff'
+      }}>Questions?</Typography>
+      <Typography sx={{textAlign: 'center', color: '#fff'}}>
+        Contact the team at <Link 
+          to="mailto:[email protected]">[email protected]
+        </Link>
+      </Typography>
+
     </Section>
   )
 }

src/content/sections/key-contacts.yaml

@@ -3,9 +3,7 @@ title: Key Contacts
 people:
   - name: Bryttany Todd
     description: STAR Program Manager
+    photoURL: https://renci.org/wp-content/uploads/2019/05/RENCI_201905_Photo_Todd_Bryttany.jpg
   - name: Ashley Hukins
     description: STAR Program Coordinator
-  - name: Questions?
-    description: >
-      Contact the team at [email protected] or 
-      join our slack channel, #star-program-info.
+    photoURL: https://ca.slack-edge.com/T0450N0TQ-U044V4MNF1B-263648a9357a-512

src/hooks/use-section-content.js

@@ -59,6 +59,7 @@ export const useSectionContent = () => {
         people {
           name
           description
+          photoURL
         }
       }
       ProcessOverview: sectionsYaml(section_id: { eq: "process-overview" }) {
@@ -137,8 +138,8 @@ export const useSectionContent = () => {
         title
         students {
           student_name
-          title
           semester
+          title
           project_description
           project_link_text
           project_link