refactor not done

apps/web/src/app/sponsors/page.tsx

@@ -0,0 +1,78 @@
+import { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Sponsor, SPONSORS } from "@/constants/site-constants";
+import { BasePage } from "@/app/base-page";
+
+export const metadata: Metadata = {
+  title: "Sponsors - OpenCut",
+  description:
+    "Support OpenCut and help us build the future of free and open-source video editing.",
+  openGraph: {
+    title: "Sponsors - OpenCut",
+    description:
+      "Support OpenCut and help us build the future of free and open-source video editing.",
+    type: "website",
+  },
+};
+
+export default function SponsorsPage() {
+  return (
+    <BasePage>
+      <div className="flex flex-col gap-8 text-center">
+        <h1 className="text-5xl font-bold tracking-tight md:text-6xl">
+          Sponsors
+        </h1>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
+          Support OpenCut and help us build the future of free and open-source
+          video editing.
+        </p>
+      </div>
+      <SponsorsGrid />
+    </BasePage>
+  );
+}
+
+function SponsorsGrid() {
+  return (
+    <div className="grid gap-6 sm:grid-cols-2">
+      {SPONSORS.map((sponsor) => (
+        <SponsorCard key={sponsor.name} sponsor={sponsor} />
+      ))}
+    </div>
+  );
+}
+
+function SponsorCard({ sponsor }: { sponsor: Sponsor }) {
+  return (
+    <Link
+      href={sponsor.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="h-full w-full"
+    >
+      <Card className="h-full">
+        <CardContent className="flex h-full flex-col justify-center gap-8 p-8">
+          <Image
+            src={sponsor.logo}
+            alt={`${sponsor.name} logo`}
+            width={50}
+            height={50}
+            className="object-contain"
+          />
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <h3 className="text-xl font-semibold group-hover:underline">
+                {sponsor.name}
+              </h3>
+              <ExternalLink className="text-muted-foreground h-4 w-4" />
+            </div>
+            <p className="text-muted-foreground">{sponsor.description}</p>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}