reza added mobile contact

src/views/Contact/index.js

@@ -18,8 +18,13 @@ const fontSize = {
     h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
     p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
     span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
-  }
-}
+  },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
+    span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
+  },
+};
 export default class Contact extends Component {
   render() {
     return (
@@ -58,11 +63,15 @@ export default class Contact extends Component {
                     style={{ width: "55%", justifyContent: "space-between" }}
                   >
                     <div className="d-flex align-items-center">
-                      <span style={{ fontSize: fontSize.desktop.span }}>02163462405</span>
+                      <span style={{ fontSize: fontSize.desktop.span }}>
+                        02163462405
+                      </span>
                       <img src={contact} alt="تماس" className="m-1" />
                     </div>
                     <div className="d-flex align-items-center">
-                      <span style={{ fontSize: fontSize.desktop.span }}>Info@Danovin.ir</span>
+                      <span style={{ fontSize: fontSize.desktop.span }}>
+                        Info@Danovin.ir
+                      </span>
                       <img src={home} alt="خانه" className="m-1" />
                     </div>
                   </div>
@@ -75,6 +84,56 @@ export default class Contact extends Component {
             <Footer />
           </>
         ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-contact d-flex flex-column align-items-center">
+            <Navbar page={"contact"} />
+            <div className="mobile-contact__form d-flex flex-column">
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>تماس با ما</h1>
+              <p style={{ fontSize: fontSize.mobile.p }}>
+                برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
+                پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
+              </p>
+              <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
+              <Input label={"شماره تماس"} name={"mobile"} />
+              <Select options={["همه", "پرفروش"]} />
+              <Input label={"موضوع پیام"} name={"subject"} />
+              <textarea
+                placeholder="متن پیام"
+                name="description"
+                rows="5"
+              ></textarea>
+              <button>ارسال</button>
+            </div>
+            <div className="mobile-contact__address d-flex flex-column">
+              <div className="mobile-contact__address--location d-flex align-items-center">
+                <img src={location} alt="آدرس" className="m-1" />
+                <p style={{ fontSize: fontSize.mobile.p }}>
+                  تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
+                </p>
+              </div>
+              <div
+                className="d-flex align-items-center mt-1"
+                style={{ width: "55%", justifyContent: "space-between" }}
+              >
+                <div className="d-flex align-items-center">
+                  <span style={{ fontSize: fontSize.mobile.span }}>
+                    02163462405
+                  </span>
+                  <img src={contact} alt="تماس" className="m-1" />
+                </div>
+                <div className="d-flex align-items-center">
+                  <span style={{ fontSize: fontSize.mobile.span }}>
+                    Info@Danovin.ir
+                  </span>
+                  <img src={home} alt="خانه" className="m-1" />
+                </div>
+              </div>
+              <div className="mobile-contact__address--map d-flex align-items-center mt-3">
+                <Location />
+              </div>
+            </div>
+          </div>
+        ) : null}
       </>
     );
   }

src/views/Contact/index.scss

@@ -155,3 +155,151 @@
     }
   }
 }
+
+.mobile-contact {
+  width: 100vw;
+  max-width: 550px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 90px;
+  &__form {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .MuiOutlinedInput-notchedOutline {
+      top: 0px !important;
+    }
+    .MuiOutlinedInput-notchedOutline {
+      border-color: #cecece !important;
+      border-width: 1px !important;
+      color: green !important;
+      border-radius: 10px !important;
+    }
+
+    .MuiOutlinedInput-input {
+      padding: 20px 14px !important;
+    }
+    .MuiInputLabel-outlined {
+      font-family: numeralLight !important;
+      display: inline !important;
+      position: absolute;
+      text-align: right !important;
+      right: 10px;
+      top: 12px;
+      padding: 0px !important;
+      transform: translate(0px, 0px) scale(1) !important;
+    }
+    .MuiInputLabel-shrink {
+      text-align: right !important;
+      display: inline;
+      position: absolute;
+      right: -5px;
+      top: -8px;
+      transform: translate(0px, 0px) scale(0.75) !important;
+      padding-right: 15px !important;
+    }
+
+    label {
+      background-color: white;
+      max-width: 120px;
+      text-align: center;
+      color: #797979 !important;
+      letter-spacing: -1px;
+    }
+    .Mui-focused {
+      color: rgba(0, 0, 0, 0.54) !important;
+      border-color: #c4c4c5 !important;
+    }
+    h1 {
+      letter-spacing: -2px;
+      color: #6cbe44;
+      font-family: numeralBold;
+    }
+    p {
+      font-family: numeralLight;
+      color: #6f7074;
+      letter-spacing: -1px;
+    }
+
+    button {
+      align-self: flex-start;
+      margin-top: 30px;
+      font-family: numeralLight;
+      text-decoration: none;
+      color: white;
+      background-color: #6cbe44;
+      border-radius: 6px;
+      padding: 8px 25px;
+      width: 100%;
+      border: 0px;
+      &:hover {
+        color: white;
+      }
+    }
+
+    textarea {
+      width: 350px;
+      font-family: numeralLight;
+      border-radius: 10px;
+      margin-top: 20px;
+      border: 1px solid #c4c4c5;
+      padding: 10px 8px;
+      color: #6f7074;
+      &::placeholder {
+        color: #797979;
+      }
+      &:focus {
+        outline: 0px;
+      }
+    }
+    .MuiFormControl-root {
+      select {
+        font-family: numeralLight;
+        height: 100%;
+        direction: rtl;
+        border: 1px solid #cecece !important;
+        text-align: center !important;
+        border-radius: 10px !important;
+        color: #76797e !important;
+        &:focus {
+          background-color: white !important;
+        }
+        option {
+          padding: 5px !important;
+        }
+      }
+      .MuiNativeSelect-icon {
+        display: none;
+      }
+      .MuiNativeSelect-select {
+        padding: 8px 10px 8px 100px !important;
+      }
+    }
+  }
+  &__address {
+    width: 100%;
+    p {
+      font-family: numeralLight;
+      margin-bottom: 0px;
+      color: #6f7074;
+    }
+    span {
+      font-family: numeralLight;
+      margin-bottom: 0px;
+      color: #6f7074;
+      margin-right: 5px;
+    }
+    &--map {
+      width: 100%;
+      height: 180px;
+      border-radius: 20px;
+      img {
+        transform: scale(0.4);
+      }
+    }
+  }
+}