From 383b840dc7eae6e5482eb818c3164956226680e9 Mon Sep 17 00:00:00 2001
From: Rene Brandel <renbran@amazon.com>
Date: Wed, 11 Oct 2023 19:14:40 -0400
Subject: [PATCH 1/2] Added What's New Banner

---
 src/components/Hero/styles.tsx           |  2 +-
 src/components/WhatsNewBanner/index.tsx  | 24 ++++++++++++++++++++++++
 src/components/WhatsNewBanner/styles.tsx | 12 ++++++++++++
 src/pages/index.tsx                      |  5 +++++
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WhatsNewBanner/index.tsx
 create mode 100644 src/components/WhatsNewBanner/styles.tsx

diff --git a/src/components/Hero/styles.tsx b/src/components/Hero/styles.tsx
index acc0a247946..d8960a97612 100644
--- a/src/components/Hero/styles.tsx
+++ b/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;
diff --git a/src/components/WhatsNewBanner/index.tsx b/src/components/WhatsNewBanner/index.tsx
new file mode 100644
index 00000000000..95dd6e14665
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/WhatsNewBanner/styles.tsx b/src/components/WhatsNewBanner/styles.tsx
new file mode 100644
index 00000000000..8daeea9d62b
--- /dev/null
+++ b/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;
+  }
+`;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d1b6ee969e8..81473b63399 100644
--- a/src/pages/index.tsx
+++ b/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>

From f1cfefaf3b5b2c496798da5ec117abe8759db8c9 Mon Sep 17 00:00:00 2001
From: Rene Brandel <renbran@amazon.com>
Date: Wed, 11 Oct 2023 19:19:48 -0400
Subject: [PATCH 2/2] addressed based on Janaina's feedback

---
 src/components/FeaturesGrid/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FeaturesGrid/index.tsx b/src/components/FeaturesGrid/index.tsx
index fcecae0d90e..089364049a5 100644
--- a/src/components/FeaturesGrid/index.tsx
+++ b/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