From 4fcaca631b5248ef99a4298f2c4b6aad64db78f3 Mon Sep 17 00:00:00 2001
From: romysaputrasihananda <romysaputrasihanandaa@gmail.com>
Date: Fri, 12 Jun 2026 03:47:45 +0700
Subject: [PATCH] feat(web): update logo to new A-mark design, match accent
 color palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 web/app/layout.tsx          |  7 ++-----
 web/components/AresLogo.tsx | 27 +++++++++++++++++++++++++++
 web/components/Nav.tsx      |  7 ++-----
 web/public/favicon.svg      | 25 +++++++++++++++++++++----
 4 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 web/components/AresLogo.tsx

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index b3a6293..ea01ad6 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Nav from "@/components/Nav";
+import AresLogo from "@/components/AresLogo";
 import { getLatestVersion, GITHUB_URL } from "@/lib/github";
 
 const SITE_URL = "https://ares.romys.my.id";
@@ -62,11 +63,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           <div className="max-w-5xl mx-auto px-6 py-16 grid grid-cols-1 sm:grid-cols-3 gap-10">
             <div>
               <div className="flex items-center gap-2 mb-3">
-                <svg width="22" height="22" 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={24} />
                 <span className="font-mono text-sm font-semibold" style={{ letterSpacing: "0.18em", color: "var(--c-ink)" }}>ARES</span>
                 {version && (
                   <span className="text-[10px] font-mono text-ink-ter bg-s2 border border-hl px-1.5 py-0.5 rounded">
diff --git a/web/components/AresLogo.tsx b/web/components/AresLogo.tsx
new file mode 100644
index 0000000..5572283
--- /dev/null
+++ b/web/components/AresLogo.tsx
@@ -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>
+  );
+}
diff --git a/web/components/Nav.tsx b/web/components/Nav.tsx
index 1625d0d..5b43409 100644
--- a/web/components/Nav.tsx
+++ b/web/components/Nav.tsx
@@ -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>
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
index ef18c67..8e6c538 100644
--- a/web/public/favicon.svg
+++ b/web/public/favicon.svg
@@ -1,5 +1,22 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-  <rect width="32" height="32" rx="8" fill="#5e6ad2"/>
-  <path d="M9 23 L16 9 L23 23" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M11.8 18.5 H20.2" stroke="white" stroke-width="2.2" stroke-linecap="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="120 70 260 270">
+  <defs>
+    <linearGradient id="fav-left" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#5e6ad2" />
+      <stop offset="100%" stop-color="#3d4aaa" />
+    </linearGradient>
+    <linearGradient id="fav-right" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#828fff" />
+      <stop offset="100%" stop-color="#5e6ad2" />
+    </linearGradient>
+    <linearGradient id="fav-center" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#c4c8f8" />
+      <stop offset="100%" stop-color="#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(#fav-left)" />
+    <path d="M 150 0 L 270 240 L 210 320 L 150 140 Z" fill="url(#fav-right)" />
+    <path d="M 150 40 L 110 140 L 150 120 L 190 140 Z" fill="url(#fav-center)" />
+    <path d="M 95 210 L 205 210 L 150 140 Z" fill="#000000" opacity="0.25" />
+  </g>
 </svg>