basic implementation of Sponsors section

src/components/Sponsors/Sponsors.scss

@@ -0,0 +1,65 @@
+@use "../../shared/colors";
+
+#sponsors {
+  padding: 2rem;
+  background-color: colors.$global-very-dark-green;
+  text-align: center;
+
+  h2 {
+    font-size: 2rem;
+    color: colors.$global-light;
+    margin-bottom: 1.5rem;
+    font-weight: 900;
+  }
+
+  .sponsors__container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+    justify-content: center;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .sponsors__card:nth-child(1),
+    .sponsors__card:nth-child(5) {
+      grid-column: span 2;
+    }
+
+    .sponsors__card:nth-child(3) {
+      grid-row: span 2;
+    }
+  }
+
+  .sponsors__card {
+    text-decoration: none;
+    text-align: center;
+    background-color: colors.$global-light;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+    }
+
+    .sponsors__logo {
+      max-width: 100%;
+      max-height: 6rem;
+      margin-bottom: 0.5rem;
+      object-fit: contain;
+    }
+  }
+}
+
+@media (max-width: 800px) {
+  #sponsors {
+    padding: 1rem;
+
+    .sponsors__container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}

src/components/Sponsors/Sponsors.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import './Sponsors.scss';
+
+const Sponsors: React.FC = () => {
+  const sponsors = [
+    { name: 'Sponsor 1', logo: '/sponsor1.png', link: 'https://sponsor1.com' },
+    { name: 'Sponsor 2', logo: '/sponsor2.png', link: 'https://sponsor2.com' },
+    { name: 'Sponsor 3', logo: '/sponsor3.png', link: 'https://sponsor3.com' },
+    { name: 'Sponsor 4', logo: '/sponsor4.png', link: 'https://sponsor4.com' },
+    { name: 'Sponsor 5', logo: '/sponsor5.png', link: 'https://sponsor5.com' },
+    { name: 'Sponsor 6', logo: '/sponsor6.png', link: 'https://sponsor6.com' },
+    { name: 'Sponsor 7', logo: '/sponsor7.png', link: 'https://sponsor7.com' },
+    { name: 'Sponsor 8', logo: '/sponsor8.png', link: 'https://sponsor8.com' },
+  ];
+
+  return (
+    <section id="sponsors">
+      <h2>Sponsors</h2>
+      <div className="sponsors__container">
+        {sponsors.map((sponsor, index) => (
+          <a
+            key={index}
+            href={sponsor.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="sponsors__card"
+          >
+            <img
+              src={sponsor.logo}
+              alt={`${sponsor.name} logo`}
+              className="sponsors__logo"
+            />
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Sponsors;