docs: fix lint errors

omnifed · Oct 3, 2024 · 8422f6b · 8422f6b
1 parent aa3bed5
commit 8422f6b
Show file tree

Hide file tree

Showing 6 changed files with 376 additions and 84 deletions.
diff --git 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 = (
     <Link
       href="/"
       className={css({
+        display: 'none',
         pxi: '2',
         rounded: 'sm',
         textStyle: 'body-xl',
+        md: {
+          display: INLINE_BLOCK,
+        },
         _active: {
           color: 'page.text.initial',
         },
@@ -57,7 +61,7 @@ const navGHLogoContent = (
     <a
       aria-label="View Github repo"
       className={css({
-        display: 'inline-block',
+        display: INLINE_BLOCK,
         rounded: 'sm',
         _focusVisible: focusStates._focusVisible,
       })}
@@ -171,7 +175,7 @@ export function Nav() {
               <Link
                 aria-current={pathname.includes(item.href) ? 'page' : undefined}
                 className={css({
-                  display: 'inline-block',
+                  display: INLINE_BLOCK,
                   p: '4',
                   position: 'relative',
                   transition: 'color 250ms ease-in-out',

diff --git a/docs/app/components/cerberus-logo.tsx b/docs/app/components/cerberus-logo.tsx
diff --git a/docs/app/components/home-hero.tsx 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 (
+    <div
+      className={grid({
+        columns: 1,
+        gap: 4,
+        mt: '8rem',
+        lg: {
+          columns: 2,
+          gridTemplateColumns: '1fr 1fr',
+          mt: '12rem',
+          pxi: '8',
+        },
+      })}
+    >
+      <main
+        className={gridItem({
+          bgColor: 'page.surface.100',
+          mxi: '2',
+          pxi: '6',
+          py: 8,
+          rounded: '2xl',
+          md: {
+            pxi: '8',
+            py: 14,
+          },
+          lg: {
+            pxi: '10',
+            py: 16,
+          },
+        })}
+      >
+        <div
+          className={vstack({
+            alignItems: 'flex-start',
+            gap: 4,
+          })}
+        >
+          <h1
+            className={css({
+              maxW: '44ch',
+              textStyle: 'display-sm',
+              textWrap: 'pretty',
+              lg: {
+                pb: 4,
+                textStyle: 'display-lg',
+              },
+            })}
+          >
+            Protect your brand with{' '}
+            <span
+              className={css({
+                display: 'inline-block',
+                color: 'danger.text.200',
+              })}
+            >
+              Cerberus
+            </span>
+          </h1>
+
+          <p
+            className={css({
+              maxW: '44ch',
+              textStyle: 'body-lg',
+              lg: {
+                lineHeight: 'relaxed',
+                textStyle: 'body-xl',
+              },
+            })}
+          >
+            Create React design systems effortlessly, or use our out-of-the-box
+            settings.
+          </p>
+
+          <div
+            className={css({
+              pt: 10,
+              lg: {
+                pt: 14,
+              },
+            })}
+          >
+            <Link className={button()} href="/preset/">
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </main>
+
+      <div className={gridItem()}>
+        <span
+          className={css({
+            display: 'block',
+            mt: 8,
+            mx: 'auto',
+            w: '1/2',
+          })}
+        >
+          <CerberusLogo />
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git 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&apos;t find Cerberus...or the page you are trying to reach.
       </p>
 
       <Link className={button()} href="/">

diff --git 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 (
     <div
       className={css({
-        pxi: '4',
-        pt: '10',
-        pb: '20',
+        mt: '9rem',
       })}
     >
-      <main
-        className={grid({
-          gap: '4',
-          columns: 12,
-          justifyContent: 'center',
-        })}
-      >
-        <div
-          className={gridItem({
-            gridColumnStart: 1,
-            gridColumnEnd: 13,
-            md: {
-              gridColumnStart: 7,
-              h: '66dvh',
-            },
-          })}
-        >
-          <div
-            className={vstack({
-              gap: '0',
-              justify: 'center',
-              p: '12',
-              h: '15rem',
-              w: 'full',
-              md: {
-                h: 'full',
-                maxW: '40rem',
-              },
-            })}
-          >
-            <Image
-              alt="Cerberus Design System logo"
-              className={css({
-                md: {
-                  w: 'full',
-                },
-              })}
-              priority
-              src={`/logo.svg`}
-              height="300"
-              width="300"
-            />
-          </div>
-        </div>
-
-        <div
-          className={gridItem({
-            gridColumnStart: 1,
-            gridColumnEnd: 13,
-            md: {
-              alignSelf: 'center',
-              gridColumnStart: 1,
-              gridColumnEnd: 6,
-              gridRowStart: 1,
-              paddingInlineStart: '6',
-            },
-          })}
-        >
-          <RootHeadline />
-          <div
-            className={css({
-              mt: '4',
-            })}
-          >
-            <Link className={button()} href="/preset/">
-              Get Started
-            </Link>
-          </div>
-        </div>
-      </main>
+      <HomeHero />
     </div>
   )
 }
diff --git 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'