Companies Page (#5)

Co-authored-by: Faris Ashai <farisashai@gmail.com>

src/components/CompaniesGrid/index.tsx

@@ -0,0 +1,62 @@
+import s from "./style.module.scss";
+
+const companies = [
+  // {
+  //   name: "Shield AI",
+  //   logo: "",
+  //   link: "https://shield.ai/",
+  //   alt: "Shield AI Company Sponsor Logo",
+  // },
+  {
+    name: "MaXentric",
+    logo: "asset/MaXentric_logo.png",
+    link: "https://maxentric.com/",
+    alt: "MaXentric Company Sponsor Logo",
+  },
+  {
+    name: "MagnaFlow",
+    logo: "asset/MagnaFlow_logo.png",
+    link: "https://www.magnaflow.com/",
+    alt: "MagnaFlow Company Sponsor Logo",
+  },
+
+  {
+    name: "LPL Financial",
+    logo: "asset/LplFinancial_logo.png",
+    link: "https://www.lpl.com/",
+    alt: "LPL Financial Company Sponsor Logo",
+  },
+  {
+    name: "Xifin",
+    logo: "asset/Xifin_logo.png",
+    link: "https://www.xifin.com/",
+    alt: "Xifin Company Sponsor Logo",
+  },
+  {
+    name: "Flock Freight",
+    logo: "asset/FlockFreight_logo.png",
+    link: "https://www.flockfreight.com/",
+    alt: "Flock Freight Company Sponsor Logo",
+  },
+  // {
+  //   name: "ASML",
+  //   logo: "",
+  //   link: "https://www.asml.com/en",
+  //   alt: "ASML Company Sponsor Logo",
+  // },
+];
+
+const CompaniesGrid: React.FC = () => {
+  return (
+    <div className={s.container}>
+      {companies.map((company, index) => (
+        <a className={s.companyItem} key={index} href={company.link}>
+          <img src={company.logo} className={s.companyLogo} alt={company.alt} />
+          <h5 className={s.companyName}>{company.name}</h5>
+        </a>
+      ))}
+    </div>
+  );
+};
+
+export default CompaniesGrid;

src/components/CompaniesGrid/style.module.scss

@@ -0,0 +1,47 @@
+@use "src/styles/vars.scss" as vars;
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  margin-top: 4rem;
+  row-gap: 1.7rem;
+  column-gap: 1.25rem;
+
+  .companyItem {
+    background: vars.$grey;
+    border-radius: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem 2rem 0.75rem 2rem;
+    text-decoration: none;
+
+    &:hover {
+      transform: scale(1.03);
+      transition: 0.5s ease-in-out;
+    }
+    > .companyName {
+      margin: 0;
+      font-style: normal;
+      font-weight: 600;
+      font-size: 1.12rem;
+      line-height: 1.2rem;
+      color: #120e46;
+    }
+
+    .companyLogo {
+      object-fit: contain;
+      width: 80%;
+      height: 6rem;
+      overflow: hidden;
+    }
+  }
+
+  @media only screen and (max-width: 425px) {
+    .companyItem {
+      width: 80vw;
+    }
+    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
+  }
+}

src/sections/Companies/index.tsx

@@ -1,5 +1,13 @@
+import CompaniesGrid from "src/components/CompaniesGrid";
+import s from "./style.module.scss";
+
 const Companies: React.FC = () => {
-  return <div></div>
-}
+  return (
+    <section className={s.container}>
+      <h1>Participating Companies</h1>
+      <CompaniesGrid />
+    </section>
+  );
+};
 
-export default Companies;
+export default Companies;

src/sections/Companies/style.module.scss

@@ -0,0 +1,15 @@
+@use "src/styles/vars.scss" as vars;
+
+.container {
+  background: linear-gradient(180deg, vars.$pink 30%, vars.$blue 160%);
+  min-height: 100vh;
+  padding: 2.5rem;
+
+  > h1 {
+    font-style: normal;
+    font-size: 2.8rem;
+    font-weight: 600;
+    color: vars.$white;
+    text-align: center;
+  }
+}

src/styles/vars.scss

@@ -2,3 +2,4 @@ $black: #000000;
 $blue: #110f47;
 $pink: #967785;
 $white: #ffffff;
+$grey: #d9d9d9;