ft. Track Partner Inclusions and Sponsor Border Style Changes

src/assets/data/SponsorsContent.js

@@ -8,6 +8,9 @@ import xyz from "../images/SponsorImages/xyz.png";
 import router from "../images/SponsorImages/router.png";
 import jis from "../images/SponsorImages/jis.png";
 import gdg from "../images/SponsorImages/gdg.png";
+import superteam from "../images/SponsorImages/superteam.png";
+import callchimp from "../images/SponsorImages/callchimp.png";
+import tezos from "../images/SponsorImages/tezos.png";
 
 const sponsors = {
   Platinum: [
@@ -68,6 +71,23 @@ const sponsors = {
       link: "https://www.xyz.com",
     },
   ],
+  Track: [
+    {
+      name: "Superteam India",
+      img: superteam,
+      link: "https://in.superteam.fun",
+    },
+    {
+      name: "Tezos India",
+      img: tezos,
+      link: "https://tezosindia.org.in/",
+    },
+    {
+      name: "Callchimp",
+      img: callchimp,
+      link: "https://callchimp.ai/",
+    },
+  ],
   Education: [
     {
       name: "JIS",

src/components/private/sponsors/Sponsors.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import HeaderData from "../../../assets/data/HeaderContent";
 import sponsors from "../../../assets/data/SponsorsContent";
-import {Header} from "../../shared";
+import { Header } from "../../shared";
 import "./Sponsors.scss";
 import SingleSponsors from "./singlesponsors/SingleSponsors";
 
@@ -45,7 +45,7 @@ const Sponsors = () => {
             <div className="sponsors__flexbox">
               {sponsors["Education"].map((item, index) => {
                 return (
-                  <SingleSponsors key={index} sponsor={item} type="silver" />
+                  <SingleSponsors key={index} sponsor={item} type="education" />
                 );
               })}
             </div>
@@ -58,7 +58,7 @@ const Sponsors = () => {
             <div className="sponsors__flexbox">
               {sponsors["Bronze"].map((item, index) => {
                 return (
-                  <SingleSponsors key={index} sponsor={item} type="domain" />
+                  <SingleSponsors key={index} sponsor={item} type="bronze" />
                 );
               })}
             </div>
@@ -75,6 +75,16 @@ const Sponsors = () => {
               })}
             </div>
           </div>
+          <div className="sponsors__container domain_container">
+            <h1>Track Partner</h1>
+            <div className="sponsors__flexbox">
+              {sponsors["Track"].map((item, index) => {
+                return (
+                  <SingleSponsors key={index} sponsor={item} type="track" />
+                );
+              })}
+            </div>
+          </div>
         </div>
       </div>
     </>

src/components/private/sponsors/singlesponsors/SingleSponsors.scss

@@ -60,27 +60,61 @@
 }
 
 .silver {
-  border: 1px solid #c0c0c0;
+  border: 1px solid #BCC6CC;
   transition: all 0.3s ease;
 }
 
 .silver:hover {
-  -webkit-box-shadow: inset 0px 0px 13px -2px rgba(192, 192, 192, 1);
-  -moz-box-shadow: inset 0px 0px 13px -2px rgba(192, 192, 192, 1);
-  box-shadow: inset 0px 0px 13px -2px rgba(192, 192, 192, 1);
+  -webkit-box-shadow: inset 0px 0px 13px -2px #BCC6CC;
+  -moz-box-shadow: inset 0px 0px 13px -2px #BCC6CC;
+  box-shadow: inset 0px 0px 13px -2px #BCC6CC;
   transition: all 0.3s ease;
 }
 
-.bronze,
-.domain {
+.education {
+  border: 3px solid #253c7f;
+  transition: all 0.3s ease;
+}
+
+.education:hover {
+  -webkit-box-shadow: inset 0px 0px 13px -2px #253c7f;
+  -moz-box-shadow: inset 0px 0px 13px -2px #253c7f;
+  box-shadow: inset 0px 0px 13px -2px #253c7f;
+  transition: all 0.3s ease;
+}
+
+.bronze {
   border: 1px solid #cd7f32;
   transition: all 0.3s ease;
 }
 
-.bronze:hover,
-.domain:hover {
+.domain {
+  border: 3px solid #471754;
+  transition: all 0.3s ease;
+}
+
+.track {
+  border: 1px solid #7230FF;
+  transition: all 0.3s ease;
+}
+
+.bronze:hover {
   -webkit-box-shadow: inset 0px 0px 13px -2px rgba(205, 127, 50, 1);
   -moz-box-shadow: inset 0px 0px 13px -2px rgba(205, 127, 50, 1);
   box-shadow: inset 0px 0px 13px -2px rgba(205, 127, 50, 1);
   transition: all 0.3s ease;
 }
+
+.domain:hover {
+  -webkit-box-shadow: inset 0px 0px 13px -2px #471754;
+  -moz-box-shadow: inset 0px 0px 13px -2px #471754;
+  box-shadow: inset 0px 0px 13px -2px #471754;
+  transition: all 0.3s ease;
+}
+
+.track:hover {
+  -webkit-box-shadow: inset 0px 0px 13px -2px #7230FF;
+  -moz-box-shadow: inset 0px 0px 13px -2px #7230FF;
+  box-shadow: inset 0px 0px 13px -2px #7230FF;
+  transition: all 0.3s ease;
+}