update 3 files and delete 1 file

master
mahdi 3 years ago
parent 722d02da3f
commit b36ae9e888
  1. 11
      public/images/delivery-icon.svg
  2. 5
      public/images/shield-tick.svg
  3. 5
      public/images/tick-circle.svg
  4. 68
      src/components/AddToCart/index.js
  5. 2
      src/components/Advertisement/design2/index.js
  6. 47
      src/components/Advertisements/Design1/index.js
  7. 55
      src/components/Advertisements/Design2/index.js
  8. 10
      src/components/Advertisements/Design3/cart-icon.svg
  9. 91
      src/components/Advertisements/Design3/index.js
  10. 8
      src/components/Advertisements/Design3/map-icon.svg
  11. 5
      src/components/Advertisements/Design3/setting-icon.svg
  12. 29
      src/components/Advertisements/index.js
  13. 6
      src/components/Design2D/index.js
  14. 63
      src/redux/data.js

@ -0,0 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="51.463" height="51.463" viewBox="0 0 51.463 51.463">
<path id="Vector" d="M20.349,25.732h2.144a4.3,4.3,0,0,0,4.289-4.289V0H7.484A8.569,8.569,0,0,0,0,4.4" transform="translate(5.382 4.289)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.732a6.424,6.424,0,0,0,6.433,6.433H8.577a4.289,4.289,0,0,1,8.577,0h8.577a4.289,4.289,0,0,1,8.577,0h2.144a6.424,6.424,0,0,0,6.433-6.433V19.3H36.453a2.151,2.151,0,0,1-2.144-2.144V10.722a2.151,2.151,0,0,1,2.144-2.144h2.766L35.553,2.166A4.324,4.324,0,0,0,31.822,0H27.876V15.01A4.3,4.3,0,0,1,23.587,19.3H21.443" transform="translate(4.289 10.722)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(12.866 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(30.02 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M8.577,6.433v4.289H2.144A2.151,2.151,0,0,1,0,8.577V2.144A2.151,2.151,0,0,1,2.144,0H4.91Z" transform="translate(38.598 19.299)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H12.866" transform="translate(4.289 17.154)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.577" transform="translate(4.289 23.587)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H4.289" transform="translate(4.289 30.02)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H51.463V51.463H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -0,0 +1,5 @@
<svg id="shield-tick" xmlns="http://www.w3.org/2000/svg" width="52.115" height="52.115" viewBox="0 0 52.115 52.115">
<path id="Vector" d="M15.374.5,4.538,4.587A7.535,7.535,0,0,0,0,11.123V27.257a10.557,10.557,0,0,0,3.757,7.47l9.337,6.97a9.883,9.883,0,0,0,11.161,0l9.337-6.97a10.557,10.557,0,0,0,3.757-7.47V11.123a7.54,7.54,0,0,0-4.538-6.558L21.975.5A11.041,11.041,0,0,0,15.374.5Z" transform="translate(7.405 4.337)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,5.841l3.5,3.5L12.833,0" transform="translate(19.652 19.934)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H52.115V52.115H0Z" transform="translate(52.115 52.115) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 864 B

@ -0,0 +1,5 @@
<svg id="tick-circle" xmlns="http://www.w3.org/2000/svg" width="55.143" height="55.143" viewBox="0 0 55.143 55.143">
<path id="Vector" d="M22.976,45.952A22.976,22.976,0,1,0,0,22.976,23.044,23.044,0,0,0,22.976,45.952Z" transform="translate(4.595 4.595)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,6.5,6.5,13,19.53,0" transform="translate(17.807 21.069)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H55.143V55.143H0Z" fill="#afe7ab" opacity="0"/>
</svg>

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;

