diff --git a/components/guide-header.tsx b/components/guide-header.tsx
new file mode 100644
index 000000000..c0b78ff2a
--- /dev/null
+++ b/components/guide-header.tsx
@@ -0,0 +1,30 @@
+import { Box, Container, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
+import React from 'react';
+
+type GuideHeaderProps = {
+ title: string;
+ subtitle: string;
+};
+
+export function GuideHeader(props: GuideHeaderProps) {
+ const { title, subtitle } = props;
+
+ return (
+
+
+
+
+
+ Kamran Ahmed
+
+ ·
+ Monday, May 4, 2021
+ ·
+ Improve this Guide
+
+ {title}
+ {subtitle}
+
+
+ );
+}
diff --git a/pages/guides/[guide].tsx b/pages/guides/[guide].tsx
new file mode 100644
index 000000000..48f667ff6
--- /dev/null
+++ b/pages/guides/[guide].tsx
@@ -0,0 +1,27 @@
+import { Box, Container } from '@chakra-ui/react';
+import { Header } from '../../components/header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { GuideHeader } from '../../components/guide-header';
+
+export default function Guide() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}