refactor: reuse FullingBrand in landing header

app/(landing)/_components/landing-client.tsx

@@ -1,8 +1,9 @@
 import { FaLinkedinIn } from 'react-icons/fa6'
 import { SiDiscord, SiGithub, SiX, SiYoutube } from 'react-icons/si'
-import Image from 'next/image'
 import Link from 'next/link'
 
+import { FullingBrand } from '@/components/fulling-brand'
+
 import styles from './landing.module.css'
 
 type LandingClientProps = {
@@ -15,12 +16,7 @@ export function LandingClient({ ctaHref, githubStars }: LandingClientProps) {
     <div className={styles.page}>
       <header className={styles.header}>
         <div className={styles.headerInner}>
-          <Link href="/" className={styles.brand} aria-label="Fulling home">
-            <span className={styles.brandMark} aria-hidden="true">
-              <Image src="/icon-transparent.svg" alt="" width={40} height={40} priority />
-            </span>
-            <span>Fulling</span>
-          </Link>
+          <FullingBrand />
 
           <nav className={styles.headerNav} aria-label="Primary navigation">
             <button type="button" disabled className={styles.blogLink} aria-label="Blog, coming soon">

app/(landing)/_components/landing.module.css

@@ -26,35 +26,6 @@
   gap: 24px;
 }
 
-.brand {
-  display: inline-flex;
-  align-items: center;
-  width: max-content;
-  gap: 8px;
-  color: var(--color-fulling-ink);
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: -0.5px;
-}
-
-.brandMark {
-  position: relative;
-  width: 24px;
-  height: 24px;
-  overflow: hidden;
-}
-
-.brandMark img {
-  position: absolute;
-  top: -8px;
-  left: -8px;
-  width: 40px;
-  height: 40px;
-  max-width: none;
-  filter: brightness(0);
-}
-
 .headerNav {
   display: flex;
   align-items: center;
@@ -315,7 +286,6 @@
   height: 14px;
 }
 
-.brand:focus-visible,
 .starLink:focus-visible,
 .dashboardLink:focus-visible,
 .previewLink:focus-visible,
@@ -335,10 +305,6 @@
     height: 31px;
   }
 
-  .brand {
-    font-size: 20px;
-  }
-
   .headerNav {
     gap: 24px;
   }

components/fulling-brand.test.tsx

@@ -0,0 +1,27 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import { FullingBrand } from './fulling-brand'
+
+describe('FullingBrand', () => {
+  it('renders the canonical brand lockup and accessible home link', () => {
+    const markup = renderToStaticMarkup(<FullingBrand />)
+
+    expect(markup).toContain('href="/"')
+    expect(markup).toContain('aria-label="Fulling home"')
+    expect(markup).toContain('text-[22px]')
+    expect(markup).toContain('leading-6')
+    expect(markup).toContain('tracking-[-0.5px]')
+    expect(markup).toContain('size-6')
+    expect(markup).toContain('>Fulling</span>')
+  })
+
+  it('supports a surface-specific destination and layout class', () => {
+    const markup = renderToStaticMarkup(
+      <FullingBrand href="/workspace" className="shrink-0" />,
+    )
+
+    expect(markup).toContain('href="/workspace"')
+    expect(markup).toContain('shrink-0')
+  })
+})

components/fulling-brand.tsx

@@ -13,7 +13,7 @@ export function FullingBrand({ className, href = '/' }: FullingBrandProps) {
     <Link
       href={href}
       className={cn(
-        'inline-flex w-max items-center gap-2 text-xl font-semibold leading-none text-foreground',
+        'inline-flex w-max items-center gap-2 text-[22px] font-semibold leading-6 tracking-[-0.5px] text-foreground',
         className,
       )}
       aria-label="Fulling home"