refactor: partners (#95)

* add new assets

* add assets

* finalize logos

* refactor Benefits component

* prettier

* correct typos

* correct typos

components/Benefit.tsx

@@ -8,6 +8,7 @@ interface Benefit {
   title: string;
 }
 
+// Define styles with cva, including dynamic variants for color and columns.
 const iconStyles = cva("h-8 w-8 rounded p-2 text-white duration-500", {
   variants: {
     color: {
@@ -17,7 +18,7 @@ const iconStyles = cva("h-8 w-8 rounded p-2 text-white duration-500", {
   },
 });
 
-const headingStyles = cva("mb-4 text-xl font-semibold uppercase", {
+const headingStyles = cva("text-xl font-semibold uppercase", {
   variants: {
     color: {
       purple: "text-purple-500",
@@ -26,24 +27,54 @@ const headingStyles = cva("mb-4 text-xl font-semibold uppercase", {
   },
 });
 
-interface Props extends VariantProps<typeof iconStyles> {
+const gridStyles = cva("grid gap-10", {
+  variants: {
+    columns: {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-2 xl:grid-cols-4",
+    },
+  },
+  defaultVariants: {
+    columns: 2,
+  },
+});
+
+const articleStyles = cva("flex flex-col gap-4", {
+  variants: {
+    shadow: {
+      true: "shadow-lg rounded-xl p-6",
+      false: "p-4",
+    },
+  },
+});
+
+interface Props
+  extends VariantProps<typeof iconStyles>,
+    VariantProps<typeof gridStyles> {
   benefits: Benefit[];
+  showShadow?: boolean;
 }
 
-const Benefits = ({ benefits, color }: Props) => {
+// The Benefits component, applying dynamic styles based on props.
+const Benefits = ({ benefits, color, columns, showShadow = false }: Props) => {
   return (
-    <div className="grid gap-16 md:grid-cols-2">
+    <div className={gridStyles({ columns })}>
       {benefits.map((benefit) => (
-        <article key={benefit.title} className="flex gap-8">
-          <FontAwesomeIcon
-            icon={benefit.icon}
-            size="2xl"
-            className={iconStyles({ color })}
-          />
-          <div>
+        <article
+          key={benefit.title}
+          className={articleStyles({ shadow: showShadow })}
+        >
+          <div className="flex flex-row items-center gap-6">
+            <FontAwesomeIcon
+              icon={benefit.icon}
+              size="2xl"
+              className={iconStyles({ color })}
+            />
             <h3 className={headingStyles({ color })}>{benefit.title}</h3>
-            <p>{benefit.text}</p>
           </div>
+          <p>{benefit.text}</p>
         </article>
       ))}
     </div>

data/industry.tsx

@@ -41,7 +41,7 @@ export const partners = [
   },
   {
     href: "https://www.rohde-schwarz.com/de",
-    src: "/assets/industry/partners/RandS.png",
+    src: "/assets/industry/partners/RandS.svg.png",
     alt: "Rhode-Schwarz",
   },
 ];

data/partners.tsx

@@ -1,3 +1,5 @@
+import { partners } from "./industry";
+
 export const partners_collabrated_with = [
   {
     href: "https://unite.eu/de-de",
@@ -183,3 +185,168 @@ export const initiatives_collabrated_with = [
     alt: "MCML",
   },
 ];
+
+export const strategic_partnerts = [
+  {
+    href: "https://www.nvidia.com",
+    src: "/assets/partners/strategic_partners/Nvidia_(logo).svg.png",
+    alt: "nvidia",
+    width: 130,
+  },
+  {
+    href: "https://baiosphere.org",
+    src: "/assets/partners/strategic_partners/baiosphere_logo-1-1.png",
+    alt: "baiosphere",
+  },
+  {
+    href: "https://www.appliedai.de/de/",
+    src: "/assets/partners_sponsors/appliedai_logo.png",
+    alt: "Applied AI",
+  },
+  {
+    href: "https://www.tum-venture-labs.de",
+    src: "/assets/partners/strategic_partners/TUMVentureLabs.jpg",
+    alt: "TumVentureLabs",
+  },
+];
+
+export const enablers_supporters = [
+  {
+    href: "https://www.janestreet.com",
+    src: "/assets/partners/enablers_and_supporters/120px-Jane_Street_Capital_Logo.svg.png",
+    alt: "janestreet",
+  },
+  {
+    href: "https://www.mcml.ai",
+    src: "/assets/partners_sponsors/MCML_Logo_2.png",
+    alt: "MCML",
+  },
+  {
+    href: "https://www.tngtech.com/index.html",
+    src: "/assets/partners_sponsors/TNG_logo.png",
+    alt: "TNG Tech",
+  },
+  {
+    href: "https://campusfounders.de/de/",
+    src: "/assets/partners/enablers_and_supporters/campus_founders.png",
+    alt: "campusfounders",
+    width: 120,
+  },
+  {
+    href: "https://www.merantix.com/",
+    src: "/assets/partners/enablers_and_supporters/merantix_black.svg",
+    alt: "Merantix",
+  },
+  {
+    href: "https://www.cdtm.de/",
+    src: "/assets/partners_sponsors/cdtm_logo.png",
+    alt: "CDTM",
+    width: 120,
+  },
+  {
+    href: "https://www.stmd.bayern.de",
+    src: "/assets/partners/enablers_and_supporters/StMD_logo_grey.svg",
+    alt: "ministry_for_digital_affairs",
+  },
+  {
+    href: "https://www.10xfounders.com/",
+    src: "/assets/partners_sponsors/10xfounderslogo.png",
+    alt: "10x Founders",
+  },
+  {
+    href: "https://www.burda.com/",
+    src: "/assets/partners/enablers_and_supporters/Hubert_Burda_Media_2013_logo.svg.png",
+    alt: "HubertBurda",
+  },
+  {
+    href: "https://kipark.de",
+    src: "/assets/partners/enablers_and_supporters/KIPark.png",
+    alt: "KIPark",
+  },
+  {
+    href: "https://www.startmunich.de/",
+    src: "/assets/partners_sponsors/start_munich.png",
+    alt: "Start Munich",
+  },
+  {
+    href: "https://www.aimunich.com",
+    src: "/assets/partners/enablers_and_supporters/ai+munich.jpeg",
+    alt: "ai+munich",
+  },
+];
+
+export const project_partners = [
+  {
+    href: "https://www.esa.int",
+    src: "/assets/partners/project_partners/1ESA_logo.svg.png",
+    alt: "ESA",
+  },
+  {
+    href: "https://www.gresearch.com",
+    src: "/assets/partners/project_partners/gresearch-logo.png",
+    alt: "GResearch",
+    width: 100,
+  },
+  {
+    href: "https://www.bmw.com",
+    src: "/assets/partners/project_partners/bmw-7.svg",
+    alt: "BMW",
+    width: 100,
+  },
+  {
+    href: "https://cohere.com",
+    src: "/assets/partners/project_partners/cohere_logo.svg",
+    alt: "Cohere",
+  },
+  {
+    href: "https://dai.ki",
+    src: "/assets/partners/project_partners/daiki.png",
+    alt: "Daiki",
+  },
+  {
+    href: "https://www.genistat.ch/en/",
+    src: "/assets/partners/project_partners/Genistat_Logo.png",
+    alt: "Genistat",
+  },
+  {
+    href: "https://www.microsoft.com/de-de/about",
+    src: "/assets/partners_sponsors/Microsoft_Logo.png",
+    alt: "Microsoft",
+  },
+
+  {
+    href: "https://www.burda-forward.de",
+    src: "/assets/partners/project_partners/burdaforward-logo.svg",
+    alt: "BurdaForward",
+  },
+  {
+    href: "https://www.unicreditgroup.eu/",
+    src: "/assets/partners/project_partners/UniCredit_(logo).svg.png",
+    alt: "UniCredit",
+  },
+  {
+    href: "https://www.ibm.com/de-de",
+    src: "/assets/partners_sponsors/ibm_logo.png",
+    alt: "IBM",
+  },
+  {
+    href: "https://www.roche.com",
+    src: "/assets/partners/project_partners/Rochee.png",
+    alt: "Roche",
+  },
+  {
+    href: "https://www.muenchen.de",
+    src: "/assets/partners/project_partners/muenchen.png",
+    alt: "LandeshauptstadtMünchen",
+  },
+  {
+    href: "https://quantco.com/",
+    src: "/assets/partners_sponsors/quantco_logo.png",
+    alt: "QuantCo",
+  },
+  {
+    href: "https://www.avimedical.com/",
+    src: "/assets/partners_sponsors/avi_medical_logo.png",
+    alt: "Avi Medical",
+  },
+].concat(partners);

pages/partners.tsx

@@ -3,7 +3,6 @@ import Head from "next/head";
 import Section from "@ui/Section";
 import Hero from "components/Hero";
 import Image from "next/image";
-import PnSPartners from "../public/assets/partners/PnS_Partners_2023_2.png";
 import MartinTalk from "../public/assets/partners/martin_talk.jpg";
 import { cx } from "class-variance-authority";
 import { bitter } from "@styles/fonts";
@@ -15,17 +14,23 @@ import {
   faPeopleGroup,
 } from "@fortawesome/free-solid-svg-icons";
 import Benefits from "@components/Benefit";
+import Logos from "@components/Logos";
+import {
+  enablers_supporters,
+  project_partners,
+  strategic_partnerts,
+} from "data/partners";
 
 export default function Partners() {
   const benefits = [
     {
       title: "AI Talent Pool",
-      text: "Get access to our network of highly motivated students with a specialization in aritifical intelligence technologies. Many of our members are interested in internships and working student positions.",
+      text: "Get access to our network of highly motivated students with a specialization in artificial intelligence technologies. Many of our members are interested in internships and working student positions.",
       icon: faHeart,
     },
     {
       title: "Marketing & Awareness",
-      text: "As a partner, you will be featured on our website. Plus, we will advertise your company as a supporter of TUM.ai in our marketing campaigns. (3.5k+ followers on LinkedIn) Boost the perception of your brand among students across Munich and beyond.",
+      text: "As a partner, you will be featured on our website. Plus, we will advertise your company as a supporter of TUM.ai in our marketing campaigns. (8k+ followers on LinkedIn) Boost the perception of your brand among students across Munich and beyond.",
       icon: faBullhorn,
     },
     {
@@ -48,7 +53,7 @@ export default function Partners() {
         </title>
         <meta
           name="description"
-          content="Is your company currently facing challenges with data-driven technologies or you are looking for the greatest talent in artifical intelligence? If one of the answers is yes, become a partners.
+          content="Is your company currently facing challenges with data-driven technologies or you are looking for the greatest talent in artificial intelligence? If one of the answers is yes, become a partners.
 "
         />
       </Head>
@@ -60,14 +65,21 @@ export default function Partners() {
 
       <Section background="white">
         <h2 className={cx("mb-8 text-4xl font-semibold", bitter.className)}>
-          Partners <span className="text-purple-500">we have collaborated</span>{" "}
-          with
+          Strategic Partners
         </h2>
-        <Image
-          src={PnSPartners}
-          className="w-full rounded"
-          alt="PnS partners"
-        />
+        <Logos logos={strategic_partnerts} />
+        <h2
+          className={cx("mb-8 mt-32 text-4xl font-semibold", bitter.className)}
+        >
+          Enablers and Supporters
+        </h2>
+        <Logos logos={enablers_supporters} />
+        <h2
+          className={cx("mb-8 mt-32 text-4xl font-semibold", bitter.className)}
+        >
+          Project Partners
+        </h2>
+        <Logos logos={project_partners} />
       </Section>
 
       <Section background="inverted">
@@ -152,7 +164,12 @@ export default function Partners() {
         >
           What we offer
         </h2>
-        <Benefits benefits={benefits} color="purple" />
+        <Benefits
+          benefits={benefits}
+          showShadow={true}
+          columns={4}
+          color="purple"
+        />
       </Section>
     </>
   );