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