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.
66 lines
2.2 KiB
66 lines
2.2 KiB
3 years ago
|
import React from "react";
|
||
|
|
||
|
import cart from "./cart-icon.svg";
|
||
|
import map from "./map-icon.svg";
|
||
|
import setting from "./setting-icon.svg";
|
||
|
|
||
|
const AdvertisementDesign3 = ({ features }) => {
|
||
|
return (
|
||
|
<section className="mx-auto bg-white m-10 w-full sm:w-5/12 p-2">
|
||
|
<div
|
||
|
className="rounded-3xl relative"
|
||
|
style={{ backgroundColor: "#E3F2FF" }}
|
||
|
>
|
||
|
<div className="flex flex-col justify-center p-10 w-8/12">
|
||
|
<h2 className="text-lg text-productPrice">تبلیغات دانوینی</h2>
|
||
|
<p className="text-sm text-justify leading-6 mt-2 text-productPrice">
|
||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
||
|
استفاده از طراحان گرافیک است.
|
||
|
</p>
|
||
|
<div className="mt-3">
|
||
|
{features.map((feature, i) => (
|
||
|
<div className="flex flex-row items-center mt-1">
|
||
|
<img src={feature.icon} alt="" className="w-6 h-6" />
|
||
|
<p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light">
|
||
|
{feature.title}
|
||
|
</p>
|
||
|
</div>
|
||
|
))}
|
||
|
</div>
|
||
|
</div>
|
||
|
<div
|
||
|
style={{ backgroundColor: "#00FFFF22" }}
|
||
|
className="rounded-full w-20 h-20 sm:w-32 sm:h-32 absolute left-1/4 top-1/3 transform -translate-x-1/4 -translate-y-1/2 z-20"
|
||
|
></div>
|
||
|
<div
|
||
|
style={{ backgroundColor: "#6E6EEF22" }}
|
||
|
className="rounded-full w-44 h-44 absolute left-1/4 -bottom-2/4 transform -translate-x-1/2 -translate-y-1/2 z-10"
|
||
|
></div>
|
||
|
<div
|
||
|
style={{ backgroundColor: "#06BACE22" }}
|
||
|
className="rounded-full w-44 h-44 absolute left-0 top-2"
|
||
|
></div>
|
||
|
</div>
|
||
|
</section>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default AdvertisementDesign3;
|
||
|
|
||
|
AdvertisementDesign3.defaultProps = {
|
||
|
features: [
|
||
|
{
|
||
|
icon: cart,
|
||
|
title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده",
|
||
|
},
|
||
|
{
|
||
|
icon: map,
|
||
|
title: "ارسال به تمام نقاط ایران",
|
||
|
},
|
||
|
{
|
||
|
icon: setting,
|
||
|
title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی",
|
||
|
},
|
||
|
],
|
||
|
};
|