feat(demo): update demo header (#25453)

static/app/components/demo/demoHeader.tsx

@@ -14,16 +14,28 @@ export default function DemoHeader() {
     <Wrapper>
       <LogoSvg />
       <ButtonBar gap={4}>
-        <StyledExternalLink href="https://docs.sentry.io">
+        <StyledExternalLink
+          onClick={() => trackAdvancedAnalyticsEvent('growth.demo_click_docs', {}, null)}
+          href="https://docs.sentry.io"
+        >
           {t('Documentation')}
         </StyledExternalLink>
+        <BaseButton
+          priority="form"
+          onClick={() =>
+            trackAdvancedAnalyticsEvent('growth.demo_click_request_demo', {}, null)
+          }
+          href="https://sentry.io/_/demo/"
+        >
+          {t('Request a Demo')}
+        </BaseButton>
         <GetStarted
           onClick={() =>
             trackAdvancedAnalyticsEvent('growth.demo_click_get_started', {}, null)
           }
           href="https://sentry.io/signup/"
         >
-          {t('Sign Up')}
+          {t('Sign Up for Free')}
         </GetStarted>
       </ButtonBar>
     </Wrapper>
@@ -59,15 +71,19 @@ const LogoSvg = styled(IconSentryFull)`
   color: ${p => p.theme.textColor};
 `;
 
-const GetStarted = styled(Button)`
-  background-color: #e1567c;
-  color: #fff;
-  box-shadow: 0 2px 0 rgb(54 45 89 / 10%);
-  border-color: transparent;
+const BaseButton = styled(Button)`
   border-radius: 2rem;
   text-transform: uppercase;
 `;
 
+//Note many of the colors don't come from the theme as they come from the marketing site
+const GetStarted = styled(BaseButton)`
+  border-color: transparent;
+  box-shadow: 0 2px 0 rgb(54 45 89 / 10%);
+  background-color: #e1567c;
+  color: #fff;
+`;
+
 const StyledExternalLink = styled(ExternalLink)`
   color: #584774;
 `;

static/app/utils/growthAnalyticsEvents.tsx

@@ -17,6 +17,8 @@ export type GrowthEventParameters = {
   'growth.clicked_mobile_prompt_ask_teammate': MobilePromptBannerParams;
   'growth.submitted_mobile_prompt_ask_teammate': MobilePromptBannerParams;
   'growth.demo_click_get_started': {};
+  'growth.demo_click_docs': {};
+  'growth.demo_click_request_demo': {};
 };
 
 type GrowthAnalyticsKey = keyof GrowthEventParameters;
@@ -33,4 +35,6 @@ export const growthEventMap: Record<GrowthAnalyticsKey, string> = {
   'growth.submitted_mobile_prompt_ask_teammate':
     'Growth: Submitted Mobile Prompt Ask Teammate',
   'growth.demo_click_get_started': 'Growth: Demo Click Get Started',
+  'growth.demo_click_docs': 'Growth: Demo Click Docs',
+  'growth.demo_click_request_demo': 'Growth: Demo Click Request Demo',
 };