diff --git a/src/Components/HowWeWorkDiagram/index.css b/src/Components/HowWeWorkDiagram/index.css index 6989a6b..7369ab8 100644 --- a/src/Components/HowWeWorkDiagram/index.css +++ b/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); diff --git a/src/Components/productFeature/productFeature.css b/src/Components/productFeature/productFeature.css index 10f3287..f0d85e6 100644 --- a/src/Components/productFeature/productFeature.css +++ b/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; @@ -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; } \ No newline at end of file diff --git a/src/Components/productFeature/productFeature.js b/src/Components/productFeature/productFeature.js index 9342022..98e3b94 100644 --- a/src/Components/productFeature/productFeature.js +++ b/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(
- {featureCont.map(e => + {featureCont.slice(0, 6).map(e =>
@@ -15,8 +20,20 @@ const ProductFeatures = () => {
)} +
+ {featureCont.slice(6).map(e => +
+ + +

{e.description}

+ + +
+ )} +

و چندین امکان دیگر ...

+
); }; @@ -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: 'بستن گفتگو' } ]; diff --git a/src/Containers/howDoWeWork/howWeWork.css b/src/Containers/howDoWeWork/howWeWork.css index 02b5dcf..2c53092 100644 --- a/src/Containers/howDoWeWork/howWeWork.css +++ b/src/Containers/howDoWeWork/howWeWork.css @@ -17,7 +17,3 @@ align-items: center; } -.HowWeWork .diagrams .HowWeWorkDiagram{ - - -} \ No newline at end of file diff --git a/src/assets/images/icons/Vector.svg b/src/assets/images/icons/Vector.svg new file mode 100644 index 0000000..26cedc3 --- /dev/null +++ b/src/assets/images/icons/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/automatic.svg b/src/assets/images/icons/automatic.svg new file mode 100644 index 0000000..b8e9687 --- /dev/null +++ b/src/assets/images/icons/automatic.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/bot.svg b/src/assets/images/icons/bot.svg new file mode 100644 index 0000000..251bd1e --- /dev/null +++ b/src/assets/images/icons/bot.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/checklist.svg b/src/assets/images/icons/checklist.svg new file mode 100644 index 0000000..8e76c23 --- /dev/null +++ b/src/assets/images/icons/checklist.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/icons/fields.svg b/src/assets/images/icons/fields.svg new file mode 100644 index 0000000..136c6af --- /dev/null +++ b/src/assets/images/icons/fields.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/icons/vuesax-linear-hierarchy.svg b/src/assets/images/icons/vuesax-linear-hierarchy.svg new file mode 100644 index 0000000..6dc72cc --- /dev/null +++ b/src/assets/images/icons/vuesax-linear-hierarchy.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/icons/vuesax-linear-message-text.svg b/src/assets/images/icons/vuesax-linear-message-text.svg new file mode 100644 index 0000000..7cb8c9b --- /dev/null +++ b/src/assets/images/icons/vuesax-linear-message-text.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +