first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,150 @@
+import React from "react";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
+
+const FeaturesData = [
+  {
+    id: "1",
+    subTitle: "Due Tasks",
+    title: "41",
+    iconName: "ri-pie-chart-2-line",
+    badgeProgress: "5.80%",
+    badgeClass: "successBadge",
+    badgeIcon: "ri-arrow-up-s-fill",
+    growthText: "Completed: 13 Projects this month",
+  },
+  {
+    id: "2",
+    subTitle: "Active Projects",
+    title: "65",
+    iconName: "ri-briefcase-line",
+    badgeProgress: "1.04%",
+    badgeClass: "dangerBadge",
+    badgeIcon: "ri-arrow-down-s-fill",
+    growthText: "Projects this month",
+  },
+  {
+    id: "3",
+    subTitle: "Total Hours",
+    title: "599",
+    iconName: "ri-time-line",
+    badgeProgress: "5.80%",
+    badgeClass: "successBadge",
+    badgeIcon: "ri-arrow-up-s-fill",
+    growthText: "Projects this month",
+  },
+  {
+    id: "4",
+    subTitle: "Total Projects",
+    title: "24k",
+    iconName: "ri-shield-check-line",
+    badgeProgress: "7.80%",
+    badgeClass: "successBadge",
+    badgeIcon: "ri-arrow-up-s-fill",
+    growthText: "Completed: 13 Projects this month",
+  },
+];
+
+const Features = () => {
+  return (
+    <>
+      <Grid
+        container
+        justifyContent="center"
+        rowSpacing={1}
+        columnSpacing={{ xs: 1, sm: 2, md: 2 }}
+      >
+        {FeaturesData.map((feature) => (
+          <Grid item xs={12} sm={6} md={6} lg={6} xl={3} key={feature.id}>
+            <Card
+              sx={{
+                boxShadow: "none",
+                borderRadius: "10px",
+                p: "20px 15px",
+                mb: "15px",
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <Box
+                    sx={{
+                      width: "58px",
+                      height: "58px",
+                      lineHeight: "58px",
+                      background: "#757FEF",
+                      color: "#fff",
+                      fontSize: "30px",
+                      borderRadius: "8px",
+                      textAlign: "center",
+                    }}
+                    className="mr-10px"
+                  >
+                    <i className={feature.iconName}></i>
+                  </Box>
+
+                  <Box>
+                    <Typography sx={{ fontSize: "13px" }}>
+                      {feature.subTitle}
+                    </Typography>
+                    <Typography
+                      variant="h1"
+                      sx={{ fontSize: 25, fontWeight: 700, marginTop: '4px' }}
+                    >
+                      {feature.title}
+                    </Typography>
+                  </Box>
+                </Box>
+
+                <Box>
+                  <span
+                    className={feature.badgeClass}
+                    style={{ fontSize: "13px", fontWeight: "500" }}
+                  >
+                    {feature.badgeProgress}
+                    <i
+                      className={feature.badgeIcon}
+                      style={{
+                        fontSize: "13px",
+                        position: "relative",
+                        top: "2px",
+                        lineHeight: "1",
+                      }}
+                    ></i>
+                  </span>
+                </Box>
+              </Box>
+
+              <Box mt={2}>
+                <Typography
+                  sx={{
+                    fontSize: "13px",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <span className="successColor mr-5px">{feature.icon}</span>
+                  {feature.growthText}
+                </Typography>
+              </Box>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default Features;