You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
4.2 KiB
114 lines
4.2 KiB
import React from "react"; |
|
|
|
const Features = ({ features }) => { |
|
return ( |
|
<section className="bg-white border-2 border-gray-400 rounded m-7"> |
|
<h2 className="text-lg font-sansbold text-productTitle mr-7 my-5"> |
|
امکانات و ویژگی ها |
|
</h2> |
|
<div className="w-full flex flex-wrap justify-around items-center"> |
|
{features.map((feature, index) => ( |
|
<div className="flex flex-row w-2/5 p-5" key={index}> |
|
<div |
|
className="rounded p-2 ml-5 flex items-center" |
|
style={{ |
|
backgroundColor: feature.iconBgColor, |
|
height: "fit-content", |
|
}} |
|
> |
|
<img src={feature.icon} alt="" className="w-10 h-10" /> |
|
</div> |
|
<div className="flex flex-col"> |
|
<div className="flex items-center"> |
|
<strong className={`text-base font-medium`}> |
|
{feature.title} |
|
</strong> |
|
<span |
|
className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`} |
|
> |
|
{feature.status} |
|
</span> |
|
</div> |
|
<p className="mt-1 text-justify text-sm leading-6"> |
|
{feature.content} |
|
</p> |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
<div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 "> |
|
<div> |
|
<h2 className="font-semibold text-base">هزاران درصد تحفیف</h2> |
|
<p className="mt-4 text-sm"> |
|
با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار |
|
شوید |
|
</p> |
|
</div> |
|
<button |
|
className="px-7 py-3 text-sm sm:text-base mt-5 sm:mt-0 rounded-md text-blue-600 hover:text-white |
|
bg-white |
|
hover:bg-blue-600 |
|
border-2 |
|
border-blue-600 cursor-pointer" |
|
> |
|
مشاهده امکانات |
|
</button> |
|
</div> |
|
</section> |
|
); |
|
}; |
|
|
|
export default Features; |
|
|
|
Features.defaultProps = { |
|
features: [ |
|
{ |
|
icon: "images/crown-icon.svg", |
|
iconBgColor: "#FFFDC4", |
|
title: "قابلیت امتیاز دهی", |
|
status: "جدید", |
|
content: |
|
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
|
}, |
|
{ |
|
icon: "images/box.svg", |
|
iconBgColor: "#CEC4FF", |
|
title: "قابلیت انتخاب رنگ دلخواه", |
|
status: "جدید", |
|
content: |
|
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
|
}, |
|
{ |
|
icon: "images/cake.svg", |
|
iconBgColor: "#C4FFF7", |
|
title: "یادآوری جشن تولد", |
|
status: "جدید", |
|
content: |
|
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
|
}, |
|
{ |
|
icon: "images/color-palette.svg", |
|
iconBgColor: "#FFC4EB", |
|
title: "انتخاب سطح و پایه تحصیلی", |
|
status: "جدید", |
|
content: |
|
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
|
}, |
|
{ |
|
icon: "images/hat.svg", |
|
iconBgColor: "#C4FFE2", |
|
title: "حالت پرواز", |
|
status: "جدید", |
|
content: |
|
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
|
}, |
|
{ |
|
icon: "images/plane.svg", |
|
iconBgColor: "#E5FFC4", |
|
title: "نحوه ارسال جعبه خاطرات", |
|
status: "جدید", |
|
content: |
|
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", |
|
}, |
|
], |
|
};
|
|
|