Add cap theorem video

content/videos.json

@@ -1,4 +1,15 @@
 [
+  {
+    "id": "what-is-cap-theorem",
+    "title": "What is CAP Theorem?",
+    "description": "An illustrated explanation to CAP theorem with examples and proof.",
+    "isPro": false,
+    "youtubeLink": "https://www.youtube.com/watch?v=_RbsFXWRZ10",
+    "authorUsername": "kamranahmedse",
+    "duration": "8 minutes",
+    "updatedAt": "2021-10-05T19:59:14.191Z",
+    "createdAt": "2021-10-05T19:59:14.191Z"
+  },
   {
     "id": "acid-explained",
     "title": "ACID Explained: Atomic, Consistent, Isolated Durable",

content/videos/what-is-cap-theorem.md

@@ -0,0 +1 @@
+<iframe src="https://www.youtube.com/embed/_RbsFXWRZ10" title="What is CAP Theorem?" />

pages/[roadmap]/index.tsx

@@ -50,7 +50,7 @@ function TextualRoadmap(props: RoadmapProps) {
   );
 }
 
-function NewBanner() {
+export function NewBanner() {
   return (
     <Text _hover={{ textDecoration: 'none', color: 'blue.700', '& .new-badge': { bg: 'blue.700' } }}
           as={Link}

pages/roadmaps.tsx

@@ -7,6 +7,7 @@ import { PageHeader } from '../components/page-header';
 import { RoadmapGridItem } from '../components/roadmap/roadmap-grid-item';
 import { getAllRoadmaps, RoadmapType } from '../lib/roadmap';
 import Helmet from '../components/helmet';
+import { NewBanner } from './[roadmap]';
 
 type RoadmapsProps = {
   roadmaps: RoadmapType[];
@@ -24,6 +25,7 @@ export default function Roadmaps(props: RoadmapsProps) {
       />
       <Box mb='60px'>
         <PageHeader
+          beforeTitle={<NewBanner />}
           title={'Developer Roadmaps'}
           subtitle={'Step by step guides and paths to learn different tools or technologies'}
         />