parent
b252144776
commit
5e66d341ce
7 changed files with 56 additions and 279 deletions
@ -1,52 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const AdvertisementDesign1 = () => { |
|
||||||
return ( |
|
||||||
<section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12"> |
|
||||||
<div |
|
||||||
className="w-full h-96 rounded-3xl relative overflow-hidden" |
|
||||||
style={{ backgroundColor: "#E3F2FF" }} |
|
||||||
> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
width: "calc(100vw / 10)", |
|
||||||
height: "calc(100vw / 10)", |
|
||||||
left: "20%", |
|
||||||
top: "15%", |
|
||||||
}} |
|
||||||
className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30" |
|
||||||
></div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
width: "calc(100vw / 7)", |
|
||||||
height: "calc(100vw / 7)", |
|
||||||
right: "25%", |
|
||||||
bottom: "4%", |
|
||||||
}} |
|
||||||
className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md" |
|
||||||
></div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
width: "calc(100vw / 8)", |
|
||||||
height: "calc(100vw / 8)", |
|
||||||
right: "3%", |
|
||||||
top: "15%", |
|
||||||
}} |
|
||||||
className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md" |
|
||||||
></div> |
|
||||||
<div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50"> |
|
||||||
<h2 className="text-lg">تبلیغات دانوینی</h2> |
|
||||||
<p className="text-sm text-justify leading-6 mt-2"> |
|
||||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
|
||||||
استفاده از طراحان گرافیک است. |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
<button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50"> |
|
||||||
دانلود اپلیکیشن |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default AdvertisementDesign1; |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const AdvertisementDesign2 = () => { |
|
||||||
return ( |
|
||||||
<section className="mx-auto bg-white m-10 w-fit p-2"> |
|
||||||
<div |
|
||||||
className="h-56 rounded-3xl relative" |
|
||||||
style={{ backgroundColor: "#E3F2FF" }} |
|
||||||
> |
|
||||||
<div className="flex flex-col justify-center p-10 w-7/12"> |
|
||||||
<h2 className="text-lg">تبلیغات دانوینی</h2> |
|
||||||
<p className="text-sm text-justify leading-6 mt-2"> |
|
||||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
|
||||||
استفاده از طراحان گرافیک است. |
|
||||||
</p> |
|
||||||
<button className="rounded-lg text-sm border p-3 w-8/12 mx-auto bg-darkCrimsonBgColor text-white mt-2"> |
|
||||||
دانلود اپلیکیشن |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
backgroundColor: "#00FFFF33", |
|
||||||
width: "calc(100vw / 15)", |
|
||||||
height: "calc(100vw / 15)", |
|
||||||
left: "20%", |
|
||||||
top: "15%", |
|
||||||
}} |
|
||||||
className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md" |
|
||||||
></div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
backgroundColor: "#6E6EEF66", |
|
||||||
width: "calc(100vw / 10)", |
|
||||||
height: "calc(100vw / 10)", |
|
||||||
left: "7%", |
|
||||||
bottom: "-15%", |
|
||||||
}} |
|
||||||
className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md" |
|
||||||
></div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
backgroundColor: "white", |
|
||||||
width: "calc(100vw / 12)", |
|
||||||
height: "calc(100vw / 12)", |
|
||||||
left: "0%", |
|
||||||
top: "10%", |
|
||||||
}} |
|
||||||
className="rounded-full absolute backdrop-filter backdrop-blur-md" |
|
||||||
></div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default AdvertisementDesign2; |
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,82 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const AdvertisementDesign3 = ({ features }) => { |
|
||||||
return ( |
|
||||||
<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> |
|
||||||
<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> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default AdvertisementDesign3; |
|
||||||
|
|
||||||
AdvertisementDesign3.defaultProps = { |
|
||||||
features: [ |
|
||||||
{ |
|
||||||
icon: "images/cart-icon.svg", |
|
||||||
title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده", |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: "images//map-icon.svg", |
|
||||||
title: "ارسال به تمام نقاط ایران", |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: "images/setting-icon.svg", |
|
||||||
title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی", |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue