Develop Homepage UI Layout

frontend/src/components/pages/home/HomePage.tsx

@@ -3,6 +3,7 @@ import { Flex, Box, Heading, Text } from "@chakra-ui/react";
 import { announcementsMockData } from "../../../mocks/notifications";
 import AnnouncementNotification from "./AnnouncementNotification";
 import { Announcement } from "../../../types/NotificationTypes";
+import RoomGrid from "./RoomGrid";
 
 const HomePage = (): React.ReactElement => {
   const [numberPosts, setNumberPosts] = useState(0);
@@ -43,47 +44,58 @@ const HomePage = (): React.ReactElement => {
   }, []);
 
   return (
-    <Flex flexDirection="column" alignItems="center" w="80vw">
-      <Box>
-        <Heading>Home Page</Heading>
-      </Box>
-      <Box
-        border="2px solid grey"
-        p={6}
-        justifyContent="space-between"
-        borderRadius="8px"
-        w="75%"
-      >
-        <Flex justifyContent="space-between" alignItems="center" mb={2}>
-          <Flex alignItems="baseline">
-            <Text fontSize="md" as="b">
-              Announcements
-            </Text>
-            <Text ml={6} fontSize="smaller">
-              {numberPosts === 0
-                ? "You're all caught up!"
-                : `${numberPosts} new posts today`}
+    <Flex flexDir="column" alignItems="center" flexGrow={1}>
+      <Box w="100%" h="13%" borderWidth={2} bg="purple.50" />
+      <Flex flexDir="column" w="65%" flexGrow={1} position="absolute" top="2%">
+        <Text
+          fontSize="2xl"
+          fontWeight="bold"
+          textAlign="left"
+          alignItems="center"
+          paddingY="12px"
+        >
+          Marillac Place Overview
+        </Text>
+        <RoomGrid />
+        <Box
+          border="2px solid grey"
+          p={6}
+          justifyContent="space-between"
+          borderRadius="8px"
+          marginTop="36px"
+          w="100%"
+        >
+          <Flex justifyContent="space-between" alignItems="center" mb={2}>
+            <Flex alignItems="baseline">
+              <Text fontSize="md" as="b">
+                Announcements
+              </Text>
+              <Text ml={6} fontSize="smaller">
+                {numberPosts === 0
+                  ? "You're all caught up!"
+                  : `${numberPosts} new posts today`}
+              </Text>
+            </Flex>
+
+            <Text onClick={() => setViewAll(!viewAll)} cursor="pointer">
+              {viewAll ? "View less" : "View all"}
             </Text>
           </Flex>
-
-          <Text onClick={() => setViewAll(!viewAll)} cursor="pointer">
-            {viewAll ? "View less" : "View all"}
-          </Text>
-        </Flex>
-        {(viewAll ? announcements : recentAnnouncements).map(
-          (announcement, index) => (
-            <AnnouncementNotification
-              room={announcement.room}
-              author={announcement.author}
-              message={announcement.message}
-              createdAt={announcement.createdAt}
-              key={index}
-            />
-          ),
-        )}
-      </Box>
+          {(viewAll ? announcements : recentAnnouncements).map(
+            (announcement, index) => (
+              <AnnouncementNotification
+                room={announcement.room}
+                author={announcement.author}
+                message={announcement.message}
+                createdAt={announcement.createdAt}
+                key={index}
+              />
+            ),
+          )}
+        </Box>
+      </Flex>
     </Flex>
   );
 };
 
-export default HomePage;
+export default HomePage;

frontend/src/components/pages/home/RoomGrid.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Box, Text } from "@chakra-ui/react";
+
+const rooms = [
+  { id: 1, name: "Room 1", info: "Info about Room 1" },
+  { id: 2, name: "Room 2", info: "Info about Room 2" },
+  { id: 3, name: "Room 3", info: "Info about Room 3" },
+  { id: 4, name: "Room 4", info: "Info about Room 4" },
+  { id: 5, name: "Room 5", info: "Info about Room 5" },
+  { id: 6, name: "Room 6", info: "Info about Room 6" },
+  { id: 7, name: "Room 7", info: "Info about Room 7" },
+  { id: 8, name: "Room 8", info: "Info about Room 8" },
+  { id: 9, name: "Room 9", info: "Info about Room 9" },
+  { id: 10, name: "Room 10", info: "Info about Room 10" },
+];
+
+function RoomGrid() {
+  return (
+    <Grid templateColumns="repeat(4, 1fr)" gap={2}>
+      {rooms.map((room) => (
+        <Box
+          key={room.id}
+          p={4}
+          borderWidth="2px"
+          borderColor="grey.300"
+          borderRadius="5px"
+          w="100%"
+          h="100%"
+          bg="white"
+        >
+          <Text fontWeight="bold">{room.name}</Text>
+          <Text>{room.info}</Text>
+        </Box>
+      ))}
+    </Grid>
+  );
+}
+
+export default RoomGrid;

frontend/src/constants/Routes.ts

@@ -1,4 +1,4 @@
-export const HOME_PAGE = "/";
+export const HOME_PAGE = "/home";
 
 export const ANNOUNCEMENTS_PAGE = "/announcements";