product features made

src/Components/productFeature/productFeature.css

@@ -0,0 +1,20 @@
+.ProductFeatures{
+    display:flex;
+    flex-wrap: wrap;
+    width:30em;
+    
+}
+.ProductFeatures .feature{
+    flex: 0 0 calc(33.333333% - 24px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:115px;
+    height: 115px;
+    justify-content: center;
+    margin:5px;
+    background: rgba(248,248,248,0.5);
+    font-size: 12px;
+    border-radius: 20px;
+    border: 1px solid #E5E5E5;
+}

src/Components/productFeature/productFeature.js

@@ -0,0 +1,56 @@
+import React from "react";
+
+import './productFeature.css';
+import chatIcon from '../../assets/images/uesax-bold-message-text.png';
+
+const ProductFeatures = () => {
+    return(
+        <div className="ProductFeatures">
+            {featureCont.map(e =>
+                <div className="feature" key={`featureNumber${e.id}`}>
+
+                    <img src={e.icon} />
+                    <p>{e.description}</p>
+                    
+
+                </div>    
+            )}
+            
+        </div>
+    );
+};
+
+const featureCont = [
+    {
+        id: 1,
+        icon: chatIcon,
+        description: 'ایجاد تیکت'
+    },
+    {
+        id: 2,
+        icon: chatIcon,
+        description: 'فیلد های سفارشی'
+    },
+    {
+        id: 3,
+        icon: chatIcon,
+        description: 'سوالات گزینه ای'
+    },
+    {
+        id: 4,
+        icon: chatIcon,
+        description: 'پیام اتوماتیک'
+    },
+    {
+        id: 5,
+        icon: chatIcon,
+        description: 'پیام ربات'
+    },
+    {
+        id: 6,
+        icon: chatIcon,
+        description: 'ارجاع به اپراتور'
+    }
+];
+
+export default ProductFeatures;

src/Containers/howDoWeWork/howWeWork.css

@@ -8,4 +8,9 @@
 }
 .HowWeWork .HWWDescription p{
     font-size: 13px;
+}
+.HowWeWork .diagrams{
+  
+    
+    
 }

src/Containers/howDoWeWork/howWeWork.js

@@ -1,5 +1,6 @@
 import React from "react";
 import HowWeWorkDiagram from "../../Components/HowWeWorkDiagram";
+import ProductFeatures from "../../Components/productFeature/productFeature";
 
 import './howWeWork.css';
 
@@ -17,8 +18,9 @@ const HowWeWork = () => {
                     مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
                 </p>
             </div>
-            <div>
+            <div className="diagrams">
                 <HowWeWorkDiagram />
+                <ProductFeatures />
             </div>
         </div>
     );