From eb30f862d1755cb5492c2a2d765c21763c139c88 Mon Sep 17 00:00:00 2001
From: Shriansh Agarwal <41548480+Shriansh2002@users.noreply.github.com>
Date: Wed, 28 Jun 2023 23:32:02 +0530
Subject: [PATCH] Implemented colored Hover Effect in logos

---
 components/logos/Adidas.js     |  8 ++++----
 components/logos/Axway.js      | 12 +++++++-----
 components/logos/SAP.js        | 30 ++++++++++++++++++++++--------
 components/logos/Salesforce.js |  4 ++--
 components/logos/Slack.js      | 10 +++++-----
 pages/index.js                 |  6 +++---
 6 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/components/logos/Adidas.js b/components/logos/Adidas.js
index 900b9dddcd08..9c4a10348cbe 100644
--- a/components/logos/Adidas.js
+++ b/components/logos/Adidas.js
@@ -1,8 +1,8 @@
 export default function AdidasLogo({ className }) {
-  return (
-    <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1065.5 254.5">
-      <g id="XMLID_1_">
-        <path id="XMLID_16_" d="M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596
+	return (
+		<svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1065.5 254.5">
+			<g id="XMLID_1_">
+			<path id="XMLID_16_" d="M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596
 		c-12.586,0-22.596-10.297-22.596-22.596C1008.117,20.473,1018.413,10.174,1030.713,10.174z M1030.713,13.322
 		c-11.44,0-19.45,9.15-19.45,20.593c0,10.297,8.296,19.449,19.45,19.449c10.298,0,19.449-9.152,19.449-19.449
 		C1050.448,22.76,1041.011,13.322,1030.713,13.322z M1035.86,34.201c1.146,0,4.005,0.857,4.005,5.148v7.15h-4.005v-3.146
diff --git a/components/logos/Axway.js b/components/logos/Axway.js
index 50e54838970a..272fb858f62e 100644
--- a/components/logos/Axway.js
+++ b/components/logos/Axway.js
@@ -23,13 +23,15 @@ export default function AxwayLogo({ className }) {
 					C370.57,205.816,380.632,200.295,380.632,184.834"/>
               <path id="Fill-9" d="M419.65,256.613l20.858-47.239l-38.159-79.019h27.239l24.54,53.62l21.841-53.62h26.38l-57.301,126.381
 					H419.65V256.613z"/>
-              <g id="Group-13" transform="translate(56.41 .062)">
-                <path id="Fill-11" fill="currentColor" d="M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302
+              <g className="group-hover:text-[#de262c]">
+                <g id="Group-13" transform="translate(56.41 .062)">
+                  <path id="Fill-11" fill="currentColor" d="M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302
 						L685.952,97.241z"/>
+                </g>
+                <path id="Fill-14" fill="currentColor" d="M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z"
+                />
+                <path id="Fill-16" fill="currentColor" d="M721.368,148.516L543.209,63.116v30.921l141.718,68.098L721.368,148.516z" />
               </g>
-              <path id="Fill-14" fill="currentColor" d="M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z"
-              />
-              <path id="Fill-16" fill="currentColor" d="M721.368,148.516L543.209,63.116v30.921l141.718,68.098L721.368,148.516z" />
             </g>
           </g>
         </g>
diff --git a/components/logos/SAP.js b/components/logos/SAP.js
index 2980d29f373e..91a92b7b3b93 100644
--- a/components/logos/SAP.js
+++ b/components/logos/SAP.js
@@ -1,12 +1,26 @@
+import { useState } from 'react';
+
 export default function SapLogo({ className }) {
-  return (
-    <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1024 522">
-      <linearGradient id="path3060_1_" gradientUnits="userSpaceOnUse" x1="-127.4302" y1="661.6777" x2="-126.4722" y2="661.6777" gradientTransform="matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)">
-        <stop offset="0" style={{ stopColor:'currentColor' }} />
-        <stop offset="1" style={{ stopColor:'currentColor' }} />
-      </linearGradient>
-      <path id="path3060" fill="url(#path3060_1_)" d="M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z" />
-      <path id="path5384" fill="currentColor" d="M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923
+	const [isHovered, setIsHovered] = useState(false);
+
+	const handleMouseEnter = () => {
+		setIsHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setIsHovered(false);
+	};
+
+	return (
+		<svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1024 522"
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			<linearGradient id="path3060_1_" gradientUnits="userSpaceOnUse" x1="-127.4302" y1="661.6777" x2="-126.4722" y2="661.6777" gradientTransform="matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)">
+				<stop offset="0" style={{ stopColor: !isHovered ? 'currentColor' : '#1661BE' }} />
+				<stop offset="1" style={{ stopColor: !isHovered ? 'currentColor' : '#019CE0' }} />
+			</linearGradient>
+			<path id="path3060" fill="url(#path3060_1_)" d="M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z" />
+			<path id="path5384" fill="url(#path3060_1_)" d="M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923
 	c5.362-0.665,9.692-3.783,9.692-10.385c0-7.232-4.427-10.384-13.152-10.384H649.993z M655.531,460.149h7.614
 	c3.745,0,7.962,0.609,7.962,5.191c0,5.728-4.271,6.232-9,6.232h-6.576V460.149z M662.454,441.803
 	c-17.567,0-32.539,13.537-32.539,31.846c0,18.442,14.971,32.192,32.539,32.192c17.324,0,31.846-13.747,31.846-32.192
diff --git a/components/logos/Salesforce.js b/components/logos/Salesforce.js
index 979b5699737c..b9fe76c4763c 100644
--- a/components/logos/Salesforce.js
+++ b/components/logos/Salesforce.js
@@ -1,8 +1,8 @@
 export default function SalesforceLogo({ className }) {
   return (
     <svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 256 180">
-      <g>
-        <path d="M106.553203,159.610976 C114.801129,168.204994 126.284107,173.534815 138.983873,173.534815 C155.865892,173.534815 170.594851,164.121105 178.438396,150.146262 C185.254593,153.191874 192.799405,154.885905 200.737669,154.885905 C231.186506,154.885905 255.871995,129.985475 255.871995,99.2706935 C255.871995,68.5522694 231.186506,43.651839 200.737669,43.651839 C197.021731,43.651839 193.389583,44.0234329 189.877657,44.7338328 C182.970383,32.4129469 169.807947,24.0885163 154.700107,24.0885163 C148.375726,24.0885163 142.393793,25.5493901 137.067615,28.1469039 C130.065621,11.6765534 113.751923,0.127999726 94.7387049,0.127999726 C74.9385822,0.127999726 58.0638501,12.6565411 51.5864595,30.2271008 C48.7557888,29.6259931 45.8231119,29.3126885 42.8139304,29.3126885 C19.23958,29.3126885 0.127998772,48.6209959 0.127998772,72.4430755 C0.127998772,88.4070383 8.71473094,102.34545 21.4727861,109.802829 C18.8461277,115.846693 17.3852539,122.517167 17.3852539,129.53009 C17.3852539,156.926028 39.6262381,179.134225 67.0586069,179.134225 C83.1646497,179.134225 97.4782987,171.476477 106.553203,159.610976" fill="currentColor" transform="translate(127.999997, 89.631112) scale(1, -1) translate(-127.999997, -89.631112) "></path>
+      <g className="group">
+        <path d="M106.553203,159.610976 C114.801129,168.204994 126.284107,173.534815 138.983873,173.534815 C155.865892,173.534815 170.594851,164.121105 178.438396,150.146262 C185.254593,153.191874 192.799405,154.885905 200.737669,154.885905 C231.186506,154.885905 255.871995,129.985475 255.871995,99.2706935 C255.871995,68.5522694 231.186506,43.651839 200.737669,43.651839 C197.021731,43.651839 193.389583,44.0234329 189.877657,44.7338328 C182.970383,32.4129469 169.807947,24.0885163 154.700107,24.0885163 C148.375726,24.0885163 142.393793,25.5493901 137.067615,28.1469039 C130.065621,11.6765534 113.751923,0.127999726 94.7387049,0.127999726 C74.9385822,0.127999726 58.0638501,12.6565411 51.5864595,30.2271008 C48.7557888,29.6259931 45.8231119,29.3126885 42.8139304,29.3126885 C19.23958,29.3126885 0.127998772,48.6209959 0.127998772,72.4430755 C0.127998772,88.4070383 8.71473094,102.34545 21.4727861,109.802829 C18.8461277,115.846693 17.3852539,122.517167 17.3852539,129.53009 C17.3852539,156.926028 39.6262381,179.134225 67.0586069,179.134225 C83.1646497,179.134225 97.4782987,171.476477 106.553203,159.610976" fill="currentColor" transform="translate(127.999997, 89.631112) scale(1, -1) translate(-127.999997, -89.631112)" className='group-hover:text-[#009EDB]'></path>
         <path d="M37.1700744,75.3309413 C37.009779,74.9119875 37.2283636,74.8245536 37.2793667,74.7516921 C37.7602528,74.4019567 38.2484251,74.1505844 38.7402405,73.8700675 C41.3486835,72.4856983 43.8114035,72.0813168 46.3870588,72.0813168 C51.6330895,72.0813168 54.8900002,74.8719136 54.8900002,79.3638274 L54.8900002,79.4512613 C54.8900002,83.6043689 51.2141357,85.1126027 47.7641419,86.2018827 L47.3160434,86.3476058 C44.7148866,87.1927996 42.4707512,87.921415 42.4707512,89.6336611 L42.4707512,89.724738 C42.4707512,91.1892549 43.7822589,92.2676057 45.8150958,92.2676057 C48.0738034,92.2676057 50.755108,91.5171318 52.4819264,90.5626457 C52.4819264,90.5626457 52.9883141,90.2347688 53.174111,90.7265842 C53.2761172,90.9888857 54.1504556,93.3423133 54.2415326,93.5973287 C54.3398956,93.8742026 54.1650279,94.0782149 53.9865172,94.1875072 C52.0156126,95.3860795 49.2905911,96.2057718 46.4708496,96.2057718 L45.9462465,96.2021287 C41.1446712,96.2021287 37.7930405,93.3022395 37.7930405,89.1454888 L37.7930405,89.058055 C37.7930405,84.6754335 41.4907635,83.2546335 44.9553296,82.2637166 L45.5127204,82.092492 C48.0373727,81.3165166 50.2122895,80.6498336 50.2122895,78.872012 L50.2122895,78.7845782 C50.2122895,77.1597659 48.7987757,75.9502644 46.5182096,75.9502644 C45.6329419,75.9502644 42.8095574,75.9684798 39.760302,77.8956674 C39.3923513,78.110609 39.1774097,78.2672613 38.8932497,78.4384859 C38.7438836,78.5332059 38.3686467,78.6971444 38.2047082,78.2016859 L37.1700744,75.3309413 L37.1700744,75.3309413 Z" fill="#FFFFFF" transform="translate(46.001138, 84.143544) scale(1, -1) translate(-46.001138, -84.143544) "></path>
         <path d="M113.969779,75.3309413 C113.809484,74.9119875 114.028068,74.8245536 114.079072,74.7516921 C114.559958,74.4019567 115.04813,74.1505844 115.539945,73.8700675 C118.148388,72.4856983 120.611108,72.0813168 123.186764,72.0813168 C128.432794,72.0813168 131.689705,74.8719136 131.689705,79.3638274 L131.689705,79.4512613 C131.689705,83.6043689 128.013841,85.1126027 124.563847,86.2018827 L124.115748,86.3476058 C121.514591,87.1927996 119.270456,87.921415 119.270456,89.6336611 L119.270456,89.724738 C119.270456,91.1892549 120.581964,92.2676057 122.614801,92.2676057 C124.873508,92.2676057 127.554813,91.5171318 129.281631,90.5626457 C129.281631,90.5626457 129.788019,90.2347688 129.973816,90.7265842 C130.075822,90.9888857 130.95016,93.3423133 131.041237,93.5973287 C131.1396,93.8742026 130.964733,94.0782149 130.786222,94.1875072 C128.815317,95.3860795 126.090296,96.2057718 123.270554,96.2057718 L122.745951,96.2021287 C117.944376,96.2021287 114.592745,93.3022395 114.592745,89.1454888 L114.592745,89.058055 C114.592745,84.6754335 118.290468,83.2546335 121.755034,82.2637166 L122.312425,82.092492 C124.837077,81.3165166 127.015637,80.6498336 127.015637,78.872012 L127.015637,78.7845782 C127.015637,77.1597659 125.598481,75.9502644 123.317914,75.9502644 C122.432647,75.9502644 119.609262,75.9684798 116.560007,77.8956674 C116.192056,78.110609 115.973471,78.2599751 115.696598,78.4384859 C115.601878,78.5004182 115.157422,78.6716428 115.004413,78.2016859 L113.969779,75.3309413 L113.969779,75.3309413 Z" fill="#FFFFFF" transform="translate(122.800843, 84.143544) scale(1, -1) translate(-122.800843, -84.143544) "></path>
         <path d="M166.398769,84.1136744 C166.398769,81.5744499 165.925169,79.5744007 164.992541,78.1608868 C164.070843,76.7619453 162.675544,76.08069 160.730141,76.08069 C158.781095,76.08069 157.393083,76.7583022 156.485956,78.1608868 C155.567901,79.5707576 155.101587,81.5744499 155.101587,84.1136744 C155.101587,86.6492559 155.567901,88.6456621 156.485956,90.0446036 C157.393083,91.4289728 158.781095,92.102942 160.730141,92.102942 C162.675544,92.102942 164.070843,91.4289728 164.996184,90.0446036 C165.925169,88.6456621 166.398769,86.6492559 166.398769,84.1136744 M170.777747,88.8205297 C170.347864,90.2741174 169.677538,91.5564805 168.784984,92.623902 C167.89243,93.6949666 166.763076,94.5547327 165.422424,95.181342 C164.085415,95.8043081 162.504319,96.1212558 160.730141,96.1212558 C158.95232,96.1212558 157.371224,95.8043081 156.034215,95.181342 C154.693563,94.5547327 153.564209,93.6949666 152.668012,92.623902 C151.779101,91.5528374 151.108775,90.2704743 150.675249,88.8205297 C150.249009,87.3742282 150.034067,85.7931329 150.034067,84.1136744 C150.034067,82.434216 150.249009,80.8494776 150.675249,79.4068191 C151.108775,77.9568745 151.775458,76.6745115 152.671655,75.6034469 C153.564209,74.5323823 154.697206,73.6762592 156.034215,73.0678654 C157.374867,72.4594715 158.95232,72.14981 160.730141,72.14981 C162.504319,72.14981 164.081772,72.4594715 165.422424,73.0678654 C166.759433,73.6762592 167.89243,74.5323823 168.784984,75.6034469 C169.677538,76.6708684 170.347864,77.9532315 170.777747,79.4068191 C171.20763,80.8531206 171.422572,82.4378591 171.422572,84.1136744 C171.422572,85.7894898 171.20763,87.3742282 170.777747,88.8205297" fill="#FFFFFF" transform="translate(160.728320, 84.135533) scale(1, -1) translate(-160.728320, -84.135533) "></path>
diff --git a/components/logos/Slack.js b/components/logos/Slack.js
index e17e5b23260b..cdb6a9ec1f09 100644
--- a/components/logos/Slack.js
+++ b/components/logos/Slack.js
@@ -20,25 +20,25 @@ export default function SlackLogo({ className }) {
 			c18.718,0,36.612-8.433,43.812-20.568v17.483h44.018V338.088H772.978L772.978,338.088z"/>
         </g>
         <g>
-          <g>
+          <g className='group-hover:text-[#E01E5A]'>
             <path d="M183.474,430.441c0,15.016-12.136,27.151-27.151,27.151s-27.151-12.136-27.151-27.151
 				c0-15.015,12.136-27.15,27.151-27.15h27.151V430.441z"/>
             <path d="M197.05,430.441c0-15.015,12.136-27.15,27.151-27.15s27.151,12.136,27.151,27.15v67.878
 				c0,15.015-12.136,27.15-27.151,27.15s-27.151-12.136-27.151-27.15V430.441z"/>
           </g>
-          <g>
+          <g className='group-hover:text-[#36C5F0]'>
             <path d="M224.201,321.427c-15.016,0-27.151-12.136-27.151-27.151s12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151
 				v27.151H224.201z"/>
             <path d="M224.201,335.208c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15h-68.083
 				c-15.015,0-27.151-12.136-27.151-27.15c0-15.016,12.136-27.151,27.151-27.151H224.201z"/>
           </g>
-          <g>
+          <g className='group-hover:text-[#2EB67D]'>
             <path d="M333.01,362.359c0-15.016,12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
 				H333.01V362.359z"/>
             <path d="M319.435,362.359c0,15.015-12.136,27.15-27.151,27.15c-15.016,0-27.151-12.136-27.151-27.15v-68.083
 				c0-15.015,12.135-27.151,27.151-27.151c15.015,0,27.151,12.136,27.151,27.151V362.359z"/>
           </g>
-          <g>
+          <g className='group-hover:text-[#ECB22E]'>
             <path d="M292.284,471.168c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
 				c-15.016,0-27.151-12.136-27.151-27.15v-27.151H292.284z"/>
             <path d="M292.284,457.593c-15.016,0-27.151-12.136-27.151-27.151c0-15.015,12.135-27.15,27.151-27.15h68.083
@@ -47,5 +47,5 @@ export default function SlackLogo({ className }) {
         </g>
       </g>
     </svg>
-  )
+  );
 }
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 30e7afa45ab9..dd742175ecb0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -54,13 +54,13 @@ function HomePage() {
           </Paragraph>
           <ul className="md:grid md:gap-8 md:grid-cols-2 lg:grid-cols-5">
             <li className="justify-center flex">
-              <AdidasLogo className="h-8 text-gray-400" />
+              <AdidasLogo className="h-8 text-gray-400 hover:text-black" />
             </li>
             <li className="justify-center flex">
-              <AxwayLogo className="mt-12 md:-mt-5 lg:-mt-5 h-14 text-gray-400" />
+              <AxwayLogo className="mt-12 md:-mt-5 lg:-mt-5 h-14 text-gray-400 group hover:text-black" />
             </li>
             <li className="justify-center flex">
-              <SlackLogo className="mt-12 md:mt-2 lg:-mt-1 h-10 text-gray-400" />
+              <SlackLogo className="mt-12 md:mt-2 lg:-mt-1 h-10 text-gray-400 hover:text-black group" />
             </li>
             <li className="justify-center flex">
               <SalesforceLogo className="mt-12 md:mt-2 lg:-mt-4 h-16 text-gray-400" />