Merge pull request #6002 from aws-amplify/renbran/home-banner

Added What's New Banner

src/components/FeaturesGrid/index.tsx

@@ -32,7 +32,7 @@ export default function FeaturesGrid() {
                 GraphQL API{' '}
                 <sup
                   style={{
-                    background: 'green',
+                    background: 'var(--color-orange-hv)',
                     padding: '4px 6px',
                     color: 'white',
                     borderRadius: 16

src/components/Hero/styles.tsx

@@ -1,4 +1,4 @@
-import styled from "@emotion/styled";
+import styled from '@emotion/styled';
 
 export const Hero = styled.div`
   display: flex;

src/components/WhatsNewBanner/index.tsx

@@ -0,0 +1,24 @@
+import { Link, View } from '@aws-amplify/ui-react';
+import { FiArrowRightCircle } from 'react-icons/fi';
+import { BannerContainer } from './styles';
+
+export default function WhatsNewBanner({ href, content }) {
+  return (
+    <BannerContainer>
+      <Link
+        href={href}
+        padding={'4px 16px'}
+        borderRadius={16}
+        backgroundColor={'var(--amplify-colors-neutral-90)'}
+        display={'inline-flex'}
+        color={'white'}
+      >
+        <span>
+          <b>What's New: </b>
+          {content}
+        </span>
+        <FiArrowRightCircle style={{ marginLeft: 8, alignSelf: 'center' }} />
+      </Link>
+    </BannerContainer>
+  );
+}

src/components/WhatsNewBanner/styles.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { MQTablet, MQLaptop } from '../media';
+
+export const BannerContainer = styled.div`
+  text-align: center;
+  display: none;
+
+  ${MQLaptop} {
+    display: block;
+    margin-top: 24px;
+  }
+`;

src/pages/index.tsx

@@ -19,6 +19,7 @@ import {
   SOCIAL_LINKS
 } from '../utils/globalnav';
 import React from 'react';
+import WhatsNewBanner from '../components/WhatsNewBanner';
 
 const meta = {
   title: 'Amplify Docs',
@@ -79,6 +80,10 @@ const Page = () => {
         currentSite={'Docs'}
       />
       <SecondaryNav />
+      <WhatsNewBanner
+        href="https://aws.amazon.com/blogs/mobile/announcing-aws-amplifys-graphql-api-cdk-construct-deploy-real-time-graphql-api-and-data-stack-on-aws/"
+        content="Amplify GraphQL API now available as CDK construct"
+      />
       <Hero>
         <h1 className="font-weight-300">Amplify Documentation</h1>
         <p>