Add CTA block for Web Box eCommerce Course

docs/components/content/AdvancedReactCta.tsx

@@ -0,0 +1,116 @@
+/** @jsx jsx */
+import type { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
+import Image from 'next/image';
+
+import wesBosCta from '../../public/assets/wesbos-cta.jpg';
+
+import { useMediaQuery } from '../../lib/media';
+import { Button } from '../primitives/Button';
+import { Type } from '../primitives/Type';
+import { ArrowR } from '../icons/ArrowR';
+import { Tick } from '../icons/Tick';
+import { Section } from './Section';
+
+export function AdvancedReactCta(props: HTMLAttributes<HTMLElement>) {
+  const mq = useMediaQuery();
+
+  return (
+    <Section
+      css={mq({
+        display: 'grid',
+        gridTemplateColumns: ['1fr', '1fr 1fr', '1fr 2fr', '1fr 3fr'],
+        gap: ['1.5rem', '3rem'],
+        alignItems: 'center',
+        borderRadius: '1rem',
+        padding: ['1rem', '1.5rem 3rem', null, '2rem 4rem', '2rem 6rem'],
+        background: 'var(--code-bg)',
+      })}
+      {...props}
+    >
+      <div
+        css={{
+          display: 'grid',
+          '& > div': {
+            display: 'inline-grid !important',
+            justifyContent: 'center',
+            alignSelf: 'center',
+          },
+        }}
+      >
+        <Image
+          src={wesBosCta}
+          alt="Wes Bos Avatar"
+          width={675}
+          height={900}
+          css={{
+            objectFit: 'cover',
+            borderRadius: '1rem',
+          }}
+        />
+      </div>
+      <div
+        css={{
+          paddingRight: '.3rem',
+        }}
+      >
+        <Type as="h2" look="heading24">
+          Learn Keystone for eCommerce with Wes Bos
+        </Type>
+        <Type as="p" look="body18" color="var(--muted)" margin="1rem 0">
+          Master eCommerce with Keystone, React, & GraphQL. Join Wes as he teaches you how to build
+          a full-stack online store with of today's best JavaScript technology.
+        </Type>
+        <ul
+          css={{
+            listStyle: 'none',
+            margin: '0 0 1.5rem 0',
+            padding: 0,
+            display: 'inline-block',
+            '& li': {
+              display: 'inline-flex',
+              alignItems: 'center',
+              marginRight: '1rem',
+              color: 'var(--muted)',
+            },
+            '& svg': {
+              height: '1.25rem',
+              margin: '0.25rem 0.5rem 0 0',
+            },
+          }}
+        >
+          <li>
+            <Tick grad="grad2" />
+            <Type look="body16" color="var(--muted)">
+              11 modules
+            </Type>
+          </li>
+          <li>
+            <Tick grad="grad2" />
+            <Type look="body16" color="var(--muted)">
+              70 videos
+            </Type>
+          </li>
+          <li>
+            <Tick grad="grad2" />
+            <Type look="body16" color="var(--muted)">
+              28,000 students
+            </Type>
+          </li>
+        </ul>
+        <div>
+          <Button
+            as="a"
+            look="soft"
+            size="small"
+            href="https://advancedreact.com/friend/KEYSTONE"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Course details <ArrowR />
+          </Button>
+        </div>
+      </div>
+    </Section>
+  );
+}

docs/pages/why-keystone.tsx

@@ -14,6 +14,7 @@ import { Automated } from '../components/icons/Automated';
 import { Migration } from '../components/icons/Migration';
 import { Section } from '../components/content/Section';
 import { Button } from '../components/primitives/Button';
+import { AdvancedReactCta } from '../components/content/AdvancedReactCta';
 import { EndCta } from '../components/content/EndCta';
 import { Emoji } from '../components/primitives/Emoji';
 import { Updates } from '../components/icons/Updates';
@@ -89,7 +90,7 @@ export default function WhyKeystonePage() {
             margin: '1rem 0',
           }}
         >
-          <Image src={adminUi} alt="TODO" width={3710} height={2195} />
+          <Image src={adminUi} alt="Depiction of Keystone’s Admin UI" width={3710} height={2195} />
         </div>
 
         <ul
@@ -367,12 +368,11 @@ export default function WhyKeystonePage() {
           <ul
             css={mq({
               display: 'grid',
-              gridTemplateColumns: ['1fr', '1fr 1fr 1fr'],
-              gap: '1.5rem',
+              gridTemplateColumns: ['1fr', '1fr 1fr'],
+              gap: '3rem',
               listStyle: 'none',
               padding: 0,
               margin: ['3rem auto 0 auto', '3rem 0 0 0'],
-              maxWidth: ['20rem', 'none'],
               '& svg': {
                 height: '2rem',
               },
@@ -423,28 +423,51 @@ export default function WhyKeystonePage() {
                 Try the Blog example →
               </a>
             </li>
-            <li>
-              <Type as="h3" look="heading36" id="ecommerce">
-                eCommerce
-              </Type>
-              <Type as="p" look="body18">
-                Keystone gives you the power and control you need to build a complete backend for
-                eCommerce, while making it easy to integrate platforms like Shopify and Stripe to
-                get things done. API first, make Keystone a key player in your eCommerce content
-                mesh.
-              </Type>
+          </ul>
+        </Section>
+
+        <Section
+          css={mq({
+            display: 'grid',
+            gridTemplateColumns: ['1fr', null, '1fr 1fr'],
+            gap: '3rem',
+          })}
+        >
+          <div>
+            <Type as="h3" look="heading36" id="ecommerce">
+              eCommerce
+            </Type>
+            <Type as="p" look="body18" margin="1rem 0">
+              Keystone gives you the power and control you need to build a complete backend for
+              eCommerce, while making it easy to integrate platforms like Shopify and Stripe to get
+              things done. API first, make Keystone a key player in your eCommerce content mesh.
+            </Type>
+            <a
+              href="https://github.com/keystonejs/keystone/tree/master/examples-staging/ecommerce"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Try the eCommerce example →
+            </a>
+          </div>
+          <div>
+            <TweetBox user="wesbos" img="/assets/wesbos-square.jpg" grad="grad2">
+              I use Keystone in my{' '}
               <a
-                href="https://github.com/keystonejs/keystone/tree/master/examples-staging/ecommerce"
+                href="https://advancedreact.com/friend/KEYSTONE"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Try the eCommerce example →
-              </a>
-            </li>
-          </ul>
+                Advanced React
+              </a>{' '}
+              course because it’s super quick to get my content types up and running, add custom
+              server-side cart & checkout logic, and the fine grain access control is just
+              fantastic!
+            </TweetBox>
+          </div>
         </Section>
 
-        {/* <Section>TODO: WES BOS COURSE LINK...</Section> */}
+        <AdvancedReactCta />
 
         <Section
           css={mq({