add stage link

components/Home/Hero.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@storybook/theming';
 import { styles } from '@storybook/components-marketing';
-import { Cardinal, Badge, Button, Link } from '@storybook/design-system';
+import { Cardinal, Badge, Button, Link, Icon } from '@storybook/design-system';
 import { RegistrationForm } from '@components/RegistrationForm';
 import { FreeStickers } from '@components/FreeStickers';
 import { ByChromatic } from '@components/ByChromatic';
@@ -10,9 +10,11 @@ import {
   TIMEZONE,
   CFP_URL,
   TIMEZONE_EU,
-  SHORT_TIME_EU
+  SHORT_TIME_EU,
+  STAGE_URL
 } from '@lib/constants';
 import { LinkWrapper } from '@components/LinkWrapper';
+import BringToStageIcon from '@components/icons/icon-bring-stage';
 
 const { marketing, breakpoints, pageMargins } = styles;
 
@@ -168,6 +170,21 @@ const WatchLive = styled(Info)`
   }
 `;
 
+const StageLink = styled(Button)`
+  && {
+    svg {
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+    }
+  }
+`;
+
 export const Hero = () => (
   <Container>
     <TitleWrapper>
@@ -190,11 +207,16 @@ export const Hero = () => (
         new in 7.0, meet world-class frontend devs, and check out the leading projects in the
         community.
       </Copy>
-      <Register />
+      {/* On event day */}
+      <StageLink appearance="secondary" isLink ButtonWrapper={LinkWrapper} href={STAGE_URL}>
+        <BringToStageIcon /> Go to Live Stage
+      </StageLink>
+      {/* During registration period */}
+      {/* <Register />
       <Badges>
         <FreeStickers />
-        {/* <CFP /> */}
-      </Badges>
+        <CFP />
+      </Badges> */}
     </div>
     <ByChromaticMobile />
   </Container>

components/Nav.tsx

@@ -100,14 +100,6 @@ export const Nav = ({ transparent, CTA, activeRoute }: NavProps) => {
             >
               Schedule
             </NavItem>
-            {/* <NavItem
-              variant="default"
-              href="/stage/main"
-              LinkWrapper={LinkWrapper}
-              active={activeRoute === '/stage/main'}
-            >
-              Stage
-            </NavItem> */}
             <NavItem variant="default" href={DISCORD_URL}>
               Discord
             </NavItem>

components/NavCTA.tsx

@@ -2,6 +2,7 @@ import { styled } from '@storybook/theming';
 import { styles, NavItem } from '@storybook/components-marketing';
 import { LinkWrapper } from './LinkWrapper';
 import { Button } from '@storybook/design-system';
+import { STAGE_URL } from '@lib/constants';
 
 const { breakpoints } = styles;
 
@@ -23,19 +24,27 @@ const DesktopCTA = styled(Button)`
   }
 `;
 
+// // During registration period
+// export const NavCTA = () => (
+//   <>
+//     <MobileCTA variant="default" href="/schedule" LinkWrapper={LinkWrapper}>
+//       Schedule
+//     </MobileCTA>
+//     <DesktopCTA
+//       size="small"
+//       appearance="secondary"
+//       isLink
+//       ButtonWrapper={LinkWrapper}
+//       href="/#register"
+//     >
+//       Get your free ticket
+//     </DesktopCTA>
+//   </>
+// );
+
+// For event day
 export const NavCTA = () => (
-  <>
-    <MobileCTA variant="default" href="/schedule" LinkWrapper={LinkWrapper}>
-      Schedule
-    </MobileCTA>
-    <DesktopCTA
-      size="small"
-      appearance="secondary"
-      isLink
-      ButtonWrapper={LinkWrapper}
-      href="/#register"
-    >
-      Get your free ticket
-    </DesktopCTA>
-  </>
+  <NavItem variant="primary" LinkWrapper={LinkWrapper} href={STAGE_URL}>
+    Go to stage
+  </NavItem>
 );

components/Stage/StageNav.tsx

@@ -2,7 +2,7 @@ import { styled } from '@storybook/theming';
 import { Icon, Logos, Clipboard, Button } from '@storybook/design-system';
 import { styles, NavItem } from '@storybook/components-marketing';
 import { SkipNavLink as RSkipNavLink } from '@reach/skip-nav';
-import { DISCORD_URL, SITE_URL, TWITTER_URL } from '@lib/constants';
+import { DISCORD_URL, SITE_URL, STAGE_URL, TWITTER_URL } from '@lib/constants';
 import { LinkWrapper } from '@components/LinkWrapper';
 
 const { spacing, color, breakpoints, typography } = styles;
@@ -80,7 +80,7 @@ const NavLinks = styled.div`
 // Workaround for TS 2590 error
 const SkipNavLink: any = RSkipNavLink;
 
-const copyUrl = `${SITE_URL}/stage/main/`;
+const copyUrl = `${SITE_URL}${STAGE_URL}/`;
 
 interface StageNavProps {
   transparent?: boolean;

components/icons/icon-bring-stage.tsx

@@ -1,11 +1,5 @@
 const BringToStageIcon = () => (
-  <svg
-    width={20}
-    style={{ marginRight: '10px' }}
-    height={20}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width={24} height={24} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.889 3.333v12.445a.889.889 0 11-1.778 0M5.111 15.778v-8.89"
       stroke="#fff"

lib/constants.ts

@@ -90,6 +90,7 @@ export const YOUTUBE_URL = 'https://www.youtube.com/c/StorybookJS';
 export const GITHUB_URL = 'https://github.com/storybookjs';
 export const SNEAK_PEEK_URL = '/#sneak-peek';
 export const CFP_URL = '/#cfp';
+export const STAGE_URL = '/stage/main';
 
 // https://www.labnol.org/calendar/
 export const CALENDAR_URL =

pages/stage/[slug].tsx

@@ -6,7 +6,7 @@ import { SkipNavContent as RSkipNavContent } from '@reach/skip-nav';
 
 import { getAllStages } from '@lib/cms-api';
 import { Stage } from '@lib/types';
-import { META_DESCRIPTION } from '@lib/constants';
+import { META_DESCRIPTION, STAGE_URL } from '@lib/constants';
 import { StageNav } from '@components/Stage/StageNav';
 
 const SkipNavContent: any = RSkipNavContent;
@@ -31,7 +31,7 @@ export default function MainStagePage({ stage }: Props) {
         `}
       />
       <Page meta={meta}>
-        <StageNav transparent activeRoute={'/stage/main'} />
+        <StageNav transparent activeRoute={STAGE_URL} />
         <SkipNavContent />
         <main>
           <StagePage stage={stage} />