feat: apply new branding logo across app and pwa assets

src/app/account/page.tsx

@@ -15,7 +15,7 @@ export default async function AccountPage() {
 
     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">
           <div>
             <h1 className="text-3xl font-bold">Mon compte</h1>
             <p className="text-muted-foreground mt-2">

src/app/layout.tsx

@@ -36,8 +36,8 @@ export const metadata: Metadata = {
   icons: {
     icon: [
       {
-        url: "/favicon.svg",
-        type: "image/svg+xml",
+        url: "/favicon.png",
+        type: "image/png",
       },
       { url: "/images/icons/icon-72x72.png", sizes: "72x72", type: "image/png" },
       { url: "/images/icons/icon-96x96.png", sizes: "96x96", type: "image/png" },
@@ -176,7 +176,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <AuthProvider>
           <I18nProvider locale={locale}>
             <PreferencesProvider initialPreferences={preferences}>
-              <ClientLayout initialLibraries={libraries} initialFavorites={favorites} userIsAdmin={userIsAdmin}>
+              <ClientLayout
+                initialLibraries={libraries}
+                initialFavorites={favorites}
+                userIsAdmin={userIsAdmin}
+              >
                 {children}
               </ClientLayout>
             </PreferencesProvider>

src/app/loading.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Image from "next/image";
 
 const SHOW_DELAY_MS = 140;
 
@@ -22,8 +23,22 @@ export default function AppLoading() {
       }`}
     >
       <div className="flex w-full max-w-sm flex-col items-center gap-6 text-center">
-        <div className="space-y-2">
-          <p className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-xl font-bold uppercase tracking-[0.12em] text-transparent">
+        <div className="space-y-3">
+          <Image
+            src="/images/logostripstream.png"
+            alt="StripStream Logo"
+            width={80}
+            height={80}
+            className="mx-auto hidden h-20 w-20 rounded-xl object-cover dark:block"
+          />
+          <Image
+            src="/images/logostripstream-white.png"
+            alt="StripStream Logo"
+            width={80}
+            height={80}
+            className="mx-auto h-20 w-20 rounded-xl object-cover dark:hidden"
+          />
+          <p className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-xl font-bold tracking-[0.08em] text-transparent">
             StripStream
           </p>
           <p className="text-sm text-muted-foreground">Chargement de votre bibliotheque...</p>

src/app/login/LoginContent.tsx

@@ -43,21 +43,21 @@ export function LoginContent({ searchParams }: LoginContentProps) {
           transition={{ duration: 0.6, delay: 0.2 }}
           className="relative z-20 flex items-center text-lg font-medium"
         >
-          <motion.svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mr-2 h-6 w-6"
-            whileHover={{ rotate: 180 }}
+          <motion.img
+            src="/images/logostripstream.png"
+            alt="StripStream Logo"
+            className="mr-3 hidden h-9 w-9 rounded-md object-cover dark:block"
+            whileHover={{ scale: 1.08, rotate: -3 }}
             transition={{ duration: 0.3 }}
-          >
-            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-          </motion.svg>
-          <span className="text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+          />
+          <motion.img
+            src="/images/logostripstream-white.png"
+            alt="StripStream Logo"
+            className="mr-3 h-9 w-9 rounded-md object-cover dark:hidden"
+            whileHover={{ scale: 1.08, rotate: -3 }}
+            transition={{ duration: 0.3 }}
+          />
+          <span className="text-2xl font-bold bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-transparent">
             StripStream
           </span>
         </motion.div>
@@ -83,12 +83,20 @@ export function LoginContent({ searchParams }: LoginContentProps) {
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col items-center space-y-4 text-center">
             <div className="relative">
-              <div className="absolute -inset-1 bg-gradient-to-r from-[#4F46E5] to-[#6366F1] rounded-full opacity-75 blur-md animate-pulse"></div>
-              <div className="relative bg-gradient-to-br from-white to-gray-100 dark:from-slate-800 dark:to-slate-900 rounded-full shadow-xl overflow-hidden w-24 h-24 flex items-center justify-center">
+              <div className="relative bg-gradient-to-br from-white to-gray-100 dark:from-slate-800 dark:to-slate-900 rounded-full shadow-xl overflow-hidden w-32 h-32 flex items-center justify-center">
                 <motion.img
-                  src="/images/icons/apple-icon-180x180.png"
+                  src="/images/logostripstream.png"
                   alt="StripStream Logo"
-                  className="w-[100%] h-[100%] object-cover"
+                  className="hidden h-[100%] w-[100%] object-cover dark:block"
+                  initial={{ scale: 1.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ duration: 0.5 }}
+                  whileHover={{ scale: 1.05 }}
+                />
+                <motion.img
+                  src="/images/logostripstream-white.png"
+                  alt="StripStream Logo"
+                  className="h-[100%] w-[100%] object-cover dark:hidden"
                   initial={{ scale: 1.8, opacity: 0 }}
                   animate={{ scale: 1, opacity: 1 }}
                   transition={{ duration: 0.5 }}
@@ -99,7 +107,7 @@ export function LoginContent({ searchParams }: LoginContentProps) {
             <motion.h1
               initial={{ y: -20 }}
               animate={{ y: 0 }}
-              className="text-3xl font-bold tracking-tight bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent"
+              className="text-3xl font-bold tracking-tight bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-transparent"
             >
               {t("login.title")}
             </motion.h1>

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">