Skip to content

feat(home): Add Guides card to homepage #16662

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
jaffrepaul merged 2 commits into from
Mar 4, 2026
Merged

feat(home): Add Guides card to homepage #16662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58bd421
feat(home): Add Guides card to homepage
jaffrepaul Mar 3, 2026
b8359ea
[getsentry/action-github-commit] Auto commit
getsantry[bot] Mar 3, 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
10 changes: 10 additions & 0 deletions src/components/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import TerminalImage from 'sentry-docs/imgs/cli.png';
import ConceptsImage from 'sentry-docs/imgs/concepts-reference.png';
import ErrorMonitoringHero from 'sentry-docs/imgs/error-monitoring-hero.png';
import GuidesImage from 'sentry-docs/imgs/guides.png';
import AiImage from 'sentry-docs/imgs/integrate.png';
import OrganizationImage from 'sentry-docs/imgs/organization.png';
import CalculatorImage from 'sentry-docs/imgs/pricing.png';
Expand Down Expand Up @@ -60,7 +61,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 64 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` 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 @@ -184,7 +185,7 @@
justifyContent: 'center',
}}
>
<img

Check warning on line 188 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` 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 @@ -202,26 +203,26 @@
<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 href="/product/error-monitoring/" className="text-[#8b5cf6] underline">

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/error-monitoring/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
Error Monitoring
</a>
,{' '}
<a

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/explore/trace-explorer/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
href="/product/explore/trace-explorer/"
className="text-[#8b5cf6] underline"
>
Tracing
</a>
,{' '}
<a href="/product/session-replay/" className="text-[#8b5cf6] underline">

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/session-replay/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
Session Replay
</a>
,{' '}
<a href="/product/drains/" className="text-[#8b5cf6] underline">

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/drains/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
Logs
</a>
, and{' '}
<a href="/product/" className="text-[#8b5cf6] underline">

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
more
</a>
.
Expand All @@ -245,7 +246,7 @@
justifyContent: 'center',
}}
>
<img

Check warning on line 249 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` 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"
style={{
Expand All @@ -262,14 +263,14 @@
</h3>
<p className="text-sm text-[var(--gray-11)] dark:text-white leading-relaxed">
Debug applications automatically with{' '}
<a

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/ai-in-sentry/seer/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
href="/product/ai-in-sentry/seer/"
className="text-[#8b5cf6] underline"
>
Seer
</a>
. Use{' '}
<a

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

View workflow job for this annotation

GitHub Actions / Lint 

Do not use an `<a>` element to navigate to `/product/ai-in-sentry/seer/root-cause-analysis/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages
href="/product/ai-in-sentry/seer/root-cause-analysis/"
className="text-[#8b5cf6] underline"
>
Expand Down Expand Up @@ -361,6 +362,15 @@
description="Connect Sentry to your AI coding assistants with agent skills and MCP."
/>

<Card
className="w-full md:w-[calc(50%-12px)]"
href="/guides/"
image={GuidesImage}
imageAlt="Guides image"
title="Guides"
description="You've set up Sentry. Now what? Practical guidance on what to instrument, query, and alert on."
/>

<Card
className="w-full md:w-[calc(50%-12px)]"
href="/organization"
Expand Down
Binary file added src/imgs/guides.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading