refractor: update responsiveness main page

src/pages/RestaurantList.tsx

@@ -10,6 +10,7 @@ import {
     ChakraProvider,
     CSSReset,
     extendTheme, 
+    Spacer,
   } from "@chakra-ui/react";
 import pinpointImage from '../assets/vectors/pinpoint.svg';
 import clockImage from '../assets/vectors/clock.svg';
@@ -26,30 +27,34 @@ function RestaurantList() {
     { id: 5, name: 'Ayam Bang Dava', type: 'Other', address: 'Jalan Raya Jatinangor No. 145, Cikeruh, Sumedang Regency, West Java 43193', time: '1-9.30 PM • Saturday Closed', rating: '4.9' },
   ];
 
-    const buttonStyle = {
-      left: '380px',
-      borderRadius: '99px',
-      width: '166px',
-      height: '44px',
-    };
+  const buttonStyle = {
+    right: '0',
+    borderRadius: '99px',
+    width: '166px',
+    height: '44px',
+  };
+  
   return(
     <ChakraProvider theme={extendTheme({})}>
       <CSSReset />
-      <Flex direction="column">
-        <Navbar />
-        <Stack direction="column" spacing={4} position="absolute" left='35%' top="3em">
+      <Flex align="center"
+        justify="center"
+>
+        <Navbar/>
+        <Stack direction="column" spacing="35px" mt="76px" ml="10px" mr="10px">
           {restaurantData.map((item) => (
             <Card
             boxShadow="none"
             direction={{ base: 'column', sm: 'row' }}
             overflow='hidden'
             maxW="820px"
-            h="220px"
+            h={{ base: 'auto', sm: 'auto', md: '250px' }}
+            key={item.id}
           >
             <Image
               objectFit='cover'
-              maxW={{ sm: '220px' }}
-              maxH={{ sm: '220px' }}
+              maxW={{ sm: 'auto', base: 'auto', md: '250px' }}
+              maxH={{ sm: 'auto', base: 'auto', md: '250px' }}
               src={exampleImage}
               alt='Contoh Gambar'
               className='my-class'
@@ -60,12 +65,12 @@ function RestaurantList() {
                 <Text fontSize="16px" fontWeight={900} textAlign="left" mb="7px" mt={0}>{item.name}</Text>
                 <Text textAlign={'left'} fontSize={12} mb="7px" mt={0}>{item.type}</Text>
 
-                <Flex alignItems="center" mb="7px">
+                <Flex alignItems="center" mb="5px">
                   <Image src={pinpointImage} alt='pinpoint' mr="7px" />
                   <Text textAlign='left' m={0}>{item.address}</Text>
                 </Flex>
 
-                <Flex alignItems="center" mb="7px">
+                <Flex alignItems="center" mb="5px">
                   <Image src={clockImage} alt='clock' mr="7px" />
                   <Text textAlign='left' m={0}>{item.time}</Text>
                 </Flex>
@@ -78,7 +83,8 @@ function RestaurantList() {
               </CardBody>
 
               <CardFooter p={0}>
-                <Button variant='solid' backgroundColor='#FFF177' borderColor='#FFF177' style={buttonStyle} fontSize={18} fontWeight="bold">
+                <Spacer/>
+                <Button variant='solid' backgroundColor='#FFF177' borderColor='#FFF177' style={buttonStyle} fontSize={18} fontWeight="bold" mb="10px">
                   Add Review
                 </Button>
               </CardFooter>