diff --git a/apps/web/src/components/sections/sponsors-content.ts b/apps/web/src/components/sections/sponsors-content.ts
new file mode 100644
index 00000000..c97e5e0e
--- /dev/null
+++ b/apps/web/src/components/sections/sponsors-content.ts
@@ -0,0 +1,77 @@
+export interface Sponsor {
+ name: string;
+ href: string;
+ image: string;
+ imageAlt: string;
+ amount: string;
+ kind: "company" | "individual";
+ hideInSingleColumn?: boolean;
+}
+
+export const sponsors: Sponsor[] = [
+ {
+ name: "Vercel",
+ href: "https://vercel.com/home",
+ image: "/companies/vercel-mark.svg",
+ imageAlt: "Vercel logo",
+ amount: "$10,000 credits",
+ kind: "company",
+ },
+ {
+ name: "Efferd",
+ href: "https://efferd.com",
+ image: "/companies/efferd.svg",
+ imageAlt: "Efferd logo",
+ amount: "$250 credits",
+ kind: "company",
+ },
+ {
+ name: "MrPancakes39",
+ href: "https://x.com/mrpancakes39",
+ image: "https://pbs.twimg.com/profile_images/1991510200386207744/2Bfvjltn_200x200.jpg",
+ imageAlt: "MrPancakes39's X avatar",
+ amount: "$100",
+ kind: "individual",
+ },
+ {
+ name: "smorimoto",
+ href: "https://github.com/smorimoto",
+ image: "https://github.com/smorimoto.png?size=160",
+ imageAlt: "smorimoto's GitHub avatar",
+ amount: "$100",
+ kind: "individual",
+ },
+ {
+ name: "Ted Brine",
+ href: "https://github.com/tedbrine",
+ image: "https://github.com/tedbrine.png?size=160",
+ imageAlt: "Ted Brine's GitHub avatar",
+ amount: "$20",
+ kind: "individual",
+ },
+ {
+ name: "Leo",
+ href: "https://github.com/leoisadev1",
+ image: "https://github.com/leoisadev1.png?size=160",
+ imageAlt: "Leo's GitHub avatar",
+ amount: "$20",
+ kind: "individual",
+ },
+ {
+ name: "Lasse",
+ href: "https://github.com/lassejlv",
+ image: "https://github.com/lassejlv.png?size=160",
+ imageAlt: "Lasse's GitHub avatar",
+ amount: "$10",
+ kind: "individual",
+ },
+ {
+ name: "Coobyk",
+ href: "https://github.com/Coobyk",
+ image: "https://github.com/Coobyk.png?size=160",
+ imageAlt: "Coobyk's GitHub avatar",
+ amount: "$5",
+ kind: "individual",
+ hideInSingleColumn: true,
+ },
+];
diff --git a/apps/web/src/components/sections/sponsors-section.tsx b/apps/web/src/components/sections/sponsors-section.tsx
new file mode 100644
index 00000000..ebeb9877
--- /dev/null
+++ b/apps/web/src/components/sections/sponsors-section.tsx
@@ -0,0 +1,100 @@
+import { Section, SectionContent } from "@/components/layout/section";
+import { sponsors } from "@/components/sections/sponsors-content";
+import type { Sponsor } from "@/components/sections/sponsors-content";
+import { cn } from "@/lib/utils";
+
+const sponsorLinkClassName =
+ "group relative min-w-0 bg-background before:pointer-events-none before:absolute before:inset-0 before:bg-foreground/[0.03] before:opacity-0 before:transition-opacity hover:before:opacity-100 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:before:opacity-100 focus-visible:outline-none";
+
+function CompanySponsorLink({ sponsor }: { sponsor: Sponsor }) {
+ return (
+
+
+ 
+
+
+ {sponsor.name}
+
+ {sponsor.amount}
+
+
+
+ );
+}
+
+function IndividualSponsorLink({ sponsor }: { sponsor: Sponsor }) {
+ return (
+
+
+
+ {sponsor.name}
+
+ {sponsor.amount}
+
+
+
+ );
+}
+
+export function SponsorsSection() {
+ const companySponsors = sponsors.filter((sponsor) => sponsor.kind === "company");
+ const individualSponsors = sponsors.filter((sponsor) => sponsor.kind === "individual");
+
+ return (
+
+ );
+}