feat: add custom ghost logo branding throughout the site (#114)

nullcoder · claude · web-flow · commit 1012d6d863ac · 2025-06-07T13:29:45.000-07:00
* feat: add custom ghost logo branding throughout the site - Create custom GhostLogo component with code bracket eyes and binary dots - Add multiple size variants (sm, md, lg, xl, 2xl) for different contexts - Replace generic ghost icons in header, footer, and 404 page - Create high-quality favicon files using ImageMagick: - Multi-resolution favicon.ico (16, 24, 32, 48, 64, 128, 256px) - SVG icons for modern browsers - PNG fallbacks for compatibility - Update README with branded header and footer sections - Add comprehensive tests for new logo component - Ensure consistent brand identity across all touchpoints The ghost + code theme now provides a unique, memorable brand identity that perfectly represents GhostPaste's zero-knowledge encryption mission. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: add indigo brand color to logo throughout site - Update header logo with indigo-600/400 for strong brand presence - Apply muted indigo (80% opacity) to footer for subtle reinforcement - Use soft indigo (50% opacity) for 404 page floating ghost - Add CSS custom properties --ghost-brand for easy color management - Different intensities create visual hierarchy while maintaining consistency The indigo color (#6366f1) matches our favicon and adds personality while keeping the overall design professional and clean. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: enlarge ghost icon to break boundaries for better visibility - Increased ghost body size from 8-unit to 12-unit radius in 32x32 icon - Ghost now playfully breaks out of the circular boundary - Proportionally enlarged all elements (eyes, binary dots) - Updated apple-icon.svg with same boundary-breaking design - Regenerated all PNG and ICO files with new larger ghost - Kept 16x16 icon simplified for clarity at small sizes This creates a more dynamic, memorable favicon that better fills the browser tab space * feat: update README logo to match website branding style - Removed background circle for cleaner design - Sized ghost appropriately within 128x128 viewBox - Matches GhostLogo component usage on website - Maintains consistency with brand identity --------- Co-authored-by: Claude <noreply@anthropic.com>
diff --git a/README.md b/README.md
@@ -1,8 +1,18 @@
-# 👻 GhostPaste
+<div align="center">
+  <img src="assets/logo.svg" alt="GhostPaste Logo" width="128" height="128">
+  
+  # GhostPaste
+  
+  ### Zero-knowledge encrypted code sharing platform where your secrets stay secret
+  
+  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+  [![Built with Next.js](https://img.shields.io/badge/Built%20with-Next.js%2015-black)](https://nextjs.org)
+  [![Deployed on Cloudflare](https://img.shields.io/badge/Deployed%20on-Cloudflare-orange)](https://cloudflare.com)
+  
+  [Live Demo](https://ghostpaste.dev) • [Report Bug](https://github.com/nullcoder/ghostpaste/issues) • [Request Feature](https://github.com/nullcoder/ghostpaste/issues)
+</div>
 
-> Zero-knowledge encrypted code sharing platform where your secrets stay secret
-
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+---
 
 ## 🔐 What is GhostPaste?
 
@@ -253,3 +263,10 @@ This project demonstrates that AI can be more than just a coding assistant - it
   <a href="https://github.com/nullcoder/ghostpaste/issues">Report Bug</a> •
   <a href="https://github.com/nullcoder/ghostpaste/issues">Request Feature</a>
 </p>
+
+<div align="center">
+  <br>
+  <img src="assets/logo.svg" alt="GhostPaste" width="64" height="64">
+  <br>
+  <sub>Share code. Keep secrets. Stay ghosted. 👻</sub>
+</div>
diff --git a/app/apple-icon.png b/app/apple-icon.png
diff --git a/app/apple-icon.svg b/app/apple-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background circle for better visibility -->
+  <circle cx="90" cy="90" r="85" fill="#f8f9fa" stroke="#e9ecef" stroke-width="5"/>
+  
+  <!-- Main ghost body - enlarged to break boundaries -->
+  <path d="M90 11.25c-37.1 0-67.5 30.4-67.5 67.5v75.9l12.65 21.1c2.55 4.2 8.4 2.55 11-1.65L57 159c1.65-2.55 5.1-2.55 6.75 0L75 172.5c1.65 2.55 5.1 2.55 6.75 0L90 159c1.65-2.55 5.1-2.55 6.75 0L105 172.5c1.65 2.55 5.1 2.55 6.75 0L121.5 159c1.65-2.55 5.1-1.65 10.1 1.65L144.8 173.4c2.55 4.2 8.4 2.55 11-1.65L157.5 155V78.75c0-37.1-30.4-67.5-67.5-67.5Z" fill="#6366f1"/>
+  
+  <!-- Code bracket eyes - adjusted position -->
+  <text x="56.25" y="112.5" font-family="monospace" font-size="56.25" fill="#f8f9fa" text-anchor="middle">&lt;</text>
+  <text x="123.75" y="112.5" font-family="monospace" font-size="56.25" fill="#f8f9fa" text-anchor="middle">&gt;</text>
+  
+  <!-- Binary dots - adjusted position and size -->
+  <circle cx="67.5" cy="129.375" r="5.625" fill="#f8f9fa" opacity="0.8"/>
+  <circle cx="90" cy="129.375" r="5.625" fill="#f8f9fa" opacity="0.6"/>
+  <circle cx="112.5" cy="129.375" r="5.625" fill="#f8f9fa" opacity="0.8"/>
+</svg>
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -123,6 +123,7 @@
 
 :root {
   --radius: 0.625rem;
+  --ghost-brand: #6366f1;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -157,6 +158,7 @@
 }
 
 .dark {
+  --ghost-brand: #818cf8;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
diff --git a/app/icon-16.png b/app/icon-16.png
diff --git a/app/icon-16.svg b/app/icon-16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Minimal/no background for maximum ghost size -->
+  
+  <!-- Simplified ghost body - fills entire 16x16 space -->
+  <path d="M8 1c-3.3 0-6 2.7-6 6v7l1.5 2c0.2 0.3 0.6 0.2 0.8-0.1L5.5 14.5c0.2-0.2 0.5-0.2 0.7 0L7 15.5c0.2 0.2 0.5 0.2 0.7 0L8 14.5c0.2-0.2 0.5-0.2 0.7 0L9 15.5c0.2 0.2 0.5 0.2 0.7 0L10.5 14.5c0.2-0.2 0.5-0.1 0.8 0.1L12.5 15c0.2 0.3 0.6 0.2 0.8-0.1L14 13V7c0-3.3-2.7-6-6-6Z" fill="#6366f1"/>
+  
+  <!-- Simplified bracket eyes -->
+  <text x="5" y="10" font-family="monospace" font-size="5" fill="#f8f9fa" text-anchor="middle">&lt;</text>
+  <text x="11" y="10" font-family="monospace" font-size="5" fill="#f8f9fa" text-anchor="middle">&gt;</text>
+  
+  <!-- Single binary dot -->
+  <circle cx="8" cy="11.5" r="0.5" fill="#f8f9fa" opacity="0.7"/>
+</svg>
diff --git a/app/icon-32.png b/app/icon-32.png
diff --git a/app/icon.svg b/app/icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background circle for better visibility -->
+  <circle cx="16" cy="16" r="15" fill="#f8f9fa" stroke="#e9ecef" stroke-width="1"/>
+  
+  <!-- Main ghost body - enlarged to fill more space -->
+  <path d="M16 2c-6.6 0-12 5.4-12 12v13.5l2.25 3.75c0.45 0.75 1.5 0.45 1.95-0.3L10.5 28.2c0.3-0.45 0.9-0.45 1.2 0L13.5 30.45c0.3 0.45 0.9 0.45 1.2 0L16 28.2c0.3-0.45 0.9-0.45 1.2 0L18.5 30.45c0.3 0.45 0.9 0.45 1.2 0L21.5 28.2c0.3-0.45 0.9-0.3 1.8 0.3L25.75 30.75c0.45 0.75 1.5 0.45 1.95-0.3L28 27.5V14c0-6.6-5.4-12-12-12Z" fill="#6366f1"/>
+  
+  <!-- Code bracket eyes - adjusted position -->
+  <text x="10" y="20" font-family="monospace" font-size="10" fill="#f8f9fa" text-anchor="middle">&lt;</text>
+  <text x="22" y="20" font-family="monospace" font-size="10" fill="#f8f9fa" text-anchor="middle">&gt;</text>
+  
+  <!-- Binary dots - adjusted position and size -->
+  <circle cx="12" cy="23" r="1" fill="#f8f9fa" opacity="0.8"/>
+  <circle cx="16" cy="23" r="1" fill="#f8f9fa" opacity="0.6"/>
+  <circle cx="20" cy="23" r="1" fill="#f8f9fa" opacity="0.8"/>
+</svg>
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,13 +1,14 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { Ghost, Home, Plus } from "lucide-react";
+import { Home, Plus } from "lucide-react";
+import { GhostLogo } from "@/components/ghost-logo";
 
 export default function NotFound() {
   return (
     <div className="container mx-auto flex min-h-[80vh] flex-col items-center justify-center px-4 text-center">
       {/* Floating Ghost */}
       <div className="animate-float mb-8">
-        <Ghost className="text-muted-foreground/50 h-32 w-32" />
+        <GhostLogo size="2xl" className="text-indigo-500/50" />
       </div>
 
       {/* 404 Text with Glitch Effect */}
diff --git a/assets/logo.svg b/assets/logo.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Main ghost body - clean design without background -->
+  <path d="M64 16c-22 0-40 18-40 40v45l7.5 12.5c1.5 2.5 5 1.5 6.5-1L48 100c1-1.5 3-1.5 4 0L60 110c1 1.5 3 1.5 4 0L64 100c1-1.5 3-1.5 4 0L68 110c1 1.5 3 1.5 4 0L80 100c1-1.5 3-1 6 1L94 110c1.5 2.5 5 1.5 6.5-1L104 92V56c0-22-18-40-40-40Z" fill="#6366f1"/>
+  
+  <!-- Code bracket eyes -->
+  <text x="44" y="72" font-family="monospace" font-size="32" fill="#f8f9fa" text-anchor="middle">&lt;</text>
+  <text x="84" y="72" font-family="monospace" font-size="32" fill="#f8f9fa" text-anchor="middle">&gt;</text>
+  
+  <!-- Binary dots -->
+  <circle cx="52" cy="84" r="3.2" fill="#f8f9fa" opacity="0.8"/>
+  <circle cx="64" cy="84" r="3.2" fill="#f8f9fa" opacity="0.6"/>
+  <circle cx="76" cy="84" r="3.2" fill="#f8f9fa" opacity="0.8"/>
+</svg>
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import Link from "next/link";
 import { Container } from "@/components/ui/container";
 import { cn } from "@/lib/utils";
-import { Ghost } from "lucide-react";
+import { GhostLogo } from "@/components/ghost-logo";
 
 export interface FooterProps {
   /**
@@ -31,7 +31,7 @@ export function Footer({ className, buildId }: FooterProps) {
             {/* Left section - Branding */}
             <div className="space-y-2 text-center md:text-left">
               <div className="flex items-center justify-center gap-2 md:justify-start">
-                <Ghost className="h-6 w-6" aria-hidden="true" />
+                <GhostLogo className="text-indigo-600/80 dark:text-indigo-400/80" />
                 <span className="text-lg font-semibold">GhostPaste</span>
               </div>
               <p className="text-muted-foreground text-sm">
diff --git a/components/ghost-logo.test.tsx b/components/ghost-logo.test.tsx
@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { GhostLogo } from "./ghost-logo";
+
+describe("GhostLogo", () => {
+  it("renders correctly with default props", () => {
+    const { container } = render(<GhostLogo />);
+    const svg = container.querySelector("svg");
+
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute("viewBox", "0 0 32 32");
+    expect(svg).toHaveClass("h-6", "w-6");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(<GhostLogo className="text-red-500" />);
+    const svg = container.querySelector("svg");
+
+    expect(svg).toHaveClass("text-red-500");
+  });
+
+  it("applies correct size classes", () => {
+    const { container: smallContainer } = render(<GhostLogo size="sm" />);
+    const { container: mediumContainer } = render(<GhostLogo size="md" />);
+    const { container: largeContainer } = render(<GhostLogo size="lg" />);
+
+    expect(smallContainer.querySelector("svg")).toHaveClass("h-4", "w-4");
+    expect(mediumContainer.querySelector("svg")).toHaveClass("h-6", "w-6");
+    expect(largeContainer.querySelector("svg")).toHaveClass("h-8", "w-8");
+  });
+
+  it("contains ghost body path", () => {
+    const { container } = render(<GhostLogo />);
+    const path = container.querySelector("path");
+
+    expect(path).toBeInTheDocument();
+    expect(path).toHaveAttribute("fill", "currentColor");
+  });
+
+  it("contains bracket eyes", () => {
+    const { container } = render(<GhostLogo />);
+    const textElements = container.querySelectorAll("text");
+
+    expect(textElements).toHaveLength(2);
+    expect(textElements[0]).toHaveTextContent("<");
+    expect(textElements[1]).toHaveTextContent(">");
+  });
+
+  it("contains binary dots", () => {
+    const { container } = render(<GhostLogo />);
+    const circles = container.querySelectorAll("circle");
+
+    expect(circles).toHaveLength(3);
+    circles.forEach((circle) => {
+      expect(circle).toHaveAttribute("fill", "white");
+    });
+  });
+
+  it("has proper accessibility attributes", () => {
+    const { container } = render(<GhostLogo />);
+    const svg = container.querySelector("svg");
+
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+});
diff --git a/components/ghost-logo.tsx b/components/ghost-logo.tsx
@@ -0,0 +1,59 @@
+import { cn } from "@/lib/utils";
+
+interface GhostLogoProps {
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
+}
+
+export function GhostLogo({ className, size = "md" }: GhostLogoProps) {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6",
+    lg: "h-8 w-8",
+    xl: "h-16 w-16",
+    "2xl": "h-32 w-32",
+  };
+
+  return (
+    <svg
+      className={cn(sizeClasses[size], className)}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      {/* Main ghost body */}
+      <path
+        d="M16 6c-4.4 0-8 3.6-8 8v9l1.5 2.5c0.3 0.5 1 0.3 1.3-0.2L12 23.8c0.2-0.3 0.6-0.3 0.8 0L14 25.3c0.2 0.3 0.6 0.3 0.8 0L16 23.8c0.2-0.3 0.6-0.3 0.8 0L18 25.3c0.2 0.3 0.6 0.3 0.8 0L20 23.8c0.2-0.3 0.6-0.2 1.2 0.2L22.5 25.5c0.3 0.5 1 0.3 1.3-0.2L24 23V14c0-4.4-3.6-8-8-8Z"
+        fill="currentColor"
+      />
+
+      {/* Code bracket eyes */}
+      <text
+        x="12"
+        y="18"
+        fontFamily="monospace"
+        fontSize="8"
+        fill="white"
+        textAnchor="middle"
+      >
+        &lt;
+      </text>
+      <text
+        x="20"
+        y="18"
+        fontFamily="monospace"
+        fontSize="8"
+        fill="white"
+        textAnchor="middle"
+      >
+        &gt;
+      </text>
+
+      {/* Binary dots for tech aesthetic */}
+      <circle cx="14" cy="20" r="0.8" fill="white" opacity="0.8" />
+      <circle cx="16" cy="20" r="0.8" fill="white" opacity="0.6" />
+      <circle cx="18" cy="20" r="0.8" fill="white" opacity="0.8" />
+    </svg>
+  );
+}
diff --git a/components/header.tsx b/components/header.tsx
@@ -2,8 +2,9 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { Menu, Ghost, Keyboard } from "lucide-react";
+import { Menu, Keyboard } from "lucide-react";
 import { GithubIcon } from "@/components/icons/github-icon";
+import { GhostLogo } from "@/components/ghost-logo";
 import {
   NavigationMenu,
   NavigationMenuList,
@@ -56,7 +57,10 @@ export function Header() {
           href="/"
           className="flex items-center gap-2 text-lg font-semibold transition-opacity hover:opacity-80"
         >
-          <Ghost className="h-6 w-6" aria-hidden="true" />
+          <GhostLogo
+            size="lg"
+            className="text-indigo-600 dark:text-indigo-400"
+          />
           <span>GhostPaste</span>
         </Link>
 
@@ -129,7 +133,10 @@ export function Header() {
             >
               <SheetHeader className="p-6 pb-0">
                 <SheetTitle className="flex items-center gap-2 text-lg">
-                  <Ghost className="h-5 w-5" aria-hidden="true" />
+                  <GhostLogo
+                    size="sm"
+                    className="text-indigo-600 dark:text-indigo-400"
+                  />
                   <span>GhostPaste</span>
                 </SheetTitle>
               </SheetHeader>
