From a85497d7e764ba62ab4a22609e2a8af5dcbecd58 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 20 Aug 2021 15:49:34 +0200
Subject: [PATCH] Add guide header and guide page

---
 components/guide-header.tsx | 30 ++++++++++++++++++++++++++++++
 pages/guides/[guide].tsx    | 27 +++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 components/guide-header.tsx
 create mode 100644 pages/guides/[guide].tsx

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 (
+    <Box pt='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='center' position='static' top='10px'>
+      <Container maxW='container.md' position='relative' textAlign='center'>
+        <Flex alignItems='center' justifyContent='center' fontSize='14px'>
+          <Link href='#' d='flex' alignItems='center' fontWeight={600} color='gray.500'>
+            <Image mr='7px' w='22px' src='https://github.com/kamranahmedse.png' />
+            Kamran Ahmed
+          </Link>
+          <Text mx='7px' color='gray.500' as='span'>&middot;</Text>
+          <Text color='gray.500' as='span'>Monday, May 4, 2021</Text>
+          <Text mx='7px' color='gray.500' as='span'>&middot;</Text>
+          <Link color='blue.500' fontWeight={500} href='#'>Improve this Guide</Link>
+        </Flex>
+        <Heading as='h1' color='black' fontSize='45px' fontWeight={700} my='10px'>{title}</Heading>
+        <Text fontSize='16px' color='gray.700'>{subtitle}</Text>
+      </Container>
+    </Box>
+  );
+}
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 (
+    <Box bg='white' minH='100vh'>
+      <Header />
+      <Box mb='60px'>
+        <GuideHeader
+          title={'Build it and they will come?'}
+          subtitle={'Why “build it and they will come” alone won’t work anymore'}
+        />
+        <Container maxW={'container.md'} position='relative'>
+
+        </Container>
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
+  );
+}