From 3038fae33d6fc343498f28e75177b76b6e5e3fef Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimiireza98@gmail.com>
Date: Thu, 28 Apr 2022 12:46:40 +0430
Subject: [PATCH] reza added 4 layouts

---
 src/components/Button/index.js                |   7 +-
 src/components/Input/index.js                 |  48 +--
 src/components/Slider/Slider.scss             | 119 +++++++
 src/components/Slider/index.js                | 172 +++++++++++
 src/components/Textarea/index.js              |  21 ++
 src/redux/actions/form.js                     |   4 +
 src/redux/reducers/form.js                    |  14 +
 src/utils/customHooks.js                      |  87 ++++++
 src/utils/location.js                         |  11 +
 src/utils/onInput.js                          | 292 ++++++++++++++++++
 src/views/Home/index.js                       |  21 +-
 .../layouts/CrossPlatform/assets/android.svg  |   8 +
 .../Home/layouts/CrossPlatform/assets/ios.svg |   8 +
 .../Home/layouts/CrossPlatform/assets/pwa.svg |   3 +
 src/views/Home/layouts/CrossPlatform/index.js |  57 +++-
 src/views/Home/layouts/Features/index.js      |   3 +-
 src/views/Home/layouts/Form/index.js          |  81 ++++-
 src/views/Home/layouts/Gradient/index.js      |  33 +-
 src/views/Home/layouts/Graphic/index.js       |   2 +-
 src/views/Home/layouts/Panel/index.js         |  12 +-
 src/views/Home/layouts/Samples/index.js       |  48 ++-
 tailwind.config.js                            |  11 +-
 22 files changed, 990 insertions(+), 72 deletions(-)
 create mode 100644 src/components/Slider/Slider.scss
 create mode 100644 src/components/Slider/index.js
 create mode 100644 src/components/Textarea/index.js
 create mode 100644 src/utils/customHooks.js
 create mode 100644 src/utils/location.js
 create mode 100644 src/utils/onInput.js
 create mode 100644 src/views/Home/layouts/CrossPlatform/assets/android.svg
 create mode 100644 src/views/Home/layouts/CrossPlatform/assets/ios.svg
 create mode 100644 src/views/Home/layouts/CrossPlatform/assets/pwa.svg

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 8b6f6d1..46cb10f 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -12,7 +12,7 @@ const Button = ({
 }) => {
   return (
     <button
-      className={`text-base font-4 relative ${
+      className={`md:text-2x font-4 relative ${
         backgroundColor +
         " " +
         round +
@@ -21,9 +21,12 @@ const Button = ({
         " " +
         padding +
         " " +
-        (borderColor ? `border text-1x border-solid ${borderColor}` : "")
+        (borderColor ? `border border-solid ${borderColor}` : "")
       }`}
       onClick={() => action()}
+      style={{
+        width: "fit-content",
+      }}
     >
       {title}
       <img
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 3134b11..89c1618 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -3,7 +3,6 @@ import React from "react";
 function Input({
   type = "text",
   inputMode = "text",
-  label,
   value,
   maxLength,
   regex,
@@ -11,38 +10,25 @@ function Input({
   name,
   align,
   direction,
+  placeholder,
 }) {
-  const [focused, setFocused] = React.useState(false);
   return (
-    <div className="relative w-full">
-      <label
-        className={`absolute right-4 px-1 bg-white dark:bg-grayDarkJungle transition-all -translate-y-1/2 transform ${
-          focused || value
-            ? "top-0 text-blueMarine text-sm dark:text-blueCurious"
-            : "top-1/2 text-grayBattleShip text-tiny"
-        }`}
-        onClick={() => setFocused(true)}
-      >
-        {label}
-      </label>
-      <input
-        name={name}
-        type={type}
-        inputMode={inputMode}
-        value={value}
-        maxLength={maxLength}
-        onChange={(e) =>
-          onChange(e.target.name, (e.target.value = regex(e.target.value)))
-        }
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        className={`w-full outline-none border border-solid focus:border-blueMarine dark:focus:border-blueCurious border-grayBattleShip dark:bg-grayDarkJungle rounded-md text-blueMarine dark:text-grayBattleShip text-lg py-4 px-4`}
-        style={{
-          direction,
-          textAlign: align,
-        }}
-      />
-    </div>
+    <input
+      name={name}
+      type={type}
+      inputMode={inputMode}
+      value={value}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      onChange={(e) =>
+        onChange(e.target.name, (e.target.value = regex(e.target.value)))
+      }
+      className={`w-full outline-none border border-solid border-gray-200 focus:border-primary-7 focus:bg-secondary-9 bg-gray-50 rounded-lg placeholder:text-gray-400 focus:text-secondary-8 text-2x p-6 font-2`}
+      style={{
+        direction,
+        textAlign: align,
+      }}
+    />
   );
 }
 
diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss
new file mode 100644
index 0000000..c72bfb9
--- /dev/null
+++ b/src/components/Slider/Slider.scss
@@ -0,0 +1,119 @@
+
+.Slider{
+    width: 100%;
+    height: 80vh;
+    overflow: hidden;
+    position: relative;
+    z-index: 4;
+    max-width: 1550px;
+    @media screen and (min-width: 1551px) {
+      margin: 0 auto;
+    }
+
+    &-main-box {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      &-title {
+        width: 80%;
+        margin: 0 auto;
+        font-size: 38px;
+        color: #fff;
+        font-family: Medium;
+      }
+
+      &-item-container {
+        width: 80%;
+        margin: 0 auto;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        // direction: rtl;
+
+        &-item {
+          width: 32%;
+          flex-shrink: 0;
+          aspect-ratio: 1/0.85;
+          border-radius: 21px;
+          background-color: rgba($color: #fff, $alpha: 0.1);
+          backdrop-filter: blur(10px);
+          box-sizing: border-box;
+          padding: 20px;
+          margin-right: 2%;
+          transition: all 1s;
+
+          &-img-container {
+            width: 100%;
+            height: 70%;
+            // background-color: rgb(253, 57, 178);
+          }
+
+          &-title {
+            font-size: 24px;
+            width: 100%;
+            margin-top: 10px;
+            font-family: Medium;
+            color: #0080ff;
+          }
+
+          &-subtitle {
+            width: 100%;
+            font-size: 18px;
+            margin-top: 10px;
+            color: #fff;
+            font-family: Thin;
+          }
+        }
+      }
+
+      &-slider-btns {
+        width: 80%;
+        margin: 0 auto;
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &-previous {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          color: #555;
+
+          &-icon {
+            // color: #fff;
+            font-size: 25px;
+            margin-right: 10px;
+          }
+
+          &-text {
+            font-size: 30px;
+            font-family: Thin;
+            // color: #fff;
+          }
+        }
+
+        &-next {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+
+          &-icon {
+            color: #fff;
+            font-size: 25px;
+            margin-left: 10px;
+          }
+
+          &-text {
+            font-size: 30px;
+            font-family: Thin;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js
new file mode 100644
index 0000000..379b068
--- /dev/null
+++ b/src/components/Slider/index.js
@@ -0,0 +1,172 @@
+import { useState } from "react";
+import './Slider.scss';
+
+let p4SliderCounter = 0;
+const Slider = () => {
+  const [hp4Data, setHp4Data] = useState([
+    {
+      id: 101,
+      title: "Create Multi Platform",
+      subtitle: "Colored pencils were busy except",
+      title_fa: " ساخت نرم‌افزارهای چند پلتفرمه",
+      subtitle_fa: "متنی برای تست",
+    },
+    {
+      id: 102,
+      title: "Gamify",
+      subtitle: "Colored pencils were busy except",
+      title_fa: "گیمیفای",
+      subtitle_fa: "متنی برای تست",
+    },
+    {
+      id: 201,
+      title: "Web Design",
+      subtitle: "Colored pencils were busy except",
+      title_fa: "طراحی سایت",
+      subtitle_fa: "متنی برای تست",
+    },
+    {
+      id: 202,
+      title: "PR & HR Software",
+      subtitle: "Colored pencils were busy except",
+      title_fa: "نرم‌افزارهای PR و HR",
+      subtitle_fa: "متنی برای تست",
+    },
+    {
+      id: 301,
+      title: "Android & IOS",
+      subtitle: "Colored pencils were busy except",
+      title_fa: "نرم‌افزارهای android و ios",
+      subtitle_fa: "متنی برای تست",
+    },
+    {
+      id: 302,
+      title: "AR Platform",
+      subtitle: "Colored pencils were busy except",
+      title_fa: " پلتفرم AR",
+      subtitle_fa: "متنی برای تست",
+    },
+  ]);
+  
+  const p4SliderNextHandler = () => {
+    let slider = document.querySelectorAll(
+      ".Slider-main-box-item-container-item"
+    );
+    document.querySelector(
+      ".Slider-main-box-slider-btns-previous"
+    ).style.color = "#fff";
+    if (p4SliderCounter < 3) {
+      if (p4SliderCounter === 0) {
+        slider[0].style.transform = "translateX(-200%)";
+        slider[1].style.transform = "translateX(-106.25%)";
+        slider[2].style.transform = "translateX(-106.25%)";
+        slider[3].style.transform = "translateX(-106.25%)";
+      } else if (p4SliderCounter === 1) {
+        slider[1].style.transform = "translateX(-306.25%)";
+        slider[2].style.transform = "translateX(-212.5%)";
+        slider[3].style.transform = "translateX(-212.5%)";
+        slider[4].style.transform = "translateX(-212.5%)";
+      } else if (p4SliderCounter === 2) {
+        slider[2].style.transform = "translateX(-412.5%)";
+        slider[3].style.transform = "translateX(-318.75%)";
+        slider[4].style.transform = "translateX(-318.75%)";
+        slider[5].style.transform = "translateX(-318.75%)";
+        document.querySelector(
+          ".Slider-main-box-slider-btns-next-text"
+        ).style.color = "#555";
+        document.querySelector(
+          ".Slider-main-box-slider-btns-next-icon"
+        ).style.color = "#555";
+      }
+      p4SliderCounter++;
+    }
+  };
+
+  const p4SliderPreviousHandler = () => {
+    let slider = document.querySelectorAll(
+      ".Slider-main-box-item-container-item"
+    );
+    document.querySelector(
+      ".Slider-main-box-slider-btns-next-text"
+    ).style.color = "#fff";
+    document.querySelector(
+      ".Slider-main-box-slider-btns-next-icon"
+    ).style.color = "#fff";
+    if (p4SliderCounter > 0) {
+      if (p4SliderCounter === 3) {
+        slider[5].style.transform = "translateX(100%)";
+        slider[4].style.transform = "translateX(-212.5%)";
+        slider[3].style.transform = "translateX(-212.5%)";
+        slider[2].style.transform = "translateX(-212.5%)";
+      } else if (p4SliderCounter === 2) {
+        slider[4].style.transform = "translateX(100%)";
+        slider[3].style.transform = "translateX(-106.25%)";
+        slider[2].style.transform = "translateX(-106.25%)";
+        slider[1].style.transform = "translateX(-106.25%)";
+      } else if (p4SliderCounter === 1) {
+        slider[3].style.transform = "translateX(100%)";
+        slider[2].style.transform = "translateX(0%)";
+        slider[1].style.transform = "translateX(0%)";
+        slider[0].style.transform = "translateX(0%)";
+        document.querySelector(
+          ".Slider-main-box-slider-btns-previous"
+        ).style.color = "#555";
+      }
+      p4SliderCounter--;
+    }
+  };
+
+  return (
+    <div className="Slider bg-black ltr">
+      <div className="Slider-main-box ltr">
+        <div className="Slider-main-box-item-container ltr">
+          {hp4Data.map((item, index) => (
+            <div
+              key={item.id}
+              className="Slider-main-box-item-container-item"
+              style={index > 2 ? { transform: "translateX(100%)" } : null}
+            >
+              <div className="Slider-main-box-item-container-item-img-container ltr"></div>
+              <div
+                className="Slider-main-box-item-container-item-title"
+                style={{ direction: "rtl" }}
+              >
+                {item.title_fa}
+              </div>
+              <div
+                className="Slider-main-box-item-container-item-subtitle"
+                style={{ direction: "rtl" }}
+              >
+                {item.subtitle_fa}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="Slider-main-box-slider-btns">
+          <div
+            className="Slider-main-box-slider-btns-previous bg-red-400"
+            onClick={p4SliderPreviousHandler}
+            // style={p4SliderCounter === 0 ? { color:"#555" } : null}
+          >
+            {/* <BsArrowLeft className="Slider-main-box-slider-btns-previous-icon" /> */}
+            <div className="Slider-main-box-slider-btns-previous-text">
+              قبلی
+            </div>
+          </div>
+          <div
+            className="Slider-main-box-slider-btns-next"
+            onClick={p4SliderNextHandler}
+            // style={p4SliderCounter === 3 ? { filter: "grayscale(100%)" } : null}
+          >
+            <div className="Slider-main-box-slider-btns-next-text">
+              بعدی
+            </div>
+            {/* <BsArrowRight className="Slider-main-box-slider-btns-next-icon" /> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Slider;
\ No newline at end of file
diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js
new file mode 100644
index 0000000..0b0baac
--- /dev/null
+++ b/src/components/Textarea/index.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { connect } from "react-redux";
+
+export const Textarea = ({ rows, value, onChange, name, placeholder }) => {
+  return (
+    <textarea
+      rows={rows}
+      value={value}
+      placeholder={placeholder}
+      name={name}
+      onChange={e => onChange(e.target.name, e.target.value)}
+      className={`w-full outline-none border border-solid border-gray-200 focus:border-primary-7 focus:bg-secondary-9 bg-gray-50 rounded-lg placeholder:text-gray-400 focus:text-secondary-8 text-2x p-6 font-2`}
+    />
+  );
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Textarea);
diff --git a/src/redux/actions/form.js b/src/redux/actions/form.js
index 14a9bb7..76bf98d 100644
--- a/src/redux/actions/form.js
+++ b/src/redux/actions/form.js
@@ -15,6 +15,10 @@ const form = {
     (data = {}) =>
     async (dispatch) =>
       await dispatch({ type: "form/setSearch", data }),
+  setContact:
+    (data = {}) =>
+    async (dispatch) =>
+      await dispatch({ type: "form/setContact", data }),
 };
 
 export default form;
diff --git a/src/redux/reducers/form.js b/src/redux/reducers/form.js
index d50a878..6db5015 100644
--- a/src/redux/reducers/form.js
+++ b/src/redux/reducers/form.js
@@ -21,6 +21,12 @@ const initialState = {
     nationalId: "",
     cellphone: "",
   },
+  contact: {
+    name: "",
+    email: "",
+    job: "",
+    message: "",
+  },
   search: "",
 };
 export default function form(state = initialState, action) {
@@ -54,6 +60,14 @@ export default function form(state = initialState, action) {
         search: { ...state.profile, search: data },
         error: null,
       };
+    case "form/setContact":
+      console.log(data);
+      return {
+        ...state,
+        loading: false,
+        contact: { ...state.ticket, [data.name]: data.value },
+        error: null,
+      };
     case "form/loading":
       return { ...state, loading: true };
     case "form/error":
diff --git a/src/utils/customHooks.js b/src/utils/customHooks.js
new file mode 100644
index 0000000..1d82fca
--- /dev/null
+++ b/src/utils/customHooks.js
@@ -0,0 +1,87 @@
+import { useCallback, useRef, useState } from "react";
+
+export const useLongPress = (
+  onLongPress,
+  onClick,
+  { shouldPreventDefault = true, delay = 300 } = {}
+) => {
+  const [longPressTriggered, setLongPressTriggered] = useState(false);
+  const timeout = useRef();
+  const target = useRef();
+
+  const start = useCallback(
+    (event) => {
+      if (shouldPreventDefault && event.target) {
+        event.target.addEventListener("touchend", preventDefault, {
+          passive: false,
+        });
+        target.current = event.target;
+      }
+      timeout.current = setTimeout(() => {
+        onLongPress(event);
+        setLongPressTriggered(true);
+      }, delay);
+    },
+    [onLongPress, delay, shouldPreventDefault]
+  );
+
+  const clear = useCallback(
+    (event, shouldTriggerClick = true) => {
+      timeout.current && clearTimeout(timeout.current);
+      shouldTriggerClick && !longPressTriggered && onClick();
+      setLongPressTriggered(false);
+      if (shouldPreventDefault && target.current) {
+        target.current.removeEventListener("touchend", preventDefault);
+      }
+    },
+    [shouldPreventDefault, onClick, longPressTriggered]
+  );
+
+  return {
+    onMouseDown: (e) => start(e),
+    onTouchStart: (e) => start(e),
+    onMouseUp: (e) => clear(e),
+    onMouseLeave: (e) => clear(e, false),
+    onTouchEnd: (e) => clear(e),
+  };
+};
+
+const isTouchEvent = (event) => {
+  return "touches" in event;
+};
+
+const preventDefault = (event) => {
+  if (!isTouchEvent(event)) return;
+
+  if (event.touches.length < 2 && event.preventDefault) {
+    event.preventDefault();
+  }
+};
+
+export default null;
+
+//sample of useLongPress
+// import useLongPress from "./useLongPress";
+
+// export default function App() {
+
+//     const onLongPress = () => {
+//         console.log('longpress is triggered');
+//     };
+
+//     const onClick = () => {
+//         console.log('click is triggered')
+//     }
+
+//     const defaultOptions = {
+//         shouldPreventDefault: true,
+//         delay: 500,
+//     };
+//     const longPressEvent = useLongPress(onLongPress, onClick, defaultOptions);
+
+//     return (
+//         <div className="App">
+//             <button {...longPressEvent}>use  Loooong  Press</button>
+//         </div>
+//     );
+// }
diff --git a/src/utils/location.js b/src/utils/location.js
new file mode 100644
index 0000000..aa083ce
--- /dev/null
+++ b/src/utils/location.js
@@ -0,0 +1,11 @@
+
+class location {
+  getId = () => {
+    const pathname = window.location.pathname;
+    return pathname.slice(pathname.lastIndexOf('/') + 1, pathname.length);
+  }
+}
+
+const _location = new location();
+
+export default _location;
\ No newline at end of file
diff --git a/src/utils/onInput.js b/src/utils/onInput.js
new file mode 100644
index 0000000..c9867d3
--- /dev/null
+++ b/src/utils/onInput.js
@@ -0,0 +1,292 @@
+import { toast } from "react-toastify";
+
+class onInput {
+  persianOnly = (txt) => {
+    let newText = txt;
+    newText = newText.replace(/`/g, "");
+    newText = newText.replace(/0/g, "");
+    newText = newText.replace(/1/g, "");
+    newText = newText.replace(/2/g, "");
+    newText = newText.replace(/3/g, "");
+    newText = newText.replace(/4/g, "");
+    newText = newText.replace(/5/g, "");
+    newText = newText.replace(/6/g, "");
+    newText = newText.replace(/7/g, "");
+    newText = newText.replace(/8/g, "");
+    newText = newText.replace(/9/g, "");
+    newText = newText.replace(/0/g, "");
+    newText = newText.replace(/q/g, "");
+    newText = newText.replace(/w/g, "");
+    newText = newText.replace(/e/g, "");
+    newText = newText.replace(/r/g, "");
+    newText = newText.replace(/t/g, "");
+    newText = newText.replace(/y/g, "");
+    newText = newText.replace(/u/g, "");
+    newText = newText.replace(/i/g, "");
+    newText = newText.replace(/o/g, "");
+    newText = newText.replace(/p/g, "");
+    newText = newText.replace(/\[/g, "");
+    newText = newText.replace(/\]/g, "");
+    newText = newText.replace(/a/g, "");
+    newText = newText.replace(/s/g, "");
+    newText = newText.replace(/d/g, "");
+    newText = newText.replace(/f/g, "");
+    newText = newText.replace(/g/g, "");
+    newText = newText.replace(/h/g, "");
+    newText = newText.replace(/j/g, "");
+    newText = newText.replace(/k/g, "");
+    newText = newText.replace(/l/g, "");
+    newText = newText.replace(/;/g, "");
+    newText = newText.replace(/'/g, "");
+    newText = newText.replace(/z/g, "");
+    newText = newText.replace(/x/g, "");
+    newText = newText.replace(/c/g, "");
+    newText = newText.replace(/v/g, "");
+    newText = newText.replace(/b/g, "");
+    newText = newText.replace(/n/g, "");
+    newText = newText.replace(/m/g, "");
+    newText = newText.replace(/,/g, "");
+    newText = newText.replace(/./g, "");
+    newText = newText.replace(/\//g, "");
+    newText = newText.replace(/~/g, " ");
+    newText = newText.replace(/Q/g, "");
+    newText = newText.replace(/W/g, "");
+    newText = newText.replace(/E/g, "");
+    newText = newText.replace(/R/g, "");
+    newText = newText.replace(/T/g, "");
+    newText = newText.replace(/Y/g, "");
+    newText = newText.replace(/U/g, "");
+    newText = newText.replace(/I/g, "");
+    newText = newText.replace(/O/g, "");
+    newText = newText.replace(/P/g, "");
+    newText = newText.replace(/A/g, "");
+    newText = newText.replace(/S/g, "");
+    newText = newText.replace(/G/g, "");
+    newText = newText.replace(/H/g, "");
+    newText = newText.replace(/J/g, "");
+    newText = newText.replace(/K/g, "");
+    newText = newText.replace(/L/g, "");
+    newText = newText.replace(/Z/g, "");
+    newText = newText.replace(/X/g, "");
+    newText = newText.replace(/B/g, "");
+    newText = newText.replace(/N/g, "");
+    newText = newText.replace(/M/g, "");
+    newText = newText.replace(/\?/g, "");
+    if (!newText && newText.length !== 0) {
+      toast.info("از کاراکتر فارسی استفاده کنید");
+    }
+    return newText;
+  };
+  englishAndNumberWithoutSpace = (txt) => {
+    let newText = txt;
+    newText = newText.replace(/`/g, "");
+    newText = newText.replace(/۰/g, "0");
+    newText = newText.replace(/۱/g, "1");
+    newText = newText.replace(/۲/g, "2");
+    newText = newText.replace(/۳/g, "3");
+    newText = newText.replace(/۴/g, "4");
+    newText = newText.replace(/۵/g, "5");
+    newText = newText.replace(/۶/g, "6");
+    newText = newText.replace(/۷/g, "7");
+    newText = newText.replace(/۸/g, "8");
+    newText = newText.replace(/۹/g, "9");
+    newText = newText.replace(/ا/g, "");
+    newText = newText.replace(/ب/g, "");
+    newText = newText.replace(/پ/g, "");
+    newText = newText.replace(/ت/g, "");
+    newText = newText.replace(/ث/g, "");
+    newText = newText.replace(/ج/g, "");
+    newText = newText.replace(/چ/g, "");
+    newText = newText.replace(/ح/g, "");
+    newText = newText.replace(/خ/g, "");
+    newText = newText.replace(/د/g, "");
+    newText = newText.replace(/\[/g, "");
+    newText = newText.replace(/\]/g, "");
+    newText = newText.replace(/ذ/g, "");
+    newText = newText.replace(/ر/g, "");
+    newText = newText.replace(/ز/g, "");
+    newText = newText.replace(/ژ/g, "");
+    newText = newText.replace(/ط/g, "");
+    newText = newText.replace(/ظ/g, "");
+    newText = newText.replace(/ع/g, "");
+    newText = newText.replace(/غ/g, "");
+    newText = newText.replace(/ف/g, "");
+    newText = newText.replace(/;/g, "");
+    newText = newText.replace(/'/g, "");
+    newText = newText.replace(/ق/g, "");
+    newText = newText.replace(/س/g, "");
+    newText = newText.replace(/ش/g, "");
+    newText = newText.replace(/ص/g, "");
+    newText = newText.replace(/ض/g, "");
+    newText = newText.replace(/ک/g, "");
+    newText = newText.replace(/گ/g, "");
+    newText = newText.replace(/,/g, "");
+    newText = newText.replace(/\./g, "");
+    newText = newText.replace(/\//g, "");
+    newText = newText.replace(/~/g, " ");
+    newText = newText.replace(/ل/g, "");
+    newText = newText.replace(/م/g, "");
+    newText = newText.replace(/ن/g, "");
+    newText = newText.replace(/و/g, "");
+    newText = newText.replace(/ه/g, "");
+    newText = newText.replace(/ی/g, "");
+    newText = newText.replace(/\?/g, "");
+    if (!newText && newText.length !== 0) {
+      toast.info("از کاراکتر انگلیسی واعداداستفاده کنید");
+    }
+    return newText;
+  };
+  numberOnly = (txt) => {
+    let newText = txt;
+    newText = newText.replace(/`/g, "");
+    newText = newText.replace(/0/g, "0");
+    newText = newText.replace(/1/g, "1");
+    newText = newText.replace(/2/g, "2");
+    newText = newText.replace(/3/g, "3");
+    newText = newText.replace(/4/g, "4");
+    newText = newText.replace(/5/g, "5");
+    newText = newText.replace(/6/g, "6");
+    newText = newText.replace(/7/g, "7");
+    newText = newText.replace(/8/g, "8");
+    newText = newText.replace(/9/g, "9");
+    newText = newText.replace(/۰/g, "0");
+    newText = newText.replace(/۱/g, "1");
+    newText = newText.replace(/۲/g, "2");
+    newText = newText.replace(/۳/g, "3");
+    newText = newText.replace(/۴/g, "4");
+    newText = newText.replace(/۵/g, "5");
+    newText = newText.replace(/۶/g, "6");
+    newText = newText.replace(/۷/g, "7");
+    newText = newText.replace(/۸/g, "8");
+    newText = newText.replace(/۹/g, "9");
+    newText = newText.replace(/ا/g, "");
+    newText = newText.replace(/ب/g, "");
+    newText = newText.replace(/پ/g, "");
+    newText = newText.replace(/ت/g, "");
+    newText = newText.replace(/ث/g, "");
+    newText = newText.replace(/ج/g, "");
+    newText = newText.replace(/چ/g, "");
+    newText = newText.replace(/ح/g, "");
+    newText = newText.replace(/خ/g, "");
+    newText = newText.replace(/د/g, "");
+    newText = newText.replace(/\[/g, "");
+    newText = newText.replace(/\]/g, "");
+    newText = newText.replace(/ذ/g, "");
+    newText = newText.replace(/ر/g, "");
+    newText = newText.replace(/ز/g, "");
+    newText = newText.replace(/ژ/g, "");
+    newText = newText.replace(/ط/g, "");
+    newText = newText.replace(/ظ/g, "");
+    newText = newText.replace(/ع/g, "");
+    newText = newText.replace(/غ/g, "");
+    newText = newText.replace(/ف/g, "");
+    newText = newText.replace(/;/g, "");
+    newText = newText.replace(/'/g, "");
+    newText = newText.replace(/ق/g, "");
+    newText = newText.replace(/س/g, "");
+    newText = newText.replace(/ش/g, "");
+    newText = newText.replace(/ص/g, "");
+    newText = newText.replace(/ض/g, "");
+    newText = newText.replace(/ک/g, "");
+    newText = newText.replace(/گ/g, "");
+    newText = newText.replace(/\,/g, "");
+    newText = newText.replace(/\./g, "");
+    newText = newText.replace(/\//g, "");
+    newText = newText.replace(/~/g, " ");
+    newText = newText.replace(/ل/g, "");
+    newText = newText.replace(/م/g, "");
+    newText = newText.replace(/ن/g, "");
+    newText = newText.replace(/و/g, "");
+    newText = newText.replace(/ه/g, "");
+    newText = newText.replace(/ی/g, "");
+    newText = newText.replace(/\?/g, "");
+    newText = newText.replace(/q/g, "");
+    newText = newText.replace(/w/g, "");
+    newText = newText.replace(/e/g, "");
+    newText = newText.replace(/r/g, "");
+    newText = newText.replace(/t/g, "");
+    newText = newText.replace(/y/g, "");
+    newText = newText.replace(/u/g, "");
+    newText = newText.replace(/i/g, "");
+    newText = newText.replace(/o/g, "");
+    newText = newText.replace(/p/g, "");
+    newText = newText.replace(/a/g, "");
+    newText = newText.replace(/s/g, "");
+    newText = newText.replace(/d/g, "");
+    newText = newText.replace(/f/g, "");
+    newText = newText.replace(/g/g, "");
+    newText = newText.replace(/h/g, "");
+    newText = newText.replace(/j/g, "");
+    newText = newText.replace(/k/g, "");
+    newText = newText.replace(/l/g, "");
+    newText = newText.replace(/z/g, "");
+    newText = newText.replace(/x/g, "");
+    newText = newText.replace(/c/g, "");
+    newText = newText.replace(/v/g, "");
+    newText = newText.replace(/b/g, "");
+    newText = newText.replace(/n/g, "");
+    newText = newText.replace(/m/g, "");
+    newText = newText.replace(/Q/g, "");
+    newText = newText.replace(/W/g, "");
+    newText = newText.replace(/E/g, "");
+    newText = newText.replace(/R/g, "");
+    newText = newText.replace(/T/g, "");
+    newText = newText.replace(/Y/g, "");
+    newText = newText.replace(/U/g, "");
+    newText = newText.replace(/I/g, "");
+    newText = newText.replace(/O/g, "");
+    newText = newText.replace(/P/g, "");
+    newText = newText.replace(/A/g, "");
+    newText = newText.replace(/S/g, "");
+    newText = newText.replace(/G/g, "");
+    newText = newText.replace(/H/g, "");
+    newText = newText.replace(/J/g, "");
+    newText = newText.replace(/K/g, "");
+    newText = newText.replace(/L/g, "");
+    newText = newText.replace(/Z/g, "");
+    newText = newText.replace(/X/g, "");
+    newText = newText.replace(/B/g, "");
+    newText = newText.replace(/N/g, "");
+    newText = newText.replace(/M/g, "");
+    if (!newText && newText.length !== 0) {
+      toast.info("از اعداداستفاده کنید");
+    }
+    return newText;
+  };
+  dayHandler = (num) => {
+    let newNum = this.numberOnly(num);
+    if (newNum > 31) {
+      toast.error("روز نباید بزرگتر از 31 باشد.");
+      return Math.floor(newNum / 10);
+    }
+    return newNum;
+  };
+  monthHandler = (num) => {
+    let newNum = this.numberOnly(num);
+    if (newNum > 12 || newNum < 0) {
+      toast.error("ماه باید بین 1 تا 12 باشد.");
+      return Math.floor(newNum / 10);
+    }
+    return newNum;
+  };
+  yearHandler = (num) => {
+    let newNum = this.numberOnly(num);
+    if (newNum > 1395) {
+      toast.error("سال باید کوچک‌تر از 1395 باشد.");
+      return Math.floor(newNum / 10);
+    }
+    return newNum;
+  };
+  phonenumber = (value) => {
+    let formattedValue = value
+      .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
+        return c.charCodeAt(0) & 0xf;
+      })
+      .replace(/[^\d]/, "");
+    return formattedValue;
+  };
+}
+
+const _onInput = new onInput();
+
+export default _onInput;
diff --git a/src/views/Home/index.js b/src/views/Home/index.js
index efdd7b7..9c9e364 100644
--- a/src/views/Home/index.js
+++ b/src/views/Home/index.js
@@ -11,7 +11,6 @@ import Samples from "./layouts/Samples";
 import CrossPlatform from "./layouts/CrossPlatform";
 import Form from "./layouts/Form";
 
-
 export const Home = ({ device, setHeaderOptions, isDesktop }) => {
   React.useEffect(() => {
     if (isDesktop) {
@@ -19,17 +18,15 @@ export const Home = ({ device, setHeaderOptions, isDesktop }) => {
     }
   }, []);
   return (
-    <div className="flex-1 flex justify-center">
-      <main className="w-10/12">
-        <Graphic />
-        <Features />
-        <Panel />
-        <Gradient />
-        <Samples />
-        <CrossPlatform />
-        <Form />
-      </main>
-    </div>
+    <main className="flex-1 flex flex-col items-center">
+      <Graphic />
+      <Features />
+      <Panel />
+      <Gradient />
+      <Samples />
+      <CrossPlatform />
+      <Form />
+    </main>
   );
 };
 
diff --git a/src/views/Home/layouts/CrossPlatform/assets/android.svg b/src/views/Home/layouts/CrossPlatform/assets/android.svg
new file mode 100644
index 0000000..f0165a3
--- /dev/null
+++ b/src/views/Home/layouts/CrossPlatform/assets/android.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="304" height="118" viewBox="0 0 304 118">
+  <defs>
+    <pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 646 250">
+      <image width="646" height="250" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoYAAAD6CAYAAAA89YbqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAANhJJREFUeNrsnQucFNWZt98xKHIxghKUL7iA65U1goFdXDUq+/lLolkjBCNqgkh0veTLt15Wk5glQRY3qysqaBTvgCYSkygaN2ZVbprVSGAELyGCIAwgw8AIA8MwA3Pp7X9BtTVtT1d1d1Xf5nl+v56Zvkx3dZ3qPk+957zvqYjFYgYAAAAAcAC7AAAAAAAQQwAAAABADAEAAAAAMQQAAAAAxBAAAAAAEEMAAAAAQAwBAAAAADEEAAAAAMQQAAAAABBDAAAAAEAMAQAAAAAxBAAAAADEEAAAAAAQQwAAAABADAEAAAAAMQQAAAAAxBAAAAAAEEMAAAAAQAwBAAAAADEEAAAAAMQQAAAAABBDAAAAAEAMAQAAAAAxBAAAAADEEAAAAAAQQwAAAABADAEAAAAAMQQAAAAAxBAAAAAAEEMAAAAAQAwBAAAAADEEAAAAAMQQAAAAABBDAAAAAEAMAQAAAAAxBAAAAADEEAAAAAAQQwAAAABADAEAAAAAMQQAAACAMqFLZ3mjY8eOHdCtW7fRXbt2PSn++xiaHgAAANJRX1//x9bW1prGxsa5Tz/9dFVneM8VsVisbN/cFVdc8R99+/b9Zv/+/QccdthhXTjEAQAAIBuqq6sbN23atLKmpub2J5988mnEsERQZLBfv36zjz322NORQQAAAAibbdu2tbzzzjuzH3rooSsRwyLm6quvfnTEiBHf6datWwWHLQAAAEQtiEuWLLl51qxZ0xDDIkJRwiFDhiwfNGhQr1T319bW2ooVK6yqqsq5iK1btzoXAAAAAC8DBgywHj16JP4ePHiwnXjiida9e/eUj6+srFy+YcOGUeUwD7HkxXDcuHFjTz311J+nGjZ+7bXXnIukEAAAACAXhg8fbueee64jicloDuLixYtPLHU5LGkxlBSOHDlyTvLQcdzc7YknniAiCAAAAKGjCGLcQZxoohcNLb/55pvfLuXklJIVw1RSuHv3bkcIFSUEAAAAiJIxY8Y4Fy+lHjksSTHUnMIzzzxztXf4WFI4ZcqUxBxCAAAAgKhR9PDGG29sN/9Qchi/rXspvp+SXPlEiSZIIQAAABQa5THIQeQiLv369et20003LUMM84BK0nizj5FCAAAAKCRykAcffLDdbcOGDRt6+eWXX48YRoiGkFWn0Hub5hQihQAAAFBIli5das8880y724477rhJiGGEaEUTb7KJso9JNAEAAIBiQGKo2skuGuEstahhSYmhlrnzXle0EAAAAKBYSB5SLrWoYcmI4RVXXPEf3oQTRQqpUwgAAADFhLvSmouihpdeeukZiGHI9O3b95ve6wwhAwAAQDHy+9//vt313r17/wtiGDL9+/dPlBd31z4GAAAAKDaUiOKlT58+pyKGIaJsZO8wMlIIAAAAxYpK6XmHkwcMGHAEYhgi3bp1G+29TnkaAAAAKGb+8pe/eD2mQkEuxDAkunbtehJiCAAAAKVCQ0NDu+vJQS7EMAfiO/MYDjEAAAAoFbwRw1LiAJoOAAAAABBDAAAAAEAMAQAAAAAxBAAAAADEEAAAAAAQQwAAAABADAEAAAAAMQQAAACAgHRhFwDkn6FDh9qECRPsnHPOsd69e1tjY2Pivm7dutm7775rc+bMseeee87q6uoCPefll19uAwcOzGp7Fi1a5FzE2Wef7Vxyxfuc2Wz/rbfemvi7UNvUEdqW8ePH22mnnWaf+9znbPv27Tm3X6p9oP+dNm1a1v8/a9YsW7duHR84AAhOLBYr+st111236Kmnnoq5l8GDB8e06cV86THoiNiJE8fETn/+B7HTf/uD2BfuHBc76vKzYwf27lH0284luktcKGIrV66MbdmyJeZHXBZjNTU1senTp8d69erl+9xr1qyJZcsTTzyReB79HQZxscto33i3f+fOne3uK9Q2JV9GjRoVq62tdS5B2m/Tpk2x22+/PVD7pWrDbdu2OcdMNvtQr53J/3LhwiXci1zF6y7xk8nrS8G5GEqOgBOnXmNnvDLR7Fsn26bjDrJNxx5kjecfbX0nftXOev3f7PifjLEDD+vBjupExMXAZs6cac8++6wdd9xxTpTJj4MPPtj69u1rV155pX344YdOlLGz0NLSUnTtp0ij2vDwww93LkHar1+/fjqxdSKI2bSfosnxDsV5/UzxRqEBAILCUHLI9L/mVuv21b+zpY0LLFaxPyqr3/FLbXODfeYzB9j/ufyL9qVLT7O1D82ztff8np3WCaSwsrLSjjzySOvevXu7+3bs2GG7d+9OdOQahuzSpYv16NEj8Vj91mXevHmOJGp4EvLbfhK7/v37f+q+jz/+2Gk/tZm3/bziL0HU/6r9NHVg+fLlGcvhD3/4Q+cCAIAYltLO7NXHen37X+ytbT3jHftO69p1aUIKY/svLdZmVS3b7aMuB9ig6//BBl52lr1z85P28bw/swPLWAqPPvrodrdrTtqSJUtsxowZnxI9/c+oUaPslltusSOOOMIOPfRQ5/ZDDjnELrrookBiqOe/9957A2+nd97d448/7kQoUzF69Gg7+eSTE9dfffXVDufshTGXr9Db1JEU7tq1y15++WWbMmXKp0RPc/wuvfRS+973vudIncRQKMr44osv2nnnnZeRHOr/r776avvlL3+ZsVQCACCGBeTIS75nqyt6OiLY0DDW+X3QwUsTUmie382xmK1q3mJdD+1ix8+60lre22zv/r9Z1rimhh1ZRjz55JNOpNDLxo0b7fzzz++wk1fCgZIGdPnRj35kN998sxMxlIhIOILiTd7IhHQJGhJcr4Tpcdm+TilskyRccufS0NBgtbW1TvJJR0kduv2nP/2pPfDAA3bPPffYmDFjHKkXGlpesGCBs81+SSlbtmxxphK4gjp79mwbMmQIHyoAiBTmGIZp2V84zZpi+69IDneNtT17hn9KCmP6sf96k7XY282bbOPgrjbi9Yl2wvRxzD8sExT1O+OMMxJDwpKKVatW2Re+8IXAkR8Jxg033OBIoWQS8tt+EjEN67vtt3TpUmeuYJBMX4mfMs8V+a2vr0/cLtHUCYMfra2t7eRxwIABzokCAABiWCLUHdg9IYXu7931Y21v0/CUUuj9XRdrtMV71lvLhcfb31dOsYE3n8sOLXEeffTRdkkDGt4dMWJERuVLhCKHSGHh20+RQslipu13//33O9HDpqamxG2nn366b2khDSErYunOQdWUgptuuimrRBQAAMSwAPQceno7KXR/N+4ca82Sww6k0Blq3v/YjW077K0Da6z7TWfZl1bcbod9+W/YsSVIcs09SeG4ceMylgoonvZTjcBs20+JI4o4uihqeNddd/n+n6LFSlDy/h/JRwCAGJYIdW2flsKEHNbF5bBxWFopTMw/rGizNa0f29uH7bC/fupKG7bgB3bI3w1iB5cQKn7sLWlSXV0dajIGlF77KdrnjRqOHDnS/zslLqLf/e532wmp5lOGUewbAAAxjJhdbaml0P3dFJfDliQ5TJZC7++mWIstb9lk6/+mqw357xvtb35+lXU5nPmHpcBXvvKVxN8aCrzzzjvZKZ28/RTp80YNVasxSG1D/d/bb7+duJ5LbUMAAD/ISg4bVwRj+/9O+t20bax1jf/+TM/KtFLoPMX+33XWaG+2rLcjv9rfRrw9xaqffMM+vOU37OsixltcWDJQiGhh0MzcsJaJo/3So6if6h66kUhlKgeVOw1jL168OJGlTG1DAEAMS0UKY/5yuOfjsXZQ/M/PHFLpK4Xe2zbH6m1r1wbrf/UwO23M39oHP3nGtv7yT+z3IsRb4kSRoSBZrCtXrnSKIwdFUaRvfOMbHb7+pEmTAj8XYph7+wXBO5Ss5BJFDIPse73+9OnT7fvf/76ThEJtQwBADMtMDvfG5fDAA1LIYQdSaPuHnVsqYraubbtV9+lixzx4sfW/9h/sg+8/bbsWr2XfFylBlybTahleIfFDq2xA8bRfEDZv3tyu5mImw8EqXXTVVVclCp5T2xAAooA5hmFLYfLvNHMOm7eOtZZdwwJLoVVUJB6j+Yfvtm22dSd3tRNfucFOeIr5h8VKVALnrqgBpdN+ycXOM81yTi6XQ21DAAgbIoZRyGFylNCsw8hhy5Z9K6Qc8NnKwFLo/a35h0taN9qRXzvKhv/DbbZ59uu28T9/by0fN9AWBcQ7ZKjhYdWs8xuOlOh1tOyb97n+6q/+yvlby7J1hMqrdDTMnExYw6Sdvf2C4F1DWa+R6TCwHq9kFC2NqMLpbm1D1UmkFBIAIIalIIVB5LBmrH1mvxxmIoXmyWrW/MPagxus/7XDbPiFf2vr7vq9bX5gEW1SILRqhVcGVF5EharT4a6Q0hGSk7feequdsKSDeYPhtJ9WPgnSfn5o6Peggw5KXNdqKNnIpmobKmvaPV7c2obaxnQnCwAAQWAoOWwxTDN0nO6+1s1jrW3nsKyk0KXF2pz5h8sP32G9bv+aDf3DD63XV0+iXQrAvHnz2l3Xese5oo7fO6ypqCBE334SsDDaT8PA3vbLNqmF2oYAgBh2IjmM7RiWlRR60frL77dtdeYfDvz1lXbCnKvs4GOPoG3yiDJIVZrEpV+/fjl33IoUeecVJssnhIeSOsJsP0ULp0yZ0i4q/NJLL2X9fIoQeqcduLUNe/bsSeMBAGJYVFKYqxxWj7U2Rw6zk8J2kYVYoy1v3WR15x1lJ/3hZht4x4UkqOQJzQXzikWuRYklJUcddVTiuqKFM2fOZEdHRPIwfK7tpzmAffr0add+kydPzmkbx4wZY1u2bGm3jUcffTSNBwCIYbnJYdumsRarG5aTFHrR/MPlB9eaXTvMhi6eaEd+92zaKQ+ozpx3uFdRp3fffTdjuVCtuxdeeKFdKZsNGzZQvy5iLrzwQtu6dWvi+mc/+1mnyHSm7aes4S9/+cvtor2vv/56zsks+n+dHLjHmJ7fu7IKAABiWExSmLMcXtRODrOVQhd3/uF7feqZf5gnFHV6/vnn22W49u/f31asWBF4WFJSoSFj7xCh5pZpLV+Ivv0kgloSTygJ5fOf/7wj90GWspNAPvPMM3bjjTe2W3dZIjdu3LhQtlErn+zcuTNxXdsIAJALZCVHIYcZZCSnuy/20UX7RpR7V+YkhV7c+Ye9Tu7mzD9seW2trb7+l9b0QQ1tFwETJkyw0047zREKt9NW5PDZZ591on5anUQC4k0kUPaxxHHq1KlO5rFb0NiVwokTJwaKFgZdEs+VILKYP40ETvta9QJd8dJlwYIFtmTJEpsxY4Yz38+LpFHR4rFjx1rXrl3bzSvU9IJzzjkn1NIyWi7vV7/6VbtSOAAAiGGxSmGucrjxon33H1YZ6qbum3/YaH3OOMyGvvVjp7QN9Q+jYcSIETZ//nwbPHhwYjhRw8K6PP744052qkqXuGgNXclHcvkarcAhKbz//vt9XzPTJfE0Nw0xTPE5iQucRE9yKPHylojR8LDadu/evYn2O/DAAx2Zl/wno1IyksKwpwCo3X73u98lahsCAOQCQ8lhi2GWQ8dp75Mcbh8WySbXxhrszdb1zvzD4X++jfmHEcnFsGHDnDp4XgF0BUPCITFzL14BcdHwo0qUBJFCiEYOFSVMLhGkaK63/ZQglCyFmkpQVVVlX/rSlyKbF6qM9T179tBYAIAYdho53BCdHArNP1x6cI0z/3D48luZfxgB1157rX3961+3d955p11SQ0dobpuiTBp2/uIXv5hzgeVSotjWgZYcnn/++c5qMqtWrQrUfjt27HBEUqWLND0gUynMZB9o+77zne+0O/HIZN1tAAAXhpLDlsIch47T3rdh/7By78pINl8JKpp/2HPQQXYM8w8jQcN+Q4YMcUTh0ksvta997Ws2aNAg5z4NFUsG9Hv16tU2Z84cZ/5a0PloKl+SbTmVoBmyP/nJT5zh70z/L8rtj3KbUrXf8ccf70QQL774YkcWJWBqM1fmJGeVlZXOvL/k+YdRtqFeSyceXshcB4CMVSYWixX9Rl5//fWLRowYcZZ7/bbbbnMyO4uO5bFPxM797f07rPuO+lVkcuilT0UPO+aAw5l/CAAAkCGaV6554S4vvfTSDbNmzZpW7NvNUHKomp3idwkOK7skzz/sf8t5tDEAAEAZgxgih7648w8PvuUsO3XNHcw/BAAAQAwhKyksEznU/MPVbR/b8sN3OPUPVSCb9ZcBAAAQQ+ikcihUIFvrL687uatT//CYhy5j/WUAAADEEDKSwjKSQ6EC2Zp/2HTJ8cw/BAAAQAyhs8uh2Ni2g/mHAAAAiCEgh/tINf+w54hBHAcAAACIIULYGeVQeOcfnjDvBjthzlXMPwQAAEAMkcPOKodC8w+Xtm60uvOOcuYfDrzjQo4LAAAAxLCTSiFy6LA5Vu/MP1SB7FuqbrTLvt6HYwQAAAAxRA47qxxq/uGhu1faD2ofs9m3HWlLfz3UThvak+MEAAAAMUQOO5scDmnaYovWz7FDm3eYNb5nwwats9d/cYLNve8E69O7C8cKAAAAYljmQogcfiKFVXOsV+ueT25srTNrWGqjvlRna+cPt2k/GmhduiCIAAAAiCFyWLZy6EjhuiQp9NK82XrGltp1l5itXzTUrht/JMcOAABAgSFUE5UcxpL+Tndbqt8WwX2SQ9G7MnopXBuXwrY97aU4mViL2d511q/nZpv2g4E2btSRduu96+y/FtZxDHXAwIEDnUuvXr1s6NChidvXrVvnXMSiRYvYUQAAgBgWpRB2Mjl0pPDDAFLopa3JrOl9G/bXveyFBwfac/Ob7Id3rrOVa5s6/SF19tln26hRoxwJPOusswL/X1VVlSOIujz33HNWV4dsAwAAYogc5lEOE1LYmoEUetH8w8blNuqsI+2cM06yx35da7f9bKPVbm/pVIeQIoK33nqrI4SHHnpoVs8xYMAAGz9+vHOZOXOmPf/88zZr1ixHEgGSj7fLL7+8w/sVidaxU27oMxY22lfLly93LlFvn9rEHSUAQAyLXQo7oRwOafRECnOlZbP1PKDWrvt2f7voa0Ptjgc32vRZm8v+8FF0UJ1BJpHBoFxwwQXORZHE66+/HkGEdmI4adKkDu9/9dVXy1IM073nXNmxY0ciWp/tvvPbPj0/YghRQPJJFHLo/d3R32WUkOJI4Zo0iSbZ4M4/POQ9m/avvWzpb4faP/7fXmXbMasDWbhwYSRS6EWRxLlz5zqdil4XAMJHkX6diClaL3lLF5EFQAyRw7KSQ0cKV4cshe0Esclsz/s27Lh19sIjcYF69CQ7/uiDy+ZQUfROw07qRPKJBFSvq9cHgGhPxiSI+rx5E8YAEMPOJISdRA4dKfwgQin0ovmHTXGBOnOzvb9wqE2bNND6HFa6MyGUVawo4T333JP1PMIwohp6fQ11aXsAIDqGDBliy5YtI3oIiCFyWJ5y6EjhqjxJYTtBrDVrfNOuG2/27ivD7YKvlN76y5IwDeXmO0rYEUpQ0fYghwDRo+ghcgjFDMknUclhkIQTv/uLNCHFkcKVGZakCZvmdXbkZzfbcw+fYNdP7mLTHy+N5BQNJUnCso0SKhFAQ1IqP+PWLvTWNFQCi/7O9PkVzdD/kpQCkB85FOWY1AOIIfgJYZnJ4ZDdnkhhRYH3tzP/cLlNm3SCbd/ZYk/8praoDw8le2QjhW6pGf1vR/UIk4VOcqiohC5BXm/ChAlIIUCe5TCs0jYAYcJQchRymO7vEh5WdqRwZQGGj/3Y+77df1v/op5z6M4pzEQKZ8+ebYMGDXLqGWZapNpNLJGMTp482SmfkU4KiVwAtGfkyJFWUVER+NK7d28bPXq087kNCp87QAw7ixSWoRw6Uvh+EUrhfnoetM6+Nbp45xuqA9BwbRDefvttO+WUU5xoX651yiSTqo0oQVTkESkEiAZ91nQCp8+tTuj0OfZD3wnMNwTEEDksOTksdil0aKuzzx9RnCukKHIXNNFE0QYNA4c9vKROS5FHiSBSCBAtOqHT5zhI9DCKFVgAEEPkMDI5nHV3lS36/gfWq6G16Hd7fX3xrQesSJ1KwgRBohZ19EAiqGgkUggQPfo8+0UOVeeQ+oaAGJa7EJaJHM761Z02vvJl6/VhN7OZw8yaincOX9Mesw/XF1/EMKh85VPUFI1ECgHyJ4dhPAYAMUQOCyqHM5++0y6LS2GCzYcUtRxuqDb73cLi2iYN3QZZ4m769OmIGkCZohMxvyFlIoaAGCKHRS2HM395p41f+opZrCJRPSchh48Xnxx+XGf2Lz81q9tZXIdBkLlDqkvIsnQA5Y1fKaio10gHQAyLSQhLTA5nzrnTLotLYUIIU8nhY8Uhhy2tZjW1ZtdNMXthQXEdCioW7ZeFrBIyDCEBlD+qQQqAGCKHJSeHj8+ZauOWvJIosl3Mcqjo4Op1Zv/0r2a/+G3xHQZBooDTpk3LuRwNABQ/mdQgBUAMy1EKS1AOH/vFVLvsT684N8Q8VphWDh/NvxzubjL7qMbsjkfM/n6s2QsLi+8wUDFrv/I0ihZKDAEAAIoJlsSLQg6zXf4u1/uzXD7vsZ/vk0LnaoXtl8OYVey/P/EUksP4jRXJcvhPlWbdos0I3ttstr3e7OXXzX58n1nVR8V7CCjpxA8lm3SWKIJK9rhrOKeaZK/9oAn6Gm7L95Cbtkfbpm1MtW2K6Lrblu+ly3QcuduXjLs9pbCMofse9Fv7uZTfSy77oBg/izqJdae86GTVXYe9UJ9HQAyRwyKQw8eemGrjFr+S2PRYLEM5rI7L4SNxObwqGjnUPMIdcSFcvtLs32aYvba0+Js/VUeeTLlHC9XhSGw0pB5kxRdFWCdNmuR0ThIE7Z+oREzbpu3S/E7VkEuHkgLGjx/v/F1VVZXYtqimAKjjVtKS9l265RPdZAU38qyLe6KRrjN3l0rMR/tnso/d96ITpnKcYuH3naBjK0rcddPTJbnoeHPvT/486phM1yZqa78T4jBWcvI7vt0TzSAn54AY5lcIS0QOH519l417c1578ctWDh/eL4fdw5HDtjaznbvNaraZTXnQ7Bf/VT6dgArelvPcQnUS6kgyWRfa2zlJxHRRxnZYnYlXVnTJZtskONddd51zUfkRPU9YUV9tm4TIldBM9pc6cFfC1IkXOsNVbZ/NPtbjtW/1PrQvymlFED8Zj+okSFHBTJbjTPd5VFkttUmqY17b71fIX+2aa5v6ya3IZK1qSA1zDKOQw+S/i3DO4T4p3J99HKtI+KJ55ND9h0BzDl05bMz9XGNXXAg/2GB2x2Nmp15SWlLoCkQuZ7yliqJdbgeRjXiliiStXbs2lAiXu8ygJCqMbVNHKWENIzKh59BzZSqFyR343LlzC5rl7rZ/rvvYlV09l4S51JEM+X0nRDGMrmNh2bJlWUthMpJ2tUmqYXF9p+lEzm97wnhPQfY3IIbIYYZy+Oisu+zbf/QMH4cphw9lL4dNe81qPo6f8f3W7CtXm90eF8O6+tJq+iDDyOUohq54hdUJeZFoKuqRrSS4HaRf55ytjOXSEUl69RxhyKqYOXNm2bS/nkuflVTzEkvp+0CS60fYYqiIaxTHgj5DapNUcuhXpF//m8uJlI4Dv2ih5JRKD7nDUHKUcliEw8qPOFI4LyF+FRWfyF6F5LAilvuwsuTwmuDDys48wl1mf1gWl4Cfm732VnkfGmEmnajjCSKjYUQ90m2DOraw5CYViqZ1lLziJ4VRy5I6fnVamUZE1HkrClMOJwWShSjaX3KoY0vHWKkla0mCgqxopKHPMN+bjsMojyu1s9pbbeIdAtd79YuOutMdsj2JyuV7ChBD5DDFbY/MjEvhG/P237Tvxsjk8MG4HF6bXg7deYQaNp4+x+wXL5Z+k+c7Yhg0IpErHWUoSgqilkKvJKjzCSpg+ZBCr7iqkwyaVBR1550vFMWNuv29clgKuAlEQacGhCkzeu18JLapvfVZTD5R02unm2uopBZtYzZRPb/PvRJ4yKJGDItbBItMDh9+PC6Fr89L2F6h5VDzCD+qjZ9l/lf8Yb8pvSFjyE4Knn/++XZRBj1HkFViMhWwTDtIN/vS22G5pT2CDkGrQ3TLfKRDnWkmwup2eN5t03P41crMB5KDoPvHzerWPtJ7cdtekbUgmcsSqHxGhCQimchopseyUEJHmEOfmSR9adjVPVa1DTredfHLiPcKu/aRNyrqRg3T/b+bAJZpW/htE9FCxBA5zOD+hx+725HCfdJn+ZPDTXE5nBGXw+9+IoeaR6h6hM/Gv4/u/Hm8s9jEIVMqUZBUX8RBpCBVSZVUsqT7g2TU6nWTJS6VsATp3CQrer50Q37qKPWYIB2+G0VJNzQYZHjR7bj1uh2JpptlnY+IcSokQUHkVO2v7Uz1vtWObka12j9dm+l96jnyNYcsl2SgIKg6QdilgyTdficzOjnT66bbj0Haw/0settVx73aNN2+03NnI4ZBTuwgHEg+iUoO092Wx4SUhx+92771P/MSN3qTSD75syIhfu1uDyMhRXL4wDBr2dXFtm43++83zC6eaPa9/0QKS1kMdT3IUKg6P3doLZ0suR3ahAkTfJ9TnVW66ECQkhZCc7vcch7pUIejx02ePNn3OdUhp+v0tG1BBFOvpf2RLvqo/an9cMoppzgdY74JEqFx299vH+t+vV+/91EuUSGdkEQxNC6Z0/4ePXq0I4DJ6PPlZsH7tYeeR+3nd7wnJ5T4tZE+v5nMxw2SdJLupBMQQ+TQ8/dDj7hS6Apd/uWwNf7gTesOssoZA+2Kfzcb/YPyTi4JUo+slLMsM5WCTJMG1CFJdIJEczraj0GiEZJCdU6ZbJvecxBxTff6QfabXiMTAXKlOp9yqNfz66wzbf8gxbfTtXupkM3nIlN0MiNhGzRokDNcrWNDohg0Wu2eeGg7/YpvJwuupDOVlCafIAUlyOc5k/cFiGGnlcOHHt4nhZ8WuvzJYW1Ls/1p1067e9N6O/WZ1fbCH8q/yYN82Zd6x6YhTL9hNjcikk3nJ0G44YYbsuowFNnzi8i5hbOzQR2QXwHdjiIiQebS6bmz6eS0z/JZwzDI0F4m7e9GboPMvczHyi1RIWHSfsnXcLheR/srm6x59/vMb3+nqhTgN79XJxVBvwf9StzoM0OJGsQQOfS5/8G4FF76h/lphC5aOdzZ2mIrGhtsVk21nfeXZXbXpqpO09xBvqBKJbuyo/cVpBZZptG4VB2LX8HcVNsRpPPLVaDUUfpF57LZNncuXi5RIr99FhZ+x7Df1AHvPpHUqs5k0Dl9hSzinS06UdLwro6LQgx56jXd13UTTNxkHrfigJs4ov3rlT0dV+mO91SRYz2f3zB0kKh4kJMpooXhQ/JJvuQwTwkpD85QpHB+QuI6TiLZn3Ri4SWk7Im12samPfZmQ51N3bTO3mnY1emaOogYZlqLLx1hlWfQF3C6SJv3fQVZ8i+M7fJLRlGH4RZWDrptYUQX1MFq29IlfaTaDr9tC2OeVNAEnlzQPk/XWbtrHneExMRNOMl22cTkdi9mIXSTpQo5B86NGKZbuzr5uPGuDa59nelx5VdkW985Gn1It1/8TgLC+q4BxLBs5fDBGffsixRakuhFLIctbTGrbtljf9m9y35Ws8Fe3L61Uze1ojbpvkSVyen3hZiJGIbxxZhJFNNPbMM6g1enpM4pnYQkC4LfMHJY26bnSSeGyfKiv/0kKIxtc6M7UdYV9BsC1PGY6tiWCKijz7bMjo4FyYb2U7EmGmgbdeKhfeCW5ikkmdZUTD7xctcGz2b+qtopXWazbk9XBFzb7nes5KNmY2eEoeR8y2G623IYVp4hKXxtviUP6yb+jGhYeUvzXvtTww776cYP7bz33+r0Uuh2zn6EscZu2FEgv84+qHyFeQbv91xeSclncXF1/n5DZd5t85MpPVdY86SijqD4HSvJdSolJnpvWvovGynUvDwNw7q1KfMlhSNHjnROnjO5uLUv9Z4LLYXuMH0YZXeyPdHwEze/DH4/CWcYGTEsTfHLgxw6UvjqfI/XRS+H9S2t9t7uXfZgzQb7elwIH9mykfbPoGMupnlSftEsb1ZikPWKw+wQ/WQpk0SesOff+W2bV6D8ZCrMyfOFFhI3S1qd9vbt253IaqbrVCtCpWxaZdXqJIoadZkLmYZx87EiUS5iqJPMjj4bft+RSCFiiBx2cP+MB6bZJa/OTxhb1HK4N9ZmHzQ12G/rttioVctsykdrrK61hXZP6hj9SjxoqLlYklD8voC9ohvm/Mh8i2EU7VwuMpcJficHkoGFCxdmFamSvKtcj1u8m2zTzFG0sliWW1R01y+LP1XUMEjSCcPIiCFymOLvB+53pdBTVDoiOWyN/9i4t8le3bnNrl77Z5uw5l1bv6eRts7hS6tYvtj8hrWZ3A2ZiGE20UHJg+pXupFGyI58rZ0e5nehTiCSjym/k1UdLxS0RgyRw6TbHvhZXAoXzf90yZgI5HDr/nmEt2/60P5xZaW9Xr+d9vVBnZvfhG0NoxS6Jlu6LEUX7zBeviNbfhHBQkaUwoyellJty7D2uaLqqlfpZsyWUtS0WAlaGN3d9x3No9Ttut9vHm0Q1K5+0zi8IkjSCWKIHGYhh/fHpfDiRfOThC58Oaxrbbb3dtfbQ1vX26hVlfbo1g20aUDckiZ+3HPPPXkfnnXRWbrfNmriv/fMPMhZej6FKRNJCbuMi9+2eUUnk/mI5S6ZivZIPPKdTFLu6BjyO8Z1surKuPZ9R6MBul336znVVn5TY/zIJAnFbwRDkslJBGKIHHrk8P77ptklCxckiV+4ctjQ2mofNO2232zbbGNWv2X//tFq2xGXRMj8yzBImQd9CQdJ6ggbRTX9JqenmvSf6RJZueD3XF7hCjLkHZaAqWP1y872bpufGOq5wjoGop67mk2nrGNG6z8rmUTRIaYnhE+QSgd6TKbRtjC+n9zSUx2hUQv3uPUbRSFaiBgih56/7793ml0cl8JEQkjIctgSf4KqvY02b2etXbvuXfv/VX9mHmEOKBISZGhHcpZvOZQU+g3XdFQOwq9TDyvjOsgE9GRJ8Rv6CmvoPsh79G5bEBEKo4SROtdM5/hFKYaK7rilZtyyNRANQYq7ZyPket4wspv9vgv1mfI7ft2i24AYIodxfjZ9mo1dsKC90IUoh9V799jS3Tts0kcr7ZI1b9kbu5hHGAZBlnYTihipw83HsLJkL0jGaEdf5H6di95LGFErP4lTJ5EsKX7bpved61CrmzGbDg3BB7ktk44zjH0WBpI7v6ixIuWKDuo4yLYjVzsVIpJermSb1BPWiZ7f0nr6bPp9BogWIoblJ39ZyuF906fbxQsWJolfOHKoIeI/N9bbfTVr7RsfLLVfb6umHUNGX6xBhpR1piyxiapzVyer5w8ihZLZjjqSIB29/jeXTl37wG++VKrtCNL55Zr1mm41h3Tb5rff1P65yKEkLNtVRbLp5NPhrvySy7HqrhxSimuLlwva92EUyBYaQfH77KX7zPsttQiIYaeRw/umxaVw/oL0K5FkIYeNbW32wZ4GeyYugt9cs9Tu3bKWeYQRRliCnnWrQ1VCigQuzCQCvb62I0gChr6A08lpkNpkkpxsI0USCu2DIIKWTNAakrlET/w6yo46sCCZ6io1kk2ERvssn0NsQSI3er/ZyqH+V5FnHUeqiajXI3qYG5l+n0RxTOUS8Sv0etOIIRSFHLpS2F7qcpPDvXEh3DePcKt9r+pdu27De7ZhL/MI8xFhUeHeoEhe1q5d63SQ2UZM1JG6QpjJKgiSQr95ZEEiW3oPep5MOvSgiQkS047mqwXZNsldplFNPa/2Yy6dX5COUa+RSdRYHbj2WT5XudC+9zs5cOfOZiKHblQ7OfKpgs1ED/3bxO+4DHq8R3VMBTlucvnOAcSwrOXwvrvvtbGJSKHlLIcqUF3d3GRv7Npmkze9b99aW2lvNGyjnfKIRCQTOXQFRhETfaHq/yVOHXW0+tJXxympkIhqOTJJRibJCFqGLEg0Tdujx/qhqI8bMU3XKSmaoW0OIrCKuqXrJLT9QeZ1at9KNvwidNqn6iSDFA5WtDKd/Gm7g5T+cKPG6UTIXYc431LofS9+EVBXDvVYPynxi2p7o4fwafxOqNQWfnLtHlPLli2L7JjKJlqv+bkkLuWPLuyCiOUwlvn998al8CInUhh/QEXMeUiFVw518/5/lvhVVHwih87t8Rv3PWYfHzfvtXXNu21u3SZ78uMNDBkXWA7dqFAmqFOUyIQ13ycVOpPPJFKlDiRI5rA6GL1ft26aOid9ybvJBeqo/Eq/JL+uXyeh9xFEmLTt2jZXsPS8bhKQti3I+0uWG7/hLj1GguOHBEmPU6a1tk3P6+43bV9Y2aK5RH+03/yG/bWNkmpd1MFr/+q96JLNe2FIOTU6sfKb/+rKtZvd6z1W1Q75mKOqY1knbpnUFeVkADHs1HJ47/5IYUL0YtnLYX2sxWqa99h/76ixhz9eZxv27qY9ikQO3YnYhV7k3kXRv0yTXvQeJE5BI1Z6jDqeXDofyWuQTkLyofcTVMBd8c4F1ekLMgyux6jIcJB5lELSnIk45xO1RSZJL7m2vyS50KsFFStuUf0gkW0d74VcT1nffUHFUBJL3cv8wlByvuQwwP1OpHDewvZDwc6PTxehTjesvCfWZuv3NtqLcSH85w1v24+rVyCFRXh2rw41jCWnckFDgRrezrazDTIUGxaZSkE2Q/e5CGsmc6DUgWc716rYUPvn4zjWa+gzQwJC+uMq11VK8iWGQbeTuYWIYaeVw+lxKfzmvP3DS7GKrOSwpS1mm5ub7I+7ttm/bX7frlm/zP7IPMKixR2yVKSpELgdba4lICS5WjYrSEmeXMQrGynIhxwq2pqNHOt/ykEO1SZqmyDzOpHC6NtCUfwwP4sa/o+ibYN87+h9UNAaMeyUcjj9rnvtolcWthe/DOVwW2uzLW+ss/trP7QJ65fas3Ufsb9LBJ0RqxhwviRBX7aSUUlpWGuOutmnUUSOtK1B5u6l64DCWO811X7Uqh65DG3qfUlcw+rI8xUh7UgOgyQk5eukoDOfcGp/hXFM6fMc1YhAkCVDWUsbMSxb8Uv3mGl33WfffGWheY0vEznc1dZiK5vqbc62DXblhrfsga1rSC4pQdzMXVcQo4i+uULoLk8WxXuQHGr+XBjbryjFKaecEsq2uuIaVnRWbeRmUocROdG25RKVcSW10AWAJcmS8DAiTBJ5PVcuJwWdWQ51fPqttpMO/W+UQq4kIr+5yRS0Lgwkn0Qhh7Fgj5k29T5nTuG+OoOxfc64P8skkWwiOayIJXzSTUjZa622qbnRKndvt/tqV9uKpp3s+zISRDcjVpdcJuu7QzHuJR/oLN8traNLpokTki79f9gTzt21q73blknGsVu4Wu8v7NIZej51wm65oaBt7rav/ifbDlz/l07kMo0qu2V2Mn0v3hMC7eeopcBPXgsto7lunzusnGk7KEqoz4n3+yKskQUvfid86WqVQsQaE4vFin4j4wf1ohEjRiRSmG677TZbsWJF8W3ohk8VFuy487zzk0hhhSfduMIrj+YJMO6Xw9Z4e21t3WMr4yL48LY1Nq9+C0dxJ0Bf7ooqueU90nUGbjkY/Y7iCz1TtM3qoNJtu1vGJt/zidxSKe6+7Wh/avvymRnpnhhou1LtM+82JQtCuu90dbb5Shbyvhd3H3dUQ889Vt2SQRDdMaXjPLkd3O8L93OYj23Ra6aLGCpaXOrZyIMHD7aJEycmrr/00ks3xE94ir72DhHDyJS7Yzm8Jy6FF76y0PNF7sph+sjhtrY9tmbPLvtdfbXNqF3NPu5E5FtMwkQdQLHWISsWeU4lpNlEzPxq/BVCuvRe8hmxhnCPqShQBDOdFCpaSokaxLDTyOHdihS+vMgxwZgnQphODuvbWqy6udEW7Kqxe2pXMocQAFLit/wcc/WgGPCLWjO3sLCQfBImzXtTy2GSFMZc6bOKtGsbN8fabN2eBnupvtqu/miJ3VrzHlIIUGZoWE/RtDBW9NBQYTqKMToKnU8K083tVdIRYlhYiBiGyZ4mswMPSimHd99xn13oRAr3S6A50wZTRg7b4nfUNDfZqr077bFta2z+rhr2LUAZIQlUB6khNbeT1GT8XFf18BNDhueg0PglnSCFhYeIYZgsW5zy5rvu+FlcCl9NiJ9LqshhbeseW7Z7u02rXWmXrn8DKQQoIzTUq45Pc/20JJ43cqIlyvyGgtPhlcxURFmAGiAIio77VQJgXeTCQ8QwTD7e2oEULvpkDeNUaxvHf+yKtdrG5gZ7sX6TPbp9te1kyBig7PBbV9ot9ZLpkK+E0i8SQ/IHFJogJWqYB1t4iBiGydLXzVpa2knhmJcWJRWubr+2seYRrtm7y16ur7bLN/7R7q79C1IIUKb4RUMkjW4x7kyk0E84BUN0UEhUJuess87KSRwBMSw95j5lVr3B+XPq7ffHpfDVT4QwSQ5b43991Nxob+zeajdvfsv+uXqJbWzezT4EKHMx9FsVRoK3bNkyp5NMVVvR29Hq+fRYPykkEgOFxk/6NNWBGpbFAUPJYbIz/sX70FT719gRNuaNd/cNE1fsHz42N9nEbHNLk33U0mC/3lllT9WtZb8BdBIkZ0o6mTt3ru9jJ02a5FySa7q5BaODrigjEc01qQUgF3QSM378eN+TJkAMy5PZD9iWvz7dVjZ3t76f6WYHVRzgzCdstTZraGuJS+Fue3HXJnt6x1rb2caQMUBnQ3P9FMHz6yhdNPzmNwSXjlyWywMIA7+6hSpRwxxYxLCseWTN6/bigT3svB6ft8Fd99Umq2rZZR/urbdFDZsRQgA6Sud3UDnM+jx1/7rTAIVCEW6/iDXRQsSwU/BRc4M9UreKHQEABZHDQqyLDJCMamummwOrqQ6cvBQXJJ8AABRQDidPnhz68+o5kUIoBoIUtGaqA2IIAACejvOUU04JpQC1nkPPRdkPKJYTHwpalx4MJQMAFBgVtFamsS6aj3XBBRdk9P/PP/+808Gy5B0UE4oEpouIqzwNJWoQQwAA6ACJnS5uSRoVr9ZF11N1qO7jAYoRZRqTbYwYAgBAjijSQqcKAIWAOYYAAAAAgBgCAAAAAGIIAAAAAIghAAAAAJSsGDY2Nq6mqQAAAKBUOPHEExHDqNizZ8973ut+BTMBAAAACkmPHj3aXW9sbJyLGIZE8s5EDAEAAKCY8UYM4x4Te/rpp6sQw5DQzty2bVuLe33w4MEccQAAAFCUdO/evV0Qq6qqqqZUtr1kkk82btyYMO0+ffoghwAAAFCUDB8+vN312traNxHDkNmyZcuvvdfPPPNMjjwAAAAoOs4999x217dv334XYhgyjz322C3e4WSJ4ec+9zmOPgAAACgaNKLpHUZeu3Zt3VNPPfU/iGEEfPDBB697r1922WUcgQAAAFA0XHPNNe2ur1q1anIpbX9JiWF1dfV4Zfa414cNG8aQMgAAABQFY8aMcfIgXBQtnDVr1jTEMCKUnbx48eLHvbcpakj5GgAAACgkSjiRGHoptWhhyYmheOihh66UgbvXlRL+4x//GDkEAACAgiAHSR5CrqysXF5q0cKSFEPx9ttvD/UmoiCHAAAAUAiUbCIHkYu4VFdXN06dOvWUUnw/JSmGGlJ+8803v+2db+jKIXMOAQAAIB9o6HjixImfksLFixefWKrvqSIWi5Vsg4wbN27syJEj53Tr1q3Ce3tlZaU98cQTtnXrVo5aAAAACBVFCeMO8qmRSo1mKnD15JNPPo0YFlAOTz311J8fdthhXZLve+2115zLihUrOIoBAAAgJ5RgouLV3nWQXdxIYamsiVy2YijGjh07YMiQIcsHDRrUK9X9tbW1jhxWVVU5F6FoIhFFAAAASEaRwB49eiT+VoRQMugdMvaiRJMNGzaMKnUpLBsxdLn66qsfHTFixHeSh5YBAAAAwkZDx0uWLLm5FLOPO4UYCkUP+/XrN/vYY489PdXwMgAAAECuQvjOO+/MVgm9cntvZSeGXq644or/6Nu37zf79+8/AEkEAACAbNEcwk2bNq2sqam5vZSTSzq1GHpRJLFbt26ju3btelL89zEc4gAAAJCO+vr6P7a2ttY0NjbOLYf5g4ghAAAAAATmAHYBAAAAACCGAAAAAIAYAgAAAABiCAAAAACIIQAAAAAghgAAAACAGAIAAAAAYggAAAAAiCEAAAAAIIYAAAAAgBgCAAAAAGIIAAAAAIghAAAAACCGAAAAAIAYAgAAAABiCAAAAACIIQAAAAAghgAAAACAGAIAAAAAYggAAAAAiCEAAAAAIIYAAAAAgBgCAAAAAGIIAAAAAIghAAAAACCGAAAAAIAYAgAAAABiCAAAAACIIQAAAAAghgAAAACAGAIAAAAAYggAAAAAiCEAAAAAIIYAAAAAgBgCAAAAAGIIAAAAAIghAAAAACCGAAAAAIAYAgAAAABiCAAAAABlwv8KMADLbPZ1PyQJdgAAAABJRU5ErkJggg=="/>
+    </pattern>
+  </defs>
+  <rect id="google-play-badge" width="304" height="118" fill="url(#pattern)"/>
+</svg>
diff --git a/src/views/Home/layouts/CrossPlatform/assets/ios.svg b/src/views/Home/layouts/CrossPlatform/assets/ios.svg
new file mode 100644
index 0000000..8e93556
--- /dev/null
+++ b/src/views/Home/layouts/CrossPlatform/assets/ios.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="80" viewBox="0 0 240 80">
+  <defs>
+    <pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 498 167">
+      <image width="498" height="167" xlink:href="data:image/png;base64,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"/>
+    </pattern>
+  </defs>
+  <rect id="download-on-the-app-store-badge" width="240" height="80" fill="url(#pattern)"/>
+</svg>
diff --git a/src/views/Home/layouts/CrossPlatform/assets/pwa.svg b/src/views/Home/layouts/CrossPlatform/assets/pwa.svg
new file mode 100644
index 0000000..368d63f
--- /dev/null
+++ b/src/views/Home/layouts/CrossPlatform/assets/pwa.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="270" height="80" viewBox="0 0 270 80">
+  <image id="_28998498-0df3c0c8-7a03-11e7-8780-2c71d0b3330e" data-name="28998498-0df3c0c8-7a03-11e7-8780-2c71d0b3330e" width="270" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAACgCAYAAABHabVbAAAACXBIWXMAACxLAAAsSwGlPZapAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuMTY0NzUzLCAyMDIxLzAyLzE1LTExOjUyOjEzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTA0LTEzVDE2OjQwOjEyKzA0OjMwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0wNC0xM1QxNjo0MDoyOSswNDozMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wNC0xM1QxNjo0MDoyOSswNDozMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpiMmY2ZjI3OS1lYjdhLThk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"/>
+</svg>
diff --git a/src/views/Home/layouts/CrossPlatform/index.js b/src/views/Home/layouts/CrossPlatform/index.js
index 715a000..d45527c 100644
--- a/src/views/Home/layouts/CrossPlatform/index.js
+++ b/src/views/Home/layouts/CrossPlatform/index.js
@@ -1,13 +1,64 @@
 import React from "react";
 import { connect } from "react-redux";
 
+//assets
+import iosImage from "./assets/ios.svg";
+import androidImage from "./assets/android.svg";
+import pwaImage from "./assets/pwa.svg";
+
 export const CrossPlatform = ({}) => {
+  const links = React.useMemo(() => {
+    return [
+      {
+        link: "/android",
+        image: androidImage,
+        width: "calc(14.43vw)",
+        height: "calc(14.43vw * 0.4379)",
+      },
+      {
+        link: "/ios",
+        image: iosImage,
+        width: "calc(14.43vw * 0.8148)",
+        height: "calc(14.43vw * 0.2554)",
+      },
+      {
+        link: "/pwa",
+        image: pwaImage,
+        width: "calc(14.43vw * 0.8759)",
+        height: "calc(14.43vw * 0.2919)",
+      },
+    ];
+  });
+
   return (
     <div
-      className="w-full flex items-center justify-center bg-yellow-400"
+      className="w-10/12 flex items-center justify-between"
       style={{ height: "calc(100vh / 10)" }}
     >
-      CrossPlatform
+      <div className="flex flex-col">
+        <strong className="text-primary-3 font-6 text-5x">
+          قابل استفاده برای{" "}
+        </strong>
+        <strong className="text-primary-6 font-6 text-2x my-2">
+          گوشی‌های اندرویدی و آی او اس و PWA
+        </strong>
+      </div>
+
+      <div className="flex gap-4 items-center">
+        {links.map((link, index) => (
+          <a href={link.link} download>
+            <img
+              src={link.image}
+              alt={link}
+              key={index}
+              style={{
+                width: link.width,
+                height: link.height,
+              }}
+            />
+          </a>
+        ))}
+      </div>
     </div>
   );
 };
@@ -16,4 +67,4 @@ const mapStateToProps = (state) => ({});
 
 const mapDispatchToProps = {};
 
-export default connect(mapStateToProps, mapDispatchToProps)(CrossPlatform);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(CrossPlatform);
diff --git a/src/views/Home/layouts/Features/index.js b/src/views/Home/layouts/Features/index.js
index 893f069..191d43d 100644
--- a/src/views/Home/layouts/Features/index.js
+++ b/src/views/Home/layouts/Features/index.js
@@ -41,7 +41,7 @@ export const Features = ({ isDesktop }) => {
   }, [isDesktop]);
 
   return (
-    <div className="w-full h-screen flex flex-col justify-around items-center py-5">
+    <div className="w-10/12 h-screen flex flex-col justify-around items-center py-5">
       <div className="flex flex-col">
         <strong className="text-primary-3 font-6 text-5x">
           بیشتر از یک پلتفرم محتوایی اعجاب انگیز
@@ -62,7 +62,6 @@ export const Features = ({ isDesktop }) => {
           </div>
         ))}
       </div>
-
       <Button
         title="امکانات بیشتری کشف کنید"
         round="rounded-full"
diff --git a/src/views/Home/layouts/Form/index.js b/src/views/Home/layouts/Form/index.js
index eb2eaff..b85a7a7 100644
--- a/src/views/Home/layouts/Form/index.js
+++ b/src/views/Home/layouts/Form/index.js
@@ -1,19 +1,90 @@
 import React from "react";
 import { connect } from "react-redux";
+import { form } from "../../../../redux/actions";
+import onInput from "../../../../utils/onInput";
 
-export const Form = ({}) => {
+//components
+import Input from "../../../../components/Input";
+import Button from "../../../../components/Button";
+import Textarea from "../../../../components/Textarea";
+
+export const Form = ({ contact, setContact }) => {
   return (
     <div
-      className="w-full flex items-center justify-center bg-purple-100"
+      className="w-10/12 flex flex-col items-center justify-around"
       style={{ height: "calc(100vh - 100vh / 10)" }}
     >
-      Form
+      <div className="flex flex-col items-center">
+        <strong className="text-primary-3 font-6 text-5x">
+          فرم درخواست سرویس{" "}
+        </strong>
+        <p className="text-2x font-4 text-gray-400 mt-3">
+          در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید{" "}
+        </p>
+      </div>
+      <div className="flex w-full justify-between">
+        <div className="flex flex-col justify-center w-5/12">
+          <strong className="text-primary-7 font-4 text-4x">تماس با ما </strong>
+          <strong className="text-black font-7 text-5x mt-2">
+            سلام
+            <br /> بیاید با هم صحبت کنیم
+          </strong>
+          <strong className="text-black font-2 text-4x mt-4">
+            Info@Barnamenegar.com
+          </strong>
+        </div>
+        <div className="h-full w-px bg-gray-200"></div>
+        <form
+          className="flex flex-col gap-6 items-end justify-center w-5/12"
+          onSubmit={(e) => e.prevDefault()}
+        >
+          <Input
+            placeholder="نام"
+            name="name"
+            value={contact.name}
+            onChange={(name, value) => setContact({ name, value })}
+            regex={(val) => val}
+          />
+          <Input
+            placeholder="ایمیل"
+            name="email"
+            value={contact.email}
+            onChange={(name, value) => setContact({ name, value })}
+            regex={(val) => val}
+          />
+          <Input
+            placeholder="زمینه فعالیت"
+            name="job"
+            value={contact.job}
+            onChange={(name, value) => setContact({ name, value })}
+            regex={(val) => val}
+          />
+          <Textarea
+            rows={4}
+            name="message"
+            value={contact.message}
+            placeholder="پیام"
+            onChange={(name, value) => setContact({ name, value })}
+          />
+          <Button
+            title="ارسال"
+            backgroundColor="bg-primary-7"
+            color="text-white"
+            padding="py-4 px-20"
+            round="rounded-lg"
+          />
+        </form>
+      </div>
     </div>
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  contact: state.form.contact,
+});
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  setContact: form.setContact,
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);
diff --git a/src/views/Home/layouts/Gradient/index.js b/src/views/Home/layouts/Gradient/index.js
index af9bf24..f59d57a 100644
--- a/src/views/Home/layouts/Gradient/index.js
+++ b/src/views/Home/layouts/Gradient/index.js
@@ -4,10 +4,37 @@ import { connect } from "react-redux";
 export const Gradient = ({}) => {
   return (
     <div
-      className="w-full flex items-center justify-center"
-      style={{ height: "calc(100vh / 2)" }}
+      className="w-full flex relative justify-center pt-10"
+      style={{
+        background:
+          "linear-gradient(315deg, rgba(255,238,225,1) 0%, rgba(248,250,255,1) 50%, rgba(211,245,255,1) 100%)",
+      }}
     >
-      Gradient
+      <div className="w-10/12 flex">
+        <div className="flex-1 flex items-end">
+          <div
+            className="bg-white rounded-t-3xl"
+            style={{
+              width: "calc((100vw - 16vw) / 2 * 3 / 5)",
+              height: "calc((100vw - 16vw) / 2 * 3 / 5 * 5 / 4)",
+            }}
+          ></div>
+        </div>
+        <div className="flex-1 flex flex-col justify-center">
+          <strong className="text-primary-3 font-6 text-5x">
+            امکانات بسیار متفاوت
+            <br /> قابلیت ارسال تصویر، صورت، ویدئو
+          </strong>
+          <strong className="text-primary-6 font-6 text-2x my-2">
+            قابلیت‌های که هرجا نمی‌توانید آن را پیدا کنید{" "}
+          </strong>
+          <p className="text-primary-1 text-6xl font-4 text-2x">
+            یکی از امکانات مهم و ضروری داستان بازی امکان
+            <br /> ارسال پاسخ کاربران به شما به صورت نوشته، ویدئو
+            <br /> صوت و یا فرمت دلخواه شما می‌باشد.
+          </p>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/views/Home/layouts/Graphic/index.js b/src/views/Home/layouts/Graphic/index.js
index 70de26c..d7ac1d3 100644
--- a/src/views/Home/layouts/Graphic/index.js
+++ b/src/views/Home/layouts/Graphic/index.js
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 export const Graphic = ({}) => {
   return (
     <header
-      className="w-full flex items-center justify-center bg-green-100"
+      className="w-10/12 flex items-center justify-center bg-green-100"
       style={{
         height: "calc( 100vh - 100vh / 15)",
       }}
diff --git a/src/views/Home/layouts/Panel/index.js b/src/views/Home/layouts/Panel/index.js
index fa625e6..50ed195 100644
--- a/src/views/Home/layouts/Panel/index.js
+++ b/src/views/Home/layouts/Panel/index.js
@@ -25,7 +25,7 @@ export const Panel = ({ isDesktop }) => {
 
   return (
     <div
-      className="w-full flex items-center justify-between"
+      className="w-10/12 flex items-center justify-between"
       style={{ height: "calc(100vh / 2)" }}
     >
       <div className="flex flex-col">
@@ -43,14 +43,20 @@ export const Panel = ({ isDesktop }) => {
           <br /> همه چیز در کنترل شماست
         </p>
       </div>
-      <div className="flex flex-col justify-center h-4/5 bg-dark-2 w-1/2 rounded-md">
+      <div
+        className="flex flex-col justify-center bg-dark-2 w-1/2 rounded-md"
+        style={{
+          height: "calc((100vw - 16vw) / 2 * 9 /16)",
+          width: "calc((100vw - 16vw) / 2)",
+        }}
+      >
         <ul className="flex flex-col w-full h-4/5 justify-around">
           {items.map((item, index) => (
             <li
               className={`bg-secondary-8 p-2 rounded-md flex items-center text-1x text-white transform ${
                 index === 1 ? "translate-x-1/2" : "translate-x-1/3"
               }`}
-              style={{ maxWidth: "270px" }}
+              style={{ maxWidth: "calc((100vw - 16vw) / 2 / 2.8)" }}
             >
               <span className={`${item.color} ml-2`}>#</span>
               {item.title}
diff --git a/src/views/Home/layouts/Samples/index.js b/src/views/Home/layouts/Samples/index.js
index 582bf8a..294caf9 100644
--- a/src/views/Home/layouts/Samples/index.js
+++ b/src/views/Home/layouts/Samples/index.js
@@ -1,12 +1,52 @@
 import React from "react";
 import { connect } from "react-redux";
 
+//components
+import Button from "../../../../components/Button";
+import Slider from "../../../../components/Slider";
+
 export const Samples = ({}) => {
+  const [activeProject, setActiveProject] = React.useState(null);
+
+  const Info = () => {
+    return (
+      <div className="flex justify-between border-2 border-solid border-primary-5 rounded-lg px-7 py-16 w-11/12">
+        <div className="flex flex-col flex-1">
+          <strong className="text-primary-4 font-4 text-2x">
+            آقا بزرگ
+            <br /> یک متن توضیح کوتاه در این قسمت قرار می‌گیرد
+          </strong>
+          <p className="text-2x font-3 text-primary-2 mt-3">
+            فرق نمی‌کند کاربران شما با تلفن‌های همراه یا کامپیوترهای شخصی خود
+            وارد حسابشان شوند، دسترسی از هر مکان و زمانی امکان پذیر است
+          </p>
+        </div>
+        <div className="flex flex-col flex-1 justify-center items-end">
+          <Button
+            title="مشاهده و کار با پروژه"
+            round="rounded-full"
+            borderColor="text-primary-5"
+            color="text-primary-4"
+            padding="px-10 py-5"
+            backgroundColor="bg-green-50 bg-opacity-50"
+          />
+        </div>
+      </div>
+    );
+  };
+
   return (
-    <div
-      className="w-full h-screen flex items-center justify-center bg-blue-100"
-    >
-      Samples
+    <div className="w-10/12 h-screen flex flex-col justify-around items-center py-5 relative">
+      <div className="flex flex-col">
+        <strong className="text-primary-3 font-6 text-5x">
+          با افتخار قدرت گرفته از داستان بازی{" "}
+        </strong>
+        <p className="text-2x font-4 text-gray-400 mt-3">
+          در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید
+        </p>
+      </div>
+      <Slider />
+      <Info />
     </div>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 101cc42..b1eae0a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,16 +3,16 @@ module.exports = {
   darkMode: "class", // or 'media' or 'class'
   theme: {
     fontSize: {
-      "1x": "clamp(11px, 1.42vw, 20px)",
-      "2x": "clamp(15px, 1.85vw , 26px)",
+      "1x": "clamp(11px, 1.05vw, 20px)",
+      "2x": "clamp(15px, 1.40vw , 26px)",
       "3x": "",
-      "4x": "",
-      "5x": "clamp(18px, 3.33vw, 46px)",
+      "4x": "clamp(18px, 2.127vw, 40px)",
+      "5x": "clamp(18px, 2.42vw, 46px)",
       "6x": "",
       "7x": "",
       "8x": "",
       "9x": "",
-      "10x": "clamp(46px, 14vw, 100px)",
+      "10x": "clamp(46px, 5.26vw, 100px)",
     },
     backgroundColor: (theme) => ({
       ...theme("colors"),
@@ -32,7 +32,6 @@ module.exports = {
       "secondary-7": "#426AEE",
       "secondary-8": "#292841",
       "secondary-9": "#F5F6FF",
-      gradient: "null",
       "dark-1": "#2F8BD2",
       "dark-2": "#CFCFCF",
       "dark-3": "#000517",