finishes about page skeleton

cinjon · Jan 20, 2023 · 1e6524d · 1e6524d
1 parent 9f0f7c0
commit 1e6524d
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 10 deletions.
diff --git a/src/data/experts.yml b/src/data/experts.yml
@@ -0,0 +1,33 @@
+---
+
+  - title: Ralph Edwards, Mechanical Engineer, PhD
+    bio: A significant improvement on the accuracy of differential privacy training on standard image classification benchmarks.
+    linkedin: https://www.linkedin.com
+
+  - title: Cody Fisher
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College –
+    linkedin: https://www.linkedin.com
+
+  - title: Cody Fisher, PhD
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College –
+    linkedin: https://www.linkedin.com
+
+  - title: Darrell Steward, PhD
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College – Design, a program that teaches medical students to solve healthcare challenges using design thinking methodology.
+    linkedin: https://www.linkedin.com
+
+  - title: Darrell Steward, MD, MPP
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College – Design, a program that teaches medical students to solve healthcare challenges using design thinking methodology.
+    linkedin: https://www.linkedin.com
+
+  - title: Cody Fisher, MD, MPP.
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College –
+    linkedin: https://www.linkedin.com
+
+  - title: Cody Fisher, PhD
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College –
+    linkedin: https://www.linkedin.com
+
+  - title: Darrell Steward, PhD
+    bio: Associate Professor of Emergency Medicine and the Associate Dean for Co-Curricular Programs at Sidney Kimmel Medical College at Thomas Jefferson University. Ku directs the College within a College – Design, a program that teaches medical students to solve healthcare challenges using design thinking methodology.
+    linkedin: https://www.linkedin.com
diff --git a/src/screens/AboutScreen.jsx b/src/screens/AboutScreen.jsx
@@ -1,7 +1,34 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import yaml from "js-yaml";
+
 import voterfraud from "../assets/voter-fraud.png";
+import rightArrow from "../assets/right-arrow.png";
+
+import expertsData from "../data/experts.yml";
 
 export const AboutScreen = () => {
+  const [experts, setExperts] = React.useState([]);
+
+  useEffect(() => {
+    fetch(expertsData)
+      .then((expertsResponse) => { return expertsResponse.text() })
+      .then((expertsText) => {
+        setExperts(yaml.load(expertsText));
+      });
+  }, []);
+
+  const renderExpert = (expertData) => {
+    return (
+      <div className="expert">
+        <p className="expert-title">{expertData.title}</p>
+        <p className="expert-bio">{expertData.bio}</p>
+        <a className="expert-linkedin" href={expertData.linkedin ?? "#"} target="_blank" rel="noreferrer">
+          <p className="linkedin-text">Linkedin</p>
+          <img src={rightArrow} alt="right-arrow" className="view-more-arrow" />
+        </a>
+      </div>
+    )
+  }
 
   return (
     <div className="screen about-screen">
@@ -38,13 +65,43 @@ export const AboutScreen = () => {
       </div>
 
       <div className="section awarding-the-prize-section">
-
+        <p className="section-title">AWARDING THE PRIZE</p>
+        <p className="section-description">We leverage the <span className="emphasis">Research Portfolio</span> platform to distribute awards, creating a simple, on-chain record of prizes and influences.</p>
+        <div className="awarding-infos">
+          <div className="awarding-info">
+            <p className="info-title">Claiming process</p>
+            <p className="info-details">Researchers will mint their research using their unique technology on Research Portfolio. Afterwards they can claim their prize by simply connecting their wallets to Amaranth Prize website.</p>
+          </div>
+          <div className="awarding-info">
+            <p className="info-title">Influencing Papers</p>
+            <p className="info-details">We enable each prize wining team to acknowledge and reward the influential papers and work that has provided a foundation for their winning research efforts.</p>
+          </div>
+        </div>
       </div>
 
       <div className="section experts-section">
-
+        <p className="section-title">THE EXPERTS</p>
+        <p className="section-description">This is a list of our generous experts giving their time to choose the most impactful research in longevity this year.</p>
+        <div className="experts">
+          <div className="experts-column column-1">
+            {experts[0] ? renderExpert(experts[0]) : (<></>)}
+            {experts[1] ? renderExpert(experts[1]) : (<></>)}
+          </div>
+          <div className="experts-column column-2">
+            {experts[2] ? renderExpert(experts[2]) : (<></>)}
+            {experts[3] ? renderExpert(experts[3]) : (<></>)}
+          </div>
+          <div className="experts-column column-3">
+            {experts[4] ? renderExpert(experts[4]) : (<></>)}
+            {experts[5] ? renderExpert(experts[5]) : (<></>)}
+          </div>
+          <div className="experts-column column-4">
+            {experts[6] ? renderExpert(experts[6]) : (<></>)}
+            {experts[7] ? renderExpert(experts[7]) : (<></>)}
+          </div>
+        </div>
+        <p className="more-experts-disclaimer">More experts will be added to the panel</p>
       </div>
-
     </div>
   )
 

diff --git a/src/screens/HomeScreen.jsx b/src/screens/HomeScreen.jsx
@@ -47,7 +47,7 @@ const Join = () => {
         const value = target.value;
         setEmail(value)
         setSubscribed(false)
-    }  
+    }
 
     return (
         <form action="#" onSubmit={(e) => onSubmit(e, email)}>
@@ -79,7 +79,7 @@ const FAQ = () => {
             .then((faqResponse) => { return faqResponse.text() })
             .then((faqText) => {
                 setFAQs(yaml.load(faqText));
-            });        
+            });
     })
 
     return (
@@ -110,7 +110,7 @@ const FAQ = () => {
           })}
         </div>
       </div>
