+2 -2

frontend/src/shared/fragments/Layout.tsx

··· 33 33 <title>{title}</title> 34 34 <meta name="description" content={description} /> 35 35 36 36 - {/* Favicon - Letter S */} 36 36 + {/* Favicon - Slices Logo */} 37 37 <link 38 38 rel="icon" 39 39 - href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='black'/><text x='50' y='70' font-size='60' font-family='system-ui' fill='white' text-anchor='middle' font-weight='bold'>S</text></svg>" 39 39 + href="data:image/svg+xml,<svg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='board1' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:%23FF6347;stop-opacity:1' /><stop offset='100%' style='stop-color:%23FF4500;stop-opacity:1' /></linearGradient><linearGradient id='board2' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:%2300CED1;stop-opacity:1' /><stop offset='100%' style='stop-color:%234682B4;stop-opacity:1' /></linearGradient></defs><g transform='translate(30, 30)'><ellipse cx='0' cy='-12' rx='25' ry='8' fill='url(%23board1)'/><ellipse cx='0' cy='0' rx='28' ry='8' fill='url(%23board2)'/><ellipse cx='0' cy='12' rx='22' ry='8' fill='%2332CD32'/></g></svg>" 40 40 /> 41 41 42 42 {/* Open Graph / Facebook */}

+36

frontend/src/shared/fragments/Logo.tsx

··· 1 1 + interface LogoProps { 2 2 + className?: string; 3 3 + } 4 4 + 5 5 + export function Logo({ className = "w-8 h-8" }: LogoProps) { 6 6 + return ( 7 7 + <svg 8 8 + viewBox="0 0 60 60" 9 9 + xmlns="http://www.w3.org/2000/svg" 10 10 + className={className} 11 11 + > 12 12 + <defs> 13 13 + <linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%"> 14 14 + <stop offset="0%" style="stop-color:#FF6347;stop-opacity:1" /> 15 15 + <stop offset="100%" style="stop-color:#FF4500;stop-opacity:1" /> 16 16 + </linearGradient> 17 17 + <linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%"> 18 18 + <stop offset="0%" style="stop-color:#00CED1;stop-opacity:1" /> 19 19 + <stop offset="100%" style="stop-color:#4682B4;stop-opacity:1" /> 20 20 + </linearGradient> 21 21 + </defs> 22 22 + 23 23 + {/* Surfboard/skateboard deck shapes stacked */} 24 24 + <g transform="translate(30, 30)"> 25 25 + {/* Top board slice */} 26 26 + <ellipse cx="0" cy="-8" rx="15" ry="6" fill="url(#board1)"/> 27 27 + 28 28 + {/* Middle board slice */} 29 29 + <ellipse cx="0" cy="0" rx="18" ry="6" fill="url(#board2)"/> 30 30 + 31 31 + {/* Bottom board slice */} 32 32 + <ellipse cx="0" cy="8" rx="12" ry="6" fill="#32CD32"/> 33 33 + </g> 34 34 + </svg> 35 35 + ); 36 36 + }

+4 -2

frontend/src/shared/fragments/Navigation.tsx

··· 1 1 import type { AuthenticatedUser } from "../../routes/middleware.ts"; 2 2 import { Button } from "./Button.tsx"; 3 3 + import { Logo } from "./Logo.tsx"; 3 4 4 5 interface NavigationProps { 5 6 currentUser?: AuthenticatedUser; ··· 12 13 <div className="flex items-center space-x-4"> 13 14 <a 14 15 href="/" 15 15 - className="text-xl font-bold text-zinc-900 dark:text-white hover:text-zinc-700 dark:hover:text-zinc-300" 16 16 + className="flex items-center space-x-2 text-xl font-bold text-zinc-900 dark:text-white hover:text-zinc-700 dark:hover:text-zinc-300" 16 17 > 17 17 - Slices 18 18 + <Logo className="w-8 h-8" /> 19 19 + <span>Slices</span> 18 20 </a> 19 21 {currentUser?.isAuthenticated && ( 20 22 <a