Added logo PNG fallback

X-Lovable-Edit-ID: edt-ed88ae64-c0eb-40e1-9cd6-1f833b6007c2
Co-authored-by: ghostcodedynamics <295822717+ghostcodedynamics@users.noreply.github.com>

Author: lovable-dev[bot]

public/favicon.png

@@ -1,76 +1,54 @@
 /**
  * GhostCode Dynamics — Brand Logo System
  * ---------------------------------------------------------------
- * This file is the single source of truth for the brand mark across
- * the navbar, footer, mobile menu, favicon, OG images, etc.
+ * Single source of truth for the brand mark.
  *
- * REPLACING THE PLACEHOLDER WITH THE FINAL PNG (≤ 2 min):
- *   1. Drop the final files into `src/assets/brand/`:
- *        - logo-mark.png         (square icon, ≥ 512×512)
- *        - logo-mark-light.png   (optional, for light backgrounds)
- *        - logo-full.png         (optional full lockup; if absent we
- *                                 keep the SVG monogram + typeset wordmark)
- *   2. Flip `USE_PNG_MARK = true` below.
- *   3. (Optional) Replace `public/favicon.svg` with the new icon.
- *
- * Nothing else in the codebase needs to change — every surface
- * imports <Logo />, <LogoCompact />, or <LogoMark /> from this file.
+ * 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.
  * ---------------------------------------------------------------
  */
 
+import { useState } from "react";
 import { cn } from "@/lib/utils";
-
-// Toggle this to `true` once the founder ships the final PNG assets.
-const USE_PNG_MARK = false;
-
-// When USE_PNG_MARK is true these are imported lazily by <LogoMark />.
-// Keeping them as string paths means the build never fails if the
-// PNGs are not yet present in the repo.
-const PNG_MARK_DARK = "/brand/logo-mark.png";
-const PNG_MARK_LIGHT = "/brand/logo-mark-light.png";
+import logoPng from "@/assets/brand/logo.png";
 
 // ---------------------------------------------------------------
-// Variant: <LogoMark /> — icon only (favicon, app icon, avatar)
+// <LogoMark /> — icon only, height-driven, aspect-preserving
 // ---------------------------------------------------------------
 
 interface LogoMarkProps {
-  size?: number;
+  /** Rendered height in px. Width auto-scales to preserve aspect ratio. */
+  height?: number;
   className?: string;
-  /** Force a specific contrast mode. Defaults to currentColor (auto). */
   tone?: "auto" | "dark" | "light";
 }
 
