De-template the frontend and apply the design system

- FastAPI branding replaced throughout: title, favicon, logo (now the org/
  brand SVGs), footer links, route titles; workspace package renamed
- shadcn primitives restyled to the component radius/shadow map: pill
  controls, rounded-lg surfaces, shadow-e1/e2/e3
- floating frosted AppSidebar over a bg-card content region
- theme storage key aligned with the pre-paint script, MotionConfig added
- scripts/capture-screenshots.mjs backs the root 'make verify'

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/Common/Footer.tsx

@@ -1,17 +1,10 @@
-import { FaGithub, FaLinkedinIn } from "react-icons/fa"
-import { FaXTwitter } from "react-icons/fa6"
+import { SiCodeberg } from "react-icons/si"
 
 const socialLinks = [
   {
-    icon: FaGithub,
-    href: "https://github.com/fastapi/fastapi",
-    label: "GitHub",
-  },
-  { icon: FaXTwitter, href: "https://x.com/fastapi", label: "X" },
-  {
-    icon: FaLinkedinIn,
-    href: "https://linkedin.com/company/fastapi",
-    label: "LinkedIn",
+    icon: SiCodeberg,
+    href: "https://codeberg.org/fluksio",
+    label: "Codeberg",
   },
 ]
 
@@ -21,9 +14,7 @@ export function Footer() {
   return (
     <footer className="border-t py-4 px-6">
       <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-        <p className="text-muted-foreground text-sm">
-          Full Stack FastAPI Template - {currentYear}
-        </p>
+        <p className="text-muted-foreground text-sm">Fluksio - {currentYear}</p>
         <div className="flex items-center gap-4">
           {socialLinks.map(({ icon: Icon, href, label }) => (
             <a

frontend/src/components/Common/Logo.tsx

@@ -2,10 +2,8 @@ import { Link } from "@tanstack/react-router"
 
 import { useTheme } from "@/components/theme-provider"
 import { cn } from "@/lib/utils"
-import icon from "/assets/images/fastapi-icon.svg"
-import iconLight from "/assets/images/fastapi-icon-light.svg"
-import logo from "/assets/images/fastapi-logo.svg"
-import logoLight from "/assets/images/fastapi-logo-light.svg"
+import logoDark from "/assets/images/fluksio-dark.svg"
+import logo from "/assets/images/fluksio-light.svg"
 
 interface LogoProps {
   variant?: "full" | "icon" | "responsive"
@@ -19,36 +17,38 @@ export function Logo({
   asLink = true,
 }: LogoProps) {
   const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
-
-  const fullLogo = isDark ? logoLight : logo
-  const iconLogo = isDark ? iconLight : icon
+  const src = resolvedTheme === "dark" ? logoDark : logo
 
+  // The mark and the wordmark live in the same SVG, so the collapsed sidebar
+  // shows the same asset cropped to a square rather than a separate icon file.
   const content =
     variant === "responsive" ? (
       <>
         <img
-          src={fullLogo}
-          alt="FastAPI"
+          src={src}
+          alt="Fluksio"
           className={cn(
             "h-6 w-auto group-data-[collapsible=icon]:hidden",
             className,
           )}
         />
         <img
-          src={iconLogo}
-          alt="FastAPI"
+          src={src}
+          alt="Fluksio"
           className={cn(
-            "size-5 hidden group-data-[collapsible=icon]:block",
+            "size-5 object-contain hidden group-data-[collapsible=icon]:block",
             className,
           )}
         />
       </>
     ) : (
       <img
-        src={variant === "full" ? fullLogo : iconLogo}
-        alt="FastAPI"
-        className={cn(variant === "full" ? "h-6 w-auto" : "size-5", className)}
+        src={src}
+        alt="Fluksio"
+        className={cn(
+          variant === "full" ? "h-6 w-auto" : "size-5 object-contain",
+          className,
+        )}
       />
     )