@ -2,7 +2,7 @@ import React from "react";
const AdvertisementDesign2 = () => {
return (
<section className="mx-auto bg-white m-10 w-4/12 p-2">
<section className="mx-auto bg-white m-10 w-fit p-2">
<div
className="h-56 rounded-3xl relative"
style={{ backgroundColor: "#E3F2FF" }}

@ -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;

@ -0,0 +1,10 @@
<svg id="vuesax_linear_bag-happy" data-name="vuesax/linear/bag-happy" xmlns="http://www.w3.org/2000/svg" width="54.237" height="54.237" viewBox="0 0 54.237 54.237">
<g id="bag-happy" transform="translate(0)">
<path id="Vector" d="M0,0A7.948,7.948,0,0,0,7.91,7.91,7.948,7.948,0,0,0,15.819,0" transform="translate(19.209 32.203)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M8.181,0,0,8.2" transform="translate(11.729 4.52)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0,8.181,8.2" transform="translate(34.328 4.52)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,4.52C0,.339,2.237,0,5.017,0H40.181C42.96,0,45.2.339,45.2,4.52c0,4.859-2.237,4.52-5.017,4.52H5.017C2.237,9.04,0,9.379,0,4.52Z" transform="translate(4.52 13.22)" fill="none" stroke="#132f52" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0,3.186,19.525c.723,4.384,2.463,7.593,8.927,7.593H25.74c7.028,0,8.068-3.073,8.881-7.322L38.418,0" transform="translate(7.91 22.599)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-width="2"/>
<path id="Vector-6" data-name="Vector" d="M0,0H54.237V54.237H0Z" fill="none" opacity="0"/>
</g>
</svg>

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 ماژول اختصاصی",
},
],
};

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="54.237" height="54.238" viewBox="0 0 54.237 54.238">
<g id="map" transform="translate(0 0)">
<path id="Vector" d="M0,10.039V32.027c0,4.294,3.051,6.057,6.757,3.932l5.311-3.028a5.043,5.043,0,0,1,4.271-.113L28.2,38.762a5.126,5.126,0,0,0,4.271-.113l9.785-5.6a5.061,5.061,0,0,0,2.282-3.932V7.123c0-4.294-3.051-6.057-6.757-3.932L32.475,6.219a5.043,5.043,0,0,1-4.271.113L16.339.411a5.126,5.126,0,0,0-4.271.113l-9.785,5.6A5,5,0,0,0,0,10.039Z" transform="translate(5.175 7.543)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0V29.379" transform="translate(19.345 9.04)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0V30.237" transform="translate(35.548 14.961)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H54.237V54.238H0Z" transform="translate(54.237 54.238) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,5 @@
<svg id="setting-2" xmlns="http://www.w3.org/2000/svg" width="54.605" height="54.605" viewBox="0 0 54.605 54.605">
<path id="Vector" d="M13.651,6.826A6.826,6.826,0,1,1,6.826,0,6.826,6.826,0,0,1,13.651,6.826Z" transform="translate(20.477 20.477)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,23.478v-4A4.336,4.336,0,0,1,4.323,15.15c4.118,0,5.8-2.912,3.731-6.484A4.321,4.321,0,0,1,9.647,2.773L13.583.521A3.8,3.8,0,0,1,18.77,1.886l.25.432c2.048,3.572,5.415,3.572,7.485,0l.25-.432A3.8,3.8,0,0,1,31.944.521L35.88,2.773a4.321,4.321,0,0,1,1.593,5.893c-2.07,3.572-.387,6.484,3.731,6.484a4.336,4.336,0,0,1,4.323,4.323v4A4.336,4.336,0,0,1,41.2,27.8c-4.118,0-5.8,2.912-3.731,6.484a4.315,4.315,0,0,1-1.593,5.893L31.944,42.43a3.8,3.8,0,0,1-5.187-1.365l-.25-.432c-2.048-3.572-5.415-3.572-7.485,0l-.25.432a3.8,3.8,0,0,1-5.187,1.365L9.647,40.178a4.321,4.321,0,0,1-1.593-5.893c2.07-3.572.387-6.484-3.731-6.484A4.336,4.336,0,0,1,0,23.478Z" transform="translate(4.55 5.827)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H54.6V54.6H0Z" fill="none" opacity="0"/>
</svg>

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;

@ -2,10 +2,10 @@ import React from "react";
const Design2D = ({ array }) => {
return (
<section className="flex items-center justify-around bg-pink-100 h-60">
<section className="h-60 flex items-center justify-around bg-pink-100 ">
{array.map((item, index) => (
<div
className={`flex flex-col h-full`}
className={`h-full flex flex-col`}
style={{ flex: item.flex }}
key={index}
>
@ -15,7 +15,7 @@ const Design2D = ({ array }) => {
style={{ flex: item1.flex }}
key={index}
>
<div className="bg-indigo-300 w-full h-full flex items-center justify-center">
<div className="w-full h-full flex items-center justify-center bg-indigo-300">
<p>inside div</p>
</div>
</div>

@ -1,3 +1,12 @@
import ButtonDivTag from "../components/ButtonDivTag";
import Button from "../components/Button";
import Design2D from "../components/Design2D";
import AddToCartCard from "../components/AddToCart";
import Advertisements from "../components/Advertisements";
import AdvertisementDesign1 from "../components/Advertisement/design1";
import AdvertisementDesign2 from "../components/Advertisement/design2";
// import ButtonDesign from "./components/buttonDesign/ButtonDesign";
// import ProductDesign from "./components/productDesign/ProductDesign";
// import ProductTags from "./components/productTags/ProductTags";
@ -14,7 +23,6 @@
// import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
// import FooterDesign1 from "./components/footer/design1/FooterDesign1";
// import Testttt from "./components/testtttt/Testttt";
// import Design2D from "./components/Design2D/Design2D";
// import Features from "./components/Features/index";
// import Feedback from "./components/Feedback/index";
// import Alert from "./components/Alert";
@ -74,9 +82,6 @@
// import CustomToast from "./components/CustomToast";
// import IconText from "./components/IconText";
// import CardDesign2 from "./components/CardDesign2";
import ButtonDivTag from "../components/ButtonDivTag";
import Button from "../components/Button";
// import LeafletMap from "./components/LeafletMap";
// import TestComponentNew from "./components/TestComponentNew";
// import DateRangePicker from "./components/DateRangePicker";
@ -114,6 +119,56 @@ const components = [
code: null,
},
},
{
name: "2D Design",
author: "Andalib",
props: [],
content: {
name: "2D Design",
component: <Design2D />,
code: null,
},
},
{
name: "AddToCartCard",
author: "Keshavarzi",
props: [],
content: {
name: "AddToCartCard OR Product Status Card",
component: <AddToCartCard />,
code: null,
},
},
{
name: "Advertisements",
author: "Andalib",
props: [],
content: {
name: "Advertisements",
component: <Advertisements />,
code: null,
},
},
{
name: "Advertisement",
author: "Andalib",
props: [],
content: {
name: "Design1",
component: <AdvertisementDesign1 />,
code: null,
},
},
{
name: "Advertisement",
author: "Andalib",
props: [],
content: {
name: "Design2",
component: <AdvertisementDesign2 />,
code: null,
},
},
];
export default components;

Loading…
Cancel
Save