Merge the dashboard rebranding from the mirror

# Conflicts:
#	webui/package.json

.github/hero.svg

@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="ingress">
 <rect width="1280" height="640" fill="#0A0A0A"/>
 <svg x="96" y="215" width="210" height="210" viewBox="0 0 67 67"><path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#fff"/><path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff"/></svg>
-<text x="378" y="276" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="78" font-weight="800" letter-spacing="-2" fill="#ffffff">ingress</text>
+<text x="378" y="276" font-family="Zen,system-ui,-apple-system,sans-serif" font-size="78" font-weight="800" letter-spacing="-2" fill="#ffffff">ingress</text>
-<text x="378" y="322" font-family="Inter,system-ui,sans-serif" font-size="30" fill="#ffffff" opacity=".66">Hanzo Ingress — edge router with hanzoai/static + hanzoai/gateway…</text>
+<text x="378" y="322" font-family="Zen,system-ui,sans-serif" font-size="30" fill="#ffffff" opacity=".66">Hanzo Ingress — edge router with hanzoai/static + hanzoai/gateway…</text>
 <rect x="378" y="338" width="806" height="3" rx="1.5" fill="#ffffff" opacity=".9"/>
-<text x="378" y="390" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">github.com/hanzoai</text>
+<text x="378" y="390" font-family="Zen,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">github.com/hanzoai</text>
-<text x="1184" y="390" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">hanzo.ai</text>
+<text x="1184" y="390" text-anchor="end" font-family="Zen,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">hanzo.ai</text>
 </svg>

webui/package.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
     "@eslint/js": "^10.0.1",
+    "@hanzo/logo": "^1.0.23",
     "@noble/ed25519": "^3.2.0",
     "@noble/hashes": "1.8.0",
     "@testing-library/dom": "^10.4.1",

webui/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@eslint/js':
         specifier: ^9.32.0
         version: 9.39.4
+      '@hanzo/logo':
+        specifier: ^1.0.23
+        version: 1.0.24([email protected])
       '@noble/ed25519':
         specifier: ^3.0.0
         version: 3.1.0
@@ -1314,6 +1317,14 @@ packages:
   '@floating-ui/[email protected]':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-p09VnDYQJ/79t3EATrTwz9rQIvCcbSNmTcb/uoHj76GlEQWyedX4w5TCMDCxJfXG/+vp6IM4VQzxuMR63G2ytw==}
+    peerDependencies:
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   '@humanfs/[email protected]':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -8971,6 +8982,10 @@ snapshots:
 
   '@floating-ui/[email protected]': {}
 
+  '@hanzo/[email protected]([email protected])':
+    optionalDependencies:
+      react: 18.3.1
+
   '@humanfs/[email protected]':
     dependencies:
       '@humanfs/types': 0.15.0

webui/src/components/icons/Logo.tsx

@@ -1,5 +1,7 @@
 import { CSSProperties } from 'react'
 
+import { MARK_BLOCKS, MARK_SHADE } from '@hanzo/logo/logos'
+
 import { useIsDarkMode } from 'hooks/use-theme'
 
 type LogoProps = {
@@ -11,13 +13,12 @@ type LogoProps = {
 
 const HanzoMark = ({ fill = '#ffffff', ...props }) => (
   <svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M22.21 67V44.6369H0V67H22.21Z" fill={fill} />
+    {MARK_BLOCKS.map((d) => (
-    <path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill={fill} opacity="0.7" />
+      <path key={d} d={d} fill={fill} />
-    <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill={fill} />
+    ))}
-    <path d="M22.21 0H0V22.3184H22.21V0Z" fill={fill} />
+    {MARK_SHADE.map((d) => (
-    <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill={fill} />
+      <path key={d} d={d} fill={fill} opacity="0.7" />
-    <path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill={fill} opacity="0.7" />
+    ))}
-    <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill={fill} />
   </svg>
 )