for Pr carousel2

updated ulit po

Author: Tyrone6161

src/sections/homePageSection/Components/carousel2.js

@@ -2,20 +2,11 @@ import React from "react";
 import { Typography } from "@material-ui/core";
 import BalanceOutlinedIcon from "@mui/icons-material/BalanceOutlined";
 import PlayArrowSharpIcon from "@mui/icons-material/PlayArrowSharp";
-import { display, textAlign } from "@mui/system";
-import { px } from "@mantine/core";
+import { textAlign } from "@mui/system";
+
 
 const Carousel2 = () => {
-  const styles = {
-    backgroundColor: "red",
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    color: "white",
-    fontSize: "24px",
-  };
+  
 
   const logo = {
     height: "100%",
@@ -33,7 +24,7 @@ const Carousel2 = () => {
     color: "white",
     fontStyle: "italic",
     width: "100%", // Ensures full-width layout
-    marginBottom:'30px'
+    marginBottom: "30px",
   };
 
   const body = {
@@ -47,17 +38,14 @@ const Carousel2 = () => {
   };
 
   const bodyContent = {
-    display:"flex",
-    flexDirection:"row",
-    justifyContent:"flex-start",
-    alignItems: 'flex-start',
-    textAlign:"justify",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+    textAlign: "justify",
     width: "100%", // Ensures full-width layout
     paddingBottom: "60px", // Ensures space for footer
-    marginRight:'110px'
-  
-    
-  
+    marginRight: "110px",
   };
 
   const footer = {
@@ -74,6 +62,35 @@ const Carousel2 = () => {
     paddingRight: "20px", // Adds padding to the right
   };
 
+  const intro = {
+    display: "block",
+    color: "#7d0001",
+    fontSize: "22px",
+    fontWeight: "bold",
+    marginLeft: "30px",
+    textAlign:'justify'
+  };
+
+  const description_title = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontWeight: "bold",
+    color: "blue",
+    fontSize: "22px",
+    fontStyle: "italic",
+    
+
+  }
+
+  const description = {
+    display: "block", 
+    marginLeft: "30px", 
+    textAlign: 'justify'
+  }
+
+  
+
   return (
     <div
       style={{
@@ -115,48 +132,78 @@ const Carousel2 = () => {
         </div>
       </div>
 
-      
-     <div style={body}>
+      <div style={body}>
         <div>
-          
           <div style={bodyContent}>
-            <div></div>
             <div>
-            <Typography variant="body1" style={{ marginTop: '40px', textAlign: 'left', marginLeft: '100px' }} gutterBottom>
-                <span style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 'bold', color: 'blue', fontSize: '22px', fontStyle:'italic' }}>
-                        <PlayArrowSharpIcon /> Executive Order No. 27 s. 2017</span>
-
-                      <span style={{ display: 'block', color: '#7d0001', fontSize: '22px', fontWeight: 'bold' }}>
-                       On the implementation of the 2017 – 2022 Philippine Development Plan (PDP).</span>
-
-                    <span style={{ display: 'block' }}>
-                       The implementation of the 2017 – 2022 Philippine Development Plan (PDP), the annual updating of
-                        Philippine Investment Program (PIP), and the updating of the Three-Year Rolling Infrastructure
-                        Projects (TRIP), has been exerting efforts to create its priority Projects and Programs (PAPs) or FY
-                        2022 as an input to the budget preparation for the said Fiscal Year</span>
-                        </Typography>
-
-
+              <Typography
+                variant="body1"
+                style={{
+                  marginTop: "40px",
+                  textAlign: "left",
+                  marginLeft: "100px",
+                }}
+                gutterBottom
+              >
+                <span
+                  style={description_title}
+                >
+                  <PlayArrowSharpIcon /> Executive Order No. 27 s. 2017
+                </span>
+
+                <span
+                  style={intro}
+                >
+                  On the implementation of the 2017 – 2022 Philippine
+                  Development Plan (PDP).
+                </span>
+
+                <span style={description}>
+                  The implementation of the 2017 – 2022 Philippine Development
+                  Plan (PDP), the annual updating of Philippine Investment
+                  Program (PIP), and the updating of the Three-Year Rolling
+                  Infrastructure Projects (TRIP), has been exerting efforts to
+                  create its priority Projects and Programs (PAPs) or FY 2022 as
+                  an input to the budget preparation for the said Fiscal Year
+                </span>
+              </Typography>
             </div>
           </div>
-          
         </div>
         <div style={bodyContent}>
-            <div></div>
-            <div>
-            <Typography variant="body1"  style={{ marginTop: '40px', textAlign: 'left', marginLeft: '120px' }} gutterBottom>
-
-            <span style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 'bold', color: 'blue', fontSize: '22px', fontStyle:'italic',  }}>
-              <PlayArrowSharpIcon /> Section 4, Feb 18, 2020</span>
-
-             <span style={{ display: 'block', color: '#7d0001', fontSize: '22px', fontWeight: 'bold' }}>Call for preparation of FY 2022 PAPs by CHED.</span>
-
-              <span style={{ display: 'block',}}> It requires SUC to seek endorsement/approval of the proposed PAPs from the Governing Board before its enrollment to the NEDA PIP Online
-              (PIPOL) System.</span></Typography>
-
-            </div>
+          <div></div>
+          <div>
+            <Typography
+              variant="body1"
+              style={{
+                marginTop: "40px",
+                textAlign: "left",
+                marginLeft: "120px",
+              }}
+              gutterBottom
+            >
+              <span
+                  style={description_title}
+                >
+                <PlayArrowSharpIcon /> Section 4, Feb 18, 2020
+              </span>
+
+              <span
+                style={intro}
+              >
+                Call for preparation of FY 2022 PAPs by CHED.
+              </span>
+
+              <span style={description}>
+                {" "}
+                It requires SUC to seek endorsement/approval of the proposed
+                PAPs from the Governing Board before its enrollment to the NEDA
+                PIP Online (PIPOL) System.
+              </span>
+            </Typography>
           </div>
-      </div> 
+        </div>
+      </div>
       {/* Footer */}
       <div style={footer}>
         <Typography variant="body1">