Updated website sponsors (#1019)

Author: matthewlipski

docs/components/pages/landing/community/SponsorCard.tsx

@@ -6,12 +6,15 @@ export type SponsorCardProps = {
     light: Parameters<typeof Image>[0]["src"];
     dark: Parameters<typeof Image>[0]["src"];
   };
+  link: string;
   tagline?: string;
 };
 
 export function SponsorCard(props: SponsorCardProps) {
   return (
-    <div className="relative flex aspect-video max-w-[238px] items-center justify-center bg-gray-100 dark:bg-gray-900 md:w-[238px]">
+    <a
+      href={props.link}
+      className="relative flex aspect-video max-w-[235px] items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-900 md:w-[235px]">
       <Image
         className={"block h-1/3 w-3/5 object-contain dark:hidden"}
         src={props.logo.light}
@@ -22,11 +25,12 @@ export function SponsorCard(props: SponsorCardProps) {
         src={props.logo.dark}
         alt={props.name}
       />
+
       {props.tagline && (
         <div className={"absolute bottom-[10%] text-xs  italic md:text-sm"}>
           {props.tagline}
         </div>
       )}
-    </div>
+    </a>
   );
 }

docs/components/pages/landing/community/Sponsors.tsx

@@ -5,8 +5,9 @@ import {
 import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
 import { SectionSubHeader } from "@/components/pages/landing/shared/Headings";
 
-import fermatDark from "../../../../public/img/sponsors/fermat-dark.png";
-import fermatLight from "../../../../public/img/sponsors/fermat.png";
+import deeporigin from "../../../../public/img/sponsors/deeporigin.svg";
+import fermatDark from "../../../../public/img/sponsors/fermat-dark.svg";
+import fermatLight from "../../../../public/img/sponsors/fermat.svg";
 import nlnetDark from "../../../../public/img/sponsors/nlnet-dark.svg";
 import nlnetLight from "../../../../public/img/sponsors/nlnet.svg";
 import noteplanDark from "../../../../public/img/sponsors/noteplan-dark.png";
@@ -19,49 +20,63 @@ import typecellDark from "../../../../public/img/sponsors/typecell-dark.svg";
 import typecellLight from "../../../../public/img/sponsors/typecell.svg";
 
 export const sponsorsCardData: SponsorCardProps[] = [
+  {
+    logo: {
+      light: deeporigin,
+      dark: deeporigin,
+    },
+    name: "Deep Origin",
+    link: "https://www.deeporigin.com/",
+  },
   {
     logo: {
       light: fermatLight,
       dark: fermatDark,
     },
     name: "Fermat",
+    link: "https://fermat.app/",
   },
   {
     logo: {
       light: nlnetLight,
       dark: nlnetDark,
     },
     name: "NLNet",
+    link: "https://nlnet.nl/",
   },
   {
     logo: {
-      light: typecellLight,
-      dark: typecellDark,
+      light: noteplanLight,
+      dark: noteplanDark,
     },
-    name: "TypeCell",
+    name: "Noteplan",
+    link: "https://noteplan.co/",
+    tagline: "Apple Top Notes Apps",
   },
   {
     logo: {
       light: poggioLight,
       dark: poggioDark,
     },
     name: "Poggio",
+    link: "https://poggio.io/",
   },
   {
     logo: {
       light: twentyLight,
       dark: twentyDark,
     },
     name: "Twenty",
+    link: "https://twenty.com/",
     tagline: "YC S23",
   },
   {
     logo: {
-      light: noteplanLight,
-      dark: noteplanDark,
+      light: typecellLight,
+      dark: typecellDark,
     },
-    name: "Noteplan",
-    tagline: "Apple Top Notes Apps",
+    name: "TypeCell",
+    link: "https://www.typecell.org/",
   },
 ];
 
@@ -71,7 +86,7 @@ export function Sponsors() {
       <FadeIn>
         <SectionSubHeader>Sponsors &amp; users</SectionSubHeader>
       </FadeIn>
-      <FadeIn className="grid grid-cols-2 gap-0.5 overflow-hidden rounded-2xl md:grid-cols-3">
+      <FadeIn className="grid grid-cols-2 gap-2 overflow-hidden md:grid-cols-3">
         {sponsorsCardData.map((sponsor) => (
           <SponsorCard key={sponsor.name} {...sponsor} />
         ))}