docs: typo

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Added
 
-- Added `selected` sttyles for the secondary `Button` variant.
+- Added `selected` styles for the secondary `Button` variant.
 
 ### Changed
 

src/stories/pro-components.stories.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   CloseButton,
   Container,
+  Heading,
   Icon,
   Link,
   Square,
@@ -12,7 +13,7 @@ import {
 import { BiCookie } from 'react-icons/bi'
 
 const meta = {
-  title: 'Pro Components / Banners',
+  title: 'Pro Components',
 }
 
 export default meta
@@ -124,3 +125,31 @@ export const Banner2 = () => (
     </Box>
   </Container>
 )
+
+export const PageHeader = () => (
+  <Container py={{ base: '16', md: '24' }}>
+    <Stack spacing={{ base: '8', md: '10' }}>
+      <Stack spacing={{ base: '4', md: '6' }}>
+        <Stack spacing="3">
+          <Text fontSize={{ base: 'sm', md: 'md' }} fontWeight="semibold" color="accent">
+            Tagline
+          </Text>
+          <Heading size={{ base: 'md', md: 'lg' }} fontWeight="semibold">
+            Get lifetime access
+          </Heading>
+        </Stack>
+        <Text color="fg.muted" fontSize={{ base: 'lg', md: 'xl' }} maxW="3xl">
+          Get early access to 210+ components and free updates.
+        </Text>
+      </Stack>
+      <Stack direction={{ base: 'column-reverse', md: 'row' }} spacing="4">
+        <Button variant="secondary" size="xl">
+          Learn more
+        </Button>
+        <Button variant="primary" size="xl">
+          Buy now
+        </Button>
+      </Stack>
+    </Stack>
+  </Container>
+)