Product Features Completed

src/Components/HowWeWorkDiagram/index.css

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

src/Components/productFeature/productFeature.css

@@ -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;
@@ -19,3 +19,35 @@
     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;
+}

src/Components/productFeature/productFeature.js

@@ -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,7 +20,19 @@ 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: 'بستن گفتگو'
     }
 ];
 

src/Containers/howDoWeWork/howWeWork.css

@@ -16,8 +16,4 @@
     justify-content: space-between;
     align-items: center;
     
-}
-.HowWeWork .diagrams .HowWeWorkDiagram{
-   
-   
 }

src/assets/images/icons/Vector.svg

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

src/assets/images/icons/automatic.svg

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

src/assets/images/icons/bot.svg

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

src/assets/images/icons/checklist.svg

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

src/assets/images/icons/fields.svg

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

src/assets/images/icons/vuesax-linear-hierarchy.svg

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

src/assets/images/icons/vuesax-linear-message-text.svg

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