Q&A banner for website

docs/components/Announce.tsx

@@ -14,7 +14,11 @@ export function Announce({ children, ...props }: AnnounceProps) {
     <div
       css={{
         '--focus': '#fff',
-        background: 'var(--brand-bg)',
+        // standard styling (blue)
+        // background: 'var(--brand-bg)',
+        // special styling (orange gradient)
+        backgroundColor: 'var(--grad4-2)',
+        backgroundImage: `linear-gradient(116.01deg, var(--grad4-2), var(--grad4-1))`,
         color: 'var(--brand-text)',
         padding: '1rem',
         textAlign: 'center',

docs/components/Page.tsx

@@ -3,14 +3,14 @@ import { useRef, Fragment, ReactNode } from 'react';
 import { useRouter } from 'next/router';
 import { jsx } from '@emotion/react';
 import Head from 'next/head';
-import Link from 'next/link';
 
 import { useMediaQuery } from '../lib/media';
 import type { Heading } from '../lib/getHeadings';
 import { Announce } from '../components/Announce';
 import { TableOfContents } from './docs/TableOfContents';
 import { Wrapper } from './primitives/Wrapper';
 import { EditButton } from './primitives/EditButton';
+import { Emoji } from './primitives/Emoji';
 import { Breadcrumbs } from './Breadcrumbs';
 import { Sidebar } from './docs/Sidebar';
 import { Stack } from './primitives/Stack';
@@ -20,13 +20,35 @@ import { Footer } from './Footer';
 function Announcement() {
   return (
     <Announce>
-      Keystone 6 is in <Link href="/updates/roadmap">Community Preview</Link>! For Keystone 5 docs
-      visit{' '}
-      <a href="https://v5.keystonejs.com" rel="noopener noreferrer" target="_blank">
-        v5.keystonejs.com
+      <Emoji symbol="🎤" alt="Microphone" />{' '}
+      <a
+        href="https://306ucv95ugh.typeform.com/to/TbFERbep"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Join us
+      </a>{' '}
+      for our first <strong>Community Q&A</strong> next{' '}
+      <strong>Tuesday Sep 21st @ 3–4pm AEST</strong> –{' '}
+      <a
+        href="https://306ucv95ugh.typeform.com/to/TbFERbep"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Register now
       </a>
+      !
     </Announce>
   );
+  // return (
+  //   <Announce>
+  //     Keystone 6 is in <Link href="/updates/roadmap">Community Preview</Link>! For Keystone 5 docs
+  //     visit{' '}
+  //     <a href="https://v5.keystonejs.com" rel="noopener noreferrer" target="_blank">
+  //       v5.keystonejs.com
+  //     </a>
+  //   </Announce>
+  // );
 }
 
 function OpenGraph({

docs/components/docs/Keystone5DocsCTA.tsx

@@ -0,0 +1,23 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Alert } from '../primitives/Alert';
+
+export function Keystone5DocsCTA() {
+  return (
+    <Alert css={{ margin: '2rem 0' }}>
+      <span
+        css={{
+          display: 'inline-block',
+          margin: '0 1rem 0rem 0',
+        }}
+      >
+        Using <strong>Keystone 5</strong>? Find the docs at{' '}
+        <a href="https://v5.keystonejs.com/documentation" target="_blank">
+          v5.keystonejs.com
+        </a>
+      </span>
+    </Alert>
+  );
+}

docs/pages/docs/index.tsx

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import Link from 'next/link';
 
 import { CommunitySlackCTA } from '../../components/docs/CommunitySlackCTA';
+import { Keystone5DocsCTA } from '../../components/docs/Keystone5DocsCTA';
 import { Examples } from '../../components/docs/ExamplesList';
 import { Walkthroughs } from '../../components/docs/WalkthroughsList';
 import { Type } from '../../components/primitives/Type';
@@ -32,6 +33,7 @@ export default function Docs() {
         Developer Docs
       </Type>
 
+      <Keystone5DocsCTA />
       <CommunitySlackCTA />
 
       <Type as="h2" look="heading30" margin="0 0 1rem 0">