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

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:
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
},
],
};