From 9ed53630e163c96326bb33519cb7952a754f71b9 Mon Sep 17 00:00:00 2001
From: Mikaal Naik <matthewnaik@gmail.com>
Date: Tue, 25 Aug 2026 14:12:45 -0400
Subject: [PATCH] Make the whole project card clickable

The card on /projects now wraps its contents in the project link
instead of hiding navigation behind the View Project button. The
footer keeps its label and arrow, driven by hover on the card.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/widgets/WidgetCard.tsx | 84 ++++++++++++++++++---------
 1 file changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/components/widgets/WidgetCard.tsx b/src/components/widgets/WidgetCard.tsx
index 57ef5a7b..52fbf6f3 100644
--- a/src/components/widgets/WidgetCard.tsx
+++ b/src/components/widgets/WidgetCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import Link from "next/link";
 import registry from "./registry";
 import WidgetPlaceholder from "./WidgetPlaceholder";
 import { ProjectData } from "./types";
@@ -9,19 +9,41 @@ const INTERNAL_HREFS: Record<string, string> = {
   "outcomes-tracker": "/tracker",
 };
 
+function Arrow({ external }: { external: boolean }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      className={`shrink-0 transition-transform duration-200 ${
+        external
+          ? "group-hover/card:translate-x-0.5 group-hover/card:-translate-y-0.5"
+          : "group-hover/card:translate-x-1"
+      }`}
+    >
+      <path
+        d={external ? "M4 12l8-8M6 4h6v6" : "M3 8h10M9 4l4 4-4 4"}
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 export default function WidgetCard({ project }: { project: ProjectData }) {
   const Widget = registry[project.slug];
   const isBig = project.featured;
   const internalHref = INTERNAL_HREFS[project.slug];
 
-  return (
-    <div
-      className={`flex flex-col h-full border border-border-light hover:border-dark transition-colors ${
-        isBig
-          ? "min-h-[380px] md:min-h-[340px] md:col-span-2"
-          : "min-h-[360px]"
-      }`}
-    >
+  const cardClasses = `group/card flex flex-col h-full border border-border-light hover:border-dark transition-colors ${
+    isBig ? "min-h-[380px] md:min-h-[340px] md:col-span-2" : "min-h-[360px]"
+  }`;
+
+  const content = (
+    <>
       <div className="flex-1">
         {Widget ? (
           <Widget project={project} />
@@ -30,26 +52,30 @@ export default function WidgetCard({ project }: { project: ProjectData }) {
         )}
       </div>
       <div className="border-t border-border-light">
-        {internalHref ? (
-          <Button
-            as="link"
-            href={internalHref}
-            variant="ghost"
-            className="border-0 w-full justify-start"
-          >
-            View Project
-          </Button>
-        ) : (
-          <Button
-            as="external-link"
-            href={project.externalUrl}
-            variant="ghost"
-            className="border-0 w-full justify-start"
-          >
-            View Project
-          </Button>
-        )}
+        <span className="type-label inline-flex items-center gap-2 px-5 py-3 w-full justify-start text-dark transition-colors">
+          View Project
+          <Arrow external={!internalHref} />
+        </span>
       </div>
-    </div>
+    </>
+  );
+
+  if (internalHref) {
+    return (
+      <Link href={internalHref} className={cardClasses}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <a
+      href={project.externalUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cardClasses}
+    >
+      {content}
+    </a>
   );
 }