parent
722d02da3f
commit
b36ae9e888
14 changed files with 397 additions and 8 deletions
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 864 B |
After Width: | Height: | Size: 652 B |
@ -0,0 +1,68 @@ |
||||
import React from "react"; |
||||
|
||||
const AddToCartCard = ({ |
||||
numberOfSuggest, |
||||
sendingTime, |
||||
button, |
||||
price, |
||||
profit, |
||||
showProduct, |
||||
productName, |
||||
productImg, |
||||
productCat, |
||||
}) => { |
||||
const specialities = [ |
||||
{ |
||||
icon: "images/tick-circle.svg", |
||||
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, |
||||
}, |
||||
{ |
||||
icon: "images/shield-tick.svg", |
||||
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, |
||||
}, |
||||
{ |
||||
icon: "images/delivery-icon.svg", |
||||
description: `گارانتی اصالت و سلامت فیزیکی`, |
||||
}, |
||||
]; |
||||
return ( |
||||
<div className="w-full felx flex-col items-center justify-center mx-4 p-4 pt-0 bg-gray-100"> |
||||
{showProduct && ( |
||||
<div className="w-full max-w-8 flex justify-center items-center m-0 py-4 overflow-hidden"> |
||||
<img |
||||
src={productImg} |
||||
alt="productImage" |
||||
className="max-w-[100px] ml-4 py-2 px-4 bg-gray-200 rounded" |
||||
/> |
||||
<div className="text-sm"> |
||||
<h1 className="text-sm">{productName}</h1> |
||||
<p className="pt-2 text-xs text-blue-400">{productCat}</p> |
||||
</div> |
||||
</div> |
||||
)} |
||||
{specialities.map((item, index) => ( |
||||
<div |
||||
key={index} |
||||
className="w-full flex items-center p-2 border-b border-solid border-gray-300" |
||||
> |
||||
{item.icon && <img src={item.icon} alt="" className="pl-3" />} |
||||
<p className="text-sm text-blue-400 text-right">{item.description}</p> |
||||
</div> |
||||
))} |
||||
<div className="w-full flex flex-col items-center justify-center p-4"> |
||||
<h1 className="text-xl text-gray-500"> |
||||
<span className="text-blue-400"> {price} </span> |
||||
تومان |
||||
</h1> |
||||
{profit && ( |
||||
<h5 className="p-2 pb-0 text-xs text-blue-400"> |
||||
با خرید این کالا {profit} تومان سود کنید |
||||
</h5> |
||||
)} |
||||
</div> |
||||
<div className="w-full flex justify-center">{button}</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default AddToCartCard; |
@ -0,0 +1,47 @@ |
||||
import React from "react"; |
||||
|
||||
const AdvertisementDesign1 = () => { |
||||
return ( |
||||
<div className="w-72 h-96 rounded-3xl relative overflow-hidden bg-[#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> |
||||
); |
||||
}; |
||||
|
||||
export default AdvertisementDesign1; |
@ -0,0 +1,55 @@ |
||||
import React from "react"; |
||||
|
||||
const AdvertisementDesign2 = () => { |
||||
return ( |
||||
<section className="mx-auto bg-white m-10 w-4/12 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; |
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,91 @@ |
||||
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> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default AdvertisementDesign3; |
||||
|
||||
AdvertisementDesign3.defaultProps = { |
||||
features: [ |
||||
{ |
||||
icon: cart, |
||||
title: "قابلیت های فروشگاهی بسیار پیشرفته و ساده", |
||||
}, |
||||
{ |
||||
icon: map, |
||||
title: "ارسال به تمام نقاط ایران", |
||||
}, |
||||
{ |
||||
icon: setting, |
||||
title: "تنظیمات پیشرفته و بیش از 2000 ماژول اختصاصی", |
||||
}, |
||||
], |
||||
}; |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,29 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import Design1 from "./Design1"; |
||||
import Design2 from "./Design2"; |
||||
import Design3 from "./Design3"; |
||||
|
||||
function Blogs() { |
||||
const list = { |
||||
1: <Design1 />, |
||||
2: <Design2 />, |
||||
3: <Design3 />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
return ( |
||||
<div className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Blogs; |
Loading…
Reference in new issue