From 0d72fbc005918cb76129a60e67362b367c1ef124 Mon Sep 17 00:00:00 2001
From: Alex Kwiatkowski <alex+git@fremantle.io>
Date: Sat, 27 Dec 2025 14:34:45 -0800
Subject: [PATCH 1/2] feat: make entire product card clickable

Use the Card asChild prop to make the entire card a Link element,
improving UX by allowing users to click anywhere on the card instead
of just the 'Learn More' text.
---
 .../products/ProductCard/ProductCard.test.tsx | 11 ++--
 .../products/ProductCard/ProductCard.tsx      | 59 +++++++++----------
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/products/ProductCard/ProductCard.test.tsx b/src/components/products/ProductCard/ProductCard.test.tsx
index 5741c8b..8819094 100644
--- a/src/components/products/ProductCard/ProductCard.test.tsx
+++ b/src/components/products/ProductCard/ProductCard.test.tsx
@@ -37,11 +37,12 @@ describe('ProductCard', () => {
     expect(screen.getByText('Feature 2')).toBeInTheDocument()
   })
 
-  it('renders link to product page', () => {
+  it('renders entire card as clickable link to product page', () => {
     render(<ProductCard {...props} />)
-    expect(screen.getByRole('link', { name: /learn more/i })).toHaveAttribute(
-      'href',
-      '/products/vibes',
-    )
+    const link = screen.getByRole('link', { name: /learn more about vibes/i })
+    expect(link).toHaveAttribute('href', '/products/vibes')
+    // Verify the card content is inside the link
+    expect(link).toContainElement(screen.getByText('Vibes'))
+    expect(link).toContainElement(screen.getByText('Remote control for Claude Code'))
   })
 })
diff --git a/src/components/products/ProductCard/ProductCard.tsx b/src/components/products/ProductCard/ProductCard.tsx
index bb6aaca..6d9aad5 100644
--- a/src/components/products/ProductCard/ProductCard.tsx
+++ b/src/components/products/ProductCard/ProductCard.tsx
@@ -23,37 +23,34 @@ export function ProductCard({
   className,
 }: ProductCardProps) {
   return (
-    <Card variant="interactive" className={cn('overflow-hidden', className)}>
-      {image && (
-        <div className="aspect-video bg-muted/50 border-b border-border">
-          <img src={image} alt={`${name} screenshot`} className="w-full h-full object-cover" />
-        </div>
-      )}
-      <CardContent className="space-y-4">
-        <div className="flex items-center gap-3">
-          <StatusBadge status={status} />
-        </div>
-        <div>
-          <Heading level={3} size="lg" className="mb-1">
-            {name}
-          </Heading>
-          <Text variant="muted">{tagline}</Text>
-        </div>
-        <ul className="space-y-2">
-          {features.map((feature) => (
-            <li key={feature} className="flex items-start gap-2">
-              <span className="text-accent mt-0.5">•</span>
-              <Text size="sm">{feature}</Text>
-            </li>
-          ))}
-        </ul>
-        <Link
-          to={href}
-          className="inline-flex items-center text-accent hover:text-accent/80 font-medium transition-colors"
-        >
-          Learn More →
-        </Link>
-      </CardContent>
+    <Card asChild variant="interactive" className={cn('overflow-hidden', className)}>
+      <Link to={href} aria-label={`Learn more about ${name}`}>
+        {image && (
+          <div className="aspect-video bg-muted/50 border-b border-border">
+            <img src={image} alt={`${name} screenshot`} className="w-full h-full object-cover" />
+          </div>
+        )}
+        <CardContent className="space-y-4">
+          <div className="flex items-center gap-3">
+            <StatusBadge status={status} />
+          </div>
+          <div>
+            <Heading level={3} size="lg" className="mb-1">
+              {name}
+            </Heading>
+            <Text variant="muted">{tagline}</Text>
+          </div>
+          <ul className="space-y-2">
+            {features.map((feature) => (
+              <li key={feature} className="flex items-start gap-2">
+                <span className="text-accent mt-0.5">•</span>
+                <Text size="sm">{feature}</Text>
+              </li>
+            ))}
+          </ul>
+          <span className="inline-flex items-center text-accent font-medium">Learn More →</span>
+        </CardContent>
+      </Link>
     </Card>
   )
 }

From 22872ef38ee7ac2fb80edff1c2cda6529b83056a Mon Sep 17 00:00:00 2001
From: Alex Kwiatkowski <alex+git@fremantle.io>
Date: Sat, 27 Dec 2025 14:37:45 -0800
Subject: [PATCH 2/2] fix: address PR review comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove aria-label to let screen readers announce card content naturally
- Add group hover state to 'Learn More →' for visual feedback on card hover
---
 src/components/products/ProductCard/ProductCard.test.tsx | 6 ++++--
 src/components/products/ProductCard/ProductCard.tsx      | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/products/ProductCard/ProductCard.test.tsx b/src/components/products/ProductCard/ProductCard.test.tsx
index 8819094..cb6319c 100644
--- a/src/components/products/ProductCard/ProductCard.test.tsx
+++ b/src/components/products/ProductCard/ProductCard.test.tsx
@@ -39,10 +39,12 @@ describe('ProductCard', () => {
 
   it('renders entire card as clickable link to product page', () => {
     render(<ProductCard {...props} />)
-    const link = screen.getByRole('link', { name: /learn more about vibes/i })
+    // Link contains all card content, so its accessible name includes "Vibes"
+    const link = screen.getByRole('link', { name: /vibes/i })
     expect(link).toHaveAttribute('href', '/products/vibes')
-    // Verify the card content is inside the link
+    // Verify the card content is inside the link (screen readers will announce this)
     expect(link).toContainElement(screen.getByText('Vibes'))
     expect(link).toContainElement(screen.getByText('Remote control for Claude Code'))
+    expect(link).toContainElement(screen.getByText('Learn More →'))
   })
 })
diff --git a/src/components/products/ProductCard/ProductCard.tsx b/src/components/products/ProductCard/ProductCard.tsx
index 6d9aad5..86a6b38 100644
--- a/src/components/products/ProductCard/ProductCard.tsx
+++ b/src/components/products/ProductCard/ProductCard.tsx
@@ -23,8 +23,8 @@ export function ProductCard({
   className,
 }: ProductCardProps) {
   return (
-    <Card asChild variant="interactive" className={cn('overflow-hidden', className)}>
-      <Link to={href} aria-label={`Learn more about ${name}`}>
+    <Card asChild variant="interactive" className={cn('group overflow-hidden', className)}>
+      <Link to={href}>
         {image && (
           <div className="aspect-video bg-muted/50 border-b border-border">
             <img src={image} alt={`${name} screenshot`} className="w-full h-full object-cover" />
@@ -48,7 +48,9 @@ export function ProductCard({
               </li>
             ))}
           </ul>
-          <span className="inline-flex items-center text-accent font-medium">Learn More →</span>
+          <span className="inline-flex items-center text-accent font-medium transition-colors group-hover:text-accent/80">
+            Learn More →
+          </span>
         </CardContent>
       </Link>
     </Card>