first commit

2023-10-14 22:02:57 -04:00
commit 5f95d857d4
783 changed files with 112323 additions and 0 deletions
@@ -0,0 +1,130 @@
+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: "Total Orders",
+    number: "1,452",
+    icon: "ri-stack-line",
+    badgeClass: "successBadge",
+    progress: "4.87%",
+    progressIcon: "ri-arrow-up-s-line",
+    helpText: "Leads this month",
+  },
+  {
+    id: "2",
+    subTitle: "Overall Revenue",
+    number: "$28,452",
+    icon: "ri-pie-chart-line",
+    badgeClass: "dangerBadge",
+    progress: "0.50%",
+    progressIcon: "ri-arrow-down-s-line",
+    helpText: "Leads this month",
+  },
+  {
+    id: "3",
+    subTitle: "Average Price",
+    number: "$200.5",
+    icon: "ri-money-cny-box-line",
+    badgeClass: "successBadge",
+    progress: "2.22%",
+    progressIcon: "ri-arrow-up-s-line",
+    helpText: "Leads this month",
+  },
+  {
+    id: "4",
+    subTitle: "Total Clients",
+    number: "7,805",
+    icon: "ri-user-follow-line",
+    badgeClass: "successBadge",
+    progress: "1.21%",
+    progressIcon: "ri-arrow-up-s-line",
+    helpText: "Leads 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: "25px",
+                mb: "15px",
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: "10px",
+                }}
+              >
+                <Box>
+                  <Typography as="p" sx={{ fontSize: 15 }}>
+                    {feature.subTitle}
+                  </Typography>
+
+                  <Typography as="h1" sx={{ fontSize: 28, fontWeight: 700 }}>
+                    {feature.number}
+                  </Typography>
+                </Box>
+
+                <Box>
+                  <i
+                    className={feature.icon}
+                    style={{
+                      lineHeight: "1",
+                      fontSize: "40px",
+                      color: "#a9a9c8",
+                    }}
+                  ></i>
+                </Box>
+              </Box>
+
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <span
+                  className={feature.badgeClass}
+                  style={{
+                    fontWeight: "500",
+                    position: "relative",
+                    paddingRight: "30px",
+                  }}
+                >
+                  {feature.progress}{" "}
+                  <i
+                    className={`progressIcon ${feature.progressIcon}`} 
+                  ></i>
+                </span>
+                <Typography as="p" className="ml-10px">
+                  {feature.helpText}
+                </Typography>
+              </Box>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default Features;