parent
							
								
									29d114c948
								
							
						
					
					
						commit
						9981702092
					
				
				 4 changed files with 84 additions and 1 deletions
			
			
		@ -0,0 +1,20 @@ | 
				
			|||||||
 | 
					.ProductFeatures{ | 
				
			||||||
 | 
					    display:flex; | 
				
			||||||
 | 
					    flex-wrap: wrap; | 
				
			||||||
 | 
					    width:30em; | 
				
			||||||
 | 
					     | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					.ProductFeatures .feature{ | 
				
			||||||
 | 
					    flex: 0 0 calc(33.333333% - 24px); | 
				
			||||||
 | 
					    display: flex; | 
				
			||||||
 | 
					    flex-direction: column; | 
				
			||||||
 | 
					    align-items: center; | 
				
			||||||
 | 
					    width:115px; | 
				
			||||||
 | 
					    height: 115px; | 
				
			||||||
 | 
					    justify-content: center; | 
				
			||||||
 | 
					    margin:5px; | 
				
			||||||
 | 
					    background: rgba(248,248,248,0.5); | 
				
			||||||
 | 
					    font-size: 12px; | 
				
			||||||
 | 
					    border-radius: 20px; | 
				
			||||||
 | 
					    border: 1px solid #E5E5E5; | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,56 @@ | 
				
			|||||||
 | 
					import React from "react"; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import './productFeature.css'; | 
				
			||||||
 | 
					import chatIcon from '../../assets/images/uesax-bold-message-text.png'; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const ProductFeatures = () => { | 
				
			||||||
 | 
					    return( | 
				
			||||||
 | 
					        <div className="ProductFeatures"> | 
				
			||||||
 | 
					            {featureCont.map(e => | 
				
			||||||
 | 
					                <div className="feature" key={`featureNumber${e.id}`}> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    <img src={e.icon} /> | 
				
			||||||
 | 
					                    <p>{e.description}</p> | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                </div>     | 
				
			||||||
 | 
					            )} | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					        </div> | 
				
			||||||
 | 
					    ); | 
				
			||||||
 | 
					}; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const featureCont = [ | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					        id: 1, | 
				
			||||||
 | 
					        icon: chatIcon, | 
				
			||||||
 | 
					        description: 'ایجاد تیکت' | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					        id: 2, | 
				
			||||||
 | 
					        icon: chatIcon, | 
				
			||||||
 | 
					        description: 'فیلد های سفارشی' | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					        id: 3, | 
				
			||||||
 | 
					        icon: chatIcon, | 
				
			||||||
 | 
					        description: 'سوالات گزینه ای' | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					        id: 4, | 
				
			||||||
 | 
					        icon: chatIcon, | 
				
			||||||
 | 
					        description: 'پیام اتوماتیک' | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					        id: 5, | 
				
			||||||
 | 
					        icon: chatIcon, | 
				
			||||||
 | 
					        description: 'پیام ربات' | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					        id: 6, | 
				
			||||||
 | 
					        icon: chatIcon, | 
				
			||||||
 | 
					        description: 'ارجاع به اپراتور' | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					]; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default ProductFeatures; | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue