Add gen1 banner

src/components/Banner/Banner.module.scss

@@ -0,0 +1,12 @@
+.message-banner {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  border: 1px solid var(--amplify-colors-border-primary);
+  padding: var(--amplify-space-medium);
+  margin-bottom: var(--amplify-space-large);
+}
+
+.message-banner__inner {
+  flex-direction: row;
+}

src/components/Banner/Banner.tsx

@@ -0,0 +1,45 @@
+import { Flex, View, Text, Button } from "@aws-amplify/ui-react";
+import { IconInfo } from "./IconInfo";
+import styles from "./Banner.module.scss";
+
+interface BannerProps {
+  columnStart?: any;
+}
+
+export const Banner: React.FC<BannerProps> = ({
+  columnStart = {
+    base: 1,
+    small: 1,
+    medium: 1,
+    large: 2,
+  },
+}) => {
+  return (
+    <View className={styles["message-banner"]} columnStart={columnStart}>
+      <Flex direction="column">
+        <Flex direction="row" gap="xxs" alignItems="center">
+          <IconInfo />
+          <Text className={styles["message-banner__content"]}>
+            The courses on this site teach Amplify Gen 1. If you&apos;re
+            creating a new app, we recommend using Gen 2 which has enhanced
+            capabilities.
+          </Text>
+        </Flex>
+        <View>
+          <Button
+            as="a"
+            href="https://docs.amplify.aws/"
+            size="small"
+            gap="small"
+            target="_blank"
+            colorTheme="overlay"
+            rel="noopener noreferrer"
+            className="message-banner__button"
+          >
+            Get started with Gen 2
+          </Button>
+        </View>
+      </Flex>
+    </View>
+  );
+};

