Add logo icon to components and update branding assets

- Integrated `logo-icon.svg` into headers, footer, and development layout for consistent branding.
- Updated `logo.svg` and `logo-icon.svg` with improved gradient and filter naming for clarity.
- Enhanced `README.md` and branding documentation with logo visuals and descriptions.
- Refined visual identity details in docs to emphasize the branding hierarchy and usage.

frontend/src/components/dev/DevLayout.tsx

@@ -11,7 +11,7 @@
 import { Link } from '@/lib/i18n/routing';
 import { usePathname } from '@/lib/i18n/routing';
 import {
-  Code2,
+
   Palette,
   LayoutDashboard,
   Box,
@@ -94,7 +94,7 @@ 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">
-              <Code2 className="h-5 w-5 text-primary" />
+              <img src="/logo-icon.svg" alt="PragmaStack Logo" className="h-6 w-6" />
               <h1 className="text-base font-semibold">PragmaStack</h1>
               <Badge variant="secondary" className="text-xs">
                 Dev

frontend/src/components/home/Header.tsx

@@ -30,11 +30,11 @@ 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="font-bold text-xl hover:opacity-80 transition-opacity">
+          <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" />
             <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
               PragmaStack
-            </span>{' '}
-            <span className="text-foreground">Template</span>
+            </span>
           </Link>
 
           {/* Desktop Navigation */}

frontend/src/components/layout/Footer.tsx

@@ -14,8 +14,9 @@ export function Footer() {
     <footer className="border-t bg-muted/30">
       <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="text-center text-sm text-muted-foreground md:text-left">
-            © {currentYear} PragmaStack. All rights reserved.
+          <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" />
+            <span>© {currentYear} PragmaStack. All rights reserved.</span>
           </div>
           <div className="flex space-x-6">
             <Link

frontend/src/components/layout/Header.tsx

@@ -83,6 +83,7 @@ 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" />
             <span className="text-xl font-bold text-foreground">PragmaStack</span>
           </Link>