Merge pull request #11 from gpul-org/feat/current-board

Add current board of the association

Author: jorgeteixe

src/components/Activities/index.tsx

@@ -1,5 +1,4 @@
 import React, {ReactNode} from 'react';
-import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const activities = [
@@ -24,10 +23,10 @@ export default function Activities(): ReactNode {
   return (
     <section className={styles.activities}>
       <div className="container">
-        <h2 className={styles.title}>A qué nos dedicamos</h2>
+        <h2 className={styles.title}>A que nos dedicamos</h2>
         <div className={styles.grid}>
           {activities.map((activity, idx) => (
-            <div key={idx} className={clsx('card')}>
+            <div key={idx} className="card">
               <h3>{activity.title}</h3>
               <p>{activity.description}</p>
             </div>

src/components/Activities/styles.module.css

@@ -14,6 +14,10 @@
   gap: 2rem;
 }
 
+h3 {
+  margin-top: .5rem;
+}
+
 @media screen and (min-width: 768px) {
   .grid {
     grid-template-columns: repeat(3, 1fr);

src/components/Board/index.module.css

@@ -0,0 +1,9 @@
+.board {
+  padding: 2rem 0;
+  text-align: center;
+}
+
+.title {
+  color: var(--ifm-color-primary);
+  margin-bottom: 2rem;
+}

src/components/Board/index.tsx

@@ -0,0 +1,73 @@
+import React, {ReactNode} from 'react';
+import styles from './index.module.css';
+
+const boardMembers = [
+  {
+    name: 'Jorge Teixeira',
+    role: 'Presidente',
+    gh: 'https://github.com/jorgeteixe',
+  },
+  {
+    name: 'David Maseda',
+    role: 'Vicepresidente',
+    gh: 'https://github.com/wizenink',
+  },
+  {
+    name: 'Álvaro Freire',
+    role: 'Tesoureiro',
+    gh: 'https://github.com/alvaro-freire',
+  },
+  {
+    name: 'Paula Taibo',
+    role: 'Secretaria',
+    gh: 'https://github.com/PT-15',
+  },
+  {
+    name: 'Siyuan He',
+    role: 'Vogal',
+    gh: 'https://github.com/siyunesweek',
+  },
+  {
+    name: 'Bruno Cabado',
+    role: 'Vogal',
+    gh: 'https://github.com/Kr4is',
+  },
+  {
+    name: 'Pedro Costal',
+    role: 'Vogal',
+    gh: 'https://github.com/pedrety',
+  },
+];
+
+export default function Board(): ReactNode {
+  return (
+    <section className={styles.board}>
+      <h2 className={styles.title}>Xunta Directiva</h2>
+      <div className="container">
+        <div className="row">
+          {boardMembers.map((member, idx) => (
+            <div key={idx} className="col col--3 margin-bottom--md">
+              <div className="card">
+                <div className="card__header">
+                  <div className="avatar">
+                    <a href={member.gh} target="_blank" rel="noopener noreferrer">
+                      <img
+                        className="avatar__photo"
+                        src={`${member.gh}.png`}
+                        alt={`${member.name}`}
+                      />
+                    </a>
+                    <div className="avatar__intro">
+                      <div className="avatar__name">{member.name}</div>
+                      <small className="avatar__subtitle">{member.role}</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/CallToAction/index.tsx

@@ -7,7 +7,7 @@ export default function CallToAction(): ReactNode {
     <section className={styles.cta}>
       <div className="container">
         <div className={styles.content}>
-          <h2 className={styles.title}>Únete á Nosa Comunidade</h2>
+          <h2 className={styles.title}>Únete á nosa comunidade</h2>
           <p className={styles.description}>
             Listo para formar parte de algo maior? Únete á nosa comunidade de
             entusiastas da tecnoloxía e comeza a túa viaxe connosco hoxe.

src/components/Hero/styles.module.css

@@ -1,5 +1,5 @@
 .heroBanner {
-  padding: 4rem 0;
+  padding: 2rem 0;
   text-align: center;
 }
 

src/pages/index.tsx

@@ -4,6 +4,7 @@ import type {ReactNode} from 'react';
 import Hero from '../components/Hero';
 import Intro from '../components/Intro';
 import Activities from '../components/Activities';
+import Board from '../components/Board';
 import CallToAction from '../components/CallToAction';
 
 export default function Home(): ReactNode {
@@ -15,6 +16,7 @@ export default function Home(): ReactNode {
         <Hero />
         <Intro />
         <Activities />
+        <Board />
         <CallToAction />
       </main>
     </Layout>