diff --git a/src/components/FooterDesign/Footer/index.js b/src/components/FooterDesign/Footer/index.js
index eee41e0..db15255 100644
--- a/src/components/FooterDesign/Footer/index.js
+++ b/src/components/FooterDesign/Footer/index.js
@@ -1,14 +1,9 @@
 import React from "react";
 import _ from "lodash";
 
-import enamad from "./images/enamad-pic.svg";
-import samandehi from "images/samandehi-pic.svg";
-
-import lightBlueLine from "images/light-blue-line.svg";
-
 const FooterDesign1 = ({ links }) => {
   return (
-    <footer className="flex flex-col md:flex-row justify-around items-start md:items-start relative shadow-md bg-white">
+    <footer className="relative w-full flex flex-col md:flex-row justify-around items-start md:items-start p-4 shadow-md bg-white">
       <div className="flex items-start">
         <>
           {links.map((section, index) => (
@@ -26,14 +21,19 @@ const FooterDesign1 = ({ links }) => {
         </>
       </div>
       <div className="flex items-center mt-10 md:mt-0">
-        <img src={enamad} alt="enamad" className="w-28 ml-10" />
-        <img src={samandehi} alt="samandehi" className="w-28" />
+        <img src="images/enamad-pic.svg" alt="enamad" className="w-28 ml-10" />
+        <img src="images/samandehi-pic.svg" alt="samandehi" className="w-28" />
       </div>
       {/* line */}
       <img
-        src={lightBlueLine}
-        alt=""
-        className="hidden sm:block absolute bottom-5 left-20"
+        src="images/light-blue-line.svg"
+        alt="line"
+        className="hidden sm:block absolute bottom-5 left-10"
+      />
+      <img
+        src="images/light-blue-line.svg"
+        alt="line"
+        className="hidden sm:block absolute top-5 right-1"
       />
     </footer>
   );
diff --git a/src/components/Input/danger.png b/src/components/Input/danger.png
new file mode 100644
index 0000000..0bb622e
Binary files /dev/null and b/src/components/Input/danger.png differ
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
new file mode 100644
index 0000000..5fb4ed0
--- /dev/null
+++ b/src/components/Input/index.js
@@ -0,0 +1,171 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import "./index.scss";
+
+import tick from "./tick.png";
+import danger from "./danger.png";
+
+const langDetector = (lang, option1, option2) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+const inputStatusHandler = (value, focus, status, primary, success, danger) => {
+  if (!focus) {
+    return "";
+  } else {
+    if (!value) {
+      return primary;
+    } else {
+      if (status) {
+        return success;
+      } else {
+        return danger;
+      }
+    }
+  }
+};
+
+export default function Input(props) {
+  const [value, setValue] = useState("");
+  const [focusToggle, setFocusToggle] = useState(false);
+
+  const { lang, theme, inputMode, label, status, maxLength, message } = props;
+
+  const onChange = (val) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        ["input flex flex-col relative my-2", langDetector(lang, "fa", "en")],
+        " "
+      )}
+    >
+      <label
+        className={_.join(
+          [
+            "absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white rounded px-2 text-lg transition-all duration-300",
+            langDetector(lang, "right-2", "left-2"),
+            inputStatusHandler(
+              value,
+              focusToggle,
+              status,
+              "input__labelFocus",
+              "input__labelSuccess",
+              "input__labelDanger"
+            ),
+          ],
+          " "
+        )}
+        onClick={() => setFocusToggle(true)}
+      >
+        {label}
+      </label>
+      <input
+        type="text"
+        inputMode={inputMode}
+        className={_.join(
+          [
+            "flex-1 border rounded-md outline-none p-2",
+            inputStatusHandler(
+              value,
+              focusToggle,
+              status,
+              "input__inputActive",
+              "input__inputSuccess",
+              "input__inputDanger"
+            ),
+            "transition",
+          ],
+          " "
+        )}
+        onChange={(e) => onChange(e.target.value)}
+        value={value}
+        onFocus={() => setFocusToggle(true)}
+        onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
+        maxLength={maxLength}
+      />
+      {!status && value && (
+        <img
+          src={danger}
+          alt={langDetector(lang, "اشتباه", "wrong")}
+          className={_.join(
+            [
+              "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
+              langDetector(lang, "left-2", "right-2"),
+            ],
+            " "
+          )}
+        />
+      )}
+      {status && value && (
+        <img
+          src={tick}
+          alt={langDetector(lang, "درست", "right")}
+          className={_.join(
+            [
+              "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
+              langDetector(lang, "left-2", "right-2"),
+            ],
+            " "
+          )}
+        />
+      )}
+
+      {value && !status && (
+        <span
+          className={_.join(
+            [
+              "input__message text-xs absolute -bottom-5",
+              langDetector(lang, "right-2", "left-2"),
+              inputStatusHandler(
+                value,
+                focusToggle,
+                status,
+                "",
+                "input__messageSuccess",
+                "input__messageDanger"
+              ),
+              "transition",
+            ],
+            " "
+          )}
+        >
+          {message}
+        </span>
+      )}
+      {value && (
+        <span
+          className={_.join(
+            [
+              "input__length absolute -bottom-5 text-xs",
+              langDetector(lang, "left-2", "right-2"),
+              inputStatusHandler(
+                value,
+                focusToggle,
+                status,
+                "",
+                "input__lengthSuccess",
+                "input__lengthDanger"
+              ),
+              "transition",
+            ],
+            " "
+          )}
+        >
+          {value.length + "/" + maxLength}
+        </span>
+      )}
+    </div>
+  );
+}
+
+Input.defaultProps = {
+  lang: "fa",
+  inputMode: "string",
+  label: "label",
+  status: "",
+  maxLength: "",
+  message: "",
+};
diff --git a/src/components/Input/index.scss b/src/components/Input/index.scss
new file mode 100644
index 0000000..e98efca
--- /dev/null
+++ b/src/components/Input/index.scss
@@ -0,0 +1,60 @@
+$primary: #06BACE;
+$gray: #dbdbdb;
+$danger: #E00A0A;
+$success: #23C933;
+
+.input {
+  &__labelFocus{
+    top: 0px !important;
+    font-size: 9px !important;
+    color: $primary !important;
+  }
+  &__labelDanger{
+    top: 0px !important;
+    font-size: 9px !important;
+    color: $danger !important;
+  }
+  &__labelSuccess{
+    top: 0px !important;
+    font-size: 9px !important;
+    color: $success !important;
+  }
+
+
+  &__inputActive{
+    border-color: $primary !important;
+  }
+  &__inputSuccess{
+    border-color: $success !important;
+  }
+  &__inputDanger{
+    border-color: $danger !important;
+  }
+
+  &__message{
+    &Success{
+      color: $success;
+    }
+    &Danger{
+      color: $danger;
+    }
+  }
+  &__length{
+    &Success{
+      color: $success;
+    }
+    &Danger{
+      color: $danger;
+    }
+  }
+}
+
+.en {
+  direction: ltr;
+  text-align: left;
+}
+
+.fa {
+  direction: rtl;
+  text-align: right;
+}
\ No newline at end of file
diff --git a/src/components/Input/tick.png b/src/components/Input/tick.png
new file mode 100644
index 0000000..805f74a
Binary files /dev/null and b/src/components/Input/tick.png differ
diff --git a/src/redux/data.js b/src/redux/data.js
index 6a2d044..4878387 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -17,6 +17,7 @@ import ProductFilter from "../components/ProductFilter";
 import Features from "../components/Features";
 import Feedback from "../components/Feedback";
 import FooterDesign from "../components/FooterDesign";
+import Input from "../components/Input";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -301,6 +302,215 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Input",
+    author: "Ashrafi",
+    props: [
+      {
+        name: "maxLength",
+        type: "string",
+        required: "false",
+        description: "بیشترین تعداد کاراکتری که میتوان استفاده کرد.",
+        defaultValue: "",
+      },
+      {
+        name: "lang",
+        type: "string",
+        required: "false",
+        description: "زبان سایت",
+        defaultValue: "fa",
+      },
+      {
+        name: "inputMode",
+        type: "string",
+        required: "false",
+        description: "با تعیین این مقدار نوع کیبرد مشخص میشود.",
+        defaultValue: "text",
+      },
+      {
+        name: "label",
+        type: "string",
+        required: "false",
+        description: "",
+        defaultValue: "label",
+      },
+    ],
+    content: {
+      name: "Input",
+      component: <Input />,
+      code: `import React, { useState } from "react";
+      import _ from "lodash";
+      import "./index.scss";
+      
+      import tick from "./tick.png";
+      import danger from "./danger.png";
+      
+      const langDetector = (lang, option1, option2) => {
+        return lang === "fa" ? option1 : option2;
+      };
+      
+      const inputStatusHandler = (value, focus, status, primary, success, danger) => {
+        if (!focus) {
+          return "";
+        } else {
+          if (!value) {
+            return primary;
+          } else {
+            if (status) {
+              return success;
+            } else {
+              return danger;
+            }
+          }
+        }
+      };
+      
+      export default function Input(props) {
+        const [value, setValue] = useState("");
+        const [focusToggle, setFocusToggle] = useState(false);
+      
+        const { lang, theme, inputMode, label, status, maxLength, message } = props;
+      
+        const onChange = (val) => {
+          setValue(val);
+        };
+      
+        return (
+          <div
+            className={_.join(
+              ["input flex flex-col relative my-2", langDetector(lang, "fa", "en")],
+              " "
+            )}
+          >
+            <label
+              className={_.join(
+                [
+                  "absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300",
+                  langDetector(lang, "right-2", "left-2"),
+                  inputStatusHandler(
+                    value,
+                    focusToggle,
+                    status,
+                    "input__labelFocus",
+                    "input__labelSuccess",
+                    "input__labelDanger"
+                  ),
+                ],
+                " "
+              )}
+              onClick={() => setFocusToggle(true)}
+            >
+              {label}
+            </label>
+            <input
+              type="text"
+              inputMode={inputMode}
+              className={_.join(
+                [
+                  "flex-1 border rounded-md outline-none p-2",
+                  inputStatusHandler(
+                    value,
+                    focusToggle,
+                    status,
+                    "input__inputActive",
+                    "input__inputSuccess",
+                    "input__inputDanger"
+                  ),
+                  "transition",
+                ],
+                " "
+              )}
+              onChange={(e) => onChange(e.target.value)}
+              value={value}
+              onFocus={() => setFocusToggle(true)}
+              onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)}
+              maxLength={maxLength}
+            />
+            {!status && value && (
+              <img
+                src={danger}
+                alt={langDetector(lang, "اشتباه", "wrong")}
+                className={_.join(
+                  [
+                    "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
+                    langDetector(lang, "left-2", "right-2"),
+                  ],
+                  " "
+                )}
+              />
+            )}
+            {status && value && (
+              <img
+                src={tick}
+                alt={langDetector(lang, "درست", "right")}
+                className={_.join(
+                  [
+                    "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
+                    langDetector(lang, "left-2", "right-2"),
+                  ],
+                  " "
+                )}
+              />
+            )}
+      
+            {value && !status && (
+              <span
+                className={_.join(
+                  [
+                    "input__message text-xs absolute -bottom-5",
+                    langDetector(lang, "right-2", "left-2"),
+                    inputStatusHandler(
+                      value,
+                      focusToggle,
+                      status,
+                      "",
+                      "input__messageSuccess",
+                      "input__messageDanger"
+                    ),
+                    "transition",
+                  ],
+                  " "
+                )}
+              >
+                {message}
+              </span>
+            )}
+            {value && (
+              <span
+                className={_.join(
+                  [
+                    "input__length absolute -bottom-5 text-xs",
+                    langDetector(lang, "left-2", "right-2"),
+                    inputStatusHandler(
+                      value,
+                      focusToggle,
+                      status,
+                      "",
+                      "input__lengthSuccess",
+                      "input__lengthDanger"
+                    ),
+                    "transition",
+                  ],
+                  " "
+                )}
+              >
+                {value.length + "/" + maxLength}
+              </span>
+            )}
+          </div>
+        );
+      }
+      
+      Input.defaultProps = {
+        lang : 'fa',
+        inputMode : 'string',
+        label : '',
+        status : '',
+        maxLength : '',
+        message : '',
+      }`,
+    },
+  },
   // mini components
   {
     name: "Mini Components",