-/**
- * Ghost-in-monogram mark. Pure SVG so it is sharp on every density,
- * inherits theme color via `currentColor`, and ships zero bytes of
- * raster data until the real PNG is wired in.
- */
-export function LogoMark({ size = 32, className, tone = "auto" }: LogoMarkProps) {
-  if (USE_PNG_MARK) {
-    const src = tone === "light" ? PNG_MARK_LIGHT : PNG_MARK_DARK;
+export function LogoMark({ height = 36, className, tone = "auto" }: LogoMarkProps) {
+  const [failed, setFailed] = useState(false);
+
+  if (!failed && logoPng) {
     return (
       <img
-        src={src}
-        width={size}
-        height={size}
+        src={logoPng}
         alt="GhostCode Dynamics"
-        className={cn("shrink-0 select-none", className)}
+        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";
-
+    tone === "dark" ? "#0a0a0f" : tone === "light" ? "#ffffff" : "currentColor";
   return (
     <svg
-      width={size}
-      height={size}
+      height={height}
+      width={height}
       viewBox="0 0 64 64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -79,42 +57,30 @@ export function LogoMark({ size = 32, className, tone = "auto" }: LogoMarkProps)
       aria-label="GhostCode Dynamics"
       shapeRendering="geometricPrecision"
     >
-      {/* Rounded squircle backdrop — the monogram "G" */}
       <rect x="1" y="1" width="62" height="62" rx="16" fill={fg} />
-
-      {/* Ghost silhouette cut out of the squircle */}
       <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)"
       />
-
-      {/* Eyes — restate foreground for a crisp 3-tone read */}
       <circle cx="28.4" cy="29.5" r="1.9" fill={fg} />
       <circle cx="35.6" cy="29.5" r="1.9" fill={fg} />
-
-      {/* Subtle "C / D" tick: opening on the right side of the G */}
-      <path
-        d="M46 30v6"
-        stroke="var(--background)"
-        strokeWidth="3"
-        strokeLinecap="round"
-      />
     </svg>
   );
 }
 
 // ---------------------------------------------------------------
-// Variant: <Logo /> — full lockup (icon + "GhostCode Dynamics")
+// <Logo /> — full lockup (mark + wordmark)
 // ---------------------------------------------------------------
 
 interface LogoProps {
   className?: string;
-  size?: number;
-  /** Hide the wordmark, keep only the mark. */
+  /** Mark height in px. Defaults sized for navbar use. */
+  height?: number;
   iconOnly?: boolean;
 }
 
-export function Logo({ className, size = 32, iconOnly = false }: LogoProps) {
+export function Logo({ className, height, iconOnly = false }: LogoProps) {
+  // Responsive default: 36px mobile → 42px desktop. Caller can override.
   return (
     <span
       className={cn(
@@ -123,17 +89,24 @@ export function Logo({ className, size = 32, iconOnly = false }: LogoProps) {
       )}
       aria-label="GhostCode Dynamics"
     >
-      <LogoMark size={size} />
+      {height ? (
+        <LogoMark height={height} />
+      ) : (
+        <>
+          <LogoMark height={36} className="sm:hidden" />
+          <LogoMark height={42} className="hidden sm:block" />
+        </>
+      )}
       {!iconOnly && <Wordmark />}
     </span>
   );
 }
 
 // ---------------------------------------------------------------
-// Variant: <LogoCompact /> — icon + "GCD" (tight navs, mobile)
+// <LogoCompact /> — icon + "GCD"
 // ---------------------------------------------------------------
 
-export function LogoCompact({ className, size = 28 }: LogoProps) {
+export function LogoCompact({ className, height = 32 }: LogoProps) {
   return (
     <span
       className={cn(
@@ -142,7 +115,7 @@ export function LogoCompact({ className, size = 28 }: LogoProps) {
       )}
       aria-label="GhostCode Dynamics"
     >
-      <LogoMark size={size} />
+      <LogoMark height={height} />
       <span className="font-display text-base font-semibold tracking-[0.18em] text-foreground">
         GCD
       </span>
@@ -151,7 +124,7 @@ export function LogoCompact({ className, size = 28 }: LogoProps) {
 }
 
 // ---------------------------------------------------------------
-// Wordmark — geometric, Linear / Vercel / Stripe inspired
+// Wordmark
 // ---------------------------------------------------------------
 
 function Wordmark() {
@@ -167,5 +140,4 @@ function Wordmark() {
   );
 }
 
-// Re-export the icon under its previous name to keep older imports working.
 export { LogoMark as GhostIcon };

src/assets/brand/logo.png

@@ -8,7 +8,7 @@ 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 />
+            <Logo height={38} />
             <p className="mt-4 max-w-sm text-sm leading-relaxed text-muted-foreground">
               Building digital solutions for businesses while empowering the next generation of tech professionals.
             </p>

src/components/brand/logo.tsx

@@ -113,6 +113,7 @@ 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" },
     ],
   }),

src/components/site-footer.tsx

@@ -53,13 +53,13 @@ function FounderPage() {
       <section className="container-prose pb-16 md:pb-24">
         <div className="grid gap-12 lg:grid-cols-12 items-start">
           <Reveal className="lg:col-span-5 lg:sticky lg:top-28">
-            <div className="relative aspect-[4/5] w-full max-w-md mx-auto overflow-hidden rounded-3xl glass-strong ring-glow">
+            <div className="relative mx-auto aspect-[4/5] w-full max-w-[220px] overflow-hidden rounded-3xl shadow-[0_20px_60px_-15px_rgba(0,0,0,0.35)] ring-1 ring-border/60 sm:max-w-[260px] lg:max-w-[300px]">
               <img
                 src={founderImg}
                 alt="Jeet Ahirwar — Founder of GhostCode Dynamics"
                 className="h-full w-full object-cover"
-                width={896}
-                height={1120}
+                width={600}
+                height={750}
                 loading="eager"
               />
             </div>