parent
							
								
									fe5f0c818c
								
							
						
					
					
						commit
						d542c25603
					
				
				 94 changed files with 1112 additions and 647 deletions
			
			
		
									
										
											File diff suppressed because one or more lines are too long
										
									
								
							
						| @ -1,28 +1,27 @@ | ||||
| import React, { Component } from 'react'; | ||||
| import React from "react"; | ||||
| 
 | ||||
| import './index.scss'; | ||||
| import "./index.scss"; | ||||
| 
 | ||||
| const maxDesktopSize = 1250; | ||||
| 
 | ||||
| const fontSize = { | ||||
|   desktop : { | ||||
|   desktop: { | ||||
|     h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55, | ||||
|     span: window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80, | ||||
|     span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, | ||||
|     p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, | ||||
|   } | ||||
| } | ||||
|   }, | ||||
| }; | ||||
| export default function Info(props) { | ||||
|   const {title , subTitle, description} = props; | ||||
|   return( | ||||
|   const { title, subTitle, description } = props; | ||||
|   return ( | ||||
|     <> | ||||
|       { | ||||
|         window.innerWidth > 1000 ? 
 | ||||
|       {window.innerWidth > 1000 ? ( | ||||
|         <section className="product-info d-flex flex-column"> | ||||
|           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1> | ||||
|           <span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span> | ||||
|           <p style={{ fontSize: fontSize.desktop.p }}>{description}</p> | ||||
|         </section> : null | ||||
|       } | ||||
|         </section> | ||||
|       ) : null} | ||||
|     </> | ||||
|   ); | ||||
| } | ||||
| } | ||||
|  | ||||
| @ -0,0 +1,85 @@ | ||||
| import React from "react"; | ||||
| 
 | ||||
| import "./index.scss"; | ||||
| 
 | ||||
| const maxDesktopSize = 1250; | ||||
| const maxMobileSize = 550; | ||||
| 
 | ||||
| const fontSize = { | ||||
|   desktop: { | ||||
|     span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, | ||||
|   }, | ||||
|   mobile: { | ||||
|     span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, | ||||
|   }, | ||||
| }; | ||||
| 
 | ||||
