Changes

src/components/branding/GatehouseLogo.tsx

@@ -0,0 +1,76 @@
+import { cn } from "@/lib/utils";
+
+interface GatehouseLogoProps {
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "light";
+  className?: string;
+}
+
+/**
+ * Gatehouse Logo - Abstract gate/doorway mark
+ * Represents controlled entry and policy enforcement
+ * Two vertical pillars forming a gateway with negative space
+ */
+export function GatehouseLogo({ 
+  size = "md", 
+  variant = "default",
+  className 
+}: GatehouseLogoProps) {
+  const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-9 h-9",
+    lg: "w-12 h-12",
+  };
+
+  const bgClasses = {
+    default: "bg-primary",
+    light: "bg-sidebar-primary",
+  };
+
+  const iconColor = variant === "light" 
+    ? "text-sidebar-primary-foreground" 
+    : "text-primary-foreground";
+
+  return (
+    <div 
+      className={cn(
+        "rounded-lg flex items-center justify-center flex-shrink-0",
+        sizeClasses[size],
+        bgClasses[variant],
+        className
+      )}
+    >
+      <svg 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        className={cn(
+          iconColor,
+          size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6"
+        )}
+      >
+        {/* Abstract gate - two pillars with archway */}
+        <path 
+          d="M4 4h3v16H4V4z" 
+          fill="currentColor"
+        />
+        <path 
+          d="M17 4h3v16h-3V4z" 
+          fill="currentColor"
+        />
+        <path 
+          d="M7 4h10v3H7V4z" 
+          fill="currentColor"
+          opacity="0.7"
+        />
+        {/* Keyhole/entry indicator */}
+        <circle 
+          cx="12" 
+          cy="14" 
+          r="2" 
+          fill="currentColor"
+          opacity="0.5"
+        />
+      </svg>
+    </div>
+  );
+}

src/components/layouts/PublicLayout.tsx

@@ -1,5 +1,5 @@
-import { Shield } from "lucide-react";
 import { Outlet, Link } from "react-router-dom";
+import { GatehouseLogo } from "@/components/branding/GatehouseLogo";
 
 export default function PublicLayout() {
   return (
@@ -10,11 +10,9 @@ export default function PublicLayout() {
       {/* Header */}
       <header className="relative z-10 w-full py-6 px-4">
         <div className="max-w-md mx-auto">
-          <Link to="/" className="flex items-center gap-2 justify-center">
-            <div className="w-9 h-9 rounded-lg bg-primary flex items-center justify-center">
-              <Shield className="w-5 h-5 text-primary-foreground" />
-            </div>
-            <span className="text-xl font-semibold text-foreground tracking-tight">Authy2</span>
+          <Link to="/" className="flex items-center gap-2.5 justify-center">
+            <GatehouseLogo size="md" />
+            <span className="text-xl font-semibold text-foreground tracking-tight">Gatehouse</span>
           </Link>
         </div>
       </header>
@@ -30,7 +28,7 @@ export default function PublicLayout() {
       <footer className="relative z-10 py-6 px-4">
         <div className="max-w-md mx-auto text-center">
           <p className="text-sm text-muted-foreground">
-            © {new Date().getFullYear()} Authy2. Secure identity management.
+            © {new Date().getFullYear()} Gatehouse. Identity & Access.
           </p>
         </div>
       </footer>

src/components/navigation/AppSidebar.tsx

@@ -10,6 +10,7 @@ import {
   FileText,
   Key,
 } from "lucide-react";
+import { GatehouseLogo } from "@/components/branding/GatehouseLogo";
 import { NavLink } from "@/components/NavLink";
 import {
   Sidebar,
@@ -64,12 +65,10 @@ export function AppSidebar() {
       {/* Logo */}
       <SidebarHeader className="p-4 border-b border-sidebar-border">
         <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-lg bg-sidebar-primary flex items-center justify-center flex-shrink-0">
-            <Shield className="w-4 h-4 text-sidebar-primary-foreground" />
-          </div>
+          <GatehouseLogo size="sm" variant="light" />
           {!collapsed && (
             <span className="text-lg font-semibold text-sidebar-foreground tracking-tight">
-              Authy2
+              Gatehouse
             </span>
           )}
         </div>