From f0beddbaa8f1597ba3079dc126312a52ced1a7b0 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sun, 19 May 2024 22:40:55 -0700
Subject: [PATCH] Implemented the integrations component.

---
 Client/src/Components/Integrations/index.css |  0
 Client/src/Components/Integrations/index.jsx | 24 ++++++++++++++++++++
 Client/src/Pages/Home/index.jsx              |  2 ++
 3 files changed, 26 insertions(+)
 create mode 100644 Client/src/Components/Integrations/index.css
 create mode 100644 Client/src/Components/Integrations/index.jsx

diff --git a/Client/src/Components/Integrations/index.css b/Client/src/Components/Integrations/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Integrations/index.jsx b/Client/src/Components/Integrations/index.jsx
new file mode 100644
index 000000000..030a79309
--- /dev/null
+++ b/Client/src/Components/Integrations/index.jsx
@@ -0,0 +1,24 @@
+import { Box, Button, Typography } from '@mui/material';
+
+const Integrations = () => {
+  return (
+    <Box display="flex" alignItems="center" p={2} border={1} borderRadius={2}>
+      <Box component="img" src="https://via.placeholder.com/100" alt="Placeholder" width={100} height={100} />
+      
+      <Box flex={1} mx={2} display="flex" flexDirection="column" alignItems="flex-start">
+        <Typography variant="h6" component="div">
+          Header
+        </Typography>
+        <Typography variant="body1" component="div" sx={{ maxWidth: '300px', wordWrap: 'break-word', textAlign: 'left' }}>
+          This is a paragraph that provides more detail about the header.
+        </Typography>
+      </Box>
+      
+      <Button variant="contained" color="primary" sx={{ minWidth: '120px', minHeight: '45px' }}>
+        Click Me
+      </Button>
+    </Box>
+  );
+};
+
+export default Integrations;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index ff5cb454e..a1ad8e314 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,6 +2,7 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import Search from "../../Components/Search";
 import "./index.css";
 import DashboardMenu from "../../Components/DashboardMenu";
+import Integrations from "../../Components/Integrations";
 
 const Home = () => {
   return (
@@ -10,6 +11,7 @@ const Home = () => {
       <DropdownTeamMember />
       <Search />
       <DashboardMenu />
+      <Integrations />
     </>
   );
 };