Merge branch 'main' of https://github.com/vercel/commerce into vercel-main

components/ui/Hero/Hero.module.css

@@ -1,6 +1,30 @@
 .root {
-  @apply mx-auto grid grid-cols-1 py-32 gap-4;
-  @screen md {
-    @apply grid-cols-2;
+  @apply flex flex-col py-16 mx-auto;
+}
+
+.title {
+  @apply text-accent-0 font-extrabold text-4xl leading-none tracking-tight;
+}
+
+.description {
+  @apply mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl;
+}
+
+@screen lg {
+  .root {
+    @apply flex-row items-start justify-center py-32;
+  }
+  .title {
+    @apply text-5xl max-w-xl text-right leading-10 -mt-3;
+    line-height: 3.5rem;
+  }
+  .description {
+    @apply mt-0 ml-6;
+  }
+}
+
+@screen xl {
+  .title {
+    @apply text-6xl;
   }
 }

components/ui/Hero/Hero.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
-import { RightArrow } from '@components/icons'
+import { ArrowRight } from '@components/icons'
 import s from './Hero.module.css'
 import Link from 'next/link'
-interface Props {
+interface HeroProps {
   className?: string
   headline: string
   description: string,
@@ -14,7 +14,7 @@ interface Props {
 const Hero: FC<Props> = ({ headline, description, linkText, linkUrl }) => {
 
   return (
-    <div className="bg-black">
+    <div className="bg-accent-9 border-b border-t border-accent-2">
       <Container>
         <div className={s.root}>
           <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">