diff --git a/docs/app/components/Nav.tsx b/docs/app/components/Nav.tsx
index 7f6824f..0f6b087 100644
--- a/docs/app/components/Nav.tsx
+++ b/docs/app/components/Nav.tsx
@@ -16,7 +16,7 @@ import { button } from '@cerberus/styled-system/recipes'
import { DogIcon } from './icons/DogIcon'
import { FireIcon } from './icons/FireIcon'
import { getTheme, injectTheme, type ThemeName } from '@/styled-system/themes'
-import { PAGE_BORDER_INITIAL } from '../utils/const'
+import { INLINE_BLOCK, PAGE_BORDER_INITIAL } from '../utils/const'
import { getColorMode } from '../utils/colors'
import { AnimatingSystemIcon } from './icons/AnimatingSystemIcon'
@@ -34,9 +34,13 @@ const navLogoContent = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/docs/app/components/home-hero.tsx b/docs/app/components/home-hero.tsx
new file mode 100644
index 0000000..c65c686
--- /dev/null
+++ b/docs/app/components/home-hero.tsx
@@ -0,0 +1,111 @@
+import { css } from '@cerberus/styled-system/css'
+import Link from 'next/link'
+import { button } from '@cerberus/styled-system/recipes'
+import CerberusLogo from './cerberus-logo'
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import { grid, gridItem } from '@cerberus/styled-system/patterns'
+
+export default function HomeHero() {
+ return (
+
+
+
+
+ Protect your brand with{' '}
+
+ Cerberus
+
+
+
+
+ Create React design systems effortlessly, or use our out-of-the-box
+ settings.
+
+
+
+
+ Get Started
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
index 9b08609..cb43ee1 100644
--- a/docs/app/not-found.tsx
+++ b/docs/app/not-found.tsx
@@ -43,7 +43,7 @@ export default function NotFound() {
textWrap: 'pretty',
})}
>
- We couldn't find Cerberus...or the page you are trying to reach.
+ We couldn't find Cerberus...or the page you are trying to reach.
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index 54faf41..4429e1b 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,89 +1,14 @@
-import { grid, gridItem, vstack } from '@cerberus/styled-system/patterns'
-import RootHeadline from './components/RootHeadline'
-import { css } from '@cerberus/styled-system/css'
-import Link from 'next/link'
-import Image from 'next/image'
-import { button } from '@cerberus/styled-system/recipes'
+import { css } from '@cerberus-design/styled-system/css'
+import HomeHero from './components/home-hero'
-export default async function Home() {
+export default function Home() {
return (
-
-
-
-
-
-
-
- Get Started
-
-
-
-
+
)
}
diff --git a/docs/app/utils/const.ts b/docs/app/utils/const.ts
index b13f434..965f116 100644
--- a/docs/app/utils/const.ts
+++ b/docs/app/utils/const.ts
@@ -10,3 +10,5 @@ export const ACTION_NAV_INITIAL = 'action.navigation.initial'
export const PURPLE = 'purple'
export const FLEX_START = 'flex-start'
+
+export const INLINE_BLOCK = 'inline-block'