|  |  |  | @ -1,15 +1,82 @@ | 
			
		
	
		
			
				
					|  |  |  |  | import React from "react"; | 
			
		
	
		
			
				
					|  |  |  |  | import { connect } from "react-redux"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export const Features = ({}) => { | 
			
		
	
		
			
				
					|  |  |  |  | //components
 | 
			
		
	
		
			
				
					|  |  |  |  | import Button from "../../../../components/Button"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | //assets
 | 
			
		
	
		
			
				
					|  |  |  |  | import conditionImage from "./assets/Condition.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | import dataSavingImage from "./assets/DataSaving.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | import interactiveImage from "./assets/interactive.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | import responsiveImage from "./assets/responsive.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export const Features = ({ isDesktop }) => { | 
			
		
	
		
			
				
					|  |  |  |  |   const items = React.useMemo(() => { | 
			
		
	
		
			
				
					|  |  |  |  |     return [ | 
			
		
	
		
			
				
					|  |  |  |  |       { | 
			
		
	
		
			
				
					|  |  |  |  |         title: "امکان مشاهده در تلفن همراه و دسکتاپ", | 
			
		
	
		
			
				
					|  |  |  |  |         description: | 
			
		
	
		
			
				
					|  |  |  |  |           "فرق نمیکند کاربران شما با تلفنهای همراه یا کامپیوترهای شخصی خود وارد حسابشان شوند، دسترسی از هر مکان و زمانی  امکان پذیر است", | 
			
		
	
		
			
				
					|  |  |  |  |         image: responsiveImage, | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |       { | 
			
		
	
		
			
				
					|  |  |  |  |         title: "امکان ساختن و تعریف چندیت شرط مختلف", | 
			
		
	
		
			
				
					|  |  |  |  |         description: | 
			
		
	
		
			
				
					|  |  |  |  |           "همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید", | 
			
		
	
		
			
				
					|  |  |  |  |         image: conditionImage, | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |       { | 
			
		
	
		
			
				
					|  |  |  |  |         title: "امکان تعامل پذیری بالا با کاربران", | 
			
		
	
		
			
				
					|  |  |  |  |         description: | 
			
		
	
		
			
				
					|  |  |  |  |           "رابط و تجربه کاربری بسیار زیبا و آسان  این قابلیت را به کاربران شما میدهد تا در سریعترین زمان ممکن با پلتفرم شما ارتباط برقرار کنند", | 
			
		
	
		
			
				
					|  |  |  |  |         image: interactiveImage, | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |       { | 
			
		
	
		
			
				
					|  |  |  |  |         title: "جمع آوری کلان داده از شرکت کنندگان", | 
			
		
	
		
			
				
					|  |  |  |  |         description: | 
			
		
	
		
			
				
					|  |  |  |  |           "به وسیله ابزارهای مختلفی که در اختیار شما قرار میگیرد می توانید اطلاعات کاربران خود را مورد بررسی و ارزیابی قرار دهید", | 
			
		
	
		
			
				
					|  |  |  |  |         image: dataSavingImage, | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |     ]; | 
			
		
	
		
			
				
					|  |  |  |  |   }, [isDesktop]); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   return ( | 
			
		
	
		
			
				
					|  |  |  |  |     <div className="w-full h-screen flex items-center justify-center"> | 
			
		
	
		
			
				
					|  |  |  |  |       Features | 
			
		
	
		
			
				
					|  |  |  |  |     <div className="w-full 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"> | 
			
		
	
		
			
				
					|  |  |  |  |           بیشتر از یک پلتفرم محتوایی اعجاب انگیز | 
			
		
	
		
			
				
					|  |  |  |  |         </strong> | 
			
		
	
		
			
				
					|  |  |  |  |         <p className="text-2x font-4 text-gray-400 mt-3"> | 
			
		
	
		
			
				
					|  |  |  |  |           در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید | 
			
		
	
		
			
				
					|  |  |  |  |         </p> | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |       <div className="flex justify-between w-full"> | 
			
		
	
		
			
				
					|  |  |  |  |         {items.map((item, index) => ( | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="flex flex-col items-center gap-4 w-1/5" key={index}> | 
			
		
	
		
			
				
					|  |  |  |  |             <img src={item.image} alt={item.title} style={{ height: 161 }} /> | 
			
		
	
		
			
				
					|  |  |  |  |             <strong className="text-1x text-gray-700">{item.title}</strong> | 
			
		
	
		
			
				
					|  |  |  |  |             <p className="text-center text-1x font-3 text-gray-500"> | 
			
		
	
		
			
				
					|  |  |  |  |               {item.description} | 
			
		
	
		
			
				
					|  |  |  |  |             </p> | 
			
		
	
		
			
				
					|  |  |  |  |           </div> | 
			
		
	
		
			
				
					|  |  |  |  |         ))} | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |       <Button | 
			
		
	
		
			
				
					|  |  |  |  |         title="امکانات بیشتری کشف کنید" | 
			
		
	
		
			
				
					|  |  |  |  |         round="rounded-full" | 
			
		
	
		
			
				
					|  |  |  |  |         borderColor="text-primary-3" | 
			
		
	
		
			
				
					|  |  |  |  |         color="text-primary-3" | 
			
		
	
		
			
				
					|  |  |  |  |         padding="px-10 py-5" | 
			
		
	
		
			
				
					|  |  |  |  |       /> | 
			
		
	
		
			
				
					|  |  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  |  |   ); | 
			
		
	
		
			
				
					|  |  |  |  | }; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const mapStateToProps = (state) => ({}); | 
			
		
	
		
			
				
					|  |  |  |  | const mapStateToProps = (state) => ({ | 
			
		
	
		
			
				
					|  |  |  |  |   isDesktop: state.developer.device === "desktop", | 
			
		
	
		
			
				
					|  |  |  |  | }); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const mapDispatchToProps = {}; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  |  | 
 |