From b218be9318d55e4ab03fa2894fb17a72bddbf0a9 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@shootify.io>
Date: Thu, 20 Nov 2025 14:55:24 +0100
Subject: [PATCH] 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.
---
 README.md                                    |  5 +++++
 frontend/docs/branding/02-visual-identity.md | 16 +++++++++++++++-
 frontend/public/logo-icon.svg                |  8 ++++----
 frontend/public/logo.svg                     | 10 +++++-----
 frontend/src/app/icon.svg                    | 11 +++++++++++
 frontend/src/components/dev/DevLayout.tsx    |  4 ++--
 frontend/src/components/home/Header.tsx      |  6 +++---
 frontend/src/components/layout/Footer.tsx    |  5 +++--
 frontend/src/components/layout/Header.tsx    |  1 +
 9 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/app/icon.svg

diff --git a/README.md b/README.md
index c255535..b2f76ee 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,10 @@
 # PragmaStack
 
+<div align="center">
+  <img src="frontend/public/logo.svg" alt="PragmaStack Logo" width="200" />
+  <br />
+</div>
+
 > **The Pragmatic Full-Stack Template. Production-ready, security-first, and opinionated.**
 
 <!--
diff --git a/frontend/docs/branding/02-visual-identity.md b/frontend/docs/branding/02-visual-identity.md
index a772fe8..40ab034 100644
--- a/frontend/docs/branding/02-visual-identity.md
+++ b/frontend/docs/branding/02-visual-identity.md
@@ -2,7 +2,21 @@
 
 ## Logo & Iconography
 
-_Pending logo design._
+## Logo
+
+The **PragmaStack** logo represents the core values of the project: structure, speed, and clarity.
+
+<div align="center">
+  <img src="../../public/logo.svg" alt="PragmaStack Logo" width="300" />
+  <p><em>The Stack: Geometric layers representing the full-stack architecture.</em></p>
+</div>
+
+### Icon
+For smaller contexts (favicons, headers), we use the simplified icon:
+
+<div align="center">
+  <img src="../../public/logo-icon.svg" alt="PragmaStack Icon" width="64" />
+</div>
 
 For now, we use the **Lucide React** icon set for all iconography. Icons should be used sparingly and meaningfully to enhance understanding, not just for decoration.
 
diff --git a/frontend/public/logo-icon.svg b/frontend/public/logo-icon.svg
index e0f6b46..519eba6 100644
--- a/frontend/public/logo-icon.svg
+++ b/frontend/public/logo-icon.svg
@@ -1,11 +1,11 @@
 <svg width="32" height="32" viewBox="0 0 32 32" 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-icon-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>
   </defs>
-  <path d="M16 26L4 20L16 14L28 20L16 26Z" fill="url(#grad1)" opacity="0.6" />
-  <path d="M16 21L4 15L16 9L28 15L16 21Z" fill="url(#grad1)" opacity="0.8" />
-  <path d="M16 16L4 10L16 4L28 10L16 16Z" fill="url(#grad1)" />
+  <path d="M16 26L4 20L16 14L28 20L16 26Z" fill="url(#pragma-stack-icon-grad)" opacity="0.6" />
+  <path d="M16 21L4 15L16 9L28 15L16 21Z" fill="url(#pragma-stack-icon-grad)" opacity="0.8" />
+  <path d="M16 16L4 10L16 4L28 10L16 16Z" fill="url(#pragma-stack-icon-grad)" />
 </svg>
diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg
index 52be4d1..bdf7bfb 100644
--- a/frontend/public/logo.svg
+++ b/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>
diff --git a/frontend/src/app/icon.svg b/frontend/src/app/icon.svg
new file mode 100644
index 0000000..e0f6b46
--- /dev/null
+++ b/frontend/src/app/icon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad1" 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>
+  </defs>
+  <path d="M16 26L4 20L16 14L28 20L16 26Z" fill="url(#grad1)" opacity="0.6" />
+  <path d="M16 21L4 15L16 9L28 15L16 21Z" fill="url(#grad1)" opacity="0.8" />
+  <path d="M16 16L4 10L16 4L28 10L16 16Z" fill="url(#grad1)" />
+</svg>
diff --git a/frontend/src/components/dev/DevLayout.tsx b/frontend/src/components/dev/DevLayout.tsx
index 77b136a..9486b24 100644
--- a/frontend/src/components/dev/DevLayout.tsx
+++ b/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
diff --git a/frontend/src/components/home/Header.tsx b/frontend/src/components/home/Header.tsx
index 062692a..ce8a8d4 100644
--- a/frontend/src/components/home/Header.tsx
+++ b/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 */}
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index 02ede41..74d8b03 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/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
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 720dca2..4136993 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/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>