| export default function Document(props) { | ||||
|   const { parent, name } = props; | ||||
|   console.log({ parent, name }); | ||||
|   return ( | ||||
|     <> | ||||
|       {window.innerWidth < 1000 ? ( | ||||
|         <div className="support__document d-flex justify-content-center align-items-center mb-3"> | ||||
|           <input | ||||
|             type="file" | ||||
|             name={name} | ||||
|             onChange={(e) => | ||||
|               parent.onChange(e.target.name, e.target.files[0], "file") | ||||
|             } | ||||
|           /> | ||||
|           {parent.state.file ? ( | ||||
|             <span | ||||
|               style={{ | ||||
|                 fontSize: fontSize.mobile.span, | ||||
|                 width: "100%", | ||||
|                 textAlign: "center", | ||||
|                 margin: "auto", | ||||
|               }} | ||||
|             > | ||||
|               {parent.state.file?.name || "تصویر بارگزاری شد"} | ||||
|             </span> | ||||
|           ) : ( | ||||
|             <span style={{ fontSize: fontSize.mobile.span }}> | ||||
|               در صورت نیاز تصویر مرتبط را انتخاب کنید. | ||||
|             </span> | ||||
|           )} | ||||
|         </div> | ||||
|       ) : null} | ||||
|       {window.innerWidth > 1000 ? ( | ||||
|         <div className="support__document d-flex justify-content-center-align-items-center"> | ||||
|           <input | ||||
|             type="file" | ||||
|             name={name} | ||||
|             onChange={(e) => | ||||
|               parent.onChange(e.target.name, e.target.files[0], "file") | ||||
|             } | ||||
|           />{" "} | ||||
|           {parent.state.file ? ( | ||||
|             <span | ||||
|               style={{ | ||||
|                 fontSize: fontSize.mobile.span, | ||||
|                 width: "100%", | ||||
|                 textAlign: "center", | ||||
|                 margin: "auto", | ||||
|               }} | ||||
|             > | ||||
|               {parent.state.file?.name || "فایل ثبت شد"} | ||||
|             </span> | ||||
|           ) : ( | ||||
|             <span | ||||
|               style={{ | ||||
|                 fontSize: fontSize.mobile.span, | ||||
|                 width: "100%", | ||||
|                 textAlign: "center", | ||||
|                 margin: "auto", | ||||
|               }} | ||||
|             > | ||||
|               در صورت نیاز تصویر مرتبط را انتخاب کنید. | ||||
|             </span> | ||||
|           )} | ||||
|         </div> | ||||
|       ) : null} | ||||
|     </> | ||||
|   ); | ||||
| } | ||||
| @ -0,0 +1,29 @@ | ||||
| .support { | ||||
|   &__document { | ||||
|     color: gray !important; | ||||
|     margin: 10px auto; | ||||
|     width: 100%; | ||||
|     height: 50px; | ||||
|     border-radius: 10px; | ||||
|     border: 2px dashed #d1d1d1; | ||||
|     position: relative; | ||||
|     input { | ||||
|       width: 100%; | ||||
|       height: 100%; | ||||
|       position: absolute; | ||||
|       left: 0px; | ||||
|       top: 0px; | ||||
|       opacity: 0; | ||||
|     } | ||||
|     img { | ||||
|       width: 100%; | ||||
|       height: 100%; | ||||
|       object-fit: cover; | ||||
|       border-radius: 50%; | ||||
|     } | ||||
|     span { | ||||
|       color: #afafaf; | ||||
|       font-family: numeralLight; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| @ -0,0 +1,278 @@ | ||||
| .support { | ||||
|   width: 100vw; | ||||
|   max-width: 1250px; | ||||
|   margin: 0px auto; | ||||
|   padding: 0px 10px; | ||||
|   direction: rtl; | ||||
|   min-height: calc(100vh - 288px); | ||||
|   overflow-x: hidden; | ||||
|   padding-top: 60px; | ||||
|   &__forms { | ||||
|     width: 100%; | ||||
|     justify-content: space-between; | ||||
|     margin-top: 30px; | ||||
|     margin-bottom: 80px; | ||||
|     &--right { | ||||
|       width: 45%; | ||||
|       .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; | ||||
|         font-size: calc(100vw / 85) !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: numeralMedium; | ||||
|         font-size: calc(100vw / 40); | ||||
|       } | ||||
|       p { | ||||
|         font-family: numeralLight; | ||||
|         font-size: calc(100vw / 95); | ||||
|         color: #6f7074; | ||||
|       } | ||||
| 
 | ||||
|       button { | ||||
|         align-self: flex-start; | ||||
|         margin-top: 30px; | ||||
|         font-family: numeralLight; | ||||
|         text-decoration: none; | ||||
|         color: white; | ||||
|         background-color: #6cbe44; | ||||
|         border-radius: 6px; | ||||
|         padding: 5px 25px; | ||||
|         font-size: calc(100vw / 90); | ||||
|         max-width: 110px; | ||||
|         border: 0px; | ||||
|         &:hover { | ||||
|           color: white; | ||||
|         } | ||||
|       } | ||||
| 
 | ||||
|       .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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     &--left { | ||||
|       width: 45%; | ||||
|       height: 100%; | ||||
|       p { | ||||
|         font-family: numeralLight; | ||||
|         font-size: calc(100vw / 95); | ||||
|         margin-bottom: 0px; | ||||
|         color: #6f7074; | ||||
|       } | ||||
|       span { | ||||
|         font-family: numeralLight; | ||||
|         font-size: calc(100vw / 95); | ||||
|         margin-bottom: 0px; | ||||
|         color: #6f7074; | ||||
|         margin-right: 5px; | ||||
|       } | ||||
|       .contact__map { | ||||
|         width: 100%; | ||||
|         height: 430px; | ||||
|         border-radius: 20px; | ||||
|         img { | ||||
|           transform: scale(0.4); | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .mobile-support { | ||||
|   width: 100vw; | ||||
|   max-width: 550px; | ||||
|   margin: 0px auto; | ||||
|   padding: 0px 10px; | ||||
|   direction: rtl; | ||||
|   overflow-x: hidden; | ||||
|   padding-top: 70px; | ||||
|   padding-bottom: 50px; | ||||
|   &__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: 0px !important; | ||||
|       width: fit-content; | ||||
|       padding: 0px 6px !important; | ||||
|     } | ||||
| 
 | ||||
|     label { | ||||
|       background-color: white; | ||||
|       max-width: 120px; | ||||
|       text-align: center; | ||||
|       color: #797979 !important; | ||||
|       letter-spacing: -1px; | ||||
|       font-family: numeralLight !important; | ||||
|       font-size: 14px; | ||||
|     } | ||||
|     .Mui-focused { | ||||
|       color: rgba(0, 0, 0, 0.54) !important; | ||||
|       border-color: #c4c4c5 !important; | ||||
|     } | ||||
|     h1 { | ||||
|       letter-spacing: -2px; | ||||
|       color: #6cbe44; | ||||
|       font-family: numeralMedium; | ||||
|     } | ||||
|     p { | ||||
|       font-family: numeralLight; | ||||
|       color: #6f7074; | ||||
|     } | ||||
| 
 | ||||
|     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; | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     .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); | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
					Loading…
					
					
				
		Reference in new issue