From 44c66665ee69ee63cd7155cc0cb9ade0e31264c5 Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 15:17:11 +0800
Subject: [PATCH 01/10] feat: login page banner

---
 .../FeatureBanner/FeatureBanner.tsx           | 48 +++++++++++++++++++
 frontend/src/features/login/LoginPage.tsx     |  6 +++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/components/FeatureBanner/FeatureBanner.tsx

diff --git a/frontend/src/components/FeatureBanner/FeatureBanner.tsx b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
new file mode 100644
index 0000000000..2a50eba3c1
--- /dev/null
+++ b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
@@ -0,0 +1,48 @@
+import { Box, Center, Flex, Text, useMultiStyleConfig } from '@chakra-ui/react'
+
+import { BannerVariant } from '~theme/components/Banner'
+import Button from '~components/Button'
+
+import { textStyles } from '../../theme/textStyles'
+
+export interface FeatureBannerProps {
+  variant?: BannerVariant
+  bannerColor?: string
+  title?: string
+  body: string
+}
+
+export const FeatureBanner = ({
+  variant = 'info',
+  bannerColor = 'primary.600',
+  title,
+  body,
+}: FeatureBannerProps): JSX.Element => {
+  const styles = useMultiStyleConfig('Banner', { variant })
+
+  return (
+    <Box __css={styles.banner} bgColor={bannerColor}>
+      <Flex sx={styles.item} placeContent="center" verticalAlign="middle">
+        <Center mr="1.5rem">
+          <Text textStyle="h6">{body}</Text>
+        </Center>
+        <Button
+          sx={{
+            ...styles.button,
+            ...textStyles['subhead-2'],
+            minHeight: 'auto',
+          }}
+          variant="solid"
+          as="a"
+          href="https://go.gov.sg/formsg-guide-payments"
+          target="_blank"
+          borderColor="white"
+          bgColor={bannerColor}
+          _hover={{ bgColor: 'white', color: bannerColor }}
+        >
+          Learn more
+        </Button>
+      </Flex>
+    </Box>
+  )
+}
diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
index 2524f2a4bc..cb42be4ed9 100644
--- a/frontend/src/features/login/LoginPage.tsx
+++ b/frontend/src/features/login/LoginPage.tsx
@@ -12,6 +12,7 @@ import { useLocalStorage } from '~hooks/useLocalStorage'
 import { getBannerProps } from '~utils/getBannerProps'
 import { sendLoginOtp, verifyLoginOtp } from '~services/AuthService'
 import { Banner } from '~components/Banner'
+import { FeatureBanner } from '~components/FeatureBanner/FeatureBanner'
 import Link from '~components/Link'
 import { AppGrid } from '~templates/AppGrid'
 
@@ -156,6 +157,11 @@ export const LoginPage = (): JSX.Element => {
           {bannerProps.msg}
         </Banner>
       ) : null}
+      <FeatureBanner
+        variant={bannerProps?.variant ?? 'info'}
+        bannerColor="primary.600"
+        body="You can now collect payments directly on your form!"
+      />
       <BaseGridLayout flex={1}>
         <NonMobileSidebarGridArea>
           <LoginImageSvgr maxW="100%" aria-hidden />

From 593f093e8d177dc5b24086587c2f92a07285c217 Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 15:31:06 +0800
Subject: [PATCH 02/10] ref: pass links into FeatureBanner

- use link constants for payments copies
---
 frontend/src/components/FeatureBanner/FeatureBanner.tsx    | 4 +++-
 frontend/src/constants/links.ts                            | 2 ++
 frontend/src/features/login/LoginPage.tsx                  | 2 ++
 .../src/features/rollout-announcement/Announcements.tsx    | 4 +++-
 frontend/src/features/whats-new/FeatureUpdateList.ts       | 5 +++--
 .../features/workspace/components/WorkspacePageContent.tsx | 7 ++++---
 6 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FeatureBanner/FeatureBanner.tsx b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
