creat component Expertise and integration

2025-01-05 13:00:48 +01:00
parent c4b664f667
commit e734ca68fc
2 changed files with 134 additions and 121 deletions
@@ -0,0 +1,116 @@
+import React from "react";
+import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
+
+const Expertices = ({
+  expertiseTitle,
+  expertise1Title,
+  expertise1Text,
+  expertise2Title,
+  expertise2Text,
+  expertise3Title,
+  expertise3Text,
+}) => {
+  return (
+    <Box
+      sx={{
+        py: 6,
+        px: 4,
+        backgroundColor: "#f9f9f9",
+      }}
+    >
+      <Typography
+        variant="h2"
+        align="center"
+        gutterBottom
+        sx={{
+          fontWeight: "bold",
+          mb: 4,
+          fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" }, // Responsive
+        }}
+      >
+        {expertiseTitle}
+      </Typography>
+      <Grid container spacing={4}>
+        {/* Expertise 1 */}
+        <Grid item xs={12} md={4}>
+          <Card
+            sx={{
+              boxShadow: 3,
+              padding: 2,
+              textAlign: "center",
+              backgroundColor: "#fff",
+            }}
+          >
+            <CardContent>
+              <Typography
+                variant="h3"
+                sx={{
+                  fontWeight: "bold",
+                  mb: 2,
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                }}
+              >
+                {expertise1Title}
+              </Typography>
+              <Typography variant="body1">{expertise1Text}</Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+
+        {/* Expertise 2 */}
+        <Grid item xs={12} md={4}>
+          <Card
+            sx={{
+              boxShadow: 3,
+              padding: 2,
+              textAlign: "center",
+              backgroundColor: "#fff",
+            }}
+          >
+            <CardContent>
+              <Typography
+                variant="h3"
+                sx={{
+                  fontWeight: "bold",
+                  mb: 2,
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                }}
+              >
+                {expertise2Title}
+              </Typography>
+              <Typography variant="body1">{expertise2Text}</Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+
+        {/* Expertise 3 */}
+        <Grid item xs={12} md={4}>
+          <Card
+            sx={{
+              boxShadow: 3,
+              padding: 2,
+              textAlign: "center",
+              backgroundColor: "#fff",
+            }}
+          >
+            <CardContent>
+              <Typography
+                variant="h3"
+                sx={{
+                  fontWeight: "bold",
+                  mb: 2,
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                }}
+              >
+                {expertise3Title}
+              </Typography>
+              <Typography variant="body1">{expertise3Text}</Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Expertices;