src/components/Banner/IconInfo.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Icon } from "@aws-amplify/ui-react";
+
+export const IconInfo = () => {
+  return (
+    <Icon
+      aria-hidden="true"
+      viewBox={{
+        minX: 0,
+        minY: 0,
+        width: 24,
+        height: 24,
+      }}
+    >
+      <path
+        d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+};

src/components/Banner/index.ts

@@ -0,0 +1 @@
+export { Banner } from "./Banner";

src/components/LessonLayout/LessonLayout.tsx

@@ -14,6 +14,7 @@ import { ShareThis } from "../ShareThis";
 import styles from "./LessonLayout.module.scss";
 import ArrowRightIconCustom from "../../ui-components/ArrowRightIconCustom";
 import { CardLayoutData } from "../../types/models";
+import { Banner } from "../Banner";
 
 export function LessonLayout({
   course,
@@ -45,141 +46,151 @@ export function LessonLayout({
   });
 
   return (
-    <Grid
-      columnStart={{
-        base: "1",
-        small: "1",
-        medium: "1",
-        large: "2",
-      }}
-      columnGap="60px"
-      templateColumns={{
-        base: "minmax(0, 1fr)",
-        small: "minmax(0, 1fr)",
-        medium: "minmax(0, 1fr)",
-        large: "70% 1fr",
-      }}
-    >
-      {mainChildren}
-      <Flex
-        display={{
-          base: "none",
-          small: "none",
-          medium: "none",
-          large: "flex",
+    <>
+      <Banner
+        columnStart={{
+          base: 1,
+          small: 1,
+          medium: 1,
+          large: 2,
+        }}
+      />
+      <Grid
+        columnStart={{
+          base: "1",
+          small: "1",
+          medium: "1",
+          large: "2",
         }}
-        direction={{
-          base: "column",
-          small: "column",
-          medium: "row",
-          large: "column",
-          xl: "column",
+        columnGap="60px"
+        templateColumns={{
+          base: "minmax(0, 1fr)",
+          small: "minmax(0, 1fr)",
+          medium: "minmax(0, 1fr)",
+          large: "70% 1fr",
         }}
-        rowStart="1"
-        columnStart="2"
       >
-        {showInSidebarBreakpoint && (
-          <Flex direction="column">
-            {sidebarChildren}
-            <View marginTop="40px">
+        {mainChildren}
+        <Flex
+          display={{
+            base: "none",
+            small: "none",
+            medium: "none",
+            large: "flex",
+          }}
+          direction={{
+            base: "column",
+            small: "column",
+            medium: "row",
+            large: "column",
+            xl: "column",
+          }}
+          rowStart="1"
+          columnStart="2"
+        >
+          {showInSidebarBreakpoint && (
+            <Flex direction="column">
+              {sidebarChildren}
+              <View marginTop="40px">
+                <CourseContributors contributors={contributors} />
+              </View>
+              <View marginTop="40px">
+                <ShareThis />
+              </View>
+            </Flex>
+          )}
+        </Flex>
+        {!showInSidebarBreakpoint && (
+          <Flex direction="column" columnStart={1}>
+            <View marginTop="64px">
               <CourseContributors contributors={contributors} />
             </View>
-            <View marginTop="40px">
+            <View marginTop="64px">
               <ShareThis />
             </View>
           </Flex>
         )}
-      </Flex>
-      {!showInSidebarBreakpoint && (
-        <Flex direction="column" columnStart={1}>
-          <View marginTop="64px">
-            <CourseContributors contributors={contributors} />
-          </View>
-          <View marginTop="64px">
-            <ShareThis />
-          </View>
-        </Flex>
-      )}
-      <Grid
-        marginTop={{
-          base: "64px",
-          small: "64px",
-          medium: "64px",
-          large: "64px",
-          xl: "128px",
-        }}
-        templateRows={{
-          small: "auto",
-          medium: "auto 1fr",
-        }}
-        templateColumns={{
-          base: "1fr",
-          small: "1fr",
-          medium: "1fr 1fr",
-        }}
-        rowGap="32px"
-        columnStart={1}
-        columnEnd={{
-          base: 1,
-          small: 1,
-          medium: 1,
-          large: -1,
-          xl: -1,
-        }}
-      >
-        <Text
-          fontFamily="'Amazon Ember Display'"
-          fontWeight="100"
-          fontSize="2rem"
-        >
-          More Courses
-        </Text>
-        <View
-          order={{
+        <Grid
+          marginTop={{
+            base: "64px",
+            small: "64px",
+            medium: "64px",
+            large: "64px",
+            xl: "128px",
+          }}
+          templateRows={{
+            small: "auto",
+            medium: "auto 1fr",
+          }}
+          templateColumns={{
+            base: "1fr",
+            small: "1fr",
+            medium: "1fr 1fr",
+          }}
+          rowGap="32px"
+          columnStart={1}
+          columnEnd={{
             base: 1,
             small: 1,
-            medium: 0,
+            medium: 1,
+            large: -1,
+            xl: -1,
           }}
-          alignSelf="center"
-          className={sectionButtonClassNames}
         >
-          <Button
-            aria-label="All Courses"
-            width="100%"
-            gap="10px"
-            onClick={() => {
-              router.push("/courses");
-            }}
+          <Text
+            fontFamily="'Amazon Ember Display'"
+            fontWeight="100"
+            fontSize="2rem"
           >
-            All courses
-            <ArrowRightIconCustom />
-          </Button>
-        </View>
-        <View columnStart={1} columnEnd={-1}>
-          <CardLayoutCollection
-            cardLayouts={cardLayoutData}
-            type="grid"
-            templateColumns={{
-              base: "1fr",
-              small: "1fr",
-              medium: "1fr 1fr",
-              large: "1fr 1fr",
-              xl: "1fr 1fr 1fr",
+            More Courses
+          </Text>
+          <View
+            order={{
+              base: 1,
+              small: 1,
+              medium: 0,
             }}
-            gap="64px 20px"
-            limit={
-              useBreakpointValue({
-                base: 1,
-                small: 1,
-                medium: 2,
-                large: 2,
-                xl: 3,
-              }) as number
-            }
-            filter={(e: CardLayoutData) => e.course.id !== course.id}
-          />
-        </View>
+            alignSelf="center"
+            className={sectionButtonClassNames}
+          >
+            <Button
+              aria-label="All Courses"
+              width="100%"
+              gap="10px"
+              onClick={() => {
+                router.push("/courses");
+              }}
+            >
+              All courses
+              <ArrowRightIconCustom />
+            </Button>
+          </View>
+          <View columnStart={1} columnEnd={-1}>
+            <CardLayoutCollection
+              cardLayouts={cardLayoutData}
+              type="grid"
+              templateColumns={{
+                base: "1fr",
+                small: "1fr",
+                medium: "1fr 1fr",
+                large: "1fr 1fr",
+                xl: "1fr 1fr 1fr",
+              }}
+              gap="64px 20px"
+              limit={
+                useBreakpointValue({
+                  base: 1,
+                  small: 1,
+                  medium: 2,
+                  large: 2,
+                  xl: 3,
+                }) as number
+              }
+              filter={(e: CardLayoutData) => e.course.id !== course.id}
+            />
+          </View>
+        </Grid>
       </Grid>
-    </Grid>
+    </>
   );
 }

src/pages/about/[contributor].tsx

@@ -29,6 +29,7 @@ import { CardLayoutData, Context, MetaInfo } from "../../types/models";
 import { ParsedUrlQuery } from "querystring";
 import { getCardLayoutData } from "../../lib/getData";
 import { MetaLayout } from "../../components/MetaLayout";
+import { Banner } from "../../components/Banner";
 
 const profilePicBorderSize = {
   base: "128px",
@@ -131,6 +132,14 @@ export default function ContributorPage(data: {
       showBreadcrumb={true}
       breadcrumbCallback={callback}
     >
+      <Banner
+        columnStart={{
+          base: 1,
+          small: 1,
+          medium: 1,
+          large: 2,
+        }}
+      />
       <Flex
         columnStart={{
           base: "1",

src/pages/about/index.tsx

@@ -69,10 +69,10 @@ export default function AboutPage(data: any) {
             This site contains a collection of courses on{" "}
             <a
               target="_blank"
-              href="https://docs.amplify.aws"
+              href="https://docs.amplify.aws/gen1"
               rel="noopener noreferrer"
             >
-              AWS Amplify
+              AWS Amplify Gen 1
             </a>{" "}
             brought to you by the Developer Advocacy team working on the
             product.