index 2a50eba3c1..0edd5e34c7 100644
--- a/frontend/src/components/FeatureBanner/FeatureBanner.tsx
+++ b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
@@ -10,6 +10,7 @@ export interface FeatureBannerProps {
   bannerColor?: string
   title?: string
   body: string
+  learnMoreLink: string
 }
 
 export const FeatureBanner = ({
@@ -17,6 +18,7 @@ export const FeatureBanner = ({
   bannerColor = 'primary.600',
   title,
   body,
+  learnMoreLink,
 }: FeatureBannerProps): JSX.Element => {
   const styles = useMultiStyleConfig('Banner', { variant })
 
@@ -34,7 +36,7 @@ export const FeatureBanner = ({
           }}
           variant="solid"
           as="a"
-          href="https://go.gov.sg/formsg-guide-payments"
+          href={learnMoreLink}
           target="_blank"
           borderColor="white"
           bgColor={bannerColor}
diff --git a/frontend/src/constants/links.ts b/frontend/src/constants/links.ts
index bca8e83ac5..e67c6cee92 100644
--- a/frontend/src/constants/links.ts
+++ b/frontend/src/constants/links.ts
@@ -33,6 +33,8 @@ export const GUIDE_EMAIL_RELIABILITY =
 export const GUIDE_PREFILL = 'https://go.gov.sg/formsg-guide-prefills'
 export const GUIDE_STRIPE_ONBOARDING =
   'https://go.gov.sg/formsg-stripe-onboarding'
+export const GUIDE_PAYMENTS_PUBLIC = 'https://go.gov.sg/formsg-guide-payments'
+export const GUIDE_PAYMENTS_ENTRY = 'https://go.gov.sg/formsg-payment-overview'
 
 export const ACCEPTED_FILETYPES_SPREADSHEET = 'https://go.gov.sg/formsg-cwl'
 
diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
index cb42be4ed9..2c459ae564 100644
--- a/frontend/src/features/login/LoginPage.tsx
+++ b/frontend/src/features/login/LoginPage.tsx
@@ -6,6 +6,7 @@ import { Box, chakra, Flex, GridItem, GridProps, Text } from '@chakra-ui/react'
 import { AppFooter } from '~/app/AppFooter'
 
 import { ReactComponent as BrandLogoSvg } from '~assets/svgs/brand/brand-hort-colour.svg'
+import { GUIDE_PAYMENTS_PUBLIC } from '~constants/links'
 import { LOGGED_IN_KEY } from '~constants/localStorage'
 import { LANDING_ROUTE } from '~constants/routes'
 import { useLocalStorage } from '~hooks/useLocalStorage'
@@ -161,6 +162,7 @@ export const LoginPage = (): JSX.Element => {
         variant={bannerProps?.variant ?? 'info'}
         bannerColor="primary.600"
         body="You can now collect payments directly on your form!"
+        learnMoreLink={GUIDE_PAYMENTS_PUBLIC}
       />
       <BaseGridLayout flex={1}>
         <NonMobileSidebarGridArea>
diff --git a/frontend/src/features/rollout-announcement/Announcements.tsx b/frontend/src/features/rollout-announcement/Announcements.tsx
index d1746dfefc..362b3f540e 100644
--- a/frontend/src/features/rollout-announcement/Announcements.tsx
+++ b/frontend/src/features/rollout-announcement/Announcements.tsx
@@ -1,3 +1,5 @@
+import { GUIDE_PAYMENTS_ENTRY } from '~constants/links'
+
 import PaymentsAnnouncementGraphic from './assets/payments.json'
 
 // When updating this, remember to update the ROLLOUT_ANNOUNCEMENT_KEY_PREFIX with the new date
@@ -8,7 +10,7 @@ export const NEW_FEATURES = [
     title: 'Collect payments on your form',
     description:
       'Citizens can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow.',
-    learnMoreLink: 'https://go.gov.sg/formsg-payment-overview',
+    learnMoreLink: GUIDE_PAYMENTS_ENTRY,
     animationData: PaymentsAnnouncementGraphic,
   },
 ]
diff --git a/frontend/src/features/whats-new/FeatureUpdateList.ts b/frontend/src/features/whats-new/FeatureUpdateList.ts
index 510331ef63..a0ab0796f8 100644
--- a/frontend/src/features/whats-new/FeatureUpdateList.ts
+++ b/frontend/src/features/whats-new/FeatureUpdateList.ts
@@ -1,6 +1,8 @@
 import dedent from 'dedent'
 import { JsonObject, RequireExactlyOne } from 'type-fest'
 
+import { GUIDE_PAYMENTS_ENTRY } from '~constants/links'
+
 import Animation1 from './assets/1-payments.json'
 import Animation2 from './assets/2-search-and-filter.json'
 import Animation3 from './assets/3-dnd.json'
@@ -33,8 +35,7 @@ export const FEATURE_UPDATE_LIST: FeatureUpdateList = {
     {
       title: 'Collect payments on your form',
       date: new Date('31 May 2023 GMT+8'),
-      description:
-        'Citizens can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow. [Learn more](https://go.gov.sg/formsg-payment-overview)',
+      description: `Citizens can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow. [Learn more](${GUIDE_PAYMENTS_ENTRY})`,
       image: {
         animationData: Animation1,
         alt: 'Collect payments on your form',
diff --git a/frontend/src/features/workspace/components/WorkspacePageContent.tsx b/frontend/src/features/workspace/components/WorkspacePageContent.tsx
index ff4fa59242..7fcae618e2 100644
--- a/frontend/src/features/workspace/components/WorkspacePageContent.tsx
+++ b/frontend/src/features/workspace/components/WorkspacePageContent.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { Box, Container, Grid } from '@chakra-ui/react'
 
+import { GUIDE_PAYMENTS_ENTRY } from '~constants/links'
 import { ROLLOUT_ANNOUNCEMENT_KEY_PREFIX } from '~constants/localStorage'
 import { useLocalStorage } from '~hooks/useLocalStorage'
 import InlineMessage from '~components/InlineMessage'
@@ -39,6 +40,8 @@ export const WorkspacePageContent = ({
     [isUserLoading, hasSeenAnnouncement],
   )
 
+  const dashboardMessage = `Introducing payments! Citizens can now pay for fees and services directly on your form. [Learn more](${GUIDE_PAYMENTS_ENTRY})`
+
   return totalFormsCount === 0 ? (
     <EmptyWorkspace
       handleOpenCreateFormModal={handleCreateFormModalOpen}
@@ -62,9 +65,7 @@ export const WorkspacePageContent = ({
         py="1rem"
       >
         <InlineMessage useMarkdown mb="2rem" mx="-2rem">
-          Introducing payments! Citizens can now pay for fees and services
-          directly on your form. [Learn
-          more](https://go.gov.sg/formsg-payment-overview)
+          {dashboardMessage}
         </InlineMessage>
         <WorkspaceHeader
           handleOpenCreateFormModal={handleCreateFormModalOpen}

From 3c32a27cb2840bdf7119e218cbf35e0447da72cf Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 15:34:16 +0800
Subject: [PATCH 03/10] fix: contrast login banners from background

---
 frontend/src/components/Banner/Banner.tsx |  4 +++-
 frontend/src/features/login/LoginPage.tsx | 10 ++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Banner/Banner.tsx b/frontend/src/components/Banner/Banner.tsx
index fd128ccc26..0d1027db23 100644
--- a/frontend/src/components/Banner/Banner.tsx
+++ b/frontend/src/components/Banner/Banner.tsx
@@ -21,6 +21,7 @@ export interface BannerProps {
   children: string
   useMarkdown?: boolean
   showCloseButton?: boolean
+  bannerColor?: string
 }
 
 export const Banner = ({
@@ -28,6 +29,7 @@ export const Banner = ({
   children,
   useMarkdown = false,
   showCloseButton,
+  bannerColor,
 }: BannerProps): JSX.Element => {
   const { isOpen, onToggle } = useDisclosure({
     defaultIsOpen: true,
@@ -45,7 +47,7 @@ export const Banner = ({
 
   return (
     <Collapse style={{ overflow: 'visible' }} in={isOpen} animateOpacity>
-      <Box __css={styles.banner}>
+      <Box __css={styles.banner} bgColor={bannerColor}>
         <Flex sx={styles.item}>
           <Flex>
             <Icon
diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
index 2c459ae564..d1a29b3bf2 100644
--- a/frontend/src/features/login/LoginPage.tsx
+++ b/frontend/src/features/login/LoginPage.tsx
@@ -151,16 +151,22 @@ export const LoginPage = (): JSX.Element => {
     await sendLoginOtp(email).then(({ otpPrefix }) => setOtpPrefix(otpPrefix))
   }
 
+  const bannerColor = 'primary.600' // So banner colors are different from the blue background (left of login screen).
+
   return (
     <BackgroundBox>
       {bannerProps ? (
-        <Banner useMarkdown variant={bannerProps.variant}>
+        <Banner
+          useMarkdown
+          variant={bannerProps.variant}
+          bannerColor={bannerColor}
+        >
           {bannerProps.msg}
         </Banner>
       ) : null}
       <FeatureBanner
         variant={bannerProps?.variant ?? 'info'}
-        bannerColor="primary.600"
+        bannerColor={bannerColor}
         body="You can now collect payments directly on your form!"
         learnMoreLink={GUIDE_PAYMENTS_PUBLIC}
       />

From c3c8aecfc10b1183f2f15ea325b4c2d5eb493565 Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 16:03:19 +0800
Subject: [PATCH 04/10] fix: hover colour based on figma

---
 .../src/components/FeatureBanner/FeatureBanner.tsx | 14 +++++++++-----
 frontend/src/features/login/LoginPage.tsx          |  5 +++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FeatureBanner/FeatureBanner.tsx b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
index 0edd5e34c7..46808e98c4 100644
--- a/frontend/src/components/FeatureBanner/FeatureBanner.tsx
+++ b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
@@ -7,7 +7,7 @@ import { textStyles } from '../../theme/textStyles'
 
 export interface FeatureBannerProps {
   variant?: BannerVariant
-  bannerColor?: string
+  bannerColorIntensity?: 500 | 600 // Update accordingly if other banner colors are needed
   title?: string
   body: string
   learnMoreLink: string
@@ -15,7 +15,7 @@ export interface FeatureBannerProps {
 
 export const FeatureBanner = ({
   variant = 'info',
-  bannerColor = 'primary.600',
+  bannerColorIntensity = 600,
   title,
   body,
   learnMoreLink,
@@ -23,7 +23,7 @@ export const FeatureBanner = ({
   const styles = useMultiStyleConfig('Banner', { variant })
 
   return (
-    <Box __css={styles.banner} bgColor={bannerColor}>
+    <Box __css={styles.banner} bgColor={`primary.${bannerColorIntensity}`}>
       <Flex sx={styles.item} placeContent="center" verticalAlign="middle">
         <Center mr="1.5rem">
           <Text textStyle="h6">{body}</Text>
@@ -39,8 +39,12 @@ export const FeatureBanner = ({
           href={learnMoreLink}
           target="_blank"
           borderColor="white"
-          bgColor={bannerColor}
-          _hover={{ bgColor: 'white', color: bannerColor }}
+          bg="transparent"
+          _hover={{
+            color: 'white',
+            borderColor: 'white',
+            bg: `primary.${bannerColorIntensity - 100}`,
+          }}
         >
           Learn more
         </Button>
diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
index d1a29b3bf2..469ef48042 100644
--- a/frontend/src/features/login/LoginPage.tsx
+++ b/frontend/src/features/login/LoginPage.tsx
@@ -151,7 +151,8 @@ export const LoginPage = (): JSX.Element => {
     await sendLoginOtp(email).then(({ otpPrefix }) => setOtpPrefix(otpPrefix))
   }
 
-  const bannerColor = 'primary.600' // So banner colors are different from the blue background (left of login screen).
+  const bannerColorIntensity = 600
+  const bannerColor = `primary.${bannerColorIntensity}` // So banner colors are different from the blue background (left of login screen).
 
   return (
     <BackgroundBox>
@@ -166,7 +167,7 @@ export const LoginPage = (): JSX.Element => {
       ) : null}
       <FeatureBanner
         variant={bannerProps?.variant ?? 'info'}
-        bannerColor={bannerColor}
+        bannerColorIntensity={bannerColorIntensity}
         body="You can now collect payments directly on your form!"
         learnMoreLink={GUIDE_PAYMENTS_PUBLIC}
       />

From 845a70115dd540aa7f08d49794b18dcb46b991ae Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 16:12:15 +0800
Subject: [PATCH 05/10] chore: remove unnecessary variant def

---
 frontend/src/features/login/LoginPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
index 469ef48042..3c5c2019bc 100644
--- a/frontend/src/features/login/LoginPage.tsx
+++ b/frontend/src/features/login/LoginPage.tsx
@@ -166,7 +166,6 @@ export const LoginPage = (): JSX.Element => {
         </Banner>
       ) : null}
       <FeatureBanner
-        variant={bannerProps?.variant ?? 'info'}
         bannerColorIntensity={bannerColorIntensity}
         body="You can now collect payments directly on your form!"
         learnMoreLink={GUIDE_PAYMENTS_PUBLIC}

From 7ecdd8a50cc2f3a89a6fb866a25b80fc51ca9feb Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 16:52:04 +0800
Subject: [PATCH 06/10] feat: add h5 and h6 textStyles

---
 frontend/src/theme/textStyles.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/theme/textStyles.ts b/frontend/src/theme/textStyles.ts
index dbd8af377d..e63832f9d0 100644
--- a/frontend/src/theme/textStyles.ts
+++ b/frontend/src/theme/textStyles.ts
@@ -69,6 +69,20 @@ export const textStyles = {
     letterSpacing: '-0.014em',
     fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",
   },
+  h5: {
+    fontWeight: 600,
+    fontSize: '1.125rem',
+    lineHeight: '1.5rem',
+    letterSpacing: '-0.014em',
+    fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",
+  },
+  h6: {
+    fontWeight: 500,
+    fontSize: '1rem',
+    lineHeight: '1.5rem',
+    letterSpacing: '-0.014em',
+    fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",
+  },
   'subhead-1': {
     fontWeight: 500,
     fontSize: '1rem',

From e4b22a118cfdf79ea623f3ebbc9dfdc798d06734 Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Tue, 6 Jun 2023 16:53:06 +0800
Subject: [PATCH 07/10] feat: landing page banner

---
 .../FeatureBanner/FeatureBanner.tsx           | 70 ++++++++++++-------
 frontend/src/pages/Landing/LandingPage.tsx    |  7 ++
 2 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/FeatureBanner/FeatureBanner.tsx b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
index 46808e98c4..631f4cfcb7 100644
--- a/frontend/src/components/FeatureBanner/FeatureBanner.tsx
+++ b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
@@ -1,4 +1,11 @@
-import { Box, Center, Flex, Text, useMultiStyleConfig } from '@chakra-ui/react'
+import {
+  Box,
+  Center,
+  Flex,
+  Text,
+  useMultiStyleConfig,
+  VStack,
+} from '@chakra-ui/react'
 
 import { BannerVariant } from '~theme/components/Banner'
 import Button from '~components/Button'
@@ -15,7 +22,7 @@ export interface FeatureBannerProps {
 
 export const FeatureBanner = ({
   variant = 'info',
-  bannerColorIntensity = 600,
+  bannerColorIntensity = 500,
   title,
   body,
   learnMoreLink,
@@ -24,30 +31,43 @@ export const FeatureBanner = ({
 
   return (
     <Box __css={styles.banner} bgColor={`primary.${bannerColorIntensity}`}>
-      <Flex sx={styles.item} placeContent="center" verticalAlign="middle">
-        <Center mr="1.5rem">
-          <Text textStyle="h6">{body}</Text>
+      <Flex
+        sx={styles.item}
+        placeContent={title ? undefined : 'center'}
+        mx="2rem"
+        my={title ? '0.5rem' : 'auto'}
+      >
+        <VStack mr="1.5rem" alignItems="flex-start">
+          <Text as="h5" textStyle="h5">
+            {title}
+          </Text>
+          <Text as="h6" textStyle="h6">
+            {body}
+          </Text>
+        </VStack>
+        <Center>
+          <Button
+            sx={{
+              ...styles.button,
+              ...(title ? textStyles['subhead-1'] : textStyles['subhead-2']),
+              minHeight: 'auto',
+            }}
+            variant="solid"
+            as="a"
+            href={learnMoreLink}
+            target="_blank"
+            borderColor="white"
+            bg="transparent"
+            _hover={{
+              color: 'white',
+              borderColor: 'white',
+              bg: `primary.${bannerColorIntensity - 100}`,
+            }}
+            verticalAlign="middle"
+          >
+            Learn more
+          </Button>
         </Center>
-        <Button
-          sx={{
-            ...styles.button,
-            ...textStyles['subhead-2'],
-            minHeight: 'auto',
-          }}
-          variant="solid"
-          as="a"
-          href={learnMoreLink}
-          target="_blank"
-          borderColor="white"
-          bg="transparent"
-          _hover={{
-            color: 'white',
-            borderColor: 'white',
-            bg: `primary.${bannerColorIntensity - 100}`,
-          }}
-        >
-          Learn more
-        </Button>
       </Flex>
     </Box>
   )
diff --git a/frontend/src/pages/Landing/LandingPage.tsx b/frontend/src/pages/Landing/LandingPage.tsx
index 879f72ef5d..5829b09772 100644
--- a/frontend/src/pages/Landing/LandingPage.tsx
+++ b/frontend/src/pages/Landing/LandingPage.tsx
@@ -31,6 +31,7 @@ import {
   FORM_GUIDE,
   GUIDE_ATTACHMENT_SIZE_LIMIT,
   GUIDE_E2EE,
+  GUIDE_PAYMENTS_PUBLIC,
   GUIDE_SECRET_KEY_LOSS,
   GUIDE_STORAGE_MODE,
   GUIDE_TRANSFER_OWNERSHIP,
@@ -43,6 +44,7 @@ import { LOGIN_ROUTE } from '~constants/routes'
 import { useIsMobile } from '~hooks/useIsMobile'
 import { useMdComponents } from '~hooks/useMdComponents'
 import Button from '~components/Button'
+import { FeatureBanner } from '~components/FeatureBanner/FeatureBanner'
 import Link from '~components/Link'
 import { MarkdownText } from '~components/MarkdownText'
 import { Tab } from '~components/Tabs'
@@ -89,6 +91,11 @@ export const LandingPage = (): JSX.Element => {
 
   return (
     <>
+      <FeatureBanner
+        title="Introducing Payments"
+        body="Citizens can now pay for fees and services directly on your form!"
+        learnMoreLink={GUIDE_PAYMENTS_PUBLIC}
+      />
       <AppPublicHeader />
       <LandingSection bg="primary.100" pt={{ base: '2rem', md: 0 }} px="0">
         <Stack

From 6d0d5a53713d501cd97c256f5cd68d4cf9831536 Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Wed, 7 Jun 2023 16:14:50 +0800
Subject: [PATCH 08/10] fix: banner spacing

- fix h5 and h6 typography styles
---
 .../FeatureBanner/FeatureBanner.tsx           | 69 +++++++++++--------
 frontend/src/theme/textStyles.ts              |  6 +-
 2 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/FeatureBanner/FeatureBanner.tsx b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
index 631f4cfcb7..c383d8149f 100644
--- a/frontend/src/components/FeatureBanner/FeatureBanner.tsx
+++ b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
@@ -8,6 +8,7 @@ import {
 } from '@chakra-ui/react'
 
 import { BannerVariant } from '~theme/components/Banner'
+import { useIsMobile } from '~hooks/useIsMobile'
 import Button from '~components/Button'
 
 import { textStyles } from '../../theme/textStyles'
@@ -27,47 +28,59 @@ export const FeatureBanner = ({
   body,
   learnMoreLink,
 }: FeatureBannerProps): JSX.Element => {
+  const isMobile = useIsMobile()
   const styles = useMultiStyleConfig('Banner', { variant })
 
+  const LearnMoreButton = () => (
+    <Button
+      sx={{
+        ...styles.button,
+        ...(title ? textStyles['subhead-1'] : textStyles['subhead-2']),
+        minHeight: 'auto',
+      }}
+      variant="solid"
+      as="a"
+      href={learnMoreLink}
+      target="_blank"
+      borderColor="white"
+      bg="transparent"
+      _hover={{
+        color: 'white',
+        borderColor: 'white',
+        bg: `primary.${bannerColorIntensity - 100}`,
+      }}
+      verticalAlign="middle"
+    >
+      Learn more
+    </Button>
+  )
+
   return (
     <Box __css={styles.banner} bgColor={`primary.${bannerColorIntensity}`}>
       <Flex
         sx={styles.item}
         placeContent={title ? undefined : 'center'}
-        mx="2rem"
-        my={title ? '0.5rem' : 'auto'}
+        mx={isMobile ? '0.5rem' : '2rem'}
+        my={title ? (isMobile ? '0.5rem' : '1.5rem') : undefined}
       >
-        <VStack mr="1.5rem" alignItems="flex-start">
-          <Text as="h5" textStyle="h5">
+        <VStack
+          mr={isMobile ? undefined : '1.5rem'}
+          alignItems="flex-start"
+          spacing="auto"
+        >
+          <Text as="h5" textStyle="h5" mb="0.25rem">
             {title}
           </Text>
-          <Text as="h6" textStyle="h6">
+          <Text as="h6" textStyle="h6" pb={isMobile ? '1.25rem' : undefined}>
             {body}
           </Text>
+          {isMobile ? <LearnMoreButton /> : null}
         </VStack>
-        <Center>
-          <Button
-            sx={{
-              ...styles.button,
-              ...(title ? textStyles['subhead-1'] : textStyles['subhead-2']),
-              minHeight: 'auto',
-            }}
-            variant="solid"
-            as="a"
-            href={learnMoreLink}
-            target="_blank"
-            borderColor="white"
-            bg="transparent"
-            _hover={{
-              color: 'white',
-              borderColor: 'white',
-              bg: `primary.${bannerColorIntensity - 100}`,
-            }}
-            verticalAlign="middle"
-          >
-            Learn more
-          </Button>
-        </Center>
+        {isMobile ? null : (
+          <Center>
+            <LearnMoreButton />
+          </Center>
+        )}
       </Flex>
     </Box>
   )
diff --git a/frontend/src/theme/textStyles.ts b/frontend/src/theme/textStyles.ts
index e63832f9d0..da6f5a7aac 100644
--- a/frontend/src/theme/textStyles.ts
+++ b/frontend/src/theme/textStyles.ts
@@ -71,14 +71,14 @@ export const textStyles = {
   },
   h5: {
     fontWeight: 600,
-    fontSize: '1.125rem',
-    lineHeight: '1.5rem',
+    fontSize: '1.25rem',
+    lineHeight: '1.75rem',
     letterSpacing: '-0.014em',
     fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",
   },
   h6: {
     fontWeight: 500,
-    fontSize: '1rem',
+    fontSize: '1.125rem',
     lineHeight: '1.5rem',
     letterSpacing: '-0.014em',
     fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",

From b668ffe3057651d443513a15af9a25ee281aae27 Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Wed, 7 Jun 2023 16:59:31 +0800
Subject: [PATCH 09/10] fix: justify text for login banner

- note: center on the y axis
---
 .../src/components/FeatureBanner/FeatureBanner.tsx   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/FeatureBanner/FeatureBanner.tsx b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
index c383d8149f..c4681ae4ed 100644
--- a/frontend/src/components/FeatureBanner/FeatureBanner.tsx
+++ b/frontend/src/components/FeatureBanner/FeatureBanner.tsx
@@ -49,7 +49,6 @@ export const FeatureBanner = ({
         borderColor: 'white',
         bg: `primary.${bannerColorIntensity - 100}`,
       }}
-      verticalAlign="middle"
     >
       Learn more
     </Button>
@@ -65,12 +64,15 @@ export const FeatureBanner = ({
       >
         <VStack
           mr={isMobile ? undefined : '1.5rem'}
-          alignItems="flex-start"
+          align={title ? 'flex-start' : undefined}
+          justifyContent="center"
           spacing="auto"
         >
-          <Text as="h5" textStyle="h5" mb="0.25rem">
-            {title}
-          </Text>
+          {title && (
+            <Text as="h5" textStyle="h5" mb="0.25rem">
+              {title}
+            </Text>
+          )}
           <Text as="h6" textStyle="h6" pb={isMobile ? '1.25rem' : undefined}>
             {body}
           </Text>

From f14df7ed9f3f3dff84b57d81f7b36c67f75d330f Mon Sep 17 00:00:00 2001
From: LinHuiqing <huiqing@open.gov.sg>
Date: Thu, 8 Jun 2023 16:39:29 +0800
Subject: [PATCH 10/10] fix: only set banner color when provided

---
 frontend/src/components/Banner/Banner.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Banner/Banner.tsx b/frontend/src/components/Banner/Banner.tsx
index 0d1027db23..cd3aad9234 100644
--- a/frontend/src/components/Banner/Banner.tsx
+++ b/frontend/src/components/Banner/Banner.tsx
@@ -47,7 +47,12 @@ export const Banner = ({
 
   return (
     <Collapse style={{ overflow: 'visible' }} in={isOpen} animateOpacity>
-      <Box __css={styles.banner} bgColor={bannerColor}>
+      <Box
+        __css={{
+          ...styles.banner,
+          ...(bannerColor ? { bgColor: bannerColor } : {}),
+        }}
+      >
         <Flex sx={styles.item}>
           <Flex>
             <Icon