feat(replays): Update Replay List onboarding landing page (#41230)

Added a hero image to the Replay Onboarding experience

It looks fine in most cases. Here are some examples:

1. Here's how it looks at the smallest breakpoint (nav is across top of
screen):
<img width="1082" alt="Screen Shot 2022-11-15 at 12 09 53 PM"
src="https://user-images.githubusercontent.com/187460/202015976-ecad515d-1efd-4dd0-a587-72727fd9f29c.png">


2. The image is hard to size properly near breakpoints:
<img width="1354" alt="Screen Shot 2022-11-15 at 12 09 48 PM"
src="https://user-images.githubusercontent.com/187460/202015982-05fbd9c5-7529-4c23-b710-cf53cbd0a48d.png">

Fixes #41411

static/app/views/profiling/profilingOnboardingPanel.tsx

@@ -12,7 +12,7 @@ interface ProfilingOnboardingPanelProps {
 
 export function ProfilingOnboardingPanel(props: ProfilingOnboardingPanelProps) {
   return (
-    <OnboardingPanel image={<AlertsImage src={emptyStateImg} />}>
+    <OnboardingPanel image={<HeroImage src={emptyStateImg} />}>
       <h3>{t('Function level insights')}</h3>
       <p>
         {t(
@@ -24,7 +24,7 @@ export function ProfilingOnboardingPanel(props: ProfilingOnboardingPanelProps) {
   );
 }
 
-const AlertsImage = styled('img')`
+const HeroImage = styled('img')`
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     user-select: none;
     position: absolute;

static/app/views/replays/list/replayOnboardingPanel.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import emptyStateImg from 'sentry-images/spot/replays-empty-state.svg';
+
 import ButtonBar from 'sentry/components/buttonBar';
 import OnboardingPanel from 'sentry/components/onboardingPanel';
 import {t} from 'sentry/locale';
@@ -10,11 +12,11 @@ interface Props {
 
 export default function ReplayOnboardingPanel(props: Props) {
   return (
-    <OnboardingPanel image={null}>
-      <h3>{t('Playback of Your App')}</h3>
+    <OnboardingPanel image={<HeroImage src={emptyStateImg} />}>
+      <h3>{t('Get to the root cause of errors faster.')}</h3>
       <p>
         {t(
-          'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay of your web application.'
+          'See a video-like reproduction of your user sessions so you can see what happened before, during, and after an error or latency issue occurred.'
         )}
       </p>
       <ButtonList gap={1}>{props.children}</ButtonList>
@@ -22,7 +24,37 @@ export default function ReplayOnboardingPanel(props: Props) {
   );
 }
 
+const HeroImage = styled('img')`
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    user-select: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 220px;
+    margin-top: auto;
+    margin-bottom: auto;
+    transform: translateX(-50%);
+    left: 50%;
+  }
+
+  @media (min-width: ${p => p.theme.breakpoints.medium}) {
+    transform: translateX(-55%);
+    width: 300px;
+    min-width: 300px;
+  }
+
+  @media (min-width: ${p => p.theme.breakpoints.large}) {
+    transform: translateX(-60%);
+    width: 380px;
+    min-width: 380px;
+  }
+
+  @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
+    transform: translateX(-65%);
+    width: 420px;
+    min-width: 420px;
+  }
+`;
 const ButtonList = styled(ButtonBar)`
   grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
-  justify-content: center;
 `;