chore: update some css thingy for landing page

Author: pregnantboy

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

@@ -1,7 +1,7 @@
 import {
-  AspectRatio,
   Box,
   Container,
+  Flex,
   Heading,
   HStack,
   Image,
@@ -23,7 +23,6 @@ const posts = [
     description: ' ',
     imageUrl: AgcLogo,
     agency: "Attorney-General's Chambers",
-    ariaLabel: 'Human Resource',
   },
   {
     title:
@@ -32,7 +31,6 @@ const posts = [
     description: ' ',
     imageUrl: CaasLogo,
     agency: 'Civil Aviation Authority of Singapore',
-    ariaLabel: 'Operations',
   },
   {
     title:
@@ -41,7 +39,6 @@ const posts = [
     description: ' ',
     imageUrl: GovTechLogo,
     agency: 'Government Technology Agency',
-    ariaLabel: 'Customer Support',
   },
 ]
 
@@ -83,90 +80,68 @@ export default function UseCases() {
           <VStack
             mt={{ base: 16, lg: 20 }}
             spacing={{ base: 20, lg: 20 }}
-            align="stretch"
+            align="center"
           >
             {posts.map((post, index) => (
-              <Box
+              <Flex
                 key={index}
-                as="article"
-                position="relative"
-                display="flex"
-                flexDirection={{ base: 'column', lg: 'row' }}
                 gap={8}
+                alignItems={{ base: 'stretch', md: 'center' }}
+                flexDirection={{ base: 'column', md: 'row' }}
               >
-                <Box
-                  position="relative"
-                  width={{ lg: '64' }}
-                  flexShrink={{ lg: 0 }}
+                <Link
+                  href={post.href}
+                  w={{ base: '100%', md: '30vw' }}
+                  maxW={{ base: '100%', md: 48 }}
+                  px={8}
+                  bg="#f4f2f0"
+                  borderRadius="2xl"
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  aspectRatio={{ base: undefined, md: 1 }}
+                  role="group"
                 >
-                  <AspectRatio ratio={{ base: 16 / 9, sm: 2 / 1, lg: 1 }}>
-                    <Box position="relative">
-                      <Image
-                        src={post.imageUrl}
-                        alt=""
-                        position="absolute"
-                        inset={0}
-                        w="full"
-                        h="full"
-                        p={8}
-                        borderRadius="2xl"
-                        bg="#f4f2f0"
-                        objectFit="contain"
-                      />
-                      <Box
-                        position="absolute"
-                        inset={0}
-                        borderRadius="2xl"
-                        border="1px solid"
-                        borderColor="whiteAlpha.200"
-                        opacity={0.1}
-                      />
-                    </Box>
-                  </AspectRatio>
-                </Box>
+                  <Image
+                    src={post.imageUrl}
+                    aspectRatio="1"
+                    maxW={{ base: 48, md: '100%' }}
+                    transition="transform 0.2s"
+                    objectFit="contain"
+                    _groupHover={{
+                      transform: 'scale(1.1)',
+                    }}
+                  />
+                </Link>
 
                 <Box flex={1} alignContent="center">
                   <HStack spacing={4} fontSize="m">
                     <Text color="gray.500">{post.agency}</Text>
                   </HStack>
 
-                  <Box
-                    position="relative"
-                    maxW="xl"
-                    role="group"
-                    _hover={{ '& h3': { color: 'gray.600' } }}
+                  <Heading
+                    as="h3"
+                    mt={3}
+                    fontSize="lg"
+                    lineHeight="6"
+                    fontWeight="500"
+                    letterSpacing="tighter"
+                    transition="color 0.2s"
                   >
-                    <Heading
-                      as="h3"
-                      mt={3}
-                      fontSize="lg"
-                      lineHeight="6"
-                      fontWeight="500"
-                      letterSpacing="tighter"
+                    <Link
+                      href={post.href}
+                      textDecoration="none"
                       color="gray.900"
-                      transition="color 0.2s"
+                      _hover={{
+                        textDecoration: 'none',
+                        color: 'primary.500',
+                      }}
                     >
-                      <Link
-                        href={post.href}
-                        textDecoration="none"
-                        color="gray.900"
-                        _hover={{
-                          textDecoration: 'none',
-                          color: 'primary.500',
-                        }}
-                        aria-label={post.ariaLabel}
-                      >
-                        <Box position="absolute" inset={0} />
-                        {post.title}
-                      </Link>
-                    </Heading>
-
-                    <Text mt={5} fontSize="sm" lineHeight="6" color="gray.600">
-                      {post.description}
-                    </Text>
-                  </Box>
+                      {post.title}
+                    </Link>
+                  </Heading>
                 </Box>
-              </Box>
+              </Flex>
             ))}
           </VStack>
         </Box>

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

@@ -1,5 +1,6 @@
 import dedent from 'dedent'
 
+import NptdLogo from '@/assets/landing/nptd.png'
 import MarkdownRenderer from '@/components/MarkdownRenderer'
 
 import ContentBox, { CommonMdComponents } from './components/ContentBox'
@@ -46,6 +47,7 @@ export default function HumanResource() {
     <UseCaseLanding>
       <SummarySection
         category="Campaign Management"
+        image={NptdLogo}
         title="How the National Population and Talent Division Implemented the SG60 Baby Gift Initiative with Digital Solutions"
         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"
         benefits={[

packages/frontend/src/assets/landing/GOVTECH.png

@@ -1,5 +1,7 @@
 import { Text } from '@chakra-ui/react'
 
+import GovTechLogo from '@/assets/landing/GOVTECH.png'
+
 import ContentBox from './components/ContentBox'
 import ContentSection from './components/ContentSection'
 import Quote from './components/Quote'
@@ -71,6 +73,7 @@ export default function CustomerSupport() {
     <UseCaseLanding>
       <SummarySection
         category="Customer Support"
+        image={GovTechLogo}
         title="How GovTech automates employee support tickets to stay on top of queries and better serve employees"
         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"
         benefits={[

packages/frontend/src/assets/landing/nptd.png

@@ -1,5 +1,7 @@
 import { Text } from '@chakra-ui/react'
 
+import AgcLogo from '@/assets/landing/AgcLogo.png'
+
 import ContentBox from './components/ContentBox'
 import ContentSection from './components/ContentSection'
 import SummarySection from './components/SummarySection'
@@ -64,6 +66,7 @@ export default function HumanResource() {
     <UseCaseLanding>
       <SummarySection
         category="Human Resource"
+        image={AgcLogo}
         title="How Attorney-General's Chambers reduced 50% of time spent on administrative onboarding processes"
         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"
         benefits={[

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

@@ -1,5 +1,7 @@
 import { Text } from '@chakra-ui/react'
 
+import CaasLogo from '@/assets/landing/CaasLogo.png'
+
 import ContentBox from './components/ContentBox'
 import ContentSection from './components/ContentSection'
 import Quote from './components/Quote'
@@ -73,6 +75,7 @@ export default function Operations() {
     <UseCaseLanding>
       <SummarySection
         category="Operations"
+        image={CaasLogo}
         title="How Civil Aviation Authority of Singapore simplified event management for their webinars"
         description="Webinars occur frequently with hundreds of participants each time. Managing these events manually became extremely time-consuming for the team"
         benefits={[

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

@@ -3,6 +3,7 @@ import {
   Box,
   Flex,
   Heading,
+  Image,
   List,
   ListIcon,
   ListItem,
@@ -19,10 +20,11 @@ interface SummarySectionProps {
   title: string
   description: string
   benefits: string[]
+  image?: string
 }
 
 export default function SummarySection(props: SummarySectionProps) {
-  const { category, title, description, benefits } = props
+  const { category, title, description, benefits, image } = props
   return (
     <Box position="relative" overflow="hidden">
       <BackgroundPattern />
@@ -36,6 +38,18 @@ export default function SummarySection(props: SummarySectionProps) {
             {category}
           </Text>
 
+          {image && (
+            <Image
+              src={image}
+              minH={24}
+              maxW={48}
+              alt={title}
+              objectFit="contain"
+              filter="grayscale(100%)"
+              opacity={0.7}
+            />
+          )}
+
           <Heading
             as="h1"
             letterSpacing="tighter"