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