Enable demo mode features, auto-fill demo credentials, and enhance branding integration

- Added `DEMO_MODE` to backend configuration with relaxed security support for specific demo accounts.
- Updated password validators to allow predefined weak passwords in demo mode.
- Auto-fill login forms with demo credentials via query parameters for improved demo accessibility.
- Introduced demo user creation logic during database initialization if `DEMO_MODE` is enabled.
- Replaced `img` tags with `next/image` for consistent and optimized visuals in branding elements.
- Refined footer, header, and layout components to incorporate improved logo handling.

frontend/docs/branding/02-visual-identity.md

@@ -12,6 +12,7 @@ The **PragmaStack** logo represents the core values of the project: structure, s
 </div>
 
 ### Icon
+
 For smaller contexts (favicons, headers), we use the simplified icon:
 
 <div align="center">

frontend/src/components/auth/LoginForm.tsx

@@ -6,8 +6,9 @@
 
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from '@/lib/i18n/routing';
+import { useSearchParams } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -82,6 +83,9 @@ export function LoginForm({
   const [serverError, setServerError] = useState<string | null>(null);
   const loginMutation = useLogin();
 
+  // Get query parameters for demo auto-fill
+  const searchParams = useSearchParams();
+
   const loginSchema = createLoginSchema((key: string) => {
     if (key.startsWith('validation.')) {
       return tValidation(key.replace('validation.', ''));
@@ -102,6 +106,15 @@ export function LoginForm({
     },
   });
 
+  // Auto-fill form from query params (for demo mode)
+  useEffect(() => {
+    const email = searchParams.get('email');
+    const password = searchParams.get('password');
+
+    if (email) form.setValue('email', email);
+    if (password) form.setValue('password', password);
+  }, [searchParams, form]);
+
   const onSubmit = async (data: LoginFormData) => {
     try {
       // Clear previous errors

frontend/src/components/dev/DevLayout.tsx

@@ -8,10 +8,10 @@
 
 'use client';
 
+import Image from 'next/image';
 import { Link } from '@/lib/i18n/routing';
 import { usePathname } from '@/lib/i18n/routing';
 import {
-
   Palette,
   LayoutDashboard,
   Box,
@@ -94,7 +94,13 @@ export function DevLayout({ children }: DevLayoutProps) {
           <div className="flex h-14 items-center justify-between gap-6">
             {/* Left: Logo + Badge */}
             <div className="flex items-center gap-3 shrink-0">
-              <img src="/logo-icon.svg" alt="PragmaStack Logo" className="h-6 w-6" />
+              <Image
+                src="/logo-icon.svg"
+                alt="PragmaStack Logo"
+                width={24}
+                height={24}
+                className="h-6 w-6"
+              />
               <h1 className="text-base font-semibold">PragmaStack</h1>
               <Badge variant="secondary" className="text-xs">
                 Dev

frontend/src/components/home/DemoCredentialsModal.tsx

@@ -141,12 +141,12 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
         <DialogFooter>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full">
             <Button asChild variant="default" className="w-full">
-              <Link href="/login" onClick={onClose}>
+              <Link href="/login?email=demo@example.com&password=Demo123!" onClick={onClose}>
                 Login as User
               </Link>
             </Button>
             <Button asChild variant="default" className="w-full">
-              <Link href="/login" onClick={onClose}>
+              <Link href="/login?email=admin@example.com&password=Admin123!" onClick={onClose}>
                 Login as Admin
               </Link>
             </Button>

frontend/src/components/home/Header.tsx

@@ -5,6 +5,7 @@
 
 'use client';
 
+import Image from 'next/image';
 import { useState } from 'react';
 import { Link } from '@/lib/i18n/routing';
 import { Menu, X, Github, Star } from 'lucide-react';
@@ -13,12 +14,20 @@ import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { LocaleSwitcher } from '@/components/i18n';
 import { ThemeToggle } from '@/components/theme';
 
+import { useIsAuthenticated, useLogout } from '@/lib/api/hooks/useAuth';
+
 interface HeaderProps {
   onOpenDemoModal: () => void;
 }
 
 export function Header({ onOpenDemoModal }: HeaderProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const isAuthenticated = useIsAuthenticated();
+  const logoutMutation = useLogout();
+
+  const handleLogout = () => {
+    logoutMutation.mutate();
+  };
 
   const navLinks = [
     { href: '/', label: 'Home' },
@@ -31,8 +40,17 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-6">
           {/* Logo */}
-          <Link href="/" className="flex items-center gap-2 font-bold text-xl hover:opacity-80 transition-opacity">
-            <img src="/logo-icon.svg" alt="PragmaStack Logo" className="h-8 w-8" />
+          <Link
+            href="/"
+            className="flex items-center gap-2 font-bold text-xl hover:opacity-80 transition-opacity"
+          >
+            <Image
+              src="/logo-icon.svg"
+              alt="PragmaStack Logo"
+              width={32}
+              height={32}
+              className="h-8 w-8"
+            />
             <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
               PragmaStack
             </span>
@@ -75,9 +93,16 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
             <Button onClick={onOpenDemoModal} variant="default" size="sm">
               Try Demo
             </Button>
-            <Button asChild variant="outline" size="sm">
-              <Link href="/login">Login</Link>
-            </Button>
+
+            {isAuthenticated ? (
+              <Button onClick={handleLogout} variant="outline" size="sm">
+                Logout
+              </Button>
+            ) : (
+              <Button asChild variant="outline" size="sm">
+                <Link href="/login">Login</Link>
+              </Button>
+            )}
           </nav>
 
           {/* Mobile Menu Toggle */}
@@ -138,11 +163,25 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
                   >
                     Try Demo
                   </Button>
-                  <Button asChild variant="outline" className="w-full">
-                    <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
-                      Login
-                    </Link>
-                  </Button>
+
+                  {isAuthenticated ? (
+                    <Button
+                      onClick={() => {
+                        setMobileMenuOpen(false);
+                        handleLogout();
+                      }}
+                      variant="outline"
+                      className="w-full"
+                    >
+                      Logout
+                    </Button>
+                  ) : (
+                    <Button asChild variant="outline" className="w-full">
+                      <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
+                        Login
+                      </Link>
+                    </Button>
+                  )}
                 </div>
               </nav>
             </SheetContent>

frontend/src/components/home/HeroSection.tsx

@@ -124,8 +124,6 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
               </Link>
             </Button>
           </motion.div>
-
-
         </div>
       </div>
     </section>

frontend/src/components/home/TechStackSection.tsx

@@ -66,9 +66,7 @@ export function TechStackSection() {
         viewport={{ once: true, margin: '-100px' }}
         transition={{ duration: 0.6 }}
       >
-        <h2 className="text-3xl md:text-4xl font-bold mb-4">
-          A Stack You Can Trust
-        </h2>
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">A Stack You Can Trust</h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
           We chose these tools because they are boring, reliable, and standard. No hype, just
           results. Async architecture, type safety, and developer experience.

frontend/src/components/layout/Footer.tsx

@@ -5,6 +5,7 @@
 
 'use client';
 
+import Image from 'next/image';
 import { Link } from '@/lib/i18n/routing';
 
 export function Footer() {
@@ -15,7 +16,13 @@ export function Footer() {
       <div className="container mx-auto px-4 py-6">
         <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
           <div className="flex items-center gap-2 text-center text-sm text-muted-foreground md:text-left">
-            <img src="/logo-icon.svg" alt="PragmaStack Logo" className="h-5 w-5 opacity-70" />
+            <Image
+              src="/logo-icon.svg"
+              alt="PragmaStack Logo"
+              width={20}
+              height={20}
+              className="h-5 w-5 opacity-70"
+            />
             <span>© {currentYear} PragmaStack. All rights reserved.</span>
           </div>
           <div className="flex space-x-6">

frontend/src/components/layout/Header.tsx

@@ -6,6 +6,7 @@
 
 'use client';
 
+import Image from 'next/image';
 import { Link } from '@/lib/i18n/routing';
 import { usePathname } from '@/lib/i18n/routing';
 import { useAuth } from '@/lib/auth/AuthContext';
@@ -83,7 +84,13 @@ export function Header() {
         {/* Logo */}
         <div className="flex items-center space-x-8">
           <Link href="/" className="flex items-center space-x-2">
-            <img src="/logo-icon.svg" alt="PragmaStack Logo" className="h-8 w-8" />
+            <Image
+              src="/logo-icon.svg"
+              alt="PragmaStack Logo"
+              width={32}
+              height={32}
+              className="h-8 w-8"
+            />
             <span className="text-xl font-bold text-foreground">PragmaStack</span>
           </Link>
 

frontend/src/lib/api/hooks/useAuth.ts

@@ -9,7 +9,7 @@
 
 import { useEffect } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import {
   login,
   register,