Sync-up PR

src/pages/Homepage.jsx

@@ -1,8 +1,54 @@
-import { Flex, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Image, Spacer, Text, VStack } from '@chakra-ui/react'
+import hp1 from '../assets/hp1.png';
+import hp2 from '../assets/hp2.png';
+import hp3 from '../assets/hp3.png';
+import hp4 from '../assets/hp4.png';
+import hp5 from '../assets/hp5.png';
+import hp6 from '../assets/hp6.png';
 
 function Homepage() {
+    const imgResponsiveSizing = { base: "150px", md: "250px" }
+    const imgColumnMinWidth = { base: "350px", md: "450px" }
+    const imgOffset = "-100px"
+
     return <Flex flexDir={'column'} justifyContent={'center'}>
-        <Text fontSize={'4xl'} fontWeight={'bold'} textAlign={'center'} mt={10} mb={5}>Connect <br />with your<br /> roots</Text>
+
+        <Flex flexDir={'row'} justifyContent={'center'} alignItems={'center'} w={'100%'} mt={"10px"}>
+            <Spacer />
+
+            {/* First images column */}
+            <Flex flexDir={'column'}>
+                <VStack spacing={{ base: "10px", md: "15px", lg: "20px" }} alignItems={'center'} minW={imgColumnMinWidth}>
+                    <Image src={hp1} height={imgResponsiveSizing} mr={imgOffset} />
+                    <Image src={hp2} height={imgResponsiveSizing} ml={imgOffset} />
+                    <Image src={hp3} height={imgResponsiveSizing} mr={imgOffset} />
+                </VStack>
+            </Flex>
+
+            <Spacer />
+
+            {/* Title, subtitle, and CTA button column */}
+            <Flex flexDir={'column'}>
+                <VStack spacing={{ base: "10px", md: "15px", lg: "20px" }} alignItems={'center'}>
+                    <Text fontSize={'5xl'} fontWeight={'bold'} textAlign={'center'} mt={10} mb={5}>Connect <br />with your<br /> roots</Text>
+                    <Text fontSize={'xl'} textAlign={'center'}>The intelligent artefact digitisation platform.</Text>
+                    <Button variant={'ArchPrimary'} size={'lg'} mt={'10px'}>Get Started</Button>
+                </VStack>
+            </Flex>
+
+            <Spacer />
+
+            {/* Second images column */}
+            <Flex flexDir={'column'}>
+                <VStack spacing={{ base: "10px", md: "15px", lg: "20px" }} alignItems={'center'} minW={imgColumnMinWidth}>
+                    <Image src={hp4} height={imgResponsiveSizing} ml={imgOffset} />
+                    <Image src={hp5} height={imgResponsiveSizing} mr={imgOffset} />
+                    <Image src={hp6} height={imgResponsiveSizing} ml={imgOffset} />
+                </VStack>
+            </Flex>
+
+            <Spacer />
+        </Flex>
     </Flex>
 }