Changes

Co-authored-by: ghostcodedynamics <295822717+ghostcodedynamics@users.noreply.github.com>

Author: lovable-dev[bot]

src/components/brand/logo.tsx

@@ -3,107 +3,100 @@
  * ---------------------------------------------------------------
  * Single source of truth for the brand mark.
  *
- * REPLACING THE PLACEHOLDER:
- *   Drop the final file at `src/assets/brand/logo.png` (same path).
- *   No code change needed — every surface reads from this file.
- *   If the PNG is ever missing, the inline SVG fallback renders
- *   automatically so layout never breaks.
+ * Assets live in `src/assets/brand/`:
+ *   - logo-dark.png   (white art, used in dark mode)
+ *   - logo-light.png  (black art, used in light mode)
+ *   - icon-dark.png   (ghost-G mark, white, dark mode)
+ *   - icon-light.png  (ghost-G mark, black, light mode)
+ *
+ * To replace the brand: swap the PNGs at the same paths. No code change.
  * ---------------------------------------------------------------
  */
 
-import { useState } from "react";
 import { cn } from "@/lib/utils";
-import logoPng from "@/assets/brand/logo.png";
+import logoDark from "@/assets/brand/logo-dark.png";
+import logoLight from "@/assets/brand/logo-light.png";
+import iconDark from "@/assets/brand/icon-dark.png";
+import iconLight from "@/assets/brand/icon-light.png";
 
 // ---------------------------------------------------------------
-// <LogoMark /> — icon only, height-driven, aspect-preserving
+// <LogoMark /> — ghost icon only
 // ---------------------------------------------------------------
 
 interface LogoMarkProps {
-  /** Rendered height in px. Width auto-scales to preserve aspect ratio. */
   height?: number;
   className?: string;
-  tone?: "auto" | "dark" | "light";
 }
 
-export function LogoMark({ height = 36, className, tone = "auto" }: LogoMarkProps) {
-  const [failed, setFailed] = useState(false);
-
-  if (!failed && logoPng) {
-    return (
-      <img
-        src={logoPng}
-        alt="GhostCode Dynamics"
-        onError={() => setFailed(true)}
-        style={{ height, width: "auto" }}
-        className={cn("shrink-0 select-none object-contain", className)}
-        draggable={false}
-      />
-    );
-  }
-
-  // ---- SVG fallback (only renders if PNG fails to load) ----
-  const fg =
-    tone === "dark" ? "#0a0a0f" : tone === "light" ? "#ffffff" : "currentColor";
+export function LogoMark({ height = 36, className }: LogoMarkProps) {
   return (
-    <svg
-      height={height}
-      width={height}
-      viewBox="0 0 64 64"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn("shrink-0", className)}
-      role="img"
+    <span
+      className={cn("inline-block shrink-0", className)}
+      style={{ height, width: height }}
       aria-label="GhostCode Dynamics"
-      shapeRendering="geometricPrecision"
+      role="img"
     >
-      <rect x="1" y="1" width="62" height="62" rx="16" fill={fg} />
-      <path
-        d="M32 16c-7 0-12 5-12 12v18.2c0 1.4 1.6 2.2 2.7 1.3l2.2-1.7c.6-.5 1.5-.5 2.1 0l2.2 1.7c.6.5 1.5.5 2.1 0l2.2-1.7c.6-.5 1.5-.5 2.1 0l2.2 1.7c1.1.9 2.7.1 2.7-1.3V28c0-7-5-12-12-12Z"
-        fill="var(--background)"
+      <img
+        src={iconLight}
+        alt=""
+        draggable={false}
+        style={{ height, width: height }}
+        className="block object-contain select-none dark:hidden"
+      />
+      <img
+        src={iconDark}
+        alt=""
+        draggable={false}
+        style={{ height, width: height }}
+        className="hidden object-contain select-none dark:block"
       />
-      <circle cx="28.4" cy="29.5" r="1.9" fill={fg} />
-      <circle cx="35.6" cy="29.5" r="1.9" fill={fg} />
-    </svg>
+    </span>
   );
 }
 
 // ---------------------------------------------------------------
