diff --git a/src/components/header.tsx b/src/components/header.tsx
index 9394770c0ba4f..c51b32230da37 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -183,16 +183,40 @@ export function Header({
       {/* define a header-height variable for consumption by other components */}
       <style>{`
         :root { --header-height: 64px; }
-        /* Home page: full-width nav that spans the viewport (matches the old
-         * homepage). No max-width cap — the nav's own edge padding
-         * (px-4 / md:pl-3 and the right block's lg:pr-6) handles spacing. */
+        /* Home page: align header content with max-w-screen-xl (1280px) content */
+        /* The nav element has px-4 (16px) on mobile, md:pl-3 (12px) on desktop */
+        /* Home content uses px-4 (16px), sm:px-8 (32px), lg:px-[50px] */
+        /* So we subtract the nav's padding from the content's padding */
         .header-content-home {
-          max-width: none;
-          margin-left: 0;
-          margin-right: 0;
+          max-width: 1280px;
+          margin-left: auto;
+          margin-right: auto;
           padding-left: 0;
           padding-right: 0;
         }
+        @media (min-width: 640px) {
+          .header-content-home {
+            /* 32px (content) - 16px (nav px-4) = 16px */
+            padding-left: 16px;
+            padding-right: 16px;
+          }
+        }
+        @media (min-width: 768px) {
+          .header-content-home {
+            /* 32px (content) - 12px (nav md:pl-3) = 20px on left */
+            /* 32px (content) - 16px (nav md:pr-4) = 16px on right */
+            padding-left: 20px;
+            padding-right: 16px;
+          }
+        }
+        @media (min-width: 1024px) {
+          .header-content-home {
+            /* 50px (content) - 12px (nav md:pl-3) = 38px on left */
+            /* 50px (content) - 24px (right div lg:pr-6) = 26px on right */
+            padding-left: 38px;
+            padding-right: 26px;
+          }
+        }
         /* Doc pages: fluid centering to match sidebar offset at wide viewports */
         .header-content:not(.header-content-home) {
           padding-left: var(--layout-offset, 0px);
diff --git a/src/components/home.tsx b/src/components/home.tsx
index b837bbb95b354..f3d0ca217d8ba 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -1,11 +1,28 @@
 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';
+import AiSentryHero from 'sentry-docs/imgs/ai-sentry-hero.jpeg';
+import PlugImage from 'sentry-docs/imgs/api.png';
+import ChatBubble from 'sentry-docs/imgs/chat-bubble.png';
+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';
+import RocketImage from 'sentry-docs/imgs/rocket.png';
+import SecurityImage from 'sentry-docs/imgs/security.png';
+import SquiggleSVG from 'sentry-docs/imgs/squiggle.svg';
+import SupportImage from 'sentry-docs/imgs/support.png';
 
 import AskAiSearchParams from './askAiSearchParams';
+import {Card} from './card';
 import {Header} from './header';
 import {HomeSearchObserver} from './homeSearchVisibility';
 import {NavLink, NavLinkProps} from './navlink';
+import {PlatformFilter} from './platformFilter';
 import {PlatformIcon} from './platformIcon';
 import {Search} from './search';
 import {SentryWordmarkLogo} from './wordmarkLogo';
@@ -26,12 +43,11 @@ export async function Home() {
     {key: 'php-laravel', title: 'Laravel', url: '/platforms/php/guides/laravel/'},
     {key: 'apple', title: 'Apple', url: '/platforms/apple/'},
     {key: 'android', title: 'Android', url: '/platforms/android/'},
-    {key: 'go', title: 'Go', url: '/platforms/go/'},
-    {key: 'dotnet', title: '.NET', url: '/platforms/dotnet/'},
-    {key: 'java', title: 'Java', url: '/platforms/java/'},
-    {key: 'ruby', title: 'Ruby', url: '/platforms/ruby/'},
+    {key: 'dart', title: 'Dart', url: '/platforms/dart/'},
+    {key: 'javascript', title: 'JavaScript', url: '/platforms/javascript/'},
+    {key: 'unity', title: 'Unity', url: '/platforms/unity/'},
+    {key: 'unreal', title: 'Unreal', url: '/platforms/unreal/'},
   ];
-
   return (
     <div className="tw-app">
       <Header
@@ -44,149 +60,445 @@ export async function Home() {
         <div className="mt-[var(--header-height)]">
           <Banner />
         </div>
+        {/* Hero Banner with Two-Column Layout */}
+        <div className="w-full relative hero-gradient">
+          {/* Single decorative squiggle at top right */}
+          <img
+            src={SquiggleSVG.src}
+            alt=""
+            className="pointer-events-none absolute overflow-hidden"
+            style={{
+              right: 0,
+              top: '-80px',
+              width: '30%',
+              opacity: 0.1,
+              zIndex: 0,
+            }}
+          />
 
-        {/* Hero */}
-        <section className="w-full relative hero-gradient">
-          <div className="max-w-screen-lg mx-auto px-4 sm:px-8 pt-16 pb-10 text-center relative z-10">
-            <h1
-              className="font-bold text-[var(--gray-12)] dark:text-white mb-4"
-              style={{fontSize: '40px', lineHeight: 1.15, letterSpacing: '-0.02em'}}
-            >
-              Get started with Sentry
-            </h1>
-            <p
-              className="text-[var(--gray-11)] dark:text-[var(--gray-11)] max-w-xl mx-auto mb-8"
-              style={{fontSize: '17px', lineHeight: 1.5}}
-            >
-              Sentry provides end-to-end distributed tracing, enabling developers to
-              identify and debug performance issues and errors across their systems and
-              services.
-            </p>
-            <HomeSearchObserver>
-              <div className="home-search-bar relative z-50 max-w-xl mx-auto">
-                <Search path="/" searchPlatforms={[]} useStoredSearchPlatforms={false} />
+          {/* Content Container */}
+          <div className="max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-[50px] pt-10 pb-6 relative z-10">
+            <div className="flex flex-col lg:flex-row items-start gap-8">
+              {/* Left Column: Welcome Text + Search */}
+              <div className="flex-1 flex flex-col items-center lg:items-start justify-center lg:w-[50%]">
+                <h1
+                  className="font-bold mb-3 text-center lg:text-left text-[var(--gray-12)] dark:text-white"
+                  style={{
+                    fontWeight: 700,
+                    fontSize: '32px',
+                    lineHeight: 1.2,
+                  }}
+                >
+                  Welcome To Sentry Docs
+                </h1>
+                <p
+                  className="mb-5 text-center lg:text-left text-[var(--gray-11)] dark:text-white"
+                  style={{
+                    lineHeight: '1.5',
+                    fontWeight: 400,
+                    fontSize: '15px',
+                  }}
+                >
+                  Sentry provides end-to-end distributed tracing, enabling developers to
+                  identify and debug performance issues and errors across their systems
+                  and services.
+                </p>
+                <HomeSearchObserver>
+                  <div className="home-search-bar relative z-50 self-stretch">
+                    <Search
+                      path="/"
+                      searchPlatforms={[]}
+                      useStoredSearchPlatforms={false}
+                    />
+                  </div>
+                </HomeSearchObserver>
               </div>
-            </HomeSearchObserver>
-          </div>
-        </section>
 
-        {/* Bifurcated setup paths */}
-        <section className="max-w-screen-lg mx-auto px-4 sm:px-8 -mt-2 pb-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* AI setup */}
-            <Link href="/ai/agent-plugin/" className="setup-card group no-underline">
-              <div className="setup-icon">
-                <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M12 2l1.9 4.6L18.5 8.5 13.9 10.4 12 15l-1.9-4.6L5.5 8.5l4.6-1.9L12 2z" />
-                  <path d="M18.5 13.5l.95 2.3 2.3.95-2.3.95-.95 2.3-.95-2.3-2.3-.95 2.3-.95.95-2.3z" />
-                </svg>
+              {/* Right Column: SDK Section */}
+              <div className="flex-shrink-0 w-full lg:w-[50%] lg:pt-[20px] flex flex-col items-center lg:items-end">
+                <div>
+                  <div className="grid grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
+                    {mostViewedSDKs.map(platform => (
+                      <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)]"
+                        style={{
+                          textDecoration: 'none',
+                          padding: '6px',
+                          borderRadius: '6px',
+                          width: '70px',
+                          height: '76px',
+                        }}
+                      >
+                        <PlatformIcon
+                          platform={platform.key}
+                          size={36}
+                          format="lg"
+                          style={{margin: 0, display: 'block'}}
+                        />
+                        <span
+                          className="text-[var(--gray-12)] whitespace-nowrap"
+                          style={{
+                            fontSize: '0.6rem',
+                            fontWeight: 500,
+                            textAlign: 'center',
+                            lineHeight: 1.1,
+                          }}
+                        >
+                          {platform.title}
+                        </span>
+                      </Link>
+                    ))}
+                  </div>
+                  <a
+                    href="#all-sdks"
+                    className="hover:underline font-bold text-center lg:text-left block uppercase tracking-wider mt-2"
+                    style={{
+                      color: '#8b5cf6',
+                      fontSize: '0.875rem',
+                      letterSpacing: '0.05em',
+                    }}
+                  >
+                    GO TO ALL SDKS
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="hero max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-[50px] py-2">
+          {/* Sentry Features Header */}
+          <h2 className="text-2xl mt-0 mb-6 font-medium">Sentry Features</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {/* Debugging in Sentry */}
+            <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)',
+              }}
+            >
+              <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
+                  src={ErrorMonitoringHero.src}
+                  alt="Debugging in Sentry"
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
+                  }}
+                />
+              </Link>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
+                  <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{' '}
+                  <Link
+                    href="/product/error-monitoring/"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    Error Monitoring
+                  </Link>
+                  ,{' '}
+                  <Link
+                    href="/product/trace-explorer/"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    Tracing
+                  </Link>
+                  ,{' '}
+                  <Link
+                    href="/product/session-replay/"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    Session Replay
+                  </Link>
+                  ,{' '}
+                  <Link href="/product/drains/" className="text-[#8b5cf6] underline">
+                    Logs
+                  </Link>
+                  , and{' '}
+                  <Link href="/product/" className="text-[#8b5cf6] underline">
+                    more
+                  </Link>
+                  .
+                </p>
               </div>
-              <h2 className="setup-title">Set up with AI</h2>
-              <p className="setup-desc">
-                Let your AI coding assistant install and configure Sentry for you, using
-                Sentry&apos;s agent skills, editor rules, and MCP server.
-              </p>
-              <span className="setup-cta">
-                Start AI setup
-                <Arrow />
-              </span>
-            </Link>
+            </div>
 
-            {/* Manual setup — plain <a> so the same-page hash reliably scrolls (next/link doesn't) */}
-            <a href="#platforms" className="setup-card group no-underline">
-              <div className="setup-icon">
-                <svg
-                  width="26"
-                  height="26"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <rect x="2.5" y="4" width="19" height="16" rx="2.5" />
-                  <path d="M6.5 9l3 3-3 3" />
-                  <path d="M12.5 15h5" />
-                </svg>
+            {/* 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)',
+              }}
+            >
+              <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
+                  src={AiSentryHero.src}
+                  alt="Fix Faster with Seer"
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
+                  }}
+                />
+              </Link>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
+                  <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{' '}
+                  <Link
+                    href="/product/ai-in-sentry/seer/"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    Seer
+                  </Link>
+                  . Get{' '}
+                  <Link
+                    href="/product/ai-in-sentry/seer/#seer-agent"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    AI-powered answers
+                  </Link>{' '}
+                  to questions using your application data in Sentry. Have{' '}
+                  <Link
+                    href="/product/ai-in-sentry/seer/autofix/"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    Autofix
+                  </Link>{' '}
+                  generate fixes, and{' '}
+                  <Link
+                    href="/product/ai-in-sentry/seer/code-review/"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    review code changes
+                  </Link>{' '}
+                  before merging PRs.
+                </p>
               </div>
-              <h2 className="setup-title">Set up manually</h2>
-              <p className="setup-desc">
-                Choose your platform and follow a step-by-step guide to install the SDK
-                and send your first event.
-              </p>
-              <span className="setup-cta">
-                Choose your platform
-                <Arrow />
-              </span>
-            </a>
-          </div>
-        </section>
+            </div>
 
-        {/* Popular SDKs */}
-        <section
-          id="platforms"
-          className="max-w-screen-lg mx-auto px-4 sm:px-8 pt-10 pb-6 scroll-mt-[var(--header-height)]"
-        >
-          <div className="flex items-baseline justify-between mb-4">
-            <h3 className="text-lg font-semibold text-[var(--gray-12)]">Popular SDKs</h3>
-            <Link href="/platforms/" className="text-sm font-medium accent-link">
-              View all SDKs
-            </Link>
-          </div>
-          <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-3">
-            {mostViewedSDKs.map(platform => (
+            {/* AI in Sentry */}
+            <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)',
+              }}
+            >
               <Link
-                key={platform.key}
-                href={platform.url}
-                className="sdk-tile flex flex-col items-center justify-center gap-2 bg-white dark:bg-[var(--gray-2)] no-underline py-4 rounded-lg"
+                href="/ai/"
+                className="card-image-link flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
               >
-                <PlatformIcon
-                  platform={platform.key}
-                  size={38}
-                  format="lg"
-                  style={{margin: 0, display: 'block'}}
+                <img
+                  src={AiInSentryHero.src}
+                  alt="AI in Sentry"
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
+                  }}
                 />
-                <span
-                  className="text-[var(--gray-12)] whitespace-nowrap"
-                  style={{fontSize: '0.72rem', fontWeight: 500}}
-                >
-                  {platform.title}
-                </span>
               </Link>
-            ))}
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold mb-2 text-[var(--gray-12)]">
+                  <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{' '}
+                  <Link href="/ai/agent-plugin/" className="text-[#8b5cf6] underline">
+                    plugin
+                  </Link>{' '}
+                  and{' '}
+                  <a
+                    href="https://mcp.sentry.dev"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[#8b5cf6] underline"
+                  >
+                    MCP server
+                  </a>{' '}
+                  with your agents. Debug agents and MCP servers by{' '}
+                  <Link href="/product/agents/" className="text-[#8b5cf6] underline">
+                    observing your AI features
+                  </Link>
+                  .
+                </p>
+              </div>
+            </div>
           </div>
-        </section>
-
-        {/* Secondary quick links */}
-        <section className="max-w-screen-lg mx-auto px-4 sm:px-8 pt-6 pb-16">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
-            <QuickLink
+          <div id="all-sdks">
+            <PlatformFilter />
+          </div>
+          <h2 className="text-2xl mt-16 mb-6 font-medium">Get to know us</h2>
+          <div className="flex flex-wrap gap-6">
+            {/* Row 1: What is Sentry and Sentry for AI */}
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
               href="/product/"
+              image={RocketImage}
+              imageAlt="Rocket image"
               title="What is Sentry?"
-              desc="Error monitoring, tracing, and more."
+              description={
+                'Application monitoring and debugging software considered "not bad" by 4 million developers.'
+              }
             />
-            <QuickLink
-              href="/product/ai-in-sentry/seer/"
-              title="Fix faster with Seer"
-              desc="AI debugging, root cause, and autofix."
+
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/ai/"
+              image={AiImage}
+              imageAlt="AI integration image"
+              title="Sentry for AI"
+              description="Connect Sentry to your AI coding assistants with the agent plugin and MCP."
             />
-            <QuickLink
-              href="/pricing/"
+
+            {/* Row 2: Guides and Pricing & Billing */}
+            <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="/pricing"
+              image={CalculatorImage}
+              imageAlt="Calculator image"
               title="Pricing & Billing"
-              desc="How our pricing and quotas work."
+              description="All about our pricing and billing structure."
+            />
+
+            {/* Row 3: Organization Settings and Integrations */}
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/organization"
+              image={OrganizationImage}
+              imageAlt="Organization image"
+              title="Organization Settings"
+              description="Information for setting up your organization's Sentry account."
+            />
+
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/integrations"
+              image={AiImage}
+              imageAlt="Integrations image"
+              title="Integrations"
+              description="Connect Sentry to your favorite tools for source control, issue tracking, notifications, and more."
             />
-            <QuickLink href="/api/" title="API" desc="Access Sentry programmatically." />
-            <QuickLink
-              href="/cli/"
+
+            {/* Row 4: API and CLI */}
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/api"
+              image={PlugImage}
+              imageAlt="Plug image"
+              title="API"
+              description="APIs for accessing Sentry programmatically."
+            />
+
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/cli"
+              image={TerminalImage}
+              imageAlt="Terminal image"
               title="CLI"
-              desc="Use sentry-cli on the command line."
+              description="How to use 'sentry-cli' on the command line."
+            />
+
+            {/* Row 5: Security, Legal & PII and Concepts & References */}
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/security-legal-pii"
+              image={SecurityImage}
+              imageAlt="Stamped paper image"
+              title="Security, Legal & PII"
+              description="Security, compliance, and data-scrubbing processes."
+            />
+
+            <Card
+              className="w-full md:w-[calc(50%-12px)]"
+              href="/concepts"
+              image={ConceptsImage}
+              imageAlt="Concept and references image"
+              title="Concepts & Reference"
+              description="Core concepts that make Sentry, Sentry."
+            />
+          </div>
+          <h2 className="text-2xl mt-10 mb-6 font-medium">Talk to us</h2>
+          <div className="flex flex-col md:flex-row gap-6">
+            <Card
+              className="w-full"
+              href="https://discord.com/invite/sentry"
+              image={ChatBubble}
+              imageAlt="Chat bubble image"
+              title="Sentry Discord"
+              description="Real talk in real time. Get in it."
+            />
+
+            <Card
+              className="w-full"
+              href="https://www.sentry.help/en/"
+              image={SupportImage}
+              imageAlt="Support image"
+              title="Support"
+              description="See how we can help."
             />
           </div>
-        </section>
+        </div>
       </main>
       <footer className="mt-12 pb-10 w-full z-50 max-w-7xl mx-auto md:px-6 space-y-4 px-6 lg:px-8">
         <div className="px-3 pt-10 border-t border-gray">
+          {/* First row */}
           <div className="flex flex-col items-start md:flex-row md:flex-wrap md:gap-x-6 gap-y-2 mb-2">
             <FooterLink href="/security-legal-pii/">Security, Legal & PII</FooterLink>
             <FooterLink href="/contributing">Contribute</FooterLink>
@@ -197,6 +509,7 @@ export async function Home() {
               Changelog
             </FooterLink>
           </div>
+          {/* Second row */}
           <div className="flex flex-col items-start md:flex-row md:flex-wrap md:gap-x-6 gap-y-2">
             <FooterLink href="https://sandbox.sentry.io/" external>
               Sandbox
@@ -207,6 +520,18 @@ export async function Home() {
             <FooterLink href="https://develop.sentry.dev/" external>
               Developer docs
             </FooterLink>
+            <FooterLink href="https://discord.com/invite/sentry">
+              Sentry Discord
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                viewBox="0 0 16 13"
+                fill="none"
+                className="inline-block ml-1 fill-[var(--foreground)]"
+              >
+                <path d="M13.5535 1.01557C12.5023 0.5343 11.3926 0.192868 10.2526 0C10.0966 0.278859 9.95549 0.565767 9.82978 0.859525C8.61551 0.676548 7.38069 0.676548 6.16642 0.859525C6.04065 0.565798 5.8995 0.278893 5.74358 0C4.6029 0.194497 3.49241 0.536739 2.44013 1.01809C0.351097 4.10886 -0.215208 7.12286 0.0679445 10.0941C1.29134 10.998 2.66066 11.6854 4.11639 12.1265C4.44418 11.6856 4.73423 11.2179 4.98347 10.7283C4.51008 10.5515 4.05318 10.3334 3.61805 10.0765C3.73257 9.99339 3.84457 9.90782 3.9528 9.82476C5.21892 10.4202 6.60084 10.7289 7.99999 10.7289C9.39914 10.7289 10.7811 10.4202 12.0472 9.82476C12.1567 9.91411 12.2687 9.99969 12.3819 10.0765C11.946 10.3338 11.4882 10.5524 11.014 10.7296C11.2629 11.2189 11.553 11.6863 11.8811 12.1265C13.338 11.6872 14.7084 11.0001 15.932 10.0953C16.2643 6.64968 15.3645 3.66336 13.5535 1.01557ZM5.34213 8.26679C4.55308 8.26679 3.9012 7.55073 3.9012 6.66981C3.9012 5.78889 4.53043 5.06654 5.33961 5.06654C6.1488 5.06654 6.79565 5.78889 6.7818 6.66981C6.76796 7.55073 6.14628 8.26679 5.34213 8.26679ZM10.6578 8.26679C9.86754 8.26679 9.21817 7.55073 9.21817 6.66981C9.21817 5.78889 9.8474 5.06654 10.6578 5.06654C11.4683 5.06654 12.1101 5.78889 12.0963 6.66981C12.0824 7.55073 11.462 8.26679 10.6578 8.26679Z" />
+              </svg>
+            </FooterLink>
           </div>
         </div>
         <p className="px-3 text-sm">
@@ -219,112 +544,72 @@ export async function Home() {
       </footer>
       <AskAiSearchParams />
       <style>{`
+        .card-large-icon img {
+          width: 40px !important;
+          height: 40px !important;
+        }
+        .card-align-center > div,
+        .card-align-center .flex {
+          align-items: center !important;
+        }
+        /* Hero gradient - light mode */
         .hero-gradient {
           background: linear-gradient(to bottom, rgba(168, 139, 250, 0.15) 0%, rgba(255, 255, 255, 0) 100%), #ffffff;
         }
+        /* Hero gradient - dark mode */
         .dark .hero-gradient {
           background: linear-gradient(to bottom, rgba(168, 139, 250, 0.15) 0%, rgba(0, 0, 0, 0) 100%), var(--gray-1);
         }
-        .accent-link { color: #6c5fc7; }
-        .accent-link:hover { text-decoration: underline; }
-        /* Setup path cards */
-        .setup-card {
-          display: flex;
-          flex-direction: column;
-          background: #fff;
-          border: 1px solid var(--gray-4);
-          border-radius: 16px;
-          padding: 28px;
-          transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
-          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        }
-        .dark .setup-card { background: var(--gray-2); border-color: var(--gray-4); }
-        .setup-card:hover {
-          transform: translateY(-3px);
-          border-color: #a78bfa;
-          box-shadow: 0 10px 30px rgba(108, 95, 199, 0.15);
-        }
-        .setup-icon {
-          width: 48px; height: 48px;
-          display: grid; place-items: center;
-          border-radius: 12px;
-          color: #6c5fc7;
-          background: rgba(108, 95, 199, 0.12);
-          margin-bottom: 16px;
-        }
-        .setup-title {
-          font-size: 20px; font-weight: 600; margin: 0 0 8px;
-          color: var(--gray-12);
-        }
-        .setup-desc {
-          font-size: 14.5px; line-height: 1.55; margin: 0 0 20px;
-          color: var(--gray-11); flex: 1;
-        }
-        .setup-cta {
-          display: inline-flex; align-items: center; gap: 6px;
-          font-weight: 600; font-size: 14.5px; color: #6c5fc7;
-        }
-        .setup-card:hover .setup-cta svg { transform: translateX(3px); }
-        .setup-cta svg { transition: transform 0.15s ease; }
+        /* SDK tiles - light mode */
         .sdk-tile {
-          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-          transition: transform 0.15s ease, box-shadow 0.15s ease;
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
         }
-        .sdk-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
-        .dark .sdk-tile { border: 1px solid var(--gray-4); }
-        .quick-link {
-          display: block; padding: 18px 20px; border-radius: 12px;
-          border: 1px solid var(--gray-4); background: #fff;
-          transition: border-color 0.15s ease, transform 0.15s ease;
+        /* SDK tiles - dark mode */
+        .dark .sdk-tile {
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+          border: 1px solid var(--gray-4);
         }
-        .dark .quick-link { background: var(--gray-2); }
-        .quick-link:hover { border-color: #a78bfa; transform: translateY(-2px); }
         .home-search-bar input[type="text"], .home-search-bar input {
-          height: 48px !important;
-          font-size: 1rem !important;
+          height: 44px !important;
+          min-height: 44px !important;
+          font-size: 0.95rem !important;
+          max-width: 100% !important;
           width: 100% !important;
-          background: #fff;
+          background: linear-gradient(90deg, #fff 80%, #f3e8ff 100%);
           border: 1.5px solid #a78bfa !important;
-          box-shadow: 0 2px 12px 0 rgba(168,139,250,0.10);
+          box-shadow: 0 2px 12px 0 rgba(168,139,250,0.10), 0 1px 4px 0 rgba(168,139,250,0.08);
           border-radius: 12px !important;
           color: #1a1a1a;
+          transition: box-shadow 0.2s, border-color 0.2s;
+        }
+        .home-search-bar input[type="text"]:focus, .home-search-bar input:focus {
+          border-color: #7c3aed !important;
+          box-shadow: 0 6px 32px 0 rgba(124,58,237,0.18), 0 2px 12px 0 rgba(124,58,237,0.12);
+          outline: none !important;
         }
         .dark .home-search-bar input[type="text"], .dark .home-search-bar input {
-          background: var(--gray-2) !important;
+          background: linear-gradient(90deg, #18181b 80%, #312e38 100%) !important;
+          border: 2px solid #a78bfa !important;
           color: #f3f3f3 !important;
+          box-shadow: 0 4px 24px 0 rgba(124,58,237,0.10), 0 1.5px 8px 0 rgba(124,58,237,0.08);
+        }
+        .dark .home-search-bar input[type="text"]:focus, .dark .home-search-bar input:focus {
+          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>
   );
 }
 
-function Arrow() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M5 12h14" />
-      <path d="M13 6l6 6-6 6" />
-    </svg>
-  );
-}
-
-function QuickLink({href, title, desc}: {desc: string; href: string; title: string}) {
-  return (
-    <Link href={href} className="quick-link no-underline">
-      <div className="font-semibold text-[var(--gray-12)] mb-1">{title}</div>
-      <div className="text-sm text-[var(--gray-11)] leading-snug">{desc}</div>
-    </Link>
-  );
-}
-
 function FooterLink({
   children,
   external,