From 7bf7250b5470069ef533c4a7fbc1ef62d09ec289 Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Tue, 28 Jul 2020 15:20:09 +0300
Subject: [PATCH 1/2] make example of custom component

---
 components/Card.tsx | 58 +++++++++++++++++++++++++++++++++++++++++++++
 index.mdx           |  9 +++++++
 2 files changed, 67 insertions(+)
 create mode 100644 components/Card.tsx

diff --git a/components/Card.tsx b/components/Card.tsx
new file mode 100644
index 00000000..5b4949b3
--- /dev/null
+++ b/components/Card.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export default function Card(props: { title: string; children: any }) {
+  const { title, children } = props;
+
+  return (
+    <StyledCard>
+      <CardTitle>{title}</CardTitle>
+      {children}
+    </StyledCard>
+  );
+}
+
+const StyledCard = styled.div`
+  position: relative;
+  padding: 24px;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  width: 280px;
+  min-height: 350px;
+  background-color: #fff;
+  overflow: hidden;
+  z-index: 1;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: darkmagenta;
+    clip-path: polygon(0 0, 100% 0%, 100% 64%, 0 90%);
+    z-index: -1;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    color: #fff;
+    font-size: 14px;
+    list-style: none;
+    margin-bottom: 8px;
+    &::before {
+      content: '–';
+      margin-right: 8px;
+    }
+  }
+`;
+
+const CardTitle = styled.h4`
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 0;
+`;
diff --git a/index.mdx b/index.mdx
index ff809d32..7d0f4b80 100644
--- a/index.mdx
+++ b/index.mdx
@@ -26,6 +26,8 @@ import icon3 from './images/icon3.png';
 import bookManagementIcon from './images/book-management.svg';
 import foundOrPrivate from './images/found-or-private.svg';
 
+import Card from './components/Card';
+
 export default LandingLayout;
 
 <Jumbotron>
@@ -67,6 +69,13 @@ export default LandingLayout;
         aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur
         an usu.
     </ThinTile>
+    <Card title="Freemium">
+      <ul>
+        <li>Access to all free APIs</li>
+        <li>Stuff</li>
+        <li>Things</li>
+      </ul>
+    </Card>
   </FlexSection>
   {/* <Jumbotron parallaxEffect bgImage={icon1}>
     <H1>Tutorials</H1>

From d9ea4739ed3f2d1e8bfa040fac0930f0f79f6689 Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Fri, 6 Nov 2020 12:51:43 +0200
Subject: [PATCH 2/2] use theme properties in styled components

---
 components/Card.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Card.tsx b/components/Card.tsx
index 5b4949b3..14e88044 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -29,7 +29,7 @@ const StyledCard = styled.div`
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: darkmagenta;
+    background-color: ${({ theme }) => theme.colors.primary.main};
     clip-path: polygon(0 0, 100% 0%, 100% 64%, 0 90%);
     z-index: -1;
   }
@@ -39,7 +39,7 @@ const StyledCard = styled.div`
   }
   li {
     color: #fff;
-    font-size: 14px;
+    font-size: ${({ theme }) => theme.typography.fontSize};
     list-style: none;
     margin-bottom: 8px;
     &::before {
@@ -51,8 +51,8 @@ const StyledCard = styled.div`
 
 const CardTitle = styled.h4`
   color: #fff;
-  font-size: 20px;
-  font-weight: 600;
+  font-size: ${({ theme }) => theme.typography.heading3.fontSize};
+  font-weight: ${({ theme }) => theme.typography.fontWeightBold};
   text-align: center;
   margin-top: 0;
 `;