feat: Update team data and add to layout

.docz/app/db.json

@@ -465,17 +465,6 @@
         }
       ]
     },
-    {
-      "key": "src/components/About Card/index.jsx",
-      "value": [
-        {
-          "description": "",
-          "displayName": "AboutCards",
-          "methods": [],
-          "actualName": "AboutCards"
-        }
-      ]
-    },
     {
       "key": "src/components/Button/index.jsx",
       "value": [
@@ -607,6 +596,28 @@
           "actualName": "Home"
         }
       ]
+    },
+    {
+      "key": "src/pages/about-us.js",
+      "value": [
+        {
+          "description": "",
+          "displayName": "AboutUs",
+          "methods": [],
+          "actualName": "AboutUs"
+        }
+      ]
+    },
+    {
+      "key": "src/components/About Card/index.jsx",
+      "value": [
+        {
+          "description": "",
+          "displayName": "AboutCards",
+          "methods": [],
+          "actualName": "AboutCards"
+        }
+      ]
     }
   ]
 }

src/components/About Card/index.jsx

@@ -1,13 +1,17 @@
 import React from "react"
+import Img from "gatsby-image"
 
 import styles from "./styles.module.css"
 
-const AboutCards = ({ imageSrc, name, role }) => {
+const AboutCards = ({ teamMember }) => {
   return (
     <div className={styles.card}>
-      <img src={imageSrc} alt={`Foto do ${name}`} className={styles.image} />
-      <h3 className={styles["card-title"]}>{name}</h3>
-      <p className={styles["card-subtitle"]}>{role}</p>
+      <Img
+        fixed={teamMember.image.childImageSharp.fixed}
+        className={styles.image}
+      />
+      <h3 className={styles["card-title"]}>{teamMember.name}</h3>
+      <p className={styles["card-subtitle"]}>{teamMember.role}</p>
     </div>
   )
 }

src/components/Team/styles.module.css

@@ -0,0 +1,6 @@
+.cardsHolder {
+  margin-top: 20px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}

src/components/Team/team.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+import styles from "./styles.module.css"
+import AboutCards from "../About Card"
+
+const Team = () => {
+  const teamQuery = graphql`
+    query {
+      allTeamYaml {
+        edges {
+          name
+          role
+          image {
+            childImageSharp {
+              fixed(width: 100) {
+                ...GatsbyImageSharpFixed_tracedSVG
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+
+  const {
+    allTeamYaml: { edges },
+  } = useStaticQuery(teamQuery)
+
+  return (
+    <div className={styles.cardsHolder}>
+      {edges.map((teamMember, key) => {
+        return <AboutCards key={key} teamMember={teamMember.node} />
+      })}
+      {/* <AboutCards
+          imageSrc={image}
+          name="Anisio Mandlate"
+          role="Software developer"
+        /> */}
+    </div>
+  )
+}

src/pages/about-us.js

@@ -30,7 +30,7 @@ const AboutUs = () => (
 
     <section className={styles.team}>
       <h1>The Team</h1>
-      <div className={styles.cardsHolder}>
+      {/* <div className={styles.cardsHolder}>
         <AboutCards
           imageSrc={image}
           name="Anisio Mandlate"
@@ -56,7 +56,7 @@ const AboutUs = () => (
           name="Anisio Mandlate"
           role="Software developer"
         />
-      </div>
+      </div> */}
     </section>
   </Layout>
 )

src/styles/about-us.module.css

@@ -24,9 +24,9 @@
   text-align: center;
 }
 
-.cardsHolder {
+/* .cardsHolder {
   margin-top: 20px;
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-}
+} */