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.
|
|
|
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 / 8)",
|
|
|
|
height: "calc(100vw / 8)",
|
|
|
|
}}
|
|
|
|
className="rounded-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 bg-opacity-20 backdrop-filter backdrop-blur-md"
|
|
|
|
></div>
|
|
|
|
{/* <div
|
|
|
|
style={{ backgroundColor: "#6E6EEF44" }}
|
|
|
|
className="rounded-full w-52 h-52 absolute left-1/2 top-1/2 transform -translate-x-1/4 -translate-y-1/4"
|
|
|
|
></div>
|
|
|
|
<div
|
|
|
|
style={{ backgroundColor: "#06BACE44" }}
|
|
|
|
className="rounded-full w-52 h-52 absolute left-1/2 top-1/2 transform -translate-x-2/3 -translate-y-2/4"
|
|
|
|
></div> */}
|
|
|
|
<div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10">
|
|
|
|
<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-9/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 ">
|
|
|
|
دانلود اپلیکیشن
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default AdvertisementDesign1;
|