Add premium block

components/md-renderer/mdx-components/index.tsx

@@ -9,6 +9,7 @@ import EnrichedLink from './a';
 import { BadgeLink } from './badge-link';
 import Ul from './ul';
 import Li from './li';
+import PremiumBlock from './premium-block';
 
 const MdxComponents = {
   p: P,
@@ -20,6 +21,7 @@ const MdxComponents = {
   iframe: IFrame,
   img: Img,
   BadgeLink: BadgeLink,
+  PremiumBlock: PremiumBlock,
   ul: Ul,
   li: Li
 };

components/md-renderer/mdx-components/premium-block.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Button, Heading, Text } from '@chakra-ui/react';
+import { LockIcon } from '@chakra-ui/icons';
+
+type PremiumBlockProps = {
+  title: string;
+  description: string;
+};
+
+export default function PremiumBlock(props: PremiumBlockProps) {
+  return (
+    <Box p='40px' textAlign='center' rounded='5px' mb='18px' bg='gray.50' borderWidth={1}>
+      <LockIcon color='gray.300' height='45px' w='45px' mb='18px' />
+      <Heading as='h3' fontSize='30px' mb='10px'>{props.title}</Heading>
+      <Text mb='18px'>{props.description}</Text>
+      <Button colorScheme='green'>Become a Member</Button>
+    </Box>
+  );
+}

content/videos/system-design-101.md

@@ -2,19 +2,9 @@ System Design is a broad topic. In this video, we discuss all the bits and piece
 in depth of each of the topic but this is to give you a high level overview of all the pieces involved. The topics
 covered in this video include:
 
-* DNS — Domain Name System
-* Horizontal Scaling vs Vertical Scaling
-* Content Delivery Networks
-* Load Balancers
-* Application Architectures (Microservices, SOA)
-* Storage (Database, Caching, Cloud Storage)
-* Datawarehouse
-* Logging
-* Messaging/Queues
-* Search Engines
-
-You can watch the video below or head over to the [YouTube Channel](https://www.youtube.com/watch?v=37AFBZv4_6Y), where you can find more videos and the discussions on this video.
-
-<iframe src="https://www.youtube.com/embed/37AFBZv4_6Y" title="System Design 101" />
+<PremiumBlock 
+    title='Premium Video' 
+    description='This content is available only for the paid members.' 
+/>
 
 If you liked this video, you are going to love our [YouTube Channel](https://youtube.com/theroadmap?sub_confirmation=1).