diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/src/App.js b/src/App.js
index 2935076..76d3ff5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-import logo from "./logo.svg";
import "./App.scss";
import Card from "./components/Card";
diff --git a/src/App.scss b/src/App.scss
index 74b5e05..e69de29 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/assets/fonts/IRANSansWeb_Bold.woff b/src/assets/fonts/IRANSansWeb_Bold.woff
new file mode 100644
index 0000000..05d933e
Binary files /dev/null and b/src/assets/fonts/IRANSansWeb_Bold.woff differ
diff --git a/src/assets/fonts/IRANSansXFaNum-Regular.woff b/src/assets/fonts/IRANSansXFaNum-Regular.woff
new file mode 100644
index 0000000..34d87e6
Binary files /dev/null and b/src/assets/fonts/IRANSansXFaNum-Regular.woff differ
diff --git a/src/assets/images/square.svg b/src/assets/images/square.svg
new file mode 100644
index 0000000..a329a27
--- /dev/null
+++ b/src/assets/images/square.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 0000000..53e1b24
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1,44 @@
+import React from "react";
+
+const Button = ({
+ className,
+ iconClassName,
+ iconHolderClassName,
+ icon,
+ text,
+ onClick,
+ sharpStyle,
+ clippath,
+}) => {
+ return (
+
+ );
+};
+
+export default Button;
+
+Button.defaultProps = {
+ className:
+ "bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90",
+ text: "اطلاعات بیشتر",
+
+ iconHolderClassName: "bg-secondary mr-2",
+ iconClassName: "w-4",
+ icon: false,
+
+ sharpStyle: false,
+ clippath: "polygon(24% 0, 100% 0%, 100% 99%, 0% 100%)",
+};
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
index be88679..36c181b 100644
--- a/src/components/Card/index.js
+++ b/src/components/Card/index.js
@@ -1,7 +1,180 @@
-import React from "react";
+import React, { useState } from "react";
-const Card = () => {
- return
Card
;
+import Button from "../Button";
+
+import ax from "../../assets/images/square.svg";
+import FormInput from "../FormInput";
+
+const ProcessCard = ({ processes, title, hint, items, options }) => {
+ const [openModal, setOpenModal] = useState(false);
+ console.log(openModal);
+
+ return (
+
+ {/* right */}
+
+ {/* top */}
+
+ {processes.map((process, index) => (
+
+ {process.color && (
+
+ )}
+
{process.name}
+
{process.content}
+
+ ))}
+
+ {/* middle */}
+
+ {/* bottom */}
+
+ {/* right */}
+
+
+ {/* left */}
+
+ {options.map((option, j) => (
+
+
+
+
{option.title}
+
+
{option.content}
+
+ ))}
+
+ {/* modal */}
+
+
e.stopPropagation()}
+ >
+
+
+
+ );
};
-export default Card;
+export default ProcessCard;
+
+ProcessCard.defaultProps = {
+ title: "پروسه مختلف در این قسمت قرار می گیرد",
+ hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.",
+
+ processes: [
+ {
+ color: "bg-error",
+ name: "فرایند اجرایی",
+ content: 256,
+ },
+ {
+ color: false,
+ name: "وضعیت:",
+ content: "پرداخت شده",
+ },
+ {
+ color: "bg-info",
+ name: "در حال انجام",
+ content: 55,
+ },
+ {
+ color: false,
+ name: "انجام شده",
+ content: 100,
+ },
+ ],
+
+ items: [
+ {
+ icon: ax,
+ name: "سوالات:",
+ ans: 5,
+ },
+ {
+ icon: ax,
+ name: "چک لیست:",
+ ans: "تابع دارد",
+ },
+ {
+ icon: ax,
+ name: "مکاتبات:",
+ ans: "دارد",
+ },
+ ],
+
+ options: [
+ {
+ icon: ax,
+ title: "تاخیر",
+ content: "5 ساعت",
+ },
+ {
+ icon: ax,
+ title: "شرایط اجرا",
+ content: "2 مورد",
+ },
+ {
+ icon: ax,
+ title: "تابع شروع",
+ content: "ندارد",
+ },
+ {
+ icon: ax,
+ title: "مثلث",
+ content: "5 ساعت",
+ },
+ {
+ icon: ax,
+ title: "تایید خودکار",
+ content: "5 ساعت",
+ },
+ {
+ icon: ax,
+ title: "تابع انجام",
+ content: "ندارد",
+ },
+ ],
+};
diff --git a/src/components/CustomSelectBox/index.js b/src/components/CustomSelectBox/index.js
new file mode 100644
index 0000000..6ed8319
--- /dev/null
+++ b/src/components/CustomSelectBox/index.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+const CustomSelectBox = ({ options }) => {
+ return (
+
+ );
+};
+
+export default CustomSelectBox;
+
+CustomSelectBox.defaultProps = {
+ options: [
+ { title: "میزان تحصیلات" },
+ { title: "کارشناسی" },
+ { title: "ارشد" },
+ { title: "دکتری" },
+ ],
+};
diff --git a/src/components/FormInput/index.js b/src/components/FormInput/index.js
new file mode 100644
index 0000000..d203b18
--- /dev/null
+++ b/src/components/FormInput/index.js
@@ -0,0 +1,33 @@
+// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
+
+import React from "react";
+import CustomSelectBox from "../CustomSelectBox";
+
+const FormInput = ({ items }) => {
+ return (
+
+ );
+};
+
+export default FormInput;
+
+FormInput.defaultProps = {
+ items: [
+ {
+ title: "mahdi",
+ },
+ {
+ title: "mahdi",
+ },
+ {
+ title: "mahdi",
+ },
+ ],
+};
diff --git a/src/components/Popup/index.js b/src/components/Popup/index.js
new file mode 100644
index 0000000..5cff529
--- /dev/null
+++ b/src/components/Popup/index.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Popup = () => {
+ return Popup
;
+};
+
+export default Popup;
diff --git a/src/index.scss b/src/index.scss
index b5c61c9..14d2354 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@font-face {
+ font-family: "iransans-medium";
+ src: url(./assets/fonts/IRANSansXFaNum-Regular.woff);
+}
+
+@font-face {
+ font-family: "sansbold";
+ src: url(./assets/fonts/IRANSansWeb_Bold.woff);
+}
+
+body {
+ font-family: iransans-medium;
+ direction: rtl;
+ background-color: #f5f5f5;
+}
+
+.rtl {
+ direction: rtl;
+}
+
+.ltr {
+ direction: ltr;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 26cde68..fed53ac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,11 @@
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sansbold: ["sansbold"],
+ },
+ },
},
plugins: [],
};