Added pdf to all UseCases

src/components/UseCase/UseCase.jsx

@@ -88,16 +88,11 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
         justifyContent={"center"}
         flexDirection={"column"}
         alignItems={"center"}
-        gap={16}
+        gap={12}
         w={"100%"}
       >
         {useCase.map(
-          ({
-            useCaseHeading,
-            useCaseSubHeading,
-            useCaseDetails,
-            documents,
-          }) => (
+          ({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => (
             <Box
               display={"flex"}
               justifyContent={"center"}
@@ -182,11 +177,40 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
                   </Text>
                 </Box>
               ))}
+            </Box>
+          )
+        )}
 
+        <Box width={"85vw"}>
+          <Text
+            className="rubix-fw-500"
+            fontSize="3xl"
+            textColor={"#ffffff"}
+            marginBottom={"3rem"}
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "22px",
+              },
+            }}
+          >
+            Documents
+          </Text>
+          {useCase.map(({ documents }) => (
+            <Box
+              display={"flex"}
+              flexWrap={"wrap"}
+              justifyContent={"space-between"}
+              width={"100%"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  justifyContent: "space-around",
+                },
+              }}
+            >
               {documents?.map((item) => (
                 <Box marginBottom={"2rem"} key={item.id}>
                   <Box
-                    width={"420px"}
+                    width={"350px"}
                     background={"#404040"}
                     borderRadius={"10px"}
                     minHeight={"340px"}
@@ -251,8 +275,8 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
                 </Box>
               ))}
             </Box>
-          )
-        )}
+          ))}
+        </Box>
       </Box>
     </div>
   );