Skip to content

Commit 79adf86

Browse files
m0ngghpregnantboy
m0nggh
authored and
pregnantboy
committed
add remaining use cases to landing page
1 parent 0c26a66 commit 79adf86

File tree

16 files changed

+408
-49
lines changed

16 files changed

+408
-49
lines changed

‎packages/frontend/src/assets/landing/AgcLogo.png‎

199 KB
Loading

‎packages/frontend/src/assets/landing/AgcLogo.svg‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎packages/frontend/src/assets/landing/CaasLogo.png‎

125 KB
Loading

‎packages/frontend/src/config/urls.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,5 @@ export const SUPPORT_FORM_LINK = 'https://go.gov.sg/plumber-support'
8686
export const LEARN_LINK = 'https://go.gov.sg/learn-plumber'
8787

8888
// Landing page use cases
89-
export const HUMAN_RESOURCE = '/use-cases/human-resource'
89+
export const USE_CASES = '/use-cases'
90+
export const USE_CASES_SUBPAGE = (subpage: string) => `${USE_CASES}/${subpage}`

‎packages/frontend/src/pages/Landing/HeaderBar.tsx‎

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
import { useEffect } from 'react'
2-
import { BiMenu, BiX } from 'react-icons/bi'
2+
import {
3+
BiChevronDown,
4+
BiCog,
5+
BiFlag,
6+
BiGroup,
7+
BiHeadphone,
8+
BiMenu,
9+
BiX,
10+
} from 'react-icons/bi'
311
import {
412
Box,
513
Collapse,
614
Flex,
715
HStack,
16+
Icon,
817
Image,
918
Link,
19+
Popover,
20+
PopoverContent,
21+
PopoverTrigger,
22+
Stack,
23+
Text,
1024
useBreakpointValue,
1125
useDisclosure,
1226
VStack,
@@ -16,15 +30,39 @@ import { Button, IconButton } from '@opengovsg/design-system-react'
1630
import textlogo from '@/assets/landing/textlogo.svg'
1731
import * as URLS from '@/config/urls'
1832

19-
// TODO: add more when we have more than 1 use case
20-
// const USE_CASES = [
21-
// {
22-
// name: 'Human Resource',
23-
// description: 'Streamline onboarding and offboarding',
24-
// to: URLS.HUMAN_RESOURCE,
25-
// icon: BiGroup,
26-
// },
27-
// ]
33+
/**
34+
* Steps to add a new use case:
35+
* 1. Add the use case to the USE_CASES array
36+
* 2. Add the new use case file to the src/pages/Landing/UseCasesPages folder
37+
* 3. Add the new use case link to the subpages map in src/pages/Landing/UseCasesPages/routes.tsx
38+
* 4. If this use case is to be displayed on the main landing page, add to the posts array in UseCases.tsx
39+
*/
40+
const USE_CASES = [
41+
{
42+
name: 'Human Resource',
43+
description: 'Streamline onboarding and offboarding',
44+
to: URLS.USE_CASES_SUBPAGE('human-resource'),
45+
icon: BiGroup,
46+
},
47+
{
48+
name: 'Operations',
49+
description: 'Monitor on the ground movement',
50+
to: URLS.USE_CASES_SUBPAGE('operations'),
51+
icon: BiCog,
52+
},
53+
{
54+
name: 'Customer Support',
55+
description: 'Respond to tickets efficiently',
56+
to: URLS.USE_CASES_SUBPAGE('customer-support'),
57+
icon: BiHeadphone,
58+
},
59+
{
60+
name: 'Campaign Management',
61+
description: 'Coordinate large-scale workflows',
62+
to: URLS.USE_CASES_SUBPAGE('campaign-management'),
63+
icon: BiFlag,
64+
},
65+
]
2866

2967
export default function HeaderBar() {
3068
const { isOpen, onToggle } = useDisclosure()
@@ -64,7 +102,7 @@ export default function HeaderBar() {
64102
{isDesktop && (
65103
<>
66104
<HStack spacing={8}>
67-
{/* <Popover trigger="hover" placement="bottom-start">
105+
<Popover trigger="hover" placement="bottom-start">
68106
<PopoverTrigger>
69107
<Button
70108
variant="clear"
@@ -121,7 +159,7 @@ export default function HeaderBar() {
121159
))}
122160
</Stack>
123161
</PopoverContent>
124-
</Popover> */}
162+
</Popover>
125163

126164
<Button
127165
as="a"
@@ -154,7 +192,7 @@ export default function HeaderBar() {
154192
<Collapse in={isOpen} animateOpacity>
155193
<Box bg="white" shadow="md" px={{ base: 6, sm: 8 }} pb={8}>
156194
<VStack spacing={4} align="stretch">
157-
{/* <Box>
195+
<Box>
158196
<Text fontWeight="semibold" mb={2}>
159197
Use cases
160198
</Text>
@@ -175,7 +213,7 @@ export default function HeaderBar() {
175213
</Box>
176214
))}
177215
</VStack>
178-
</Box> */}
216+
</Box>
179217
<Link
180218
href={URLS.GUIDE_LINK}
181219
fontWeight="medium"

‎packages/frontend/src/pages/Landing/UseCases.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,39 @@ import {
1010
VStack,
1111
} from '@chakra-ui/react'
1212

13-
import AgcLogo from '@/assets/landing/AgcLogo.svg'
13+
import AgcLogo from '@/assets/landing/AgcLogo.png'
14+
import CaasLogo from '@/assets/landing/CaasLogo.png'
15+
import GovTechLogo from '@/assets/landing/GOVTECH.png'
1416
import * as URLS from '@/config/urls'
1517

1618
const posts = [
1719
{
1820
title:
1921
"How Attorney-General's Chambers reduced 50% of time spent on administrative onboarding processes",
20-
href: URLS.HUMAN_RESOURCE,
22+
href: URLS.USE_CASES_SUBPAGE('human-resource'),
2123
description: ' ',
2224
imageUrl: AgcLogo,
2325
agency: "Attorney-General's Chambers",
2426
ariaLabel: 'Human Resource',
2527
},
28+
{
29+
title:
30+
'How Civil Aviation Authority of Singapore simplified event management for their webinars',
31+
href: URLS.USE_CASES_SUBPAGE('operations'),
32+
description: ' ',
33+
imageUrl: CaasLogo,
34+
agency: 'Civil Aviation Authority of Singapore',
35+
ariaLabel: 'Operations',
36+
},
37+
{
38+
title:
39+
'How GovTech automates employee support tickets to stay on top of queries and better serve employees',
40+
href: URLS.USE_CASES_SUBPAGE('customer-support'),
41+
description: ' ',
42+
imageUrl: GovTechLogo,
43+
agency: 'Government Technology Agency',
44+
ariaLabel: 'Customer Support',
45+
},
2646
]
2747

2848
export default function UseCases() {
@@ -88,9 +108,10 @@ export default function UseCases() {
88108
inset={0}
89109
w="full"
90110
h="full"
111+
p={8}
91112
borderRadius="2xl"
92-
bg="gray.50"
93-
objectFit="cover"
113+
bg="#f4f2f0"
114+
objectFit="contain"
94115
/>
95116
<Box
96117
position="absolute"

‎packages/frontend/src/pages/Landing/UseCasesPages/CampaignManagement.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import dedent from 'dedent'
2+
3+
import MarkdownRenderer from '@/components/MarkdownRenderer'
4+
5+
import ContentBox, { CommonMdComponents } from './components/ContentBox'
6+
import ContentSection from './components/ContentSection'
7+
import SummarySection from './components/SummarySection'
8+
import UseCaseLanding from './UseCaseLanding'
9+
10+
function FirstContentBox() {
11+
return (
12+
<ContentBox headerText="The vision">
13+
<MarkdownRenderer
14+
source={dedent`
15+
The team behind the SG60 Baby Gift initiative aimed to ensure a seamless citizen experience by:
16+
17+
- Developing processes to coordinate large-scale registration, supported by government digital platforms to ensure efficient processing while minimising human error
18+
- Coordinating distribution across different stakeholders for community events and home deliveries
19+
20+
`}
21+
components={CommonMdComponents}
22+
/>
23+
</ContentBox>
24+
)
25+
}
26+
27+
function SecondContentBox() {
28+
return (
29+
<ContentBox headerText="Paving the way for transformation">
30+
<MarkdownRenderer
31+
source={dedent`
32+
Jihua, a digital business analyst at PMO-SG, utilised Plumber as the central engine, together with FormSG and DistributeSG, to implement a streamlined process from Gift registration to distribution. Plumber's workflow automation helps:
33+
34+
- Officers ensure accurate and efficient registration processing
35+
- Officers coordinate Gift distribution across different channels
36+
- Parents receive timely and personalised notifications
37+
`}
38+
components={CommonMdComponents}
39+
/>
40+
</ContentBox>
41+
)
42+
}
43+
44+
export default function HumanResource() {
45+
return (
46+
<UseCaseLanding>
47+
<SummarySection
48+
category="Campaign Management"
49+
title="How the National Population and Talent Division Implemented the SG60 Baby Gift Initiative with Digital Solutions"
50+
description="To commemorate Singapore's 60th year of independence, all Singapore Citizen babies born in 2025 receive the SG60 Baby Gift — a nationwide initiative requiring coordination across multiple government agencies and community partners"
51+
benefits={[
52+
'**Substantial time savings** through process automation',
53+
'**Significant cost savings** by leveraging existing government platforms',
54+
'**High citizen satisfaction** with the Gift registration process',
55+
]}
56+
/>
57+
58+
<ContentSection
59+
contentBoxes={
60+
<>
61+
<FirstContentBox />
62+
<SecondContentBox />
63+
</>
64+
}
65+
/>
66+
</UseCaseLanding>
67+
)
68+
}

‎packages/frontend/src/pages/Landing/UseCasesPages/CustomerSupport.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Text } from '@chakra-ui/react'
2+
3+
import ContentBox from './components/ContentBox'
4+
import ContentSection from './components/ContentSection'
5+
import Quote from './components/Quote'
6+
import SummarySection from './components/SummarySection'
7+
import UseCaseLanding from './UseCaseLanding'
8+
9+
function FirstContentBox() {
10+
return (
11+
<ContentBox headerText="Limitations of email-based support">
12+
<Text>
13+
GovTech’s employee support operated entirely through traditional email
14+
correspondence. Emails provided no mechanism for tracking query volumes,
15+
measuring response times, or monitoring staff workload distribution.
16+
Queries required manual forwarding between departments, causing delays.
17+
</Text>
18+
19+
<Text>
20+
Additionally, management lacked visibility into recurring issues or
21+
trending concerns across the organization, preventing strategic
22+
improvements to employee services.
23+
</Text>
24+
</ContentBox>
25+
)
26+
}
27+
28+
function SecondContentBox() {
29+
return (
30+
<ContentBox headerText="Building an automated system">
31+
<Text>
32+
The manual and error-prone tasks in this workflow made it suitable for
33+
automation. Quan Wei chose to use two products, FormSG and Plumber,
34+
because they were easy to use and implement quickly. Automating this
35+
workflow only took him a day.
36+
</Text>
37+
38+
<Text>
39+
He managed to build a fully automated workflow where employees would
40+
submit their enquiries through a form that gets routed to relevant
41+
departments automatically. On top of this, he also built tracking
42+
capabilities to ensure departments meet service level agreements.
43+
</Text>
44+
</ContentBox>
45+
)
46+
}
47+
48+
function ThirdContentBox() {
49+
return (
50+
<ContentBox headerText="Enhanced operations and strategic insights">
51+
<Text>
52+
Manual work is greatly reduced with automated routing of queries to
53+
relevant departments. The new tracking capabilities have enabled
54+
visibility on real-time progress for each query, ensuring consistent
55+
service with accountability that email systems could not provide. The HR
56+
team can now spot repeated problems and prevent them rather than just
57+
responding to each case separately.
58+
</Text>
59+
60+
<Quote
61+
quote="Invest ten hours in automation to save countless hours for innovation."
62+
author="Quan Wei"
63+
authorTitle="CIO office, GovTech"
64+
/>
65+
</ContentBox>
66+
)
67+
}
68+
69+
export default function CustomerSupport() {
70+
return (
71+
<UseCaseLanding>
72+
<SummarySection
73+
category="Customer Support"
74+
title="How GovTech automates employee support tickets to stay on top of queries and better serve employees"
75+
description="Managing enquiries from current and former GovTech staff through email systems lacked tracking capabilities, making it impossible to measure performance, monitor workload, or identify common staff concerns"
76+
benefits={[
77+
'**Organised enquiry management** with tracking and response coordination',
78+
'**Data-driven decision making** through analytics on common and trending issues',
79+
'**Faster response times and better accountability** with enhanced monitoring',
80+
]}
81+
/>
82+
83+
<ContentSection
84+
contentBoxes={
85+
<>
86+
<FirstContentBox />
87+
<SecondContentBox />
88+
<ThirdContentBox />
89+
</>
90+
}
91+
/>
92+
</UseCaseLanding>
93+
)
94+
}

‎packages/frontend/src/pages/Landing/UseCasesPages/HumanResource.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { Box, Text } from '@chakra-ui/react'
2-
3-
import { Footer } from '../Footer'
4-
import HeaderBar from '../HeaderBar'
1+
import { Text } from '@chakra-ui/react'
52

63
import ContentBox from './components/ContentBox'
74
import ContentSection from './components/ContentSection'
85
import SummarySection from './components/SummarySection'
6+
import UseCaseLanding from './UseCaseLanding'
97

108
function FirstContentBox() {
119
return (
@@ -63,17 +61,15 @@ function ThirdContentBox() {
6361

6462
export default function HumanResource() {
6563
return (
66-
<Box fontFamily="'DM Sans', sans-serif">
67-
<HeaderBar />
68-
64+
<UseCaseLanding>
6965
<SummarySection
7066
category="Human Resource"
7167
title="How Attorney-General's Chambers reduced 50% of time spent on administrative onboarding processes"
7268
description="Administrative work to onboard a new joiner on their first day of work typically took around 2 hours cumulatively, and was prone to human error"
7369
benefits={[
74-
'50% reduction in time taken to onboard a new employee',
75-
'95% reduction in errors through automation',
76-
'Able to focus on more important work, such as strategy, after automating the process',
70+
'**50% reduction in time taken** to onboard a new employee',
71+
'**95% reduction in errors** through automation',
72+
'Ability to focus on **more important strategic tasks** like boosting employee engagement',
7773
]}
7874
/>
7975

@@ -86,8 +82,6 @@ export default function HumanResource() {
8682
</>
8783
}
8884
/>
89-
90-
<Footer />
91-
</Box>
85+
</UseCaseLanding>
9286
)
9387
}

0 commit comments

Comments
 (0)