189 lines
7.0 KiB
TypeScript
189 lines
7.0 KiB
TypeScript
import React, { useId } from 'react';
|
|
|
|
export interface BrandLogoProps {
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
|
|
variant?: 'icon-only' | 'full';
|
|
showGlow?: boolean;
|
|
className?: string;
|
|
animateOnHover?: boolean;
|
|
}
|
|
|
|
const sizeMap = {
|
|
xs: 20,
|
|
sm: 28,
|
|
md: 36,
|
|
lg: 44,
|
|
xl: 56,
|
|
};
|
|
|
|
/**
|
|
* Modern, stylized SVG brand emblem representing Post Fund Management (PFM).
|
|
* Features an isometric kinetic nexus with three interlocking governance facets:
|
|
* 1. Top Canopy: Governance, Strategy & Portfolios (Radiant Indigo / Violet)
|
|
* 2. Left Vault: Capital, Grants & Disbursement Assurance (Electric Sapphire)
|
|
* 3. Right Wing: Milestones, Evidence & Impact Delivery (Cyan to Emerald)
|
|
* 4. Center Core: Luminous Floating Diamond Milestone Star
|
|
*/
|
|
export const BrandLogo: React.FC<BrandLogoProps> = ({
|
|
size = 'md',
|
|
variant = 'icon-only',
|
|
showGlow = true,
|
|
className = '',
|
|
animateOnHover = true,
|
|
}) => {
|
|
const uniqueId = useId().replace(/:/g, '');
|
|
const pixelSize = typeof size === 'number' ? size : sizeMap[size] || 36;
|
|
|
|
const glowId = `pfm-ambient-${uniqueId}`;
|
|
const topGradId = `pfm-top-${uniqueId}`;
|
|
const leftGradId = `pfm-left-${uniqueId}`;
|
|
const rightGradId = `pfm-right-${uniqueId}`;
|
|
const coreGradId = `pfm-core-${uniqueId}`;
|
|
const filterId = `pfm-filter-${uniqueId}`;
|
|
|
|
return (
|
|
<div
|
|
className={`inline-flex items-center gap-3 select-none ${
|
|
animateOnHover ? 'group cursor-pointer' : ''
|
|
} ${className}`}
|
|
>
|
|
<div
|
|
style={{ width: pixelSize, height: pixelSize }}
|
|
className={`relative shrink-0 flex items-center justify-center transition-transform duration-300 ${
|
|
animateOnHover ? 'group-hover:scale-105' : ''
|
|
}`}
|
|
>
|
|
{showGlow && (
|
|
<div
|
|
className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-md pointer-events-none transition-opacity duration-300 group-hover:opacity-100 opacity-60"
|
|
/>
|
|
)}
|
|
<svg
|
|
viewBox="0 0 64 64"
|
|
width={pixelSize}
|
|
height={pixelSize}
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="relative z-10 w-full h-full drop-shadow-sm"
|
|
>
|
|
<defs>
|
|
{/* Ambient Radial Glow */}
|
|
<radialGradient id={glowId} cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stopColor="#38bdf8" stopOpacity="0.4" />
|
|
<stop offset="70%" stopColor="#2563eb" stopOpacity="0.12" />
|
|
<stop offset="100%" stopColor="#1e1b4b" stopOpacity="0" />
|
|
</radialGradient>
|
|
|
|
{/* Top facet: Governance & Portfolios (Indigo / Radiant Violet) */}
|
|
<linearGradient id={topGradId} x1="12" y1="8" x2="52" y2="26" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#a5b4fc" />
|
|
<stop offset="35%" stopColor="#6366f1" />
|
|
<stop offset="100%" stopColor="#4338ca" />
|
|
</linearGradient>
|
|
|
|
{/* Left facet: Capital & Disbursement Vault (Electric Sapphire) */}
|
|
<linearGradient id={leftGradId} x1="10" y1="22" x2="30" y2="56" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#38bdf8" />
|
|
<stop offset="45%" stopColor="#2563eb" />
|
|
<stop offset="100%" stopColor="#1e40af" />
|
|
</linearGradient>
|
|
|
|
{/* Right facet: Milestones, Evidence & Impact Delivery (Cyan to Emerald) */}
|
|
<linearGradient id={rightGradId} x1="34" y1="28" x2="54" y2="56" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#22d3ee" />
|
|
<stop offset="50%" stopColor="#06b6d4" />
|
|
<stop offset="100%" stopColor="#10b981" />
|
|
</linearGradient>
|
|
|
|
{/* Center Radiant Diamond */}
|
|
<linearGradient id={coreGradId} x1="27" y1="27" x2="37" y2="37" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#ffffff" />
|
|
<stop offset="40%" stopColor="#e0f2fe" />
|
|
<stop offset="100%" stopColor="#38bdf8" />
|
|
</linearGradient>
|
|
|
|
{/* Core luminous glow filter */}
|
|
<filter id={filterId} x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="1.5" result="blur" />
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
|
</filter>
|
|
</defs>
|
|
|
|
{/* Deep Contrast Foundation Disk */}
|
|
<circle cx="32" cy="32" r="31" fill="#090d16" />
|
|
<circle cx="32" cy="32" r="30" stroke="#1e293b" strokeWidth="1" />
|
|
<circle cx="32" cy="32" r="28" fill={`url(#${glowId})`} />
|
|
|
|
{/* Outer Hexagonal Structural Shield Outline */}
|
|
<path
|
|
d="M32 6.5 L53.5 19 C55 19.8 56 21.5 56 23.2 L56 40.8 C56 42.5 55 44.2 53.5 45 L32 57.5 C30.5 58.3 28.5 58.3 27 57.5 L5.5 45 C4 44.2 3 42.5 3 40.8 L3 23.2 C3 21.5 4 19.8 5.5 19 L27 6.5 C28.5 5.7 30.5 5.7 32 6.5 Z"
|
|
stroke="#3b82f6"
|
|
strokeOpacity="0.35"
|
|
strokeWidth="1.2"
|
|
fill="none"
|
|
/>
|
|
|
|
{/* Facet 1: Top Canopy (Governance / Oversight Architecture) */}
|
|
<path
|
|
d="M32 9 L51.5 20.2 L43 25.2 L32 18.8 L21 25.2 L12.5 20.2 Z"
|
|
fill={`url(#${topGradId})`}
|
|
/>
|
|
|
|
{/* Facet 2: Left Vault (Fund Management & Capital Allocation) */}
|
|
<path
|
|
d="M10 23 L19.2 28.4 L19.2 44.5 L30 50.8 L30 55.5 L10 43.8 Z"
|
|
fill={`url(#${leftGradId})`}
|
|
/>
|
|
|
|
{/* Facet 3: Right Wing (Milestone Performance & Impact Assurance) */}
|
|
<path
|
|
d="M54 23 L54 43.8 L34 55.5 L34 50.8 L44.8 44.5 L44.8 28.4 Z"
|
|
fill={`url(#${rightGradId})`}
|
|
/>
|
|
|
|
{/* Center Geometric Hub (The PFM Nexus Plate) */}
|
|
<path
|
|
d="M22 28.5 L32 22.8 L42 28.5 L42 35.5 L32 41.2 L22 35.5 Z"
|
|
fill="#0b1120"
|
|
stroke="#334155"
|
|
strokeWidth="1"
|
|
/>
|
|
|
|
{/* Kinetic Stepped Prisms */}
|
|
<path
|
|
d="M25 31.5 L32 27.5 L39 31.5 L32 35.5 Z"
|
|
fill={`url(#${topGradId})`}
|
|
opacity="0.9"
|
|
/>
|
|
<path
|
|
d="M25 37 L32 41 L39 37 L32 33 L25 37 Z"
|
|
fill={`url(#${rightGradId})`}
|
|
opacity="0.9"
|
|
/>
|
|
|
|
{/* Center Radiant Milestone Diamond */}
|
|
<polygon
|
|
points="32,27 36.5,32 32,37 27.5,32"
|
|
fill={`url(#${coreGradId})`}
|
|
filter={`url(#${filterId})`}
|
|
/>
|
|
|
|
{/* Center Pure White Optical Star Point */}
|
|
<circle cx="32" cy="32" r="1.5" fill="#ffffff" />
|
|
</svg>
|
|
</div>
|
|
|
|
{variant === 'full' && (
|
|
<div className="flex flex-col min-w-0">
|
|
<span className="font-bold text-sm tracking-tight text-white truncate group-hover:text-blue-400 transition">
|
|
PFM Console
|
|
</span>
|
|
<span className="text-[11px] text-blue-400 font-medium tracking-tight">
|
|
Post-Fund Governance
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|