-// <Logo /> — full lockup (mark + wordmark)
+// <Logo /> — full horizontal lockup (ghost-G + hostCode / DYNAMICS)
 // ---------------------------------------------------------------
 
 interface LogoProps {
   className?: string;
-  /** Mark height in px. Defaults sized for navbar use. */
+  /** Rendered height in px. Defaults sized for navbar use. */
   height?: number;
   iconOnly?: boolean;
 }
 
-export function Logo({ className, height, iconOnly = false }: LogoProps) {
-  // Responsive default: 36px mobile → 42px desktop. Caller can override.
+export function Logo({ className, height = 40, iconOnly = false }: LogoProps) {
+  if (iconOnly) {
+    return <LogoMark height={height} className={className} />;
+  }
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-2.5 transition-transform duration-300 ease-out group-hover:scale-[1.02]",
+        "inline-flex items-center transition-transform duration-300 ease-out group-hover:scale-[1.02]",
         className,
       )}
       aria-label="GhostCode Dynamics"
     >
-      {height ? (
-        <LogoMark height={height} />
-      ) : (
-        <>
-          <LogoMark height={36} className="sm:hidden" />
-          <LogoMark height={42} className="hidden sm:block" />
-        </>
-      )}
-      {!iconOnly && <Wordmark />}
+      <img
+        src={logoLight}
+        alt="GhostCode Dynamics"
+        draggable={false}
+        style={{ height, width: "auto" }}
+        className="block object-contain select-none dark:hidden"
+      />
+      <img
+        src={logoDark}
+        alt="GhostCode Dynamics"
+        draggable={false}
+        style={{ height, width: "auto" }}
+        className="hidden object-contain select-none dark:block"
+      />
     </span>
   );
 }
 
 // ---------------------------------------------------------------
-// <LogoCompact /> — icon + "GCD"
+// <LogoCompact /> — ghost icon + "GCD"
 // ---------------------------------------------------------------
 
 export function LogoCompact({ className, height = 32 }: LogoProps) {
@@ -123,21 +116,4 @@ export function LogoCompact({ className, height = 32 }: LogoProps) {
   );
 }
 
-// ---------------------------------------------------------------
-// Wordmark
-// ---------------------------------------------------------------
-
-function Wordmark() {
-  return (
-    <span className="font-display text-[1.02rem] leading-none tracking-tight text-foreground">
-      <span className="font-semibold">Ghost</span>
-      <span className="font-medium text-foreground/85">Code</span>
-      <span className="mx-1 text-muted-foreground/60">·</span>
-      <span className="font-medium tracking-[0.02em] text-muted-foreground">
-        Dynamics
-      </span>
-    </span>
-  );
-}
-
 export { LogoMark as GhostIcon };

src/components/site-footer.tsx

@@ -8,8 +8,8 @@ export function SiteFooter() {
       <div className="container-prose py-16">
         <div className="grid gap-12 md:grid-cols-12">
           <div className="md:col-span-5">
-            <Logo height={38} />
-            <p className="mt-4 max-w-sm text-sm leading-relaxed text-muted-foreground">
+            <Logo height={56} />
+            <p className="mt-5 max-w-sm text-sm leading-relaxed text-muted-foreground">
               Building digital solutions for businesses while empowering the next generation of tech professionals.
             </p>
             <div className="mt-6 flex items-center gap-2">

src/routes/__root.tsx

@@ -113,8 +113,10 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
     ],
     links: [
       { rel: "stylesheet", href: appCss },
-      { rel: "icon", href: "/favicon.png", type: "image/png" },
-      { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
+      { rel: "icon", href: "/favicon.png", type: "image/png", sizes: "any" },
+      { rel: "icon", href: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
+      { rel: "icon", href: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
+      { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" },
     ],
   }),
   shellComponent: RootShell,