Merge pull request #4 from DesignSystemsOSS/teams-page

🚀Updated : Teams page

src/App.js

@@ -12,6 +12,7 @@ function App() {
     <div className="center__view App">
       {/* header component */}
       <Header />
+
       <BrowserRouter>
         <Route path="/" exact component={LandingPage} />
         <Route path="/team" exact component={Team} />

src/components/widgets/Cards/TeamCard/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import "./style.cards.teamcard-styles.css";
+
+export default function TeamCard(__TeamCardDetails) {
+  return (
+      <div className="profile-data">
+        <img
+          src={__TeamCardDetails.ImageURL}
+          alt={__TeamCardDetails.UserName}
+        />
+        <h3 className="member-name">{__TeamCardDetails.UserName}</h3>
+        <p className="member-role">{__TeamCardDetails.RoleTitle}</p>
+        <div className="profile-card-links">
+          <a href={__TeamCardDetails.LinkedinProfile} className="profile-links">
+            <i className="fab fa-linkedin-in"></i>
+          </a>
+          <a href={__TeamCardDetails.GithubProfile} className="profile-links">
+            <i className="fab fa-github"></i>
+          </a>
+          <a href={__TeamCardDetails.TwitterProfile} className="profile-links">
+            <i className="fab fa-twitter"></i>
+          </a>
+        </div>
+      </div>
+  );
+}

src/components/widgets/Cards/TeamCard/style.cards.teamcard-styles.scss

@@ -0,0 +1,29 @@
+div.profile-data{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    & img{
+        width: 150px;
+        height: auto;
+        margin-top: 2em;
+    }
+
+    & .member-name{
+        margin-top: 0.5em;
+    }
+}
+
+p.member-role{
+    margin-top: 5px;
+}
+
+div.profile-card-links{
+    margin-top: 5px;
+
+    & a{
+        padding: 7px;
+    }
+}
+
+

src/views/Team/__team-members.json

@@ -1,10 +1,28 @@
 [
   {
-    "name": "Elon Musk",
-    "role": "Founder",
-    "image_url": "",
-    "linkedin_profile": "",
-    "github_profile": "",
-    "twitter_profile": ""
+    "name": "Yash Sehgal",
+    "role": "Co-Founder",
+    "image_url": "https://ik.imagekit.io/vjy2bxam20u/TheDesignSystems-Assets/profilePhotoRed_1_npVkgnwCZQ.png?updatedAt=1631383268801",
+    "linkedin-profile": "https://www.linkedin.com/in/sehgalyash/",
+    "github-profile": "https://github.com/yashsehgal",
+    "twitter-profile": "https://twitter.com/YashSeh90869786"
+  },
+
+  {
+    "name": "Atharva Gadkari",
+    "role": "Co-Founder",
+    "image_url": "https://ik.imagekit.io/vjy2bxam20u/TheDesignSystems-Assets/Group_1_fivBk_lsl9.png?updatedAt=1631383197019",
+    "linkedin-profile": "https://www.linkedin.com/in/atharva-gadkari-0974b11b6/",
+    "github-profile": "https://github.com/atharvagadkari05",
+    "twitter-profile": "https://twitter.com/atharvagadkari5"
+  },
+
+  {
+    "name": "Ayush Soni",
+    "role": "Frontend Engineer",
+    "image_url": "https://ik.imagekit.io/vjy2bxam20u/TheDesignSystems-Assets/circle-cropped_MoUAyw3Xw.png?updatedAt=1631358536555",
+    "linkedin-profile": "https://www.linkedin.com/in/ayushsoni1010/",
+    "github-profile": "https://github.com/ayushsoni1010",
+    "twitter-profile": "https://twitter.com/ayushsoni1010"
   }
 ]

src/views/Team/index.js

@@ -1,13 +1,27 @@
 import React from 'react';
+import { useState } from 'react';
 import './style.views.team.css';
+import TeamCard from '../../components/widgets/Cards/TeamCard';
+import TeamCardDetails from './__team-members.json'
 
 export default function Team() {
+  const [teamMemberDetails] = useState(TeamCardDetails);
   return (
-    <div className="team">
-      <h1 className="team-section-title">Our Team</h1>
+    <div className="teams-page">
+      <h1 className="page-title ">Our Team</h1>
       <div className="team-members-section-wrapper">
-
+        {teamMemberDetails.map((data, index) => (
+          <TeamCard
+            ImageURL={data.image_url}
+            UserName={data.name}
+            RoleTitle={data.role}
+            LinkedinProfile={data["linkedin-profile"]}
+            GithubProfile={data["github-profile"]}
+            TwitterProfile={data['twitter-profile']}
+            key={index}
+          />
+        ))}
       </div>
     </div>
-  )
+  );
 }

src/views/Team/style.views.team.scss

@@ -0,0 +1,18 @@
+div.teams-page{
+    margin-top: 8em;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+h1.title{
+    font-size: 52px;
+    text-align: center;
+    margin-top: 2.5em;
+}
+
+div.team-members-section-wrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}