feat(web): add sponsors to landing page

apps/web/next.config.js

@@ -4,12 +4,14 @@ import { fileURLToPath } from "node:url";
 import { createMDX } from "fumadocs-mdx/next";
 
 import "../../scripts/load-root-env.js";
-import "./src/env.js";
+import { env } from "./src/env.js";
 
 const withMDX = createMDX();
 const currentDir = dirname(fileURLToPath(import.meta.url));
 const repoRoot = join(currentDir, "../..");
 const remixLucideShim = join(currentDir, "src/lib/lucide-react-remix-shim.ts");
+const faviconDestination =
+  env.NODE_ENV === "development" ? "/favicon/development.svg" : "/favicon/production.svg";
 
 const docsRedirects = [
   { source: "/docs", destination: "/docs/introduction", permanent: true },
@@ -69,6 +71,14 @@ const config = {
       "@radix-ui/react-checkbox",
     ],
   },
+  rewrites: async () => ({
+    beforeFiles: [
+      { source: "/favicon.ico", destination: faviconDestination },
+      { source: "/favicon.svg", destination: faviconDestination },
+    ],
+    afterFiles: [],
+    fallback: [],
+  }),
   redirects: async () => [
     ...docsRedirects,
     { source: "/github", destination: "https://github.com/getpaykit/paykit", permanent: false },
@@ -84,8 +94,7 @@ const config = {
       destination: "https://github.com/orgs/getpaykit/projects/1",
       permanent: false,
     },
-    { source: "/donate", destination: "/sponsor", permanent: true },
-    { source: "/sponsors", destination: "/sponsor", permanent: true },
+    { source: "/donate", destination: "/#sponsors", permanent: true },
   ],
 };
 

apps/web/src/app/(marketing)/page.tsx

@@ -4,6 +4,7 @@ import { FeedbackSection } from "@/components/sections/feedback-section";
 import { FooterSection } from "@/components/sections/footer-section";
 import { HeroSection } from "@/components/sections/hero-section";
 import { demoSnippets } from "@/components/sections/readme-code-content";
+import { SponsorsSection } from "@/components/sections/sponsors-section";
 import { InlineCode } from "@/components/ui/code-block-content";
 import { homePageStructuredData } from "@/lib/consts";
 
@@ -36,6 +37,7 @@ export default function HomePage() {
           }}
         />
         <FeedbackSection />
+        <SponsorsSection />
         <CTASection />
         <FooterSection />
       </div>

apps/web/src/app/layout.tsx

