1 files changed, 42 insertions, 0 deletions
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
new file mode 100644
index 0000000..4dd1248
--- /dev/null
+++ b/src/components/Page.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import { Layout, LayoutContent } from '@astryxdesign/core/Layout'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Text } from '@astryxdesign/core/Text'
+import { VStack } from '@astryxdesign/core/VStack'
+
+export function Page({ children }: { children: ReactNode }) {
+  return (
+    <Layout
+      height="auto"
+      padding={6}
+      contentWidth={1120}
+      content={<LayoutContent>{children}</LayoutContent>}
+    />
+  )
+}
+
+interface PageHeaderProps {
+  eyebrow?: string
+  title: string
+  description?: string
+}
+
+export function PageHeader({ eyebrow, title, description }: PageHeaderProps) {
+  return (
+    <VStack gap={2} maxWidth={820}>
+      {eyebrow ? (
+        <Text type="label" color="accent">
+          {eyebrow}
+        </Text>
+      ) : null}
+      <Heading level={1} type="display-3" textWrap="balance">
+        {title}
+      </Heading>
+      {description ? (
+        <Text type="large" color="secondary" as="p" textWrap="pretty">
+          {description}
+        </Text>
+      ) : null}
+    </VStack>
+  )
+}