push rasad front on new repo

src/components/bank-card/BankCard.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography } from "@mui/material";
+
+const BankCard = ({ cardNumber, expirationDate, bankName, bankUser }) => (
+  <div
+    style={{
+      border: "1px solid #d9d9d9",
+      borderRadius: "10px",
+      padding: "20px",
+      backgroundColor: "#f0f0f0",
+      width: "350px",
+    }}
+  >
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "row",
+      }}
+    >
+      <div>
+        <Typography variant="body2">اطلاعات بانکی جهت واریز مبلغ</Typography>
+        <Typography variant="h6" fontWeight={"bold"}>
+          {bankName}
+        </Typography>
+      </div>
+
+      <div>
+        <img
+          src="https://fs.noorgram.ir/xen/2020/12/953_f6253f3c48b7e2a782b3526bf4b80fbd.png"
+          alt="Visa"
+          width="50px"
+        />
+      </div>
+    </div>
+
+    <div style={{ fontSize: "18px", marginTop: "40px" }}>
+      <Typography>شماره کارت {cardNumber}</Typography>
+    </div>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: "20px",
+      }}
+    >
+      <Typography>
+        <div style={{ fontSize: "14px" }}>{bankUser}</div>
+        <div style={{ fontSize: "18px" }}>{expirationDate}</div>
+      </Typography>
+    </div>
+  </div>
+);
+
+BankCard.propTypes = {
+  cardNumber: PropTypes.string.isRequired,
+  expirationDate: PropTypes.string.isRequired,
+};
+
+export default BankCard;