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/components/icons/broken-bone-icon.tsx b/docs/app/components/icons/broken-bone-icon.tsx new file mode 100644 index 0000000..0f62d48 --- /dev/null +++ b/docs/app/components/icons/broken-bone-icon.tsx @@ -0,0 +1,23 @@ +import type { SVGProps } from 'react' + +export default function BrokenBoneIcon(props: SVGProps) { + return ( + + + + ) +} diff --git a/docs/app/components/icons/paw-icon.tsx b/docs/app/components/icons/paw-icon.tsx new file mode 100644 index 0000000..5da0548 --- /dev/null +++ b/docs/app/components/icons/paw-icon.tsx @@ -0,0 +1,12 @@ +import type { SVGProps } from 'react' + +export default function PawIcon(props: SVGProps) { + return ( + + + + ) +} diff --git a/docs/app/global-error.tsx b/docs/app/global-error.tsx new file mode 100644 index 0000000..f156c43 --- /dev/null +++ b/docs/app/global-error.tsx @@ -0,0 +1,66 @@ +'use client' + +import { vstack } from '@cerberus-design/styled-system/patterns' +import { css } from '@cerberus-design/styled-system/css' +import { Button } from '@cerberus-design/react' +import BrokenBoneIcon from './components/icons/broken-bone-icon' + +// Error boundaries must be Client Components + +export default function GlobalError({ + reset, +}: { + error: Error & { digest?: string } + reset: () => void +}) { + // global-error must include html and body tags + return ( + + +
+ + + + +

+ Cerb your enthusiasm! +

+

+ Something went wrong. Cerberus has sounded the alarm and our demons + are ready for action. +

+ + +
+ + + ) +} diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx new file mode 100644 index 0000000..cb43ee1 --- /dev/null +++ b/docs/app/not-found.tsx @@ -0,0 +1,54 @@ +import { vstack } from '@cerberus-design/styled-system/patterns' +import { css } from '@cerberus/styled-system/css' +import Link from 'next/link' +import PawIcon from './components/icons/paw-icon' +import { button } from '@cerberus-design/styled-system/recipes' + +export default function NotFound() { + return ( +
+ + + + +

+ Away from post +

+

+ We couldn't find Cerberus...or the page you are trying to reach. +

+ + + Return from whence you came + +
+ ) +} 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 (
-
-
-
- Cerberus Design System logo -
-
- -
- -
- - 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'