parent
							
								
									588cd9cc0e
								
							
						
					
					
						commit
						69599d3c65
					
				
				 24 changed files with 599 additions and 213 deletions
			
			
		
									
										Binary file not shown.
									
								
							
						| After Width: | Height: | Size: 944 B | 
| After Width: | Height: | Size: 30 KiB | 
| After Width: | Height: | Size: 24 KiB | 
| @ -0,0 +1,81 @@ | ||||
| import "./index.scss"; | ||||
| 
 | ||||
| import app_icon_img from "~/assets/icons/home_chat.png"; | ||||
| import download_icon from "~/assets/images/Group.png"; | ||||
| 
 | ||||
| const H_DownloadApp = () => { | ||||
|   return ( | ||||
|     <> | ||||
|       {window.innerWidth > 1000 ? ( | ||||
|         <div className="h-download-app" id="download"> | ||||
|           <div className="h-download-app-text"> | ||||
|             لذت یادگیری را با<span>دانوین</span> تجربه کنید | ||||
|           </div> | ||||
|           <div className="h-download-app-content"> | ||||
|             <div className="h-download-app-content-box1"></div> | ||||
|             <a | ||||
|               download | ||||
|               href="http://danovin.ir/app.apk" | ||||
|               className="h-download-app-content-box2" | ||||
|             > | ||||
|               <div className="h-download-app-content-box2-app-img-container"> | ||||
|                 <img | ||||
|                   src={app_icon_img} | ||||
|                   className="h-download-app-content-box2-app-img" | ||||
|                   alt="app_icon_img" | ||||
|                 /> | ||||
|               </div> | ||||
|               <div className="h-download-app-content-box2-text"> | ||||
|                 <div className="h-download-app-content-box2-text-title"> | ||||
|                   دریافت اپلیکیشن اختصاصی دانوین | ||||
|                 </div> | ||||
|                 <div className="h-download-app-content-box2-text-subtitle"> | ||||
|                   به راحتی از همین جا دانلود کنید... | ||||
|                 </div> | ||||
|               </div> | ||||
|               <img | ||||
|                 src={download_icon} | ||||
|                 className="h-download-app-content-box2-download-icon" | ||||
|                 alt="download_icon" | ||||
|                 style={{ width: 30 }} | ||||
|               /> | ||||
|             </a> | ||||
|           </div> | ||||
|         </div> | ||||
|       ) : ( | ||||
|         <div> | ||||
|           <a | ||||
|             download | ||||
|             href="http://danovin.ir/app.apk" | ||||
|             className="h-download-app-content-mobile" | ||||
|           > | ||||
|             <div className="h-download-app-content-box2-app-img-container"> | ||||
|               <img | ||||
|                 src={app_icon_img} | ||||
|                 className="h-download-app-content-box2-app-img" | ||||
|                 alt="app_icon_img" | ||||
|               /> | ||||
|             </div> | ||||
|             <div className="h-download-app-content-box2-text"> | ||||
|               <div className="h-download-app-content-box2-text-title"> | ||||
|                 دریافت اپلیکیشن اختصاصی دانوین | ||||
|               </div> | ||||
|               <div className="h-download-app-content-box2-text-subtitle"> | ||||
|                 به راحتی از همین جا دانلود کنید... | ||||
|               </div> | ||||
|             </div> | ||||
|             <img | ||||
|               src={download_icon} | ||||
|               className="h-download-app-content-box2-download-icon" | ||||
|               alt="download_icon" | ||||
|               style={{ width: 30 }} | ||||
|             /> | ||||
|           </a> | ||||
|           <div style={{ height: 1, width: "100%" }}></div> | ||||
|         </div> | ||||
|       )} | ||||
|     </> | ||||
|   ); | ||||
| }; | ||||
| 
 | ||||
| export default H_DownloadApp; | ||||
| @ -0,0 +1,98 @@ | ||||
| .h-download-app { | ||||
|   width: 93%; | ||||
|   padding: 0 20px; | ||||
|   margin: 0 auto; | ||||
|   margin-top: 60px; | ||||
|   margin-bottom: 10px; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   justify-content: space-between; | ||||
|   direction: rtl; | ||||
|   background-image: url(../../../assets/images/Groupbg.png); | ||||
|   background-size: 100% 100%; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-text { | ||||
|   width: 50%; | ||||
|   font-size: 45px; | ||||
|   font-family: var(--font2); | ||||
|   color: #132f52; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-text span { | ||||
|   color: #2e81e8; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content { | ||||
|   width: 40%; | ||||
|   position: relative; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box1 { | ||||
|   width: 80%; | ||||
|   aspect-ratio: 0.95/1; | ||||
|   border-radius: 40px; | ||||
|   border: 10px solid #e6e6e6; | ||||
|   background-color: #e4fcfa; | ||||
|   background-image: url(../../../assets/images/app.jpg); | ||||
|   margin: 0 auto; | ||||
|   background-size: contain; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box2 { | ||||
|   text-decoration: none; | ||||
|   width: 100%; | ||||
|   aspect-ratio: 1/0.2; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   justify-content: space-between; | ||||
|   padding: 0 20px; | ||||
|   position: absolute; | ||||
|   bottom: 0; | ||||
|   background-color: #a2b4cb; | ||||
|   border-radius: 20px; | ||||
| } | ||||
| .h-download-app-content-mobile { | ||||
|   text-decoration: none; | ||||
| 
 | ||||
|   aspect-ratio: 1/0.2; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   justify-content: space-between; | ||||
|   padding: 0 20px; | ||||
|   margin: 5px 10px 10px; | ||||
| 
 | ||||
|   background-color: #a2b4cb; | ||||
|   border-radius: 20px; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box2-app-img-container { | ||||
|   width: 16%; | ||||
|   aspect-ratio: 1/1; | ||||
|   border-radius: 10px; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   justify-content: center; | ||||
|   background-color: white; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box2-app-img-container img { | ||||
|   width: 100%; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box2-text { | ||||
|   text-align: center; | ||||
|   width: 70%; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box2-text-title { | ||||
|   font-size: 18px; | ||||
|   font-family: var(--font2); | ||||
|   color: white; | ||||
| } | ||||
| 
 | ||||
| .h-download-app-content-box2-text-subtitle { | ||||
|   font-size: 13px; | ||||
|   font-family: var(--font1); | ||||
|   color: #005660; | ||||
| } | ||||
					Loading…
					
					
				
		Reference in new issue