branding: centralize brand name/logo; update metadata, headers, nav, ask-ai UI, uploader, space placeholder, and injected badge to use BRAND_NAME/BRAND_ICON_SRC

app/(public)/page.tsx

@@ -1,11 +1,12 @@
 import { redirect } from "next/navigation";
+import { BRAND_NAME } from "@/lib/branding";
 export default function Home() {
   redirect("/projects/new");
   return (
     <>
       <header className="container mx-auto pt-20 px-6 relative flex flex-col items-center justify-center text-center">
         <div className="rounded-full border border-neutral-100/10 bg-neutral-100/5 text-xs text-neutral-300 px-3 py-1 max-w-max mx-auto mb-2">
-          ✨ DeepSite Public Beta
+          ✨ {BRAND_NAME} Public Beta
         </div>
         <h1 className="text-8xl font-semibold text-white font-mono max-w-4xl">
           Code your website with AI in seconds

app/layout.tsx

@@ -10,6 +10,7 @@ import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { apiServer } from "@/lib/api";
 import AppContext from "@/components/contexts/app-context";
 import Script from "next/script";
+import { BRAND_NAME, BRAND_ICON_SRC } from "@/lib/branding";
 
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -23,40 +24,40 @@ const ptSans = PT_Sans({
 });
 
 export const metadata: Metadata = {
-  title: "DeepSite | Build with AI ✨",
+  title: `${BRAND_NAME} | Build with AI ✨`,
   description:
-    "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+    `${BRAND_NAME} is a web development tool that helps you build websites with AI, no code required. Let's deploy your website and enjoy the magic of AI.`,
   openGraph: {
-    title: "DeepSite | Build with AI ✨",
+    title: `${BRAND_NAME} | Build with AI ✨`,
     description:
-      "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+      `${BRAND_NAME} is a web development tool that helps you build websites with AI, no code required. Let's deploy your website and enjoy the magic of AI.`,
     url: "https://deepsite.hf.co",
-    siteName: "DeepSite",
+    siteName: BRAND_NAME,
     images: [
       {
         url: "https://deepsite.hf.co/banner.png",
         width: 1200,
         height: 630,
-        alt: "DeepSite Open Graph Image",
+        alt: `${BRAND_NAME} Open Graph Image`,
       },
     ],
   },
   twitter: {
     card: "summary_large_image",
-    title: "DeepSite | Build with AI ✨",
+    title: `${BRAND_NAME} | Build with AI ✨`,
     description:
-      "DeepSite is a web development tool that helps you build websites with AI, no code required. Let's deploy your website with DeepSite and enjoy the magic of AI.",
+      `${BRAND_NAME} is a web development tool that helps you build websites with AI, no code required. Let's deploy your website and enjoy the magic of AI.`,
     images: ["https://deepsite.hf.co/banner.png"],
   },
   appleWebApp: {
     capable: true,
-    title: "DeepSite",
+    title: BRAND_NAME,
     statusBarStyle: "black-translucent",
   },
   icons: {
-    icon: "/logo.svg",
-    shortcut: "/logo.svg",
-    apple: "/logo.svg",
+    icon: BRAND_ICON_SRC,
+    shortcut: BRAND_ICON_SRC,
+    apple: BRAND_ICON_SRC,
   },
 };
 

components/editor/ask-ai/follow-up-tooltip.tsx

@@ -4,6 +4,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Info } from "lucide-react";
+import { BRAND_NAME } from "@/lib/branding";
 
 export const FollowUpTooltip = () => {
   return (
@@ -22,7 +23,7 @@ export const FollowUpTooltip = () => {
         </header>
         <main className="p-4">
           <p className="text-neutral-300 text-sm">
-            Using the Diff-Patch system, allow DeepSite to intelligently update
+            Using the Diff-Patch system, allow {BRAND_NAME} to intelligently update
             your project without rewritting the entire codebase.
           </p>
           <p className="text-neutral-500 text-sm mt-2">

components/editor/ask-ai/index.tsx

@@ -23,6 +23,7 @@ import { FollowUpTooltip } from "./follow-up-tooltip";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
 import { useCallAi } from "@/hooks/useCallAi";
 import { SelectedFiles } from "./selected-files";
+import { BRAND_NAME } from "@/lib/branding";
 import { Uploader } from "./uploader";
 
 export function AskAI({
@@ -242,7 +243,7 @@ export function AskAI({
               }}
             >
               <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
-                {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"}
+                {isThinking ? `${BRAND_NAME} is thinking...` : `${BRAND_NAME}'s plan`}
               </p>
               <ChevronDown
                 className={classNames(
@@ -298,60 +299,20 @@ export function AskAI({
                     "AI is working..."
                   ) : (
                     <span className="inline-flex">
-                      {[
-                        "D",
-                        "e",
-                        "e",
-                        "p",
-                        "S",
-                        "i",
-                        "t",
-                        "e",
-                        " ",
-                        "i",
-                        "s",
-                        " ",
-                        "T",
-                        "h",
-                        "i",
-                        "n",
-                        "k",
-                        "i",
-                        "n",
-                        "g",
-                        ".",
-                        ".",
-                        ".",
-                        " ",
-                        "W",
-                        "a",
-                        "i",
-                        "t",
-                        " ",
-                        "a",
-                        " ",
-                        "m",
-                        "o",
-                        "m",
-                        "e",
-                        "n",
-                        "t",
-                        ".",
-                        ".",
-                        ".",
-                      ].map((char, index) => (
-                        <span
-                          key={index}
-                          className={classNames(
-                            "bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse",
-                            // generate a delay class name like delay-0, delay-1, ...
-                            `ai-delay-${index}`
-                          )}
-                          data-char-index={index}
-                        >
-                          {char === " " ? "\u00A0" : char}
-                        </span>
-                      ))}
+                      {`${BRAND_NAME} is Thinking... Wait a moment...`
+                        .split("")
+                        .map((char, index) => (
+                          <span
+                            key={index}
+                            className={classNames(
+                              "bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse",
+                              `ai-delay-${index}`
+                            )}
+                            data-char-index={index}
+                          >
+                            {char === " " ? "\u00A0" : char}
+                          </span>
+                        ))}
                     </span>
                   )}
                 </p>
@@ -377,9 +338,9 @@ export function AskAI({
             )}
             placeholder={
               selectedElement
-                ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
+                ? `Ask ${BRAND_NAME} about ${selectedElement.tagName.toLowerCase()}...`
                 : isFollowUp && (!isSameHtml || pages?.length > 1)
-                ? "Ask DeepSite for edits (keep it short)"
+                ? `Ask ${BRAND_NAME} for edits (keep it short)`
                 : "Describe a tiny component or change (1–2 sentences)"
             }
             value={prompt}
@@ -435,7 +396,7 @@ export function AskAI({
                   align="start"
                   className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
                 >
-                  Select an element on the page to ask DeepSite edit it
+                  Select an element on the page to ask {BRAND_NAME} edit it
                   directly.
                 </TooltipContent>
               </Tooltip>
@@ -478,7 +439,7 @@ export function AskAI({
               NEW
             </span>
             <p className="text-sm text-neutral-100">
-              DeepSite can now create multiple pages at once. Try it!
+              {BRAND_NAME} can now create multiple pages at once. Try it!
             </p>
           </div>
         )}

components/editor/ask-ai/uploader.tsx

@@ -14,6 +14,7 @@ import { RiCheckboxCircleFill } from "react-icons/ri";
 import { useUser } from "@/hooks/useUser";
 import { LoginModal } from "@/components/login-modal";
 import { DeployButtonContent } from "../deploy-button/content";
+import { BRAND_NAME } from "@/lib/branding";
 
 export const Uploader = ({
   pages,
@@ -103,7 +104,7 @@ export const Uploader = ({
                   Add Custom Images
                 </p>
                 <p className="text-sm text-neutral-500 mt-1.5">
-                  Upload images to your project and use them with DeepSite!
+                  Upload images to your project and use them with {BRAND_NAME}!
                 </p>
               </header>
               <main className="space-y-4 p-5">

components/editor/header/index.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { Eye, MessageCircleCode } from "lucide-react";
 
-import Logo from "@/assets/logo.svg";
+import { BRAND_LOGO_SRC, BRAND_NAME } from "@/lib/branding";
 
 import { Button } from "@/components/ui/button";
 import classNames from "classnames";
@@ -34,12 +34,14 @@ export function Header({
       <div className="flex items-center justify-start gap-3">
         <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
           <Image
-            src={Logo}
-            alt="DeepSite Logo"
-            className="size-6 lg:size-8 mr-2 invert-100 dark:invert-0"
+            src={BRAND_LOGO_SRC}
+            alt={`${BRAND_NAME} Logo`}
+            width={32}
+            height={32}
+            className="size-6 lg:size-8 mr-2"
           />
           <p className="max-md:hidden flex items-center justify-start">
-            DeepSite
+            {BRAND_NAME}
             <span className="font-mono bg-gradient-to-br from-sky-500 to-emerald-500 text-neutral-950 rounded-full text-xs ml-2 px-1.5 py-0.5">
               {" "}
               v2

components/public/navigation/index.tsx

@@ -7,7 +7,7 @@ import { useMount, useUnmount } from "react-use";
 import classNames from "classnames";
 
 import { Button } from "@/components/ui/button";
-import Logo from "@/assets/logo.svg";
+import { BRAND_LOGO_SRC, BRAND_NAME } from "@/lib/branding";
 import { useUser } from "@/hooks/useUser";
 import { HIDE_LOGIN } from "@/lib/flags";
 import { UserMenu } from "@/components/user-menu";
@@ -89,13 +89,14 @@ export default function Navigation() {
       <nav className="grid grid-cols-2 p-4 container mx-auto">
         <Link href="/" className="flex items-center gap-1">
           <Image
-            src={Logo}
+            src={BRAND_LOGO_SRC}
             className="w-9 mr-1"
-            alt="DeepSite Logo"
-            width={64}
-            height={64}
+            alt={`${BRAND_NAME} Logo`}
+            width={36}
+            height={36}
+            priority
           />
-          <p className="font-sans text-white text-xl font-bold">DeepSite</p>
+          <p className="font-sans text-white text-xl font-bold">{BRAND_NAME}</p>
         </Link>
         <ul className="items-center justify-center gap-6 hidden">
           {navigationLinks.map((link) => (

components/space/ask-ai/index.tsx

@@ -5,6 +5,7 @@ import { PiGearSixFill } from "react-icons/pi";
 import { TiUserAdd } from "react-icons/ti";
 
 import { Button } from "@/components/ui/button";
+import { BRAND_NAME } from "@/lib/branding";
 
 export const AskAi = () => {
   return (
@@ -13,7 +14,7 @@ export const AskAi = () => {
         <textarea
           rows={3}
           className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none mb-1"
-          placeholder="Ask DeepSite anything..."
+          placeholder={`Ask ${BRAND_NAME} anything...`}
           onChange={() => {}}
           onKeyDown={() => {}}
         />

lib/branding.ts

@@ -0,0 +1,14 @@
+// Centralized branding for name and logo paths
+// Use public/ paths (served by Next) for images. You can set these via env vars.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const process: any;
+
+export const BRAND_NAME: string = process.env.NEXT_PUBLIC_BRAND_NAME ?? "inSite";
+
+// Primary logo used in headers/nav. Prefer PNG as requested; fallback to existing SVG.
+export const BRAND_LOGO_SRC: string =
+  process.env.NEXT_PUBLIC_BRAND_LOGO ?? "/logo.svg";
+
+// Favicon/app icon (can be same as logo). Prefer PNG; fallback to BRAND_LOGO_SRC.
+export const BRAND_ICON_SRC: string =
+  process.env.NEXT_PUBLIC_BRAND_ICON ?? BRAND_LOGO_SRC;

lib/utils.ts

@@ -15,6 +15,14 @@ export const COLORS = [
   "gray",
 ];
 
+import { BRAND_ICON_SRC, BRAND_NAME } from "@/lib/branding";
+
 export const getPTag = (repoId: string) => {
-  return `<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=${repoId}" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>`;
+  // Try to resolve absolute URL for icon based on current location when available
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const icon = BRAND_ICON_SRC.startsWith("http")
+    ? BRAND_ICON_SRC
+    : `${origin}${BRAND_ICON_SRC}`;
+  const home = origin || "https://deepsite.hf.co";
+  return `<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="${icon}" alt="${BRAND_NAME} Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="${home}" style="color: #fff;text-decoration: underline;" target="_blank" >${BRAND_NAME}</a> - 🧬 <a href="${home}?remix=${repoId}" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>`;
 };