|
|
|
|
@ -1,73 +1,64 @@ |
|
|
|
|
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 z-50">تبلیغات دانوینی</h2> |
|
|
|
|
<p className="text-sm text-justify leading-6 mt-2 text-productPrice z-50"> |
|
|
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
|
|
|
|
استفاده از طراحان گرافیک است. |
|
|
|
|
</p> |
|
|
|
|
<div className="mt-3"> |
|
|
|
|
{features.map((feature, i) => ( |
|
|
|
|
<div className="flex flex-row items-center mt-2"> |
|
|
|
|
<img src={feature.icon} alt="" className="w-6 h-6 z-50" /> |
|
|
|
|
<p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light z-50"> |
|
|
|
|
{feature.title} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: "#00FFFF22", |
|
|
|
|
width: "calc(100vw / 15)", |
|
|
|
|
height: "calc(100vw / 15)", |
|
|
|
|
left: "8%", |
|
|
|
|
top: "20%", |
|
|
|
|
}} |
|
|
|
|
className="rounded-full absolute z-20 bg-opacity-30 backdrop-filter backdrop-blur-md" |
|
|
|
|
></div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: "#6E6EEF22", |
|
|
|
|
width: "calc(100vw / 10)", |
|
|
|
|
height: "calc(100vw / 10)", |
|
|
|
|
left: "17%", |
|
|
|
|
top: "10%", |
|
|
|
|
}} |
|
|
|
|
className="rounded-full absolute bg-opacity-30 backdrop-filter backdrop-blur-md" |
|
|
|
|
></div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: "#06BACE22", |
|
|
|
|
width: "calc(100vw / 11)", |
|
|
|
|
height: "calc(100vw / 11)", |
|
|
|
|
left: "12%", |
|
|
|
|
bottom: "2%", |
|
|
|
|
}} |
|
|
|
|
className="rounded-full absolute" |
|
|
|
|
></div> |
|
|
|
|
<div className="absolute bottom-5 left-10"> |
|
|
|
|
<button className="border-2 border-blue-500 text-blue-500 ml-4 rounded p-2 text-sm"> |
|
|
|
|
تماس با ما |
|
|
|
|
</button> |
|
|
|
|
<button className="bg-blue-500 border-2 border-blue-500 text-white rounded p-2 text-sm"> |
|
|
|
|
به سلامت |
|
|
|
|
</button> |
|
|
|
|
<div className="w-full relative bg-[#E3F2FF] rounded-3xl"> |
|
|
|
|
<div className="flex flex-col justify-center p-10 w-8/12"> |
|
|
|
|
<h2 className="text-lg text-productPrice z-50">تبلیغات دانوینی</h2> |
|
|
|
|
<p className="text-sm text-justify leading-6 mt-2 text-productPrice z-50"> |
|
|
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده |
|
|
|
|
از طراحان گرافیک است. |
|
|
|
|
</p> |
|
|
|
|
<div className="mt-3"> |
|
|
|
|
{features.map((feature, i) => ( |
|
|
|
|
<div className="flex flex-row items-center mt-2"> |
|
|
|
|
<img src={feature.icon} alt="" className="w-6 h-6 z-50" /> |
|
|
|
|
<p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light z-50"> |
|
|
|
|
{feature.title} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: "#00FFFF22", |
|
|
|
|
width: "calc(100vw / 15)", |
|
|
|
|
height: "calc(100vw / 15)", |
|
|
|
|
left: "8%", |
|
|
|
|
top: "20%", |
|
|
|
|
}} |
|
|
|
|
className="rounded-full absolute z-20 bg-opacity-30 backdrop-filter backdrop-blur-md" |
|
|
|
|
></div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: "#6E6EEF22", |
|
|
|
|
width: "calc(100vw / 10)", |
|
|
|
|
height: "calc(100vw / 10)", |
|
|
|
|
left: "17%", |
|
|
|
|
top: "10%", |
|
|
|
|
}} |
|
|
|
|
className="rounded-full absolute bg-opacity-30 backdrop-filter backdrop-blur-md" |
|
|
|
|
></div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: "#06BACE22", |
|
|
|
|
width: "calc(100vw / 11)", |
|
|
|
|
height: "calc(100vw / 11)", |
|
|
|
|
left: "12%", |
|
|
|
|
bottom: "2%", |
|
|
|
|
}} |
|
|
|
|
className="rounded-full absolute" |
|
|
|
|
></div> |
|
|
|
|
<div className="absolute bottom-5 left-10"> |
|
|
|
|
<button className="border-2 border-blue-500 text-blue-500 ml-4 rounded p-2 text-sm"> |
|
|
|
|
تماس با ما |
|
|
|
|
</button> |
|
|
|
|
<button className="bg-blue-500 border-2 border-blue-500 text-white rounded p-2 text-sm"> |
|
|
|
|
به سلامت |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -76,15 +67,15 @@ export default AdvertisementDesign3; |
|
|
|
|
AdvertisementDesign3.defaultProps = { |
|
|
|
|
features: [ |
|
|
|
|
{ |
|
|
|
|
icon: cart, |
|
|
|
|
icon: "images/cart-icon.svg", |
|
|
|
|
title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: map, |
|
|
|
|
icon: "images//map-icon.svg", |
|
|
|
|
title: "ارسال به تمام نقاط ایران", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: setting, |
|
|
|
|
icon: "images/setting-icon.svg", |
|
|
|
|
title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
|
