first commit

package.json

@@ -6,9 +6,14 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-toastify": "^8.1.0",
+    "sweetalert": "^2.1.2",
+    "sweetalert2": "^11.1.10",
+    "sweetalert2-react-content": "^4.2.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,12 @@
-.App {
+body {
-  text-align: center;
+  background-color: #f5f5f5 !important;
+  direction: rtl;
 }
-
+button {
-.App-logo {
+  outline: none !important;
-  height: 40vmin;
+  border: none !important;
-  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 {
+input {
-  from {
+  outline: none !important;
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

src/App.js

@@ -1,23 +1,22 @@
-import logo from './logo.svg';
+import "./App.css";
-import './App.css';
+import "bootstrap/dist/css/bootstrap.min.css";
+import Header from "./components/header/Header";
+import Functionalities from "./components/Functionalities/Functionalities";
+import Footer from "./components/footer/Footer";
+import Alert from "./components/alert/Alert";
+import Toast from "./components/toast/Toast";
 
 function App() {
   return (
-    <div className="App">
+    <div className="w-75 m-auto">
-      <header className="App-header">
+      {/* header SECTION */}
-        <img src={logo} className="App-logo" alt="logo" />
+      {/* <Header /> */}
-        <p>
+      {/* functionality */}
-          Edit <code>src/App.js</code> and save to reload.
+      {/* <Functionalities /> */}
-        </p>
+      {/* footer */}
-        <a
+      {/* <Footer /> */}
-          className="App-link"
+      <Alert />
-          href="https://reactjs.org"
+      <Toast />
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/Functionalities/Functionalities.css

@@ -0,0 +1,22 @@
+.box {
+  cursor: pointer;
+  transition: all 0.4s;
+}
+
+.box:hover {
+  background-color: #f5f5f5;
+  transform: translateY(-5px) !important;
+}
+
+.title-holder h1 {
+  margin-left: 13px !important;
+}
+
+.image-box {
+  background-color: #f3f0d7;
+  width: 20%;
+}
+
+.content-holder {
+  width: 70%;
+}

src/components/Functionalities/Functionalities.js

@@ -0,0 +1,148 @@
+import React from "react";
+import "./Functionalities.css";
+import airplane from "../../icons/vuesax-linear-airplane.png";
+
+const Functionalities = () => {
+  return (
+    <section className="functionality bg-white">
+      <div className="container">
+        <div className="row justify-content-around py-5">
+          {/* box1 */}
+          <div className="col-5 box d-flex justify-content-around align-items-center p-4 border">
+            {/* imageHolder */}
+            <div className="image-box rounded-3 shadow-sm border">
+              <img src={airplane} alt="" className="p-2 image-bg" />
+            </div>
+            {/* text holder */}
+            <div className="content-holder ">
+              {/* title */}
+              <div className="title-holder d-flex align-items-center justify-content-center text-center">
+                <h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
+                <button type="button" className="btn btn-success">
+                  جدید
+                </button>
+              </div>
+              {/* paragraph */}
+              <p className="mt-1">
+                قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
+                هدف کارکنان کمک نمیاد.
+              </p>
+            </div>
+          </div>
+          {/* box2 */}
+          <div className="col-5 box d-flex justify-content-around align-items-center p-4 border">
+            {/* imageHolder */}
+            <div className="image-box rounded-3 shadow-sm border">
+              <img src={airplane} alt="" className="p-2 image-bg" />
+            </div>
+            {/* text holder */}
+            <div className="content-holder ">
+              {/* title */}
+              <div className="title-holder d-flex align-items-center justify-content-center text-center">
+                <h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
+                <button type="button" className="btn btn-success">
+                  جدید
+                </button>
+              </div>
+              {/* paragraph */}
+              <p className="mt-1">
+                قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
+                هدف کارکنان کمک نمیاد.
+              </p>
+            </div>
+          </div>
+          {/* box3 */}
+          <div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
+            {/* imageHolder */}
+            <div className="image-box rounded-3 shadow-sm border">
+              <img src={airplane} alt="" className="p-2 image-bg" />
+            </div>
+            {/* text holder */}
+            <div className="content-holder ">
+              {/* title */}
+              <div className="title-holder d-flex align-items-center justify-content-center text-center">
+                <h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
+                <button type="button" className="btn btn-success">
+                  جدید
+                </button>
+              </div>
+              {/* paragraph */}
+              <p className="mt-1">
+                قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
+                هدف کارکنان کمک نمیاد.
+              </p>
+            </div>
+          </div>
+          {/* box4 */}
+          <div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
+            {/* imageHolder */}
+            <div className="image-box rounded-3 shadow-sm border">
+              <img src={airplane} alt="" className="p-2 image-bg" />
+            </div>
+            {/* text holder */}
+            <div className="content-holder ">
+              {/* title */}
+              <div className="title-holder d-flex align-items-center justify-content-center text-center">
+                <h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
+                <button type="button" className="btn btn-success">
+                  جدید
+                </button>
+              </div>
+              {/* paragraph */}
+              <p className="mt-1">
+                قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
+                هدف کارکنان کمک نمیاد.
+              </p>
+            </div>
+          </div>
+          {/* box5 */}
+          <div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
+            {/* imageHolder */}
+            <div className="image-box rounded-3 shadow-sm border">
+              <img src={airplane} alt="" className="p-2 image-bg" />
+            </div>
+            {/* text holder */}
+            <div className="content-holder ">
+              {/* title */}
+              <div className="title-holder d-flex align-items-center justify-content-center text-center">
+                <h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
+                <button type="button" className="btn btn-success">
+                  جدید
+                </button>
+              </div>
+              {/* paragraph */}
+              <p className="mt-1">
+                قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
+                هدف کارکنان کمک نمیاد.
+              </p>
+            </div>
+          </div>
+          {/* box6 */}
+          <div className="col-5 box d-flex justify-content-around align-items-center p-4 border mt-4">
+            {/* imageHolder */}
+            <div className="image-box rounded-3 shadow-sm border">
+              <img src={airplane} alt="" className="p-2 image-bg" />
+            </div>
+            {/* text holder */}
+            <div className="content-holder ">
+              {/* title */}
+              <div className="title-holder d-flex align-items-center justify-content-center text-center">
+                <h1 className="fs-5 text-success">قابلیت امتیازدهی</h1>
+                <button type="button" className="btn btn-success">
+                  جدید
+                </button>
+              </div>
+              {/* paragraph */}
+              <p className="mt-1">
+                قابلیت امتیازدهی به مطالب از جمله امکانات می باشد تا به جامعه
+                هدف کارکنان کمک نمیاد.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Functionalities;

src/components/alert/Alert.js

@@ -0,0 +1,153 @@
+import React from "react";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import "./alert.css";
+import undraw from "../../icons/undraw.png";
+
+const Alert = () => {
+  // error1
+  const showAlert = () => {
+    Swal.fire({
+      title: "عنوان متن ارور",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "متوجه شدم",
+      showCloseButton: true,
+      customClass: {
+        title: "title-error-1",
+        closeButton: "close-button-1",
+        confirmButton: "confirm-button-1",
+      },
+    });
+  };
+  // error2
+  const showAlert2 = () => {
+    Swal.fire({
+      title: "عنوان متن ارور",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "توضیح بیشتر",
+      showCloseButton: true,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+      customClass: {
+        title: "title-error-1",
+        closeButton: "close-button-1",
+        confirmButton: "confirm-button-1",
+        cancelButton: "cancle-button1",
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire("Deleted!", "Your file has been deleted.", "success");
+      }
+    });
+  };
+  // error3
+  const showAlert3 = () => {
+    Swal.fire({
+      title: "عنوان متن ارور",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "توضیح بیشتر",
+      customClass: {
+        title: "title-error-2",
+        closeButton: "close-button-2",
+        confirmButton: "confirm-button-2",
+        cancelButton: "cancle-button2",
+      },
+      showCloseButton: true,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire("Deleted!", "Your file has been deleted.", "success");
+      }
+    });
+  };
+  // error4
+  const showAlert4 = () => {
+    Swal.fire({
+      icon: "success",
+      title: "عنوان متن ارور",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "توضیح بیشتر",
+      showCloseButton: true,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+      customClass: {
+        title: "title-error-4",
+        closeButton: "close-button-2",
+        confirmButton: "confirm-button-2",
+        cancelButton: "cancle-button2",
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire("Deleted!", "Your file has been deleted.", "success");
+      }
+    });
+  };
+  // error5
+  const showAlert5 = () => {
+    const { value: email } = Swal.fire({
+      input: "email",
+      inputPlaceholder: "ایمیل خود را اینجا بنویسید",
+      imageUrl: "https://unsplash.it/400/200",
+      imageAlt: "Custom image",
+      showCloseButton: true,
+      imageWidth: 400,
+      imageHeight: 200,
+      confirmButtonText: "عضو شوید",
+      html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
+      customClass: {
+        confirmButton: "confirm-button-5",
+        input: "input-error-5",
+        closeButton: "close-button-2",
+      },
+    });
+
+    if (email) {
+      Swal.fire(`Entered email: ${email}`);
+    }
+  };
+  // error6
+  const showAlert6 = () => {
+    Swal.fire({
+      title: "عنوان متن ارور",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "مشاهده امکانات",
+      showCloseButton: true,
+      customClass: {
+        title: "title-error-1",
+        closeButton: "close-button-6",
+        confirmButton: "confirm-button-1",
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire("Deleted!", "Your file has been deleted.", "success");
+      }
+    });
+  };
+
+  return (
+    <div className="mt-5">
+      <button className="btn btn-danger btn-lg" onClick={showAlert}>
+        اررور 1
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert2}>
+        اررور 2
+      </button>
+      <button className="btn btn-danger btn-lg eroorr" onClick={showAlert3}>
+        اررور 3
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert4}>
+        4 اررور
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert5}>
+        5 اررور
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert6}>
+        6 اررور
+      </button>
+      <button className="btn btn-danger btn-lg">7 اررور</button>
+    </div>
+  );
+};
+
+export default Alert;

src/components/alert/alert.css

@@ -0,0 +1,172 @@
+:root {
+  --error-color1: #06bace;
+  --error-color2: #3ee924;
+  --white: #fff;
+  --content-color: #646464;
+}
+/* TODO common styles */
+.swal2-container.swal2-center > .swal2-popup {
+  border: solid 2px #707070;
+  padding: 10px;
+}
+/* ? کلاس تمامی تایتل ها */
+.swal2-title {
+  text-align: right;
+  font-size: 26px;
+}
+/* ? کلاس متن داخل الرت باکس */
+.swal2-html-container {
+  text-align: justify;
+  line-height: 1.8;
+  color: var(--content-color) !important;
+  font-weight: 600;
+}
+/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
+.swal2-rtl .swal2-close {
+  border-radius: 10px;
+  margin-left: 10px;
+  margin-top: 13px;
+  transition: all 0.4s;
+}
+/* ? کلاس کانفرم باتن */
+.swal2-styled.swal2-confirm {
+  transition: all 0.4s;
+  outline: none !important;
+}
+/* ? کلاس هاور کانفرم باتن */
+.swal2-styled.swal2-confirm:hover {
+  transform: translateY(-5px) !important;
+}
+/* ? کلاس کنسل باتن */
+.swal2-styled.swal2-cancel {
+  transition: all 0.4s;
+}
+/* ? کلاس هاور کنسل باتن */
+.swal2-styled.swal2-cancel:hover {
+  transform: translateY(-5px) !important;
+}
+/* ? ایکن اررور  */
+.swal2-icon.swal2-error {
+  border-color: #e92424;
+  color: #e92424;
+}
+/* !error 1 */
+/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */
+/* TODO باکس اول از سمت راست در فایل پی اس دی */
+/* ? تایتل */
+.title-error-1 {
+  color: var(--error-color1) !important;
+}
+
+.eroorr:focus {
+  outline: none !important;
+  box-shadow: 0px 0px 0px black !important;
+  border: 0px;
+}
+
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-1 {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-1:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color1) !important;
+  border: solid 4px var(--error-color1) !important;
+}
+/* ? کانفرم باتن */
+.confirm-button-1 {
+  background-color: var(--white) !important;
+  border: solid 2px var(--error-color1) !important;
+  color: var(--error-color1) !important;
+}
+/* ? هاور کانفرم باتن */
+.confirm-button-1:hover {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+}
+/* !error 2 */
+/* ? کنسل باتن */
+.cancle-button1 {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+  border: solid 2px var(--error-color1) !important;
+}
+/* ? هاور کنسل باتن */
+.cancle-button1:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color1) !important;
+}
+/* !error3 */
+/* ? تایتل */
+.title-error-2 {
+  color: var(--error-color2) !important;
+}
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-2 {
+  background-color: var(--error-color2) !important;
+  color: var(--white) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-2:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color2) !important;
+  border: solid 4px var(--error-color2) !important;
+}
+/* ? کانفرم باتن */
+.confirm-button-2 {
+  background-color: var(--white) !important;
+  border: solid 2px var(--error-color2) !important;
+  color: var(--error-color2) !important;
+}
+/* ? هاور کانفرم باتن */
+.confirm-button-2:hover {
+  background-color: var(--error-color2) !important;
+  color: var(--white) !important;
+}
+/* ? کنسل باتن */
+.cancle-button2 {
+  background-color: var(--error-color2) !important;
+  color: var(--white) !important;
+  border: solid 2px var(--error-color2) !important;
+}
+/* ? هاور کنسل باتن */
+.cancle-button2:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color2) !important;
+}
+/* !error4 */
+/* ? تایتل */
+.title-error-4 {
+  text-align: center !important;
+  color: var(--error-color2) !important;
+}
+/* !error5 */
+/* ? کانفرم باتن */
+.confirm-button-5 {
+  background-color: var(--error-color2) !important;
+  margin-top: -81px;
+  margin-left: -260px;
+  padding: 12px 15px;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+/* ? اینپوت فیلد */
+.input-error-5 {
+  width: 70% !important;
+  height: 47px !important ;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+/* !error6 */
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-6 {
+  color: var(--error-color1) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-6:hover {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+  border: solid 4px var(--error-color1) !important;
+}

src/components/alert/test.css

@@ -0,0 +1,172 @@
+:root {
+  --error-color1: #06bace;
+  --error-color2: #3ee924;
+  --white: #fff;
+  --content-color: #646464;
+}
+/* TODO common styles */
+.swal2-container.swal2-center > .swal2-popup {
+  border: solid 2px #707070;
+  padding: 10px;
+}
+/* ? کلاس تمامی تایتل ها */
+.swal2-title {
+  text-align: right;
+  font-size: 26px;
+}
+/* ? کلاس متن داخل الرت باکس */
+.swal2-html-container {
+  text-align: justify;
+  line-height: 1.8;
+  color: var(--content-color) !important;
+  font-weight: 600;
+}
+/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
+.swal2-rtl .swal2-close {
+  border-radius: 10px;
+  margin-left: 10px;
+  margin-top: 13px;
+  transition: all 0.4s;
+}
+/* ? کلاس کانفرم باتن */
+.swal2-styled.swal2-confirm {
+  transition: all 0.4s;
+  outline: none !important;
+}
+/* ? کلاس هاور کانفرم باتن */
+.swal2-styled.swal2-confirm:hover {
+  transform: translateY(-5px) !important;
+}
+/* ? کلاس کنسل باتن */
+.swal2-styled.swal2-cancel {
+  transition: all 0.4s;
+}
+/* ? کلاس هاور کنسل باتن */
+.swal2-styled.swal2-cancel:hover {
+  transform: translateY(-5px) !important;
+}
+/* ? ایکن اررور  */
+.swal2-icon.swal2-error {
+  border-color: #e92424;
+  color: #e92424;
+}
+/* !error 1 */
+/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */
+/* TODO باکس اول از سمت راست در فایل پی اس دی */
+/* ? تایتل */
+.title-error-1 {
+  color: var(--error-color1) !important;
+}
+
+.eroorr:focus {
+  outline: none !important;
+  box-shadow: 0px 0px 0px black !important;
+  border: 0px;
+}
+
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-1 {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-1:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color1) !important;
+  border: solid 4px var(--error-color1) !important;
+}
+/* ? کانفرم باتن */
+.confirm-button-1 {
+  background-color: var(--white) !important;
+  border: solid 2px var(--error-color1) !important;
+  color: var(--error-color1) !important;
+}
+/* ? هاور کانفرم باتن */
+.confirm-button-1:hover {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+}
+/* !error 2 */
+/* ? کنسل باتن */
+.cancle-button1 {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+  border: solid 2px var(--error-color1) !important;
+}
+/* ? هاور کنسل باتن */
+.cancle-button1:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color1) !important;
+}
+/* !error3 */
+/* ? تایتل */
+.title-error-2 {
+  color: var(--error-color2) !important;
+}
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-2 {
+  background-color: var(--error-color2) !important;
+  color: var(--white) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-2:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color2) !important;
+  border: solid 4px var(--error-color2) !important;
+}
+/* ? کانفرم باتن */
+.confirm-button-2 {
+  background-color: var(--white) !important;
+  border: solid 2px var(--error-color2) !important;
+  color: var(--error-color2) !important;
+}
+/* ? هاور کانفرم باتن */
+.confirm-button-2:hover {
+  background-color: var(--error-color2) !important;
+  color: var(--white) !important;
+}
+/* ? کنسل باتن */
+.cancle-button2 {
+  background-color: var(--error-color2) !important;
+  color: var(--white) !important;
+  border: solid 2px var(--error-color2) !important;
+}
+/* ? هاور کنسل باتن */
+.cancle-button2:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color2) !important;
+}
+/* !error4 */
+/* ? تایتل */
+.title-error-4 {
+  text-align: center !important;
+  color: var(--error-color2) !important;
+}
+/* !error5 */
+/* ? کانفرم باتن */
+.confirm-button-5 {
+  background-color: var(--error-color2) !important;
+  margin-top: -81px;
+  margin-left: -260px;
+  padding: 12px 15px;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+/* ? اینپوت فیلد */
+.input-error-5 {
+  width: 70% !important;
+  height: 47px !important ;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+/* !error6 */
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-6 {
+  color: var(--error-color1) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-6:hover {
+  background-color: var(--error-color1) !important;
+  color: var(--white) !important;
+  border: solid 4px var(--error-color1) !important;
+}

src/components/footer/Footer.js

@@ -0,0 +1,29 @@
+import React from "react";
+import "./footer.css";
+
+const Footer = () => {
+  return (
+    <footer className="p-2 rounded">
+      <div className="container">
+        <div className="row">
+          <div className="col-8 text-white">
+            <h4>هزاران درصد تخفیف بیشتر</h4>
+            <p className="me-4 text-white">
+              با وارد کردن کد بهار تابستون از تخفیف 10 درصدی ویژه برخوردار شوید
+            </p>
+          </div>
+          <div className="col-4 align-items-end">
+            <button
+              type="button"
+              class="btn btn-outline-info btn-lg text-white text-center"
+            >
+              مشاهده امکانات
+            </button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/footer/footer.css

@@ -0,0 +1,3 @@
+footer {
+  background-color: #2f6aa1;
+}

src/components/header/Header.js

@@ -0,0 +1,25 @@
+import React from "react";
+import "./header.css";
+
+const Header = () => {
+  return (
+    <header className="bg-white mt-5">
+      <div className="container">
+        <div className="row justify-content-between align-items-center">
+          {/* header title */}
+          <div className="col-6 mt-5 ">
+            <h4 className="header-title d-inline rounded p-2 border">
+              امکانات و ویژگی های پلتفرم
+            </h4>
+          </div>
+          {/* header nav menu */}
+          {/* <div className="col-4 bg-dark">
+            <p className="text-white text-start">مهدی عندلیب</p>
+          </div> */}
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/header/header.css

@@ -0,0 +1,13 @@
+/* header */
+header {
+  border-top-right-radius: 7px;
+  border-top-left-radius: 7px;
+}
+.header-title {
+  background-color: #f5f5f5 !important;
+  cursor: pointer;
+  transition: all 0.4s;
+}
+.header-title:hover {
+  background-color: #fff !important;
+}

src/components/toast/Toast.css

@@ -0,0 +1,17 @@
+.Toastify__toast-theme--colored.Toastify__toast--error {
+  background: #ffeaea;
+  color: #c70000;
+}
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
+  background: #c70000;
+}
+.Toastify__close-button > svg {
+  color: #000 !important;
+}
+.Toastify__toast-theme--colored.Toastify__toast--success {
+  color: #21ae0b !important;
+  background: #c3ffb9 !important;
+}
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
+  background: #21ae0b !important;
+}

src/components/toast/Toast.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import "./Toast.css";
+
+const Toast = () => {
+  const notify = () =>
+    toast.success("اررور شماره 1", {
+      position: "top-right",
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: false,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    });
+  const notify2 = () =>
+    toast.error("اررور شماره 1", {
+      position: "top-right",
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: false,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    });
+  const notify3 = () =>
+    toast.error("اررور شماره 1", {
+      position: "top-right",
+      theme: "colored",
+      icon: false,
+    });
+  const notify4 = () =>
+    toast.success("اررور شماره 1", {
+      position: "top-right",
+      theme: "colored",
+      icon: false,
+    });
+
+  return (
+    <div>
+      <button onClick={notify} className="btn btn-lg bg-warning">
+        toast notification 1
+      </button>
+      <button onClick={notify2} className="btn btn-lg bg-warning">
+        toast notification 2
+      </button>
+      <button onClick={notify3} className="btn btn-lg bg-warning">
+        toast notification 3
+      </button>
+      <button onClick={notify4} className="btn btn-lg bg-warning">
+        toast notification 4
+      </button>
+
+      <ToastContainer position="top-right" rtl />
+    </div>
+  );
+};
+
+export default Toast;

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,17 +1,13 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';