more polish on the banner and the product dropdown

Author: Shannon Anahata

src/components/TopNavClient.tsx

@@ -11,13 +11,32 @@ import platformSelectorStyles from './platformSelector/style.module.scss';
 import {PlatformSelector} from './platformSelector';
 
 const productSections = [
-  {label: 'Sentry', href: '/product/sentry/'},
-  {label: 'Sentry Prevent', href: '/product/sentry-prevent/'},
-  {label: 'Seer', href: '/product/seer/'},
+  {label: 'Sentry Basics', href: '/product/sentry-basics/'},
+  {label: 'AI in Sentry', href: '/product/ai-in-sentry/'},
+  {label: 'Insights', href: '/product/insights/'},
+  {label: 'User Feedback', href: '/product/user-feedback/'},
+  {label: 'Uptime Monitoring', href: '/product/uptime-monitoring/'},
+  {label: 'Dashboards', href: '/product/dashboards/'},
+  {label: 'Projects', href: '/product/projects/'},
+  {label: 'Explore', href: '/product/explore/'},
+  {label: 'Issues', href: '/product/issues/'},
+  {label: 'Alerts', href: '/product/alerts/'},
+  {label: 'Crons', href: '/product/crons/'},
+  {label: 'Releases', href: '/product/releases/'},
+  {label: 'Relay', href: '/product/relay/'},
+  {label: 'Sentry MCP', href: '/product/sentry-mcp/'},
+  {label: 'Sentry Toolbar', href: '/product/sentry-toolbar/'},
+  {label: 'Stats', href: '/product/stats/'},
+  {label: 'Codecov', href: '/product/codecov/'},
+  {label: 'Onboarding', href: '/product/onboarding/'},
 ];
 
 const mainSections = [
-  {label: 'Products', href: '/product/'},
+  {
+    label: 'Products',
+    href: '/product/',
+    dropdown: productSections,
+  },
   {label: 'SDKs', href: '/platforms/'},
   {
     label: 'Concepts & Reference',
@@ -240,16 +259,41 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
             {mainSections.map(section => (
               <li key={section.href} className="list-none relative">
                 {section.label === 'Products' ? (
-                  <Link
-                    href={section.href}
-                    className={`text-[var(--gray-12)] transition-colors duration-150 inline-block py-2 px-1 rounded-t-md text-[0.875rem] font-normal ${
-                      pathname?.startsWith(section.href)
-                        ? 'border-b-2 border-[var(--accent-purple)]'
-                        : 'hover:text-[var(--accent)]'
-                    }`}
-                  >
-                    {section.label}
-                  </Link>
+                  <div style={{display: 'inline-block'}}>
+                    <button
+                      ref={productsBtnRef}
+                      className={`text-[var(--gray-12)] transition-colors duration-150 inline-block py-2 px-1 rounded-t-md flex items-center gap-1 text-[0.875rem] font-normal ${
+                        productsDropdownOpen || pathname?.startsWith(section.href)
+                          ? 'border-b-2 border-[var(--accent-purple)]'
+                          : 'hover:text-[var(--accent)]'
+                      }`}
+                      onClick={() => {
+                        setProductsDropdownOpen(v => !v);
+                        setConceptsDropdownOpen(false);
+                        setAdminDropdownOpen(false);
+                      }}
+                      aria-haspopup="true"
+                      aria-expanded={productsDropdownOpen}
+                    >
+                      {section.label}
+                      <svg
+                        className={`ml-1 transition-transform duration-150 ${productsDropdownOpen ? 'rotate-180' : ''}`}
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M4 6L8 10L12 6"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                 ) : section.label === 'SDKs' ? (
                   <div style={{display: 'inline-block'}}>
                     <button

src/components/home.tsx

@@ -52,16 +52,18 @@ export default async function Home() {
       <div className="mt-[var(--header-height)]">
         <Banner />
       </div>
-      {/* Centered Welcome Header and Subheader at the top */}
+      {/* Slanted Banner with Welcome Header and Subheader */}
       <div
-        className="flex flex-col items-center justify-center w-full"
+        className="flex flex-col items-center justify-center w-full relative"
         style={{
-          height: '250px',
+          height: '270px',
           backgroundImage: `url(${BgLinkedin.src})`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',
           width: '100%',
+          clipPath: 'polygon(0 0, 100% 0, 100% 85%, 0 100%)',
+          marginBottom: 0,
         }}
       >
         <h1 className="text-4xl font-bold mb-2 text-center" style={{color: '#fff', textShadow: '0 4px 16px #000, 0 0 8px #000, 0 0 2px #000'}}>
@@ -78,9 +80,10 @@ export default async function Home() {
         </p>
       </div>
       {/* Search + SDKs row, same width as Sentry Products */}
-      <div className="max-w-screen-xl mx-auto px-6 lg:px-8 w-full">
+      <div className="max-w-screen-xl mx-auto px-6 lg:px-8 w-full" style={{marginTop: 0, paddingTop: 0}}>
         <div
-          className="w-full flex flex-col md:flex-row items-stretch mb-3 justify-between relative"
+          className="w-full flex flex-col md:flex-row items-stretch justify-between relative"
+          style={{marginTop: 0, marginBottom: 0}}
         >
           {/* Left column: Search Bar, left-aligned */}
           <div className="flex-1 flex flex-col items-start justify-center w-full max-w-full relative">