@@ -32,7 +32,7 @@ export const metadata: Metadata = {
   title: { template: `%s | ${SITE_NAME}`, default: SITE_TITLE },
   description: SITE_DESCRIPTION,
   icons: {
-    icon: [{ url: "/favicon/favicon.svg?v=4", type: "image/svg+xml" }],
+    icon: [{ url: "/favicon.svg?v=5", type: "image/svg+xml" }],
     apple: "/favicon/apple-touch-icon.png",
   },
   manifest: "/favicon/site.webmanifest",

apps/web/src/components/layout/navigation-bar.tsx

@@ -49,7 +49,6 @@ function NavLink({
 const navTabs: NavItem[] = [
   { name: "docs", href: "/docs", path: "/docs" },
   { name: "blog", href: "/blog", path: "/blog" },
-  { name: "sponsors", href: "/sponsor", path: "/sponsor" },
 ];
 
 const dropdownLinks: NavItem[] = [

apps/web/src/components/layout/section.tsx

@@ -17,9 +17,17 @@ export function SectionLine({ orientation }: { orientation: "horizontal" | "vert
   );
 }
 
-export function SectionShell({ children, className }: { children: ReactNode; className?: string }) {
+export function SectionShell({
+  children,
+  className,
+  id,
+}: {
+  children: ReactNode;
+  className?: string;
+  id?: string;
+}) {
   return (
-    <div className={cn("relative mx-auto max-w-[72rem]", sectionShellWidth, className)}>
+    <div id={id} className={cn("relative mx-auto max-w-[72rem]", sectionShellWidth, className)}>
       <SectionLine orientation="vertical" />
       <div className="absolute top-0 right-0 h-full">
         <SectionLine orientation="vertical" />
@@ -32,14 +40,16 @@ export function SectionShell({ children, className }: { children: ReactNode; cla
 export function Section({
   children,
   className,
+  id,
   last,
 }: {
   children: ReactNode;
   className?: string;
+  id?: string;
   last?: boolean;
 }) {
   return (
-    <SectionShell className={className}>
+    <SectionShell className={className} id={id}>
       {!last && (
         <div className="absolute bottom-0 left-0 h-px w-full">
           <SectionLine orientation="horizontal" />

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,
+  },
+];

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 (
+    <a
+      className={cn(
+        sponsorLinkClassName,
+        "flex min-h-32 flex-col items-center justify-center gap-2 px-3 py-4 text-center sm:min-h-40 sm:gap-3 sm:px-5 sm:py-6",
+      )}
+      href={sponsor.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <span className="flex size-12 shrink-0 items-center justify-center">
+        <img
+          alt={sponsor.imageAlt}
+          className="size-9 dark:invert"
+          decoding="async"
+          height={36}
+          loading="lazy"
+          src={sponsor.image}
+          width={36}
+        />
+      </span>
+      <span className="min-w-0">
+        <span className="block truncate text-base font-medium">{sponsor.name}</span>
+        <span className="text-muted-foreground mt-0.5 block font-mono text-xs tabular-nums">
+          {sponsor.amount}
+        </span>
+      </span>
+    </a>
+  );
+}
+
+function IndividualSponsorLink({ sponsor }: { sponsor: Sponsor }) {
+  return (
+    <a
+      className={cn(
+        sponsorLinkClassName,
+        "flex items-center gap-2.5 px-3 py-3 sm:gap-3 sm:px-5 sm:py-4",
+        sponsor.hideInSingleColumn && "hidden min-[360px]:flex",
+      )}
+      href={sponsor.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <img
+        alt={sponsor.imageAlt}
+        className="size-9 shrink-0 rounded-full grayscale transition-[filter] group-hover:grayscale-0 group-focus-visible:grayscale-0"
+        decoding="async"
+        height={36}
+        loading="lazy"
+        src={sponsor.image}
+        width={36}
+      />
+      <span className="min-w-0">
+        <span className="block truncate text-sm font-medium">{sponsor.name}</span>
+        <span className="text-muted-foreground mt-0.5 block font-mono text-xs tabular-nums">
+          {sponsor.amount}
+        </span>
+      </span>
+    </a>
+  );
+}
+
+export function SponsorsSection() {
+  const companySponsors = sponsors.filter((sponsor) => sponsor.kind === "company");
+  const individualSponsors = sponsors.filter((sponsor) => sponsor.kind === "individual");
+
+  return (
+    <Section className="scroll-mt-12" id="sponsors">
+      <SectionContent className="relative border-b px-5 py-5 sm:px-8 sm:py-6 lg:px-8 lg:py-6">
+        <div className="max-w-lg space-y-2">
+          <h2 className="text-foreground/90 text-xl font-medium tracking-tight sm:text-2xl">
+            Sponsors
+          </h2>
+        </div>
+      </SectionContent>
+
+      <div className="border-b border-l border-border">
+        <div className="grid grid-cols-2 gap-px bg-border">
+          {companySponsors.map((sponsor) => (
+            <CompanySponsorLink key={sponsor.name} sponsor={sponsor} />
+          ))}
+        </div>
+        <div className="grid grid-cols-1 gap-px border-t border-border bg-border min-[360px]:grid-cols-2 lg:grid-cols-3">
+          {individualSponsors.map((sponsor) => (
+            <IndividualSponsorLink key={sponsor.name} sponsor={sponsor} />
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}