Updated the card component to follow the new design

my-app/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="src/index.css" />

my-app/package.json

@@ -15,7 +15,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook"
+    "storybook": "start-storybook -s public, src"
   },
   "eslintConfig": {
     "extends": "react-app"

my-app/src/components/Input/Input.css

@@ -0,0 +1,3 @@
+input {
+  font-size: 1.6rem;
+}

my-app/src/components/avatar/avatarComponent.jsx → my-app/src/components/avatar/avatar.component.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import './avatar.css';
-import avatarPhoto from './avatar.jpg';
+import React from "react";
+import "./avatar.css";
+import avatarPhoto from "./avatar.jpg";
 
 const Avatar = () => {
   return (
-    <div>
+    <div className="avatar">
       <img src={avatarPhoto} alt="avatar" className="avatar-img" />
     </div>
   );

my-app/src/components/avatar/avatar.css

@@ -1,5 +1,5 @@
 .avatar-img {
   border-radius: 50%;
-  margin-top: 1em;
-  width: 7rem;
+  height: 6rem;
+  width: 6rem;
 }

my-app/src/components/Input/Input.js → my-app/src/components/input/input.component.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import './Input.css';
+import React from "react";
+import "./input.css";
 
 const Input = ({ type, name }) => {
   return <input type={type} name={name}></input>;

my-app/src/components/link/linkComponent.js → my-app/src/components/link/link.component.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import './link.css';
+import React from "react";
+import "./link.css";
 
 const Link = ({ link, text }) => {
   return (

my-app/src/components/link/link.css

@@ -1,11 +1,10 @@
-.contact-link{
-    font-family: 'Roboto', sans-serif;
-    font-style: normal;
-    font-size: 1em;
-    font-weight: 500;
-    text-decoration-line: underline;
+.contact-link {
+  font-style: normal;
+  font-size: 1.6rem;
+  font-weight: 500;
+  text-decoration-line: underline;
 }
 
 a {
-    color: #3B4349;
+  color: #3b4349;
 }

my-app/src/components/sampleButton/button.css

@@ -0,0 +1,3 @@
+button {
+  font-size: 1.6rem;
+}

my-app/src/components/sampleButton/sampleButton.component.js → my-app/src/components/sampleButton/sample-button.component.js

@@ -2,7 +2,8 @@
 // how you can make your component in storybook. <-----
 
 // Import react, css and other files if needed
-import React from 'react';
+import React from "react";
+import "./button.css";
 
 const SampleButton = () => {
   return <button>Sample button</button>;

my-app/src/components/userCard/user-card.component.js

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./user-card.css";
+import Avatar from "../avatar/avatar.component";
+import UserCardSection from "../userCardSection/user-card-section.component";
+
+const Name = ({ name }) => {
+  return (
+    <div className="name">
+      <h5>{name}</h5>
+    </div>
+  );
+};
+
+const Role = ({ mentor, mentee }) => {
+  return (
+    <div className="role">
+      <h6>
+        {mentor && mentee ? (
+          <>
+            <span>Mentor</span> /<span> Mentee</span>
+          </>
+        ) : mentee ? (
+          <span>Mentee</span>
+        ) : (
+          <span>Mentor</span>
+        )}
+      </h6>
+    </div>
+  );
+};
+
+function getClassName(user) {
+  const classes = ["card"];
+  user.mentor && classes.push("mentor");
+  user.mentee && classes.push("mentee");
+  return classes.join(" ");
+}
+
+const UserCard = ({ user, sections }) => {
+  const { name, mentor, mentee } = user;
+  return (
+    <div className={getClassName(user)}>
+      <div className={sections.length > 1 ? "extended content" : "content"}>
+        {}
+        <Avatar />
+        <Name name={name} />
+        <Role mentor={mentor} mentee={mentee} />
+        {sections.length > 0 &&
+          sections.map((article, index) => (
+            <UserCardSection
+              key={index}
+              title={article.title}
+              text={article.text}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+UserCard.propTypes = {
+  user: PropTypes.object.isRequired,
+  sections: PropTypes.array.isRequired
+};
+
+export default UserCard;

my-app/src/components/userCard/user-card.css

@@ -0,0 +1,64 @@
+.card {
+  align-items: center;
+  background-color: #fea594;
+  color: #3b4349;
+  display: flex;
+  flex-direction: column;
+  margin: 6rem;
+  padding: 1.3rem;
+  text-align: left;
+  width: 32rem;
+}
+
+.card.mentee {
+  background-color: #e32c6a;
+}
+
+.card.mentor-mentee {
+  background: linear-gradient(
+    135deg,
+    rgba(227, 43, 105, 1) 0%,
+    rgba(248, 194, 161, 1) 100%
+  );
+}
+
+.card .content {
+  background-color: #fff;
+  margin: 0 1.6rem;
+  padding: 1.2rem 2.4rem 0.4rem;
+  position: relative;
+  width: 29.2rem;
+}
+
+.card .avatar {
+  position: absolute;
+  left: 40%;
+  transform: translateX(-40%);
+  transform: translateY(-60%);
+  top: 0;
+}
+
+.card .extended .name,
+.card .extended .role {
+  text-align: center;
+}
+
+.card .extended .role + .card-section {
+  border-top: none;
+}
+
+.card .name h5 {
+  padding: 1.2rem 0 0;
+}
+
+.card .role h6 {
+  color: #fd4927;
+  font-size: 1.6rem;
+  font-weight: 300;
+  margin: 0.8rem 0;
+  text-transform: uppercase;
+}
+
+.card .role h6 span {
+  font-size: 1.6rem;
+}

my-app/src/components/userCardSection/user-card-section.component.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./user-card-section.css";
+
+const UserCardSection = ({ title, text }) => {
+  return (
+    <section className="user-card">
+      <h6>{title}</h6>
+      <p>{text}</p>
+    </section>
+  );
+};
+
+export default UserCardSection;

my-app/src/components/userCardSection/user-card-section.css

@@ -0,0 +1,9 @@
+.user-card {
+  border-top: 1px solid rgba(253, 73, 39, 0.5);
+  margin: 1.2rem 0;
+  padding-top: 1.2rem;
+}
+
+.user-card h6 {
+  margin-bottom: 0.3rem;
+}