feat(web): update logo to new A-mark design, match accent color palette

- New AresLogo component: A-shape with indigo gradient (#5e6ad2 → #828fff)
- Replaces old square icon in Nav, footer, and favicon.svg
- Colors match site accent tokens (c-accent / c-accent-hov)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
romysaputrasihananda
2026-06-12 03:47:45 +07:00
co-authored by Claude Sonnet 4.6
parent 31b95808b1
commit 4fcaca631b
4 changed files with 52 additions and 14 deletions
+27
View File
@@ -0,0 +1,27 @@
export default function AresLogo({ size = 28 }: { size?: number }) {
const id = `ares-logo-${size}`;
return (
<svg width={size} height={size} viewBox="120 70 260 270" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id={`${id}-l`} x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#5e6ad2" />
<stop offset="100%" stopColor="#3d4aaa" />
</linearGradient>
<linearGradient id={`${id}-r`} x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#828fff" />
<stop offset="100%" stopColor="#5e6ad2" />
</linearGradient>
<linearGradient id={`${id}-c`} x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#c4c8f8" />
<stop offset="100%" stopColor="#828fff" />
</linearGradient>
</defs>
<g transform="translate(100, 80)">
<path d="M 150 0 L 30 240 L 90 320 L 150 140 Z" fill={`url(#${id}-l)`} />
<path d="M 150 0 L 270 240 L 210 320 L 150 140 Z" fill={`url(#${id}-r)`} />
<path d="M 150 40 L 110 140 L 150 120 L 190 140 Z" fill={`url(#${id}-c)`} />
<path d="M 95 210 L 205 210 L 150 140 Z" fill="#000" opacity="0.25" />
</g>
</svg>
);
}
+2 -5
View File
@@ -3,6 +3,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import { GITHUB_URL } from "@/lib/github";
import AresLogo from "./AresLogo";
const links = [
{ href: "/", label: "Dashboard" },
@@ -17,11 +18,7 @@ export default function Nav({ version }: { version?: string | null }) {
<div className="max-w-5xl mx-auto px-4 sm:px-6 h-14 flex items-center gap-6">
{/* logo + wordmark */}
<Link href="/" className="flex items-center gap-2 group">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true">
<rect width="26" height="26" rx="6" fill="#5e6ad2"/>
<path d="M8 19 L13 8 L18 19" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M10.2 15.5 H15.8" stroke="white" strokeWidth="1.8" strokeLinecap="round"/>
</svg>
<AresLogo size={28} />
<span className="font-mono text-sm font-semibold tracking-widest text-ink group-hover:text-accent transition-colors" style={{ letterSpacing: "0.18em" }}>
ARES
</span>