From 613b34c13b903b2847f19e3d1a795ed9ba8cee24 Mon Sep 17 00:00:00 2001
From: asblumen <sashablumenfeld@gmail.com>
Date: Mon, 15 Jun 2026 15:39:02 -0700
Subject: [PATCH 1/3] Link Sentry Features card titles on homepage

Make each card title in the "Sentry Features" section a hyperlink:
- AI in Sentry -> /ai/
- Debugging in Sentry -> /product/
- Fix Bugs Faster with Seer -> /product/ai-in-sentry/seer/

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/home.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/home.tsx b/src/components/home.tsx
index 4f9b858aa6782..6bf4985729136 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -199,7 +199,9 @@ export async function Home() {
               </div>
               <div className="flex-1">
                 <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
-                  Debugging in Sentry
+                  <a href="/product/" className="text-[var(--gray-12)] hover:underline">
+                    Debugging in Sentry
+                  </a>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
                   Monitor, identify, and resolve errors and performance issues across your
@@ -263,7 +265,12 @@ export async function Home() {
               </div>
               <div className="flex-1">
                 <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
-                  Fix Bugs Faster with Seer
+                  <a
+                    href="/product/ai-in-sentry/seer/"
+                    className="text-[var(--gray-12)] hover:underline"
+                  >
+                    Fix Bugs Faster with Seer
+                  </a>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
                   Debug applications with{' '}
@@ -328,7 +335,9 @@ export async function Home() {
               </div>
               <div className="flex-1">
                 <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
-                  AI in Sentry
+                  <a href="/ai/" className="text-[var(--gray-12)] hover:underline">
+                    AI in Sentry
+                  </a>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
                   Integrate Sentry into your AI coding assistants using Sentry's{' '}

From 348eec41f4257a5c194935f33ab4c2561d596bf2 Mon Sep 17 00:00:00 2001
From: Shannon Anahata <shannonanahata@gmail.com>
Date: Mon, 15 Jun 2026 16:43:15 -0700
Subject: [PATCH 2/3] Use next/link for internal links and add linked card
 images

- Replace all internal <a> tags with <Link> from next/link for
  client-side navigation and prefetching
- Wrap feature card images in <Link> matching their title destinations
- Add subtle hover effect (opacity + scale) on linked card images
- Keep external links (mcp.sentry.dev) and hash anchors (#all-sdks)
  as plain <a> tags
---
 src/components/home.tsx | 96 ++++++++++++++++++++++++-----------------
 1 file changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/components/home.tsx b/src/components/home.tsx
index 6bf4985729136..ccba2ab730808 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import {Banner} from 'sentry-docs/components/banner';
 import {extractPlatforms, getDocsRootNode} from 'sentry-docs/docTree';
 import AiInSentryHero from 'sentry-docs/imgs/AI-in-Sentry.jpeg';
@@ -118,7 +119,7 @@ export async function Home() {
                 <div>
                   <div className="grid grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
                     {mostViewedSDKs.map(platform => (
-                      <a
+                      <Link
                         key={platform.key}
                         href={platform.url}
                         className="sdk-tile flex flex-col items-center justify-center gap-1.5 bg-white dark:bg-[var(--gray-2)]"
@@ -147,7 +148,7 @@ export async function Home() {
                         >
                           {platform.title}
                         </span>
-                      </a>
+                      </Link>
                     ))}
                   </div>
                   <a
@@ -178,8 +179,9 @@ export async function Home() {
                   '0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.05)',
               }}
             >
-              <div
-                className="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
+              <Link
+                href="/product/"
+                className="card-image-link flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
                 style={{
                   display: 'flex',
                   alignItems: 'center',
@@ -196,41 +198,47 @@ export async function Home() {
                     objectPosition: 'center',
                   }}
                 />
-              </div>
+              </Link>
               <div className="flex-1">
                 <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
-                  <a href="/product/" className="text-[var(--gray-12)] hover:underline">
+                  <Link
+                    href="/product/"
+                    className="text-[var(--gray-12)] hover:underline"
+                  >
                     Debugging in Sentry
-                  </a>
+                  </Link>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
                   Monitor, identify, and resolve errors and performance issues across your
                   applications using{' '}
-                  <a
+                  <Link
                     href="/product/error-monitoring/"
                     className="text-[#8b5cf6] underline"
                   >
                     Error Monitoring
-                  </a>
+                  </Link>
                   ,{' '}
-                  <a
+                  <Link
                     href="/product/explore/trace-explorer/"
                     className="text-[#8b5cf6] underline"
                   >
                     Tracing
-                  </a>
+                  </Link>
                   ,{' '}
-                  <a href="/product/session-replay/" className="text-[#8b5cf6] underline">
+                  <Link
+                    href="/product/session-replay/"
+                    className="text-[#8b5cf6] underline"
+                  >
                     Session Replay
-                  </a>
+                  </Link>
                   ,{' '}
-                  <a href="/product/drains/" className="text-[#8b5cf6] underline">
+                  <Link href="/product/drains/" className="text-[#8b5cf6] underline">
                     Logs
-                  </a>
+                  </Link>
                   , and{' '}
-                  <a href="/product/" className="text-[#8b5cf6] underline">
+                  <Link href="/product/" className="text-[#8b5cf6] underline">
                     more
-                  </a>
+                  </Link>
                   .
                 </p>
               </div>
@@ -244,8 +252,9 @@ export async function Home() {
                   '0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.05)',
               }}
             >
-              <div
-                className="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
+              <Link
+                href="/product/ai-in-sentry/seer/"
+                className="card-image-link flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
                 style={{
                   display: 'flex',
                   alignItems: 'center',
@@ -262,45 +271,45 @@ export async function Home() {
                     objectPosition: 'center',
                   }}
                 />
-              </div>
+              </Link>
               <div className="flex-1">
                 <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
-                  <a
+                  <Link
                     href="/product/ai-in-sentry/seer/"
                     className="text-[var(--gray-12)] hover:underline"
                   >
                     Fix Bugs Faster with Seer
-                  </a>
+                  </Link>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
                   Debug applications with{' '}
-                  <a
+                  <Link
                     href="/product/ai-in-sentry/seer/"
                     className="text-[#8b5cf6] underline"
                   >
                     Seer
-                  </a>
+                  </Link>
                   . Get{' '}
-                  <a
+                  <Link
                     href="/product/ai-in-sentry/seer/#seer-agent"
                     className="text-[#8b5cf6] underline"
                   >
                     AI-powered answers
-                  </a>{' '}
+                  </Link>{' '}
                   to questions using your application data in Sentry. Have{' '}
-                  <a
+                  <Link
                     href="/product/ai-in-sentry/seer/autofix/"
                     className="text-[#8b5cf6] underline"
                   >
                     Autofix
-                  </a>{' '}
+                  </Link>{' '}
                   generate fixes, and{' '}
-                  <a
+                  <Link
                     href="/product/ai-in-sentry/seer/code-review/"
                     className="text-[#8b5cf6] underline"
                   >
                     review code changes
-                  </a>{' '}
+                  </Link>{' '}
                   before merging PRs.
                 </p>
               </div>
@@ -314,8 +323,9 @@ export async function Home() {
                   '0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.05)',
               }}
             >
-              <div
-                className="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
+              <Link
+                href="/ai/"
+                className="card-image-link flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
                 style={{
                   display: 'flex',
                   alignItems: 'center',
@@ -332,18 +342,18 @@ export async function Home() {
                     objectPosition: 'center',
                   }}
                 />
-              </div>
+              </Link>
               <div className="flex-1">
                 <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
-                  <a href="/ai/" className="text-[var(--gray-12)] hover:underline">
+                  <Link href="/ai/" className="text-[var(--gray-12)] hover:underline">
                     AI in Sentry
-                  </a>
+                  </Link>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
                   Integrate Sentry into your AI coding assistants using Sentry's{' '}
-                  <a href="/ai/agent-skills/" className="text-[#8b5cf6] underline">
+                  <Link href="/ai/agent-skills/" className="text-[#8b5cf6] underline">
                     Skills
-                  </a>{' '}
+                  </Link>{' '}
                   and{' '}
                   <a
                     href="https://mcp.sentry.dev"
@@ -354,9 +364,9 @@ export async function Home() {
                     MCP server
                   </a>{' '}
                   with your agents. Debug agents and MCP servers by{' '}
-                  <a href="/ai/monitoring/" className="text-[#8b5cf6] underline">
+                  <Link href="/ai/monitoring/" className="text-[#8b5cf6] underline">
                     monitoring your AI features
-                  </a>
+                  </Link>
                   .
                 </p>
               </div>
@@ -587,6 +597,14 @@ export async function Home() {
           border-color: #c4b5fd !important;
           box-shadow: 0 6px 32px 0 rgba(124,58,237,0.18), 0 2px 12px 0 rgba(124,58,237,0.12);
         }
+        /* Linked card images */
+        .card-image-link {
+          transition: opacity 0.2s ease, transform 0.2s ease;
+        }
+        .card-image-link:hover {
+          opacity: 0.8;
+          transform: scale(1.05);
+        }
       `}</style>
     </div>
   );

From f80eeb05ff5fd3e7f054c76270f3d415d700d86e Mon Sep 17 00:00:00 2001
From: Shannon Anahata <shannonanahata@gmail.com>
Date: Mon, 15 Jun 2026 16:47:33 -0700
Subject: [PATCH 3/3] Rename card header to 'Fix Faster with Seer'

---
 src/components/home.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/home.tsx b/src/components/home.tsx
index ccba2ab730808..9020124ecd2ac 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -244,7 +244,7 @@ export async function Home() {
               </div>
             </div>
 
-            {/* Fix Bugs Faster with Seer */}
+            {/* Fix Faster with Seer */}
             <div
               className="bg-white dark:bg-[var(--gray-2)] rounded-xl p-6 flex items-start gap-4"
               style={{
@@ -263,7 +263,7 @@ export async function Home() {
               >
                 <img
                   src={AiSentryHero.src}
-                  alt="Fix Bugs Faster with Seer"
+                  alt="Fix Faster with Seer"
                   style={{
                     width: '100%',
                     height: '100%',
@@ -278,7 +278,7 @@ export async function Home() {
                     href="/product/ai-in-sentry/seer/"
                     className="text-[var(--gray-12)] hover:underline"
                   >
-                    Fix Bugs Faster with Seer
+                    Fix Faster with Seer
                   </Link>
                 </h3>
                 <p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">