master
mahdi 3 years ago
parent 6d7fde8f44
commit 7d77de4e8c
  1. 4
      src/App.js
  2. 10
      src/components/Advertisement/design3/cart-icon.svg
  3. 65
      src/components/Advertisement/design3/index.js
  4. 8
      src/components/Advertisement/design3/map-icon.svg
  5. 5
      src/components/Advertisement/design3/setting-icon.svg

@ -32,6 +32,7 @@ import ProductTab from "./components/ProductTab";
import ProductStatusCard from "./components/ProductStatusCard";
import AdvertisementDesign1 from "./components/Advertisement/design1";
import AdvertisementDesign2 from "./components/Advertisement/design2";
import AdvertisementDesign3 from "./components/Advertisement/design3";
function App() {
return (
@ -65,7 +66,8 @@ function App() {
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */}
<AdvertisementDesign2 />
{/* <AdvertisementDesign2 /> */}
<AdvertisementDesign3 />
</div>
</Provider>
);

@ -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,65 @@
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">تبلیغات دانوینی</h2>
<p className="text-sm text-justify leading-6 mt-2 text-productPrice">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است.
</p>
<div className="mt-3">
{features.map((feature, i) => (
<div className="flex flex-row items-center mt-1">
<img src={feature.icon} alt="" className="w-6 h-6" />
<p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light">
{feature.title}
</p>
</div>
))}
</div>
</div>
<div
style={{ backgroundColor: "#00FFFF22" }}
className="rounded-full w-20 h-20 sm:w-32 sm:h-32 absolute left-1/4 top-1/3 transform -translate-x-1/4 -translate-y-1/2 z-20"
></div>
<div
style={{ backgroundColor: "#6E6EEF22" }}
className="rounded-full w-44 h-44 absolute left-1/4 -bottom-2/4 transform -translate-x-1/2 -translate-y-1/2 z-10"
></div>
<div
style={{ backgroundColor: "#06BACE22" }}
className="rounded-full w-44 h-44 absolute left-0 top-2"
></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

Loading…
Cancel
Save