update kitchen sink

packages/site/pages/content-examples/kitchen-sink.mdx

@@ -1,6 +1,12 @@
 ---
 title: Kitchen sink
 description: This is a quick introduction to what is going to be developed here. That can be a chunky paragraph that expands quite a bit of context.
+image: https://via.placeholder.com/1000x450/f1f1f1/f1f1f1.png
+image-alt: Image description
+action-1-text: Primary action
+action-1-link: /
+action-2-text: Secondary action
+action-2-link: /content-examples/kitchen-sink
 ---
 
 import {DoDontContainer, Do, Dont} from '@primer/nextocat/components/content/dos-and-donts/DosAndDonts'

packages/site/pages/index.mdx

@@ -21,8 +21,8 @@ import Link from 'next/link'
     <Hero.Heading style={{marginTop: '-80px'}}>Primer Nextocat</Hero.Heading>
     <Hero.Description>A Next.js theme for building Primer documentation sites</Hero.Description>
     <Box marginBlockStart={24}>
-      <Link legacyBehavior href="/introduction">
-        <Hero.PrimaryAction href="/introduction">Get started</Hero.PrimaryAction>
+      <Link legacyBehavior href="/content-examples/kitchen-sink">
+        <Hero.PrimaryAction href="/content-examples/kitchen-sink">Get started</Hero.PrimaryAction>
       </Link>
     </Box>
   </Hero>

packages/theme/css/prose.module.css

@@ -268,3 +268,7 @@
   height: 1px;
   background: var(--brand-color-border-default);
 }
+
+.customPageHero {
+  padding-top: 0;
+}

packages/theme/index.tsx

@@ -2,16 +2,19 @@ import Head from 'next/head'
 import type {MdxFile, NextraThemeLayoutProps} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
 import React, {useMemo} from 'react'
-import type {Icon} from '@primer/octicons-react'
 import {PencilIcon} from '@primer/octicons-react'
 import {BaseStyles, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
 import {
   Animate,
   AnimationProvider,
   Box,
+  ButtonGroup,
   ThemeProvider as BrandThemeProvider,
+  Button,
   Grid,
   Heading,
+  Hero,
+  Image,
   InlineLink,
   Stack,
   Text,
@@ -131,7 +134,12 @@ export default function Layout({children, pageOpts}: NextraThemeLayoutProps) {
                             )}
 
                             <Box marginBlockEnd={24}>
-                              <Stack direction="vertical" padding="none" gap={16}>
+                              <Stack direction="vertical" padding="none" gap={16} alignItems="flex-start">
+                                {frontMatter.image && (
+                                  <Box paddingBlockEnd={24}>
+                                    <Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
+                                  </Box>
+                                )}
                                 {frontMatter.title && (
                                   <Heading as="h1" size="2">
                                     {frontMatter.title}
@@ -142,6 +150,18 @@ export default function Layout({children, pageOpts}: NextraThemeLayoutProps) {
                                     {frontMatter.description}
                                   </Text>
                                 )}
+                                {frontMatter['action-1-text'] && ['action-1-link'] && (
+                                  <Box paddingBlockStart={24}>
+                                    <ButtonGroup>
+                                      <Button as="a">{frontMatter['action-1-text']}</Button>
+                                      {frontMatter['action-2-text'] && ['action-2-link'] && (
+                                        <Button as="a" variant="secondary">
+                                          {frontMatter['action-2-text']}
+                                        </Button>
+                                      )}
+                                    </ButtonGroup>
+                                  </Box>
+                                )}
                               </Stack>
                             </Box>
                             {Boolean(frontMatter['show-tabs']) && <UnderlineNav tabData={filteredTabData} />}