🎨 Updated footer with page links

web/src/components/Footer.tsx

@@ -1,44 +1,49 @@
 "use client";
 
+import Link from "next/link";
+
 export function Footer() {
   return (
-    <footer style={{ background: "var(--color-surface-dark)", color: "var(--color-on-dark-soft)", padding: "64px 0 32px" }}>
+    <footer style={{ background: "var(--color-surface-dark)", color: "var(--color-on-dark-soft)", padding: "80px 0 32px" }}>
       <div className="container">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
-          {/* Brand */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
           <div>
             <div className="flex items-center gap-2 mb-4">
-              <svg width="24" height="24" viewBox="0 0 28 28" fill="none">
-                <circle cx="14" cy="14" r="13" stroke="#FF6B00" strokeWidth="2" />
-                <path d="M14 4L14 24M4 14L24 14M7 7L21 21M21 7L7 21" stroke="#FF6B00" strokeWidth="1.5" strokeLinecap="round" />
+              <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
+                <circle cx="16" cy="16" r="14" stroke="#FF6B00" strokeWidth="2.5" />
+                <circle cx="16" cy="16" r="5" fill="#FF6B00" />
               </svg>
-              <span className="title-md" style={{ color: "var(--color-on-dark)" }}>
+              <span className="title-lg" style={{ color: "var(--color-on-dark)" }}>
                 Graph<span style={{ color: "#FF6B00" }}>RAG</span>
               </span>
             </div>
-            <p className="body-sm" style={{ color: "var(--color-on-dark-soft)", maxWidth: "280px" }}>
-              Proving that graphs make LLM inference faster, cheaper, and smarter —
-              with real numbers.
+            <p className="body-sm" style={{ color: "var(--color-on-dark-soft)", maxWidth: "280px", lineHeight: 1.6 }}>
+              Proving that graphs make LLM inference faster, cheaper, and smarter — with real measured numbers.
             </p>
           </div>
-
-          {/* Architecture */}
           <div>
-            <div className="caption-uppercase mb-4" style={{ color: "var(--color-on-dark)" }}>Architecture</div>
-            {["Graph Layer (TigerGraph)", "Orchestration Layer", "LLM Layer (Claude)", "Evaluation Layer (RAGAS)"].map((item) => (
-              <div key={item} className="body-sm mb-2" style={{ color: "var(--color-on-dark-soft)" }}>{item}</div>
+            <div className="caption-uppercase mb-4" style={{ color: "var(--color-on-dark)" }}>Pages</div>
+            {[
+              { label: "Home", href: "/" },
+              { label: "Playground", href: "/playground" },
+              { label: "Benchmarks", href: "/benchmarks" },
+              { label: "Graph Explorer", href: "/explorer" },
+              { label: "Architecture", href: "/architecture" },
+              { label: "Documentation", href: "/docs" },
+            ].map((item) => (
+              <Link key={item.href} href={item.href}
+                className="body-sm block mb-2 hover:text-tiger-orange transition-colors no-underline"
+                style={{ color: "var(--color-on-dark-soft)" }}>
+                {item.label}
+              </Link>
             ))}
           </div>
-
-          {/* Novelties */}
           <div>
-            <div className="caption-uppercase mb-4" style={{ color: "var(--color-on-dark)" }}>Novel Features</div>
-            {["🧠 Adaptive Query Router", "📋 Schema-Bounded Extraction", "🔑 Dual-Level Keywords", "🔗 Reasoning Paths", "📊 Cost Tracking"].map((item) => (
+            <div className="caption-uppercase mb-4" style={{ color: "var(--color-on-dark)" }}>Architecture</div>
+            {["Graph Layer (TigerGraph)", "Orchestration Layer", "LLM Layer (12 Providers)", "Evaluation Layer (RAGAS)"].map((item) => (
               <div key={item} className="body-sm mb-2" style={{ color: "var(--color-on-dark-soft)" }}>{item}</div>
             ))}
           </div>
-
-          {/* References */}
           <div>
             <div className="caption-uppercase mb-4" style={{ color: "var(--color-on-dark)" }}>References</div>
             {[
@@ -49,24 +54,20 @@ export function Footer() {
               { label: "Anthropic Claude", href: "https://anthropic.com" },
             ].map((link) => (
               <a key={link.label} href={link.href} target="_blank" rel="noopener noreferrer"
-                className="body-sm block mb-2 hover:underline" style={{ color: "#FF6B00" }}>
+                className="body-sm block mb-2 hover:underline no-underline" style={{ color: "#FF6B00" }}>
                 {link.label} ↗
               </a>
             ))}
           </div>
         </div>
-
         <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: "24px" }}
           className="flex flex-col md:flex-row justify-between items-center gap-4">
           <span className="body-sm" style={{ color: "var(--color-on-dark-soft)" }}>
-            © 2025 GraphRAG Inference Hackathon by TigerGraph
+            © 2025 GraphRAG Inference Hackathon · TigerGraph × Claude
           </span>
-          <div className="flex items-center gap-4">
-            <span className="badge" style={{ background: "var(--color-surface-dark-elev)", color: "var(--color-on-dark-soft)", fontSize: "0.6875rem" }}>
-              TigerGraph × Claude
-            </span>
+          <div className="flex items-center gap-3">
             <span className="badge" style={{ background: "var(--color-surface-dark-elev)", color: "var(--color-on-dark-soft)", fontSize: "0.6875rem" }}>
-              Next.js + Recharts
+              Built with ❤️ for TigerGraph
             </span>
           </div>
         </div>