feat: apply new branding logo across app and pwa assets

src/components/home/HomeClientWrapper.tsx

@@ -6,6 +6,7 @@ import { RefreshButton } from "@/components/library/RefreshButton";
 import { PullToRefreshIndicator } from "@/components/common/PullToRefreshIndicator";
 import { usePullToRefresh } from "@/hooks/usePullToRefresh";
 import { revalidateForRefresh } from "@/app/actions/refresh";
+import Image from "next/image";
 
 interface HomeClientWrapperProps {
   children: ReactNode;
@@ -48,7 +49,25 @@ export function HomeClientWrapper({ children }: HomeClientWrapperProps) {
         isHiding={pullToRefresh.isHiding}
       />
       <main className="relative isolate overflow-hidden">
-        <div className="container mx-auto space-y-6 px-4 pb-8 pt-3">
+        <div className="pointer-events-none absolute inset-0 z-0 flex items-start justify-center pt-10">
+          <Image
+            src="/images/logostripstream.png"
+            alt=""
+            width={600}
+            height={600}
+            aria-hidden
+            className="hidden h-auto w-[min(78vw,600px)] opacity-[0.08] saturate-125 dark:block"
+          />
+          <Image
+            src="/images/logostripstream-white.png"
+            alt=""
+            width={600}
+            height={600}
+            aria-hidden
+            className="h-auto w-[min(78vw,600px)] opacity-[0.1] saturate-125 dark:hidden"
+          />
+        </div>
+        <div className="container relative z-10 mx-auto space-y-6 px-4 pb-8 pt-3">
           <div className="flex justify-end">
             <RefreshButton libraryId="home" refreshLibrary={handleRefresh} />
           </div>

src/components/layout/Header.tsx

@@ -48,14 +48,14 @@ export function Header({
 
         <div className="mr-2 flex items-center md:mr-4">
           <a className="mr-2 flex items-center md:mr-6" href="/">
-            <span className="inline-flex bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-sm font-bold uppercase tracking-[0.1em] text-transparent sm:hidden">
-              StripStream
+            <span className="inline-flex bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-sm font-bold tracking-[0.06em] text-transparent sm:hidden">
+              Strip
             </span>
             <span className="hidden sm:inline-flex flex-col leading-none">
-              <span className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-lg font-bold tracking-[0.1em] text-transparent">
-                STRIPSTREAM
+              <span className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-lg font-bold tracking-[0.08em] text-transparent">
+                StripStream
               </span>
-              <span className="mt-1 text-[10px] font-medium uppercase tracking-[0.28em] text-foreground/70">
+              <span className="mt-1 text-[10px] font-medium uppercase tracking-[0.22em] text-foreground/70">
                 comic reader
               </span>
             </span>

src/components/layout/Sidebar.tsx

@@ -157,8 +157,18 @@ export function Sidebar({
       id="sidebar"
     >
       <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(160deg,hsl(var(--primary)/0.12)_0%,hsl(192_85%_55%/0.08)_32%,transparent_58%),linear-gradient(332deg,hsl(338_82%_62%/0.06)_0%,transparent_42%),repeating-linear-gradient(135deg,hsl(var(--foreground)/0.02)_0_1px,transparent_1px_11px)]" />
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div
+          className="hidden h-full w-full bg-center bg-no-repeat opacity-[0.1] [background-size:260%] dark:block"
+          style={{ backgroundImage: "url('/images/logostripstream.png')" }}
+        />
+        <div
+          className="h-full w-full bg-center bg-no-repeat opacity-[0.12] [background-size:260%] dark:hidden"
+          style={{ backgroundImage: "url('/images/logostripstream-white.png')" }}
+        />
+      </div>
 
-      <div className="relative flex-1 space-y-4 overflow-y-auto px-3 py-4">
+      <div className="relative z-10 flex-1 space-y-4 overflow-y-auto px-3 py-4">
         <div className="rounded-xl border border-border/50 bg-background/30 p-2">
           <div className="space-y-1">
             <h2 className="mb-2 px-3 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">

src/components/settings/ClientSettings.tsx

@@ -42,7 +42,7 @@ export function ClientSettings({ initialConfig, initialLibraries }: ClientSettin
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="max-w-4xl mx-auto space-y-8">
+      <div className="mx-auto max-w-4xl space-y-8">
         <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
 
         <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">