Skip to content

Link Sentry Features card titles on homepage #18421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sfanahata merged 3 commits into from
Jun 16, 2026
+65 −38
Merged

Link Sentry Features card titles on homepage #18421

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
613b34c
Link Sentry Features card titles on homepage
asblumen Jun 15, 2026
348eec4
Use next/link for internal links and add linked card images
Jun 15, 2026
f80eeb0
Rename card header to 'Fix Faster with Seer'
Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 65 additions & 38 deletions src/components/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -62,7 +63,7 @@
{/* Hero Banner with Two-Column Layout */}
<div className="w-full relative hero-gradient">
{/* Single decorative squiggle at top right */}
<img

Check warning on line 66 in src/components/home.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={SquiggleSVG.src}
alt=""
className="pointer-events-none absolute overflow-hidden"
Expand Down Expand Up @@ -118,7 +119,7 @@
<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)]"
Expand Down Expand Up @@ -147,7 +148,7 @@
>
{platform.title}
</span>
</a>
</Link>
))}
</div>
<a
Expand Down Expand Up @@ -178,15 +179,16 @@
'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',
justifyContent: 'center',
}}
>
<img

Check warning on line 191 in src/components/home.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={ErrorMonitoringHero.src}
alt="Debugging in Sentry"
style={{
Expand All @@ -196,104 +198,118 @@
objectPosition: 'center',
}}
/>
</div>
</Link>
<div className="flex-1">
<h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
Debugging in Sentry
<Link
href="/product/"
className="text-[var(--gray-12)] hover:underline"
>
Debugging in Sentry
</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>
</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={{
boxShadow:
'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',
justifyContent: 'center',
}}
>
<img

Check warning on line 264 in src/components/home.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={AiSentryHero.src}
alt="Fix Bugs Faster with Seer"
alt="Fix Faster with Seer"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
objectPosition: 'center',
}}
/>
</div>
</Link>
<div className="flex-1">
<h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
Fix Bugs Faster with Seer
<Link
href="/product/ai-in-sentry/seer/"
className="text-[var(--gray-12)] hover:underline"
>
Fix Faster with Seer
</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>
Expand All @@ -307,15 +323,16 @@
'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',
justifyContent: 'center',
}}
>
<img

Check warning on line 335 in src/components/home.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={AiInSentryHero.src}
alt="AI in Sentry"
style={{
Expand All @@ -325,16 +342,18 @@
objectPosition: 'center',
}}
/>
</div>
</Link>
<div className="flex-1">
<h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
AI in Sentry
<Link href="/ai/" className="text-[var(--gray-12)] hover:underline">
AI in Sentry
</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"
Expand All @@ -345,9 +364,9 @@
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>
Expand Down Expand Up @@ -578,6 +597,14 @@
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>
);
Expand Down
Loading