(feat) merge in additions for Compant Worked With

components/companyCard.jsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import Link from "next/link";
+export default function CompanyCard({ json, basePath }) {
+  const style = "relative " + "h-28 w-28"; // larger: "h-48 w-48"
+  return (
+    <Link
+      className="text-center rounded-lg bg-grey py-4 px-8 w-full sm:w-60 hover:-translate-y-1"
+      href={json.link}
+    >
+      <Image
+        className={
+          "object-contain mx-auto " + "h-28 w-28" // larger: "glow h-48 w-48"
+        }
+        width="500"
+        height="500"
+        src={
+          basePath
+            ? `${basePath}/images/worked-with/${json.image}`
+            : `/images/worked-with/${json.image}`
+        }
+        alt={json.name}
+      />
+    </Link>
+  );
+}

components/companySection.jsx

@@ -0,0 +1,19 @@
+import CompanyCard from "./companyCard";
+
+export default function CompanySection({ group, basePath }) {
+  return (
+    <div className="py-8 px-4 mx-auto max-w-screen-lg text-center lg:px-6">
+      <div
+        className={`flex flex-wrap justify-center gap-4 lg:gap-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4`}
+      >
+        {group.companies.map((company, index) => (
+          <CompanyCard
+            key={index}
+            basePath={basePath}
+            json={company}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

config/companies.json

@@ -0,0 +1,51 @@
+[
+  {
+    "companies": [
+      {
+        "name": "Rocket Companies",
+        "link": "https://www.myrocketcareer.com/",
+        "image": "rocket-company.png"
+      },
+      {
+        "name": "PwC",
+        "link": "https://www.pwc.com/",
+        "image": "pwc.png"
+      },
+      {
+        "name": "Bloomberg",
+        "link": "https://www.bloomberg.com/",
+        "image": "bloomberg.png"
+      },
+      {
+        "name": "Dominos",
+        "link": "https://www.dominos.com/",
+        "image": "dominos.png"
+      },
+      {
+        "name": "Figma",
+        "link": "https://www.figma.com/",
+        "image": "figma.png"
+      },
+      {
+        "name": "Discover",
+        "link": "https://www.discover.com/",
+        "image": "discover.png"
+      },
+      {
+        "name": "Capital One",
+        "link": "https://www.capitalone.com/",
+        "image": "capital-one.png"
+      },
+      {
+        "name": "Nissan",
+        "link": "https://www.nissan-global.com/",
+        "image": "nissan.png"
+      },
+      {
+        "name": "Rockstar Games",
+        "link": "https://www.rockstargames.com/",
+        "image": "rockstar-games.png"
+      }
+    ]
+  }
+]

pages/index.jsx

@@ -4,6 +4,7 @@ import Hero from "@/components/hero";
 import Icon from "@/components/icon";
 import Layout from "@/components/layout";
 import SponsorSection from "@/components/sponsorSection";
+import CompanySection from "@/components/companySection";
 import Timeline from "@/components/timeline";
 import Wave from "@/components/wave";
 import Wave180 from "@/components/wave180";
@@ -14,7 +15,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
-export default function Home({ sponsors, projects, timeline, communityImages }) {
+export default function Home({ companies, sponsors, projects, timeline, communityImages }) {
   sponsors[0].tier = "MDST is made possible by our sponsors";
   const router = useRouter();
   const basePath = router.basePath;
@@ -127,6 +128,12 @@ export default function Home({ sponsors, projects, timeline, communityImages })
         </h2>
         <SponsorSection basePath={basePath} group={sponsors[0]} />
       </div>
+      <div className="container mx-auto px-2 mt-8">
+        <h2 className="text-3xl text-center">
+          Companies We Worked With:
+        </h2>
+        <CompanySection basePath={basePath} group={companies[0]}/>
+      </div>
     </Layout>
   );
 }
@@ -218,9 +225,10 @@ function Carousel({ projects, basePath }) {
 
 export async function getStaticProps() {
   const sponsors = loadStaticData("sponsors.json");
+  const companies = loadStaticData("companies.json");
   const projects = loadStaticData("homepage.json");
   const timeline = loadStaticData("timeline.json");
   const communityImages = loadStaticData("communityImages.json");
 
-  return { props: { sponsors, projects, timeline, communityImages } };
+  return { props: { companies, sponsors, projects, timeline, communityImages } };
 }