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/public/logo.svg

@@ -1,10 +1,10 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="pragma-stack-grad" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" style="stop-color:#0EA5E9;stop-opacity:1" />
       <stop offset="100%" style="stop-color:#2563EB;stop-opacity:1" />
     </linearGradient>
-    <filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
+    <filter id="pragma-stack-shadow" x="-20%" y="-20%" width="140%" height="140%">
       <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
       <feOffset dx="0" dy="10" result="offsetblur"/>
       <feComponentTransfer>
@@ -18,11 +18,11 @@
   </defs>
   
   <!-- Bottom Layer -->
-  <path d="M256 420L60 320L256 220L452 320L256 420Z" fill="url(#grad1)" opacity="0.6" />
+  <path d="M256 420L60 320L256 220L452 320L256 420Z" fill="url(#pragma-stack-grad)" opacity="0.6" />
   
   <!-- Middle Layer -->
-  <path d="M256 340L60 240L256 140L452 240L256 340Z" fill="url(#grad1)" opacity="0.8" />
+  <path d="M256 340L60 240L256 140L452 240L256 340Z" fill="url(#pragma-stack-grad)" opacity="0.8" />
   
   <!-- Top Layer -->
-  <path d="M256 260L60 160L256 60L452 160L256 260Z" fill="url(#grad1)" filter="url(#dropShadow)" />
+  <path d="M256 260L60 160L256 60L452 160L256 260Z" fill="url(#pragma-stack-grad)" filter="url(#pragma-stack-shadow)" />
 </svg>