-    )    
+    )
 }
 
 export const HomeScreen = () => {
@@ -123,7 +123,6 @@ export const HomeScreen = () => {
       .then((papersText) => {
         setPapers(yaml.load(papersText));
       });
-
   }, []);
 
     const faq = IS_FAQ_READY ? <FAQ /> : null
@@ -249,7 +248,7 @@ export const HomeScreen = () => {
           </div>
           <PaperCarousel papers={papers.filter((paper) => { return paper["winner"] })} />
         </div>
-        {IS_PARENTS_READY && 
+        {IS_PARENTS_READY &&
         <div className="winning-paper-highlight parents">
           <div className="highlight-header">
             <p className="highlight-title">Parents of the winning papers</p>
@@ -264,7 +263,7 @@ export const HomeScreen = () => {
           <PaperCarousel papers={papers.filter((paper) => { return paper["parent"] })} />
         </div>
         }
-        {IS_GRANDPARENTS_READY && 
+        {IS_GRANDPARENTS_READY &&
         <div className="winning-paper-highlight grandparents">
           <div className="highlight-header">
             <p className="highlight-title">Grandparents of the winning papers</p>

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -643,6 +643,9 @@ input {
     color: $charcoal-dark;
     line-height: 120%;
     letter-spacing: 0.01em;
+    span.emphasis {
+      color: $emphasis-red;
+    }
   }
 
   .section.banner-section {
@@ -729,4 +732,110 @@ input {
     }
   }
 
+  .section.awarding-the-prize-section {
+    margin-top: 100px;
+
+    .awarding-infos {
+      margin-top: 32px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .awarding-info {
+        max-width: 555px;
+        border-top: 1px solid $charcoal-ultra-light;
+
+        .info-title {
+          margin-top: 24px;
+          font-size: 28px;
+          font-weight: 400;
+          color: $charcoal-dark;
+          line-height: 125%;
+        }
+
+        .info-details {
+          margin-top: 8px;
+          font-size: 20px;
+          font-weight: 400;
+          color: $charcoal-dark;
+          line-height: 125%;
+        }
+      }
+
+    }
+  }
+
+  .section.experts-section {
+    margin-top: 100px;
+    margin-bottom: 100px;
+
+    .experts {
+      margin-top: 32px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .experts-column {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+      }
+
+      .expert {
+        width: 252px;
+        border-top: 1px solid $charcoal-ultra-light;
+        margin-top: 24px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+
+        .expert-title {
+          margin-top: 18px;
+          font-size: 16px;
+          font-weight: 600;
+          color: $charcoal-dark;
+          line-height: 135%;
+          letter-spacing: -0.01em;
+        }
+
+        .expert-bio {
+          margin-top: 8px;
+          font-size: 16px;
+          font-weight: 400;
+          color: $charcoal-dark;
+          line-height: 135%;
+          letter-spacing: -0.01em;
+        }
+
+        .expert-linkedin {
+          margin-top: 8px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          .linkedin-text {
+            border-bottom: 1px solid $charcoal-dark;
+            font-size: 16px;
+            font-weight: 400;
+            color: $charcoal-dark;
+          }
+
+          img.view-more-arrow {
+            margin-left: 4px;
+            width: 12px;
+          }
+        }
+      }
+    }
+
+    .more-experts-disclaimer {
+      margin-top: 64px;
+      font-size: 16px;
+      font-weight: 400;
+      color: $charcoal-light;
+      text-align: center;
+    }
+
+  }
+
 }