diff --git a/components/page-header.tsx b/components/page-header.tsx
new file mode 100644
index 000000000..ed8d5fc2f
--- /dev/null
+++ b/components/page-header.tsx
@@ -0,0 +1,19 @@
+import { Box, Container, Heading, Text } from '@chakra-ui/react';
+
+type PageHeaderProps = {
+ title: string;
+ subtitle: string;
+};
+
+export function PageHeader(props: PageHeaderProps) {
+ const { title, subtitle } = props;
+
+ return (
+
+
+ {title}
+ {subtitle}
+
+
+ );
+}
diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx
index 7c428eef2..f8263a38e 100644
--- a/pages/guides/index.tsx
+++ b/pages/guides/index.tsx
@@ -6,19 +6,18 @@ import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { GuideGridItem } from './components/guide-grid-item';
+import { PageHeader } from '../../components/page-header';
export default function Guides() {
return (
-
-
- Visual Guides
- Succinct graphical explanations to development related topics.
-
-
-
+
+