Product Features Completed

master
Pedram Keshavarzi 3 years ago
parent 1b1a6df045
commit 274000a6e3
  1. 2
      src/Components/HowWeWorkDiagram/index.css
  2. 34
      src/Components/productFeature/productFeature.css
  3. 56
      src/Components/productFeature/productFeature.js
  4. 4
      src/Containers/howDoWeWork/howWeWork.css
  5. 3
      src/assets/images/icons/Vector.svg
  6. 16
      src/assets/images/icons/automatic.svg
  7. 31
      src/assets/images/icons/bot.svg
  8. 10
      src/assets/images/icons/checklist.svg
  9. 11
      src/assets/images/icons/fields.svg
  10. 12
      src/assets/images/icons/vuesax-linear-hierarchy.svg
  11. 12
      src/assets/images/icons/vuesax-linear-message-text.svg

@ -63,7 +63,7 @@
padding: 0;
border-radius: 50%;
color:#1577F8;
font-size: 20px;
}
.p .cp{
background: rgba(0,0,0,0.1);

@ -6,7 +6,7 @@
justify-content: center;
}
.ProductFeatures .feature{
flex: 0 0 calc(33.333333% - 24px);
/* flex: 0 0 calc(33.333333% - 24px); */
display: flex;
flex-direction: column;
align-items: center;
@ -18,4 +18,36 @@
font-size: 12px;
border-radius: 20px;
border: 1px solid #E5E5E5;
}
.ProductFeatures .subfeatures{
display:flex;
flex-wrap: wrap;
width:30em;
align-items: center;
justify-content: center;
}
.subfeatures .subfeature{
display: flex;
flex-direction: column;
align-items: center;
width:65px;
height: 65px;
justify-content: center;
text-align: center;
margin:5px;
background: linear-gradient(rgba(248,248,248,0.5), white);
font-size: 8px;
border-radius: 20px;
border: 1px solid linear-gradient(#E5E5E5, white);
}
.subfeature p{
color:#C7C7C7;
}
.ProductFeatures .more{
color: rgba(19, 47, 82, 0.66);
direction: rtl;
font-size: 13px;
cursor: pointer;
}

@ -1,12 +1,17 @@
import React from "react";
import './productFeature.css';
import chatIcon from '../../assets/images/uesax-bold-message-text.png';
import chatIcon from '../../assets/images/icons/vuesax-linear-message-text.svg';
import fields from '../../assets/images/icons/fields.svg';
import checkList from '../../assets/images/icons/checklist.svg';
import automatic from '../../assets/images/icons/automatic.svg';
import bot from '../../assets/images/icons/bot.svg';
import hierarchy from '../../assets/images/icons/vuesax-linear-hierarchy.svg';
const ProductFeatures = () => {
return(
<div className="ProductFeatures">
{featureCont.map(e =>
{featureCont.slice(0, 6).map(e =>
<div className="feature" key={`featureNumber${e.id}`}>
<img src={e.icon} />
@ -15,8 +20,20 @@ const ProductFeatures = () => {
</div>
)}
<div className="subfeatures">
{featureCont.slice(6).map(e =>
<div className="subfeature" key={`featureNumber${e.id}`}>
<p>{e.description}</p>
</div>
)}
<p className="more">و چندین امکان دیگر ...</p>
</div>
</div>
);
};
@ -28,28 +45,53 @@ const featureCont = [
},
{
id: 2,
icon: chatIcon,
icon: fields,
description: 'فیلد های سفارشی'
},
{
id: 3,
icon: chatIcon,
icon: checkList,
description: 'سوالات گزینه ای'
},
{
id: 4,
icon: chatIcon,
icon: automatic,
description: 'پیام اتوماتیک'
},
{
id: 5,
icon: chatIcon,
icon: bot,
description: 'پیام ربات'
},
{
id: 6,
icon: chatIcon,
icon: hierarchy,
description: 'ارجاع به اپراتور'
},
{
id: 7,
icon: hierarchy,
description: 'نظرسنجی'
},
{
id: 8,
icon: hierarchy,
description: 'پیام زمان دار'
},
{
id: 9,
icon: hierarchy,
description: 'شبکه اجتماعی'
},
{
id: 10,
icon: hierarchy,
description: 'انتقال گفتگو'
},
{
id: 11,
icon: hierarchy,
description: 'بستن گفتگو'
}
];

@ -17,7 +17,3 @@
align-items: center;
}
.HowWeWork .diagrams .HowWeWorkDiagram{
}

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.992" height="1.5" viewBox="0 0 15.992 1.5">
<path id="Vector" d="M14.492,0H0" transform="translate(0.75 0.75)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 267 B

@ -0,0 +1,16 @@
<svg id="Group_2" data-name="Group 2" xmlns="http://www.w3.org/2000/svg" width="40.916" height="40.916" viewBox="0 0 40.916 40.916">
<g id="vuesax_linear_sms" data-name="vuesax/linear/sms" transform="translate(9.216 8.279)">
<g id="sms" transform="translate(0)">
<path id="Vector" d="M14.053,15.927H4.684C1.874,15.927,0,14.521,0,11.242V4.684C0,1.405,1.874,0,4.684,0h9.369c2.811,0,4.684,1.405,4.684,4.684v6.558C18.737,14.521,16.864,15.927,14.053,15.927Z" transform="translate(1.874 3.279)" fill="none" stroke="#e8e82f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M9.369,0,6.436,2.342a2.966,2.966,0,0,1-3.513,0L0,0" transform="translate(6.558 8.432)" fill="none" stroke="#e8e82f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H22.485V22.485H0Z" fill="none" opacity="0"/>
</g>
</g>
<g id="vuesax_linear_refresh-2" data-name="vuesax/linear/refresh-2" transform="translate(0 0)">
<g id="refresh-2">
<path id="Vector-4" data-name="Vector" d="M1.11,14.44v5.743" transform="translate(4.192 13.588)" fill="none" stroke="#e8e82f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M34.1,17.049A17.055,17.055,0,0,1,17.049,34.1c-9.411,0-15.156-9.479-15.156-9.479H6.869M0,17.049A17.011,17.011,0,0,1,17.049,0C28.42,0,34.1,9.479,34.1,9.479m0,0V4.055m0,5.424h-4.95" transform="translate(3.41 3.41)" fill="none" stroke="#e8e82f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H40.916V40.916H0Z" transform="translate(40.916 40.916) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="41.159" viewBox="0 0 37 41.159">
<g id="Group_1" data-name="Group 1" transform="translate(0.254 0.242)">
<g id="vuesax_linear_emoji-happy" data-name="vuesax/linear/emoji-happy" transform="translate(1.404 7.23)">
<g id="emoji-happy">
<path id="Vector" d="M9.825,28.072h8.421c7.018,0,9.825-2.807,9.825-9.825V9.825C28.072,2.807,25.264,0,18.247,0H9.825C2.807,0,0,2.807,0,9.825v8.421C0,25.264,2.807,28.072,9.825,28.072Z" transform="translate(2.807 2.807)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M4.211,2.105A2.105,2.105,0,1,1,2.105,0,2.105,2.105,0,0,1,4.211,2.105Z" transform="translate(19.65 9.474)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M4.211,2.105A2.105,2.105,0,1,1,2.105,0,2.105,2.105,0,0,1,4.211,2.105Z" transform="translate(9.825 9.474)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M1.263,0H11.369a1.258,1.258,0,0,1,1.263,1.263A6.316,6.316,0,1,1,0,1.263,1.258,1.258,0,0,1,1.263,0Z" transform="translate(10.527 18.668)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.686V33.686H0Z" fill="none" opacity="0"/>
</g>
</g>
<line id="Line_1" data-name="Line 1" y1="5.55" transform="translate(24.563 3.785)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-width="1"/>
<line id="Line_2" data-name="Line 2" y1="5.55" transform="translate(13.334 3.785)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-width="1"/>
<g id="Ellipse_1" data-name="Ellipse 1" transform="translate(21.746 -0.242)" fill="none" stroke="#ff5d2a" stroke-width="1">
<circle cx="2.5" cy="2.5" r="2.5" stroke="none"/>
<circle cx="2.5" cy="2.5" r="2" fill="none"/>
</g>
<g id="Ellipse_2" data-name="Ellipse 2" transform="translate(10.746 -0.242)" fill="none" stroke="#ff5d2a" stroke-width="1">
<circle cx="2.5" cy="2.5" r="2.5" stroke="none"/>
<circle cx="2.5" cy="2.5" r="2" fill="none"/>
</g>
<g id="Rectangle_1" data-name="Rectangle 1" transform="translate(31.746 16.758)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-width="1">
<path d="M0,0H4A1,1,0,0,1,5,1V8A1,1,0,0,1,4,9H0A0,0,0,0,1,0,9V0A0,0,0,0,1,0,0Z" stroke="none"/>
<rect x="0.5" y="0.5" width="4" height="8" rx="0.5" fill="none"/>
</g>
<g id="Rectangle_2" data-name="Rectangle 2" transform="translate(-0.254 16.758)" fill="none" stroke="#ff5d2a" stroke-linecap="round" stroke-width="1">
<path d="M1,0H5A0,0,0,0,1,5,0V9A0,0,0,0,1,5,9H1A1,1,0,0,1,0,8V1A1,1,0,0,1,1,0Z" stroke="none"/>
<rect x="0.5" y="0.5" width="4" height="8" rx="0.5" fill="none"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="26.688" height="26.446" viewBox="0 0 26.688 26.446">
<g id="Component_1_1" data-name="Component 1 – 1" transform="translate(0.75 1.06)">
<path id="Vector" d="M14.492,0H0" transform="translate(0 23.187)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M14.492,0H0" transform="translate(0 13.042)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M14.492,0H0" transform="translate(0 2.898)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,2.9,1.352,4.347,5.409,0" transform="translate(19.469)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,2.9,1.352,4.347,5.409,0" transform="translate(19.469 10.144)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,2.9,1.352,4.347,5.409,0" transform="translate(19.469 20.288)" fill="none" stroke="#ca35db" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,11 @@
<svg id="vuesax_linear_candle-2" data-name="vuesax/linear/candle-2" xmlns="http://www.w3.org/2000/svg" width="34.78" height="34.78" viewBox="0 0 34.78 34.78">
<g id="candle-2" transform="translate(0 0)">
<path id="Vector" d="M10.144,0H0" transform="translate(21.737 25.36)" fill="none" stroke="#5dc621" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M4.347,0H0" transform="translate(2.898 25.36)" fill="none" stroke="#5dc621" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M4.347,0H0" transform="translate(27.534 9.42)" fill="none" stroke="#5dc621" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M10.144,0H0" transform="translate(2.898 9.42)" fill="none" stroke="#5dc621" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M2.9,0h8.695a2.594,2.594,0,0,1,2.9,2.9V5.8a2.594,2.594,0,0,1-2.9,2.9H2.9A2.594,2.594,0,0,1,0,5.8V2.9A2.594,2.594,0,0,1,2.9,0Z" transform="translate(7.246 21.013)" fill="none" stroke="#5dc621" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M2.9,0h8.695a2.594,2.594,0,0,1,2.9,2.9V5.8a2.594,2.594,0,0,1-2.9,2.9H2.9A2.594,2.594,0,0,1,0,5.8V2.9A2.594,2.594,0,0,1,2.9,0Z" transform="translate(13.042 5.072)" fill="none" stroke="#5dc621" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H34.78V34.78H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="39.203" height="39.203" viewBox="0 0 39.203 39.203">
<g id="vuesax_linear_hierarchy" data-name="vuesax/linear/hierarchy" transform="translate(0)">
<g id="hierarchy" transform="translate(0 0)">
<path id="Vector" d="M0,0V11.434" transform="translate(8.167 14.701)" fill="none" stroke="#15c5e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M10.618,5.309A5.309,5.309,0,1,1,5.309,0,5.309,5.309,0,0,1,10.618,5.309Z" transform="translate(3.267 3.267)" fill="none" stroke="#15c5e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M9.8,4.9A4.9,4.9,0,1,1,4.9,0,4.9,4.9,0,0,1,9.8,4.9Z" transform="translate(3.267 26.136)" fill="none" stroke="#15c5e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M9.8,4.9A4.9,4.9,0,1,1,4.9,0,4.9,4.9,0,0,1,9.8,4.9Z" transform="translate(26.136 26.136)" fill="none" stroke="#15c5e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,0A6.628,6.628,0,0,0,6.436,4.966l5.6-.016A9.783,9.783,0,0,1,21.3,11.5" transform="translate(8.38 14.701)" fill="none" stroke="#15c5e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H39.2V39.2H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="34.15" height="34.78" viewBox="0 0 34.15 34.78">
<g id="vuesax_linear_message-text" data-name="vuesax/linear/message-text" transform="translate(0)">
<g id="message-text" transform="translate(0 0)">
<path id="Vector" d="M8.506,0H19.847q8.506,0,8.506,8.695V27.534a1.438,1.438,0,0,1-1.418,1.449H8.506Q0,28.983,0,20.288V8.695Q0,0,8.506,0Z" transform="translate(2.898 2.898)" fill="none" stroke="#0d41e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<g id="Group" transform="translate(9.829 13.767)">
<path id="Vector-2" data-name="Vector" d="M14.492,0H0" fill="#fff" stroke="#0d41e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M10.144,0H0" transform="translate(4.347 7.246)" fill="#fff" stroke="#0d41e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
<path id="Vector-4" data-name="Vector" d="M34.15,0H0V34.78H34.15Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Loading…
Cancel
Save