update: sponsors card

src/constants/SponsorData.js

@@ -1,34 +1,31 @@
-const Data = [
+const sponsorData = [
   {
     id: 1,
     name: "GitHub",
-    profileImage:
-      "../SponsorsAssets/github.png",
+    profileImage: "../SponsorsAssets/github.png",
     websiteLink: "https://www.github.com",
     linkedInLink: "https://www.linkedin.com/company/github",
-    tag: "GigaByte",
-    bgColor: "goldenrod"
+    tag: "Gigabyte",
+    bgColor: "#FACC15",
   },
   {
     id: 2,
     name: "Loft Labs",
-    profileImage:
-      "../SponsorsAssets/Loft.png",
+    profileImage: "../SponsorsAssets/Loft.png",
     websiteLink: "https://www.loft.sh",
     linkedInLink: "https://www.linkedin.com/company/loft-sh",
-    tag: "GigaByte",
-    bgColor: "goldenrod"
+    tag: "Gigabyte",
+    bgColor: "#FACC15",
   },
   {
     id: 3,
     name: "Presar",
-    profileImage:
-      "../SponsorsAssets/presar.jpg",
-    websiteLink: "https://www.janesmithdesigns.com",
+    profileImage: "../SponsorsAssets/presar.jpg",
+    websiteLink: "https://presear.com/",
     linkedInLink: "https://www.linkedin.com/in/janesmith",
     tag: "Byte",
-    bgColor: "transparent"
+    bgColor: "#C0C0C0",
   },
 ];
 
-export default Data;
+export default sponsorData;

src/partials/Sponsors/Sponsors.jsx

@@ -1,14 +1,14 @@
 import React from "react";
-import Data from "../../constants/SponsorData";
+import sponsorData from "../../constants/sponsorData";
 import SponsorsCard from "./SponsorsCard";
 import "./Sponsors.scss";
 
 function Sponsors() {
   return (
     <div style={{marginBottom: "30px"}}>
       <h1 style={{ textAlign: "center", marginBottom: "20px" }}>Sponsors</h1>
-      <div className="Sponsor-section">
-        {Data.map((user) => (
+      <div className="sponsor-section">
+        {sponsorData.map((user) => (
           <SponsorsCard key={user.id} user={user} />
         ))}
       </div>

src/partials/Sponsors/Sponsors.scss

@@ -1,6 +1,7 @@
-.Sponsor-section {
+.sponsor-section {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  padding: 20px;
 }

src/partials/Sponsors/SponsorsCard.scss

@@ -5,12 +5,17 @@
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 1px 3px 10px 4px rgba(0, 0, 0, 0.3882352941);
+
+
+  @media screen and (max-width: 450px) {
+    width: 100% !important;
+  }
 }
 
 .circle {
   overflow: hidden;
   border-radius: 50%;
-  padding: 10px;
+  padding: 24px;
 }
 
 .circle img {