Gray Scaling for Trust Logos Done

src/Containers/TrustUs/trustUs.css

@@ -1,22 +1,37 @@
 .TrustContainer{
-    margin-top:25px;
+    margin:50px 0px;
     display: flex;
     direction: rtl;
     align-items: center;
     width:85%;
 }
-.TrustContainer div{
+
-    margin: 15px;
+
-}
 .TrustContainer .TrustTitle{
-    width:20%;
+    width:18%;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: bold;
     padding-right: 10px;
     border-right:5px solid gray;
 }
 .TrustContainer .TrustCostumersContainer{
     display: flex;
-    width: 80%;
+    width: 82%;
     justify-content: space-between;
+    align-items: center;
+   
+}
+.TrustContainer .TrustCostumersContainer img{
+    filter: gray; /* IE6-9 */
+    -webkit-filter: grayscale(100%);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.TrustContainer .TrustCostumersContainer img:hover{
+    filter: none; /* IE6-9 */
+    -webkit-filter: grayscale(0%);
+}
+.TrustContainer .TrustCostumersContainer img.active{
+    filter: none; /* IE6-9 */
+    -webkit-filter: grayscale(0%);
 }

src/Containers/TrustUs/trustUs.js

@@ -13,33 +13,73 @@ import khaneRoshanLogo from '../../assets/images/khaneRoshanLogo.svg';
 import ravinoLogo from '../../assets/images/ravino.svg';
 
 
-const trustLogos = [
+
-    samanBankLogo,
-    iranKhodro,
-    bimehDayLogo,
-    toseSaderat,
-    danovinLogo,
-    bimehSaman,
-    vaziranDana,
-    khaneRoshanLogo,
-    ravinoLogo
-];
 
 const TrustUsContainer = () => {
-    return(
+    return (
         <div className="TrustContainer">
             <div className="TrustTitle">
                 مورد اعتماد
                 <br />
-                 کسب و کارهای کوچک و بزرگ
+                کسب و کارهای کوچک و بزرگ
-            </div>    
+            </div>
             <div className="TrustCostumersContainer">
-                    {
+                {
-                        trustLogos.map((logo, index) => <img src={logo} key={`logo${index}`} />)
+                    trustLogos.map((e, index) => <a href={e.websiteUrl} key={`logo${index}`}><img src={e.logo} className={e.className}/></a>)
-                    }
+                }
             </div>
         </div>
     );
 };
 
+
+const trustLogos = [
+    {
+        logo: iranKhodro,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: samanBankLogo,
+        websiteUrl: '#',
+        className: 'active'
+    },
+    {
+        logo: bimehDayLogo,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: toseSaderat,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: danovinLogo,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: bimehSaman,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: vaziranDana,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: khaneRoshanLogo,
+        websiteUrl: '#',
+        className: null
+    },
+    {
+        logo: ravinoLogo,
+        websiteUrl: '#',
+        className: null
+    },
+];
+
+
 export default TrustUsContainer;