Use gradient product icons in landing page cards

Replace the inline monochrome stroke SVGs with the new function-specific
gradient icons (public/icons/*.svg). Change ProductCard's icon prop to a
path string rendered via a plain img, and drop the accent tint on the icon
chip so each product's colour reads on its own.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: tianzhou

src/app/page.tsx

@@ -12,51 +12,31 @@ const products: Product[] = [
     description:
       'Web-based Postgres development workspace with guardrails. Query, explore, and manage your databases safely from the browser.',
     tags: ['Web UI', 'SQL Editor', 'Access Control'],
-    icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="2" y="3" width="20" height="14" rx="2" />
-        <path d="M8 21h8M12 17v4M6 8l4 3-4 3M12 16h4" />
-      </svg>
-    ),
+    icon: '/icons/pgconsole.svg',
   },
   {
     name: 'pgtui',
     href: 'https://github.com/pgplex/pgtui',
     description:
       'A beautiful terminal UI for Postgres. Navigate schemas, run queries, and inspect data — all without leaving your terminal.',
     tags: ['Terminal', 'TUI'],
-    icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="4 17 10 11 4 5" />
-        <line x1="12" y1="19" x2="20" y2="19" />
-      </svg>
-    ),
+    icon: '/icons/pgtui.svg',
   },
   {
     name: 'pgparser',
     href: 'https://github.com/pgplex/pgparser',
     description:
       'Thread-safe, Golang-native Postgres parser. Parse, analyze, and transform SQL with zero CGo dependencies.',
     tags: ['Go', 'Parser', 'Library'],
-    icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="16 18 22 12 16 6" />
-        <polyline points="8 6 2 12 8 18" />
-        <line x1="14" y1="4" x2="10" y2="20" />
-      </svg>
-    ),
+    icon: '/icons/pgparser.svg',
   },
   {
     name: 'pgschema',
     href: 'https://github.com/pgplex/pgschema',
     description:
       'Schema management for Postgres. Diff, migrate, and version your database schema with confidence.',
     tags: ['Schema', 'Migration', 'Diff'],
-    icon: (
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 17.5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 1 0-7 0" />
-      </svg>
-    ),
+    icon: '/icons/pgschema.svg',
   },
 ]
 

src/components/product-card.tsx

@@ -1,11 +1,9 @@
-import type { ReactNode } from 'react'
-
 export type Product = {
   name: string
   href: string
   description: string
   tags: string[]
-  icon: ReactNode
+  icon: string
 }
 
 export function ProductCard({ name, href, description, tags, icon }: Product) {
@@ -17,8 +15,10 @@ export function ProductCard({ name, href, description, tags, icon }: Product) {
       className="flex flex-col gap-3.5 border border-border bg-card px-7 py-8 text-left shadow-[4px_4px_0_var(--color-border)] transition-all duration-150 hover:shadow-[6px_6px_0_var(--color-border-bright)]"
     >
       <div className="flex items-center gap-3">
-        <span className="flex size-9 shrink-0 items-center justify-center border border-border-bright bg-accent/6 text-accent">
-          {icon}
+        <span className="flex size-9 shrink-0 items-center justify-center border border-border-bright bg-bg">
+          {/* Static export with images.unoptimized — a plain img avoids the
+              next/image runtime for a fixed-size product glyph. */}
+          <img src={icon} alt="" width={28} height={28} />
         </span>
         <h3 className="text-[17px] font-semibold tracking-tight text-ink">{name}</h3>
       </div>