Add CodexKit logo assets and raster exports

Author: Hoa Dang DNA PC

web/public/images/codexkit-logo.jpg

@@ -4,31 +4,31 @@ export default function Footer() {
   return (
     <footer className="mt-auto border-t border-border/70">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 mb-8">
+        <div className="mb-8 grid grid-cols-2 gap-8 md:grid-cols-4">
           <div>
             <h3 className="mb-4 font-semibold text-zinc-900 dark:text-zinc-50">Docs</h3>
             <ul className="space-y-3 text-sm">
-              <li><Link href="/docs" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Overview</Link></li>
-              <li><Link href="/docs/installation" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Installation</Link></li>
-              <li><Link href="/docs/modes" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Modes</Link></li>
+              <li><Link href="/docs" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Overview</Link></li>
+              <li><Link href="/docs/installation" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Installation</Link></li>
+              <li><Link href="/docs/modes" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Modes</Link></li>
             </ul>
           </div>
 
           <div>
             <h3 className="mb-4 font-semibold text-zinc-900 dark:text-zinc-50">Toolkit</h3>
             <ul className="space-y-3 text-sm">
-              <li><Link href="/docs/skills" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Skills</Link></li>
-              <li><Link href="/docs/playbooks" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Playbooks</Link></li>
-              <li><Link href="/docs/automations" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Automations</Link></li>
+              <li><Link href="/docs/skills" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Skills</Link></li>
+              <li><Link href="/docs/playbooks" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Playbooks</Link></li>
+              <li><Link href="/docs/automations" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Automations</Link></li>
             </ul>
           </div>
 
           <div>
             <h3 className="mb-4 font-semibold text-zinc-900 dark:text-zinc-50">Operations</h3>
             <ul className="space-y-3 text-sm">
-              <li><Link href="/docs/mcp" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">MCP</Link></li>
-              <li><Link href="/docs/installation" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Validate pack</Link></li>
-              <li><Link href="/docs/playbooks" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors">Prompt patterns</Link></li>
+              <li><Link href="/docs/mcp" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">MCP</Link></li>
+              <li><Link href="/docs/installation" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Validate pack</Link></li>
+              <li><Link href="/docs/playbooks" className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">Prompt patterns</Link></li>
             </ul>
           </div>
 
@@ -43,8 +43,8 @@ export default function Footer() {
         </div>
 
         <div className="flex flex-col gap-4 border-t border-border/70 pt-8 sm:flex-row sm:items-center sm:justify-between">
-          <p className="text-sm text-zinc-600 dark:text-zinc-400">
-            © {new Date().getFullYear()} CodexKit. Built as a Codex-first open-source starter.
+          <p className="text-sm text-zinc-600 dark:text-zinc-400" suppressHydrationWarning>
+            &copy; {new Date().getFullYear()} CodexKit. Built as a Codex-first open-source starter.
           </p>
           <p className="text-sm text-zinc-600 dark:text-zinc-400">
             Publish under your own organization and replace placeholder repository metadata before launch.

web/public/images/codexkit-logo.png

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import MobileMenu from "@/components/layout/header/components/mobile-menu";
 import SearchDialog from "@/components/layout/header/components/search-dialog";
@@ -15,8 +16,20 @@ export default function Header() {
               <MobileMenu />
             </div>
 
-            <Link href="/" className="shrink-0 rounded-full border border-border/80 bg-card/75 px-3 py-1.5 text-sm font-semibold">
-              CodexKit
+            <Link
+              href="/"
+              className="shrink-0 inline-flex items-center gap-2 rounded-full border border-border/80 bg-card/75 px-2.5 py-1.5 text-sm font-semibold"
+              aria-label="CodexKit home"
+            >
+              <Image
+                src="/images/codexkit-mark.svg"
+                alt="CodexKit logo"
+                width={28}
+                height={28}
+                className="h-7 w-7"
+                priority
+              />
+              <span>CodexKit</span>
             </Link>
 
             <nav className="hidden md:flex items-center gap-2 text-sm text-muted-foreground">