Ensure sponsor logos use light background

src/app/routes.ts

@@ -12,6 +12,7 @@ export default [
     // route("/schedule", "./routes/Schedule.tsx"),
     route("/program", "./routes/Program.tsx"),
     route("/organizers", "./routes/Organizers.tsx"),
+    route("/sponsors", "./routes/Sponsors.tsx"),
     route("/sponsorship", "./routes/Sponsorship.tsx"),
     // route("/past-events", "./routes/PastEvents.tsx"),
     route("/contact", "./routes/Contact.tsx"),

src/app/routes/Sponsors.tsx

@@ -0,0 +1,98 @@
+import type { MetaFunction } from "react-router";
+import { ExternalLink } from "lucide-react";
+
+import { Button } from "../../components/ui/button";
+import { Card, CardContent, CardFooter } from "../../components/ui/card";
+import sponsorsData from "../../data/sponsors.json";
+
+import { createMeta } from "@/lib/metadata";
+
+export const meta: MetaFunction = () =>
+  createMeta({
+    title: "Sponsors",
+    description: "TODO",
+    path: "/sponsors",
+  });
+
+function Sponsors() {
+  return (
+    <main className="container px-6 py-8 space-y-12 xl:w-6xl">
+      {/* Header */}
+      <section className="space-y-4 text-center">
+        <h1 className="text-3xl sm:text-4xl font-bold tracking-tighter">
+          {sponsorsData.title}
+        </h1>
+        {/* <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          {sponsorsData.subtitle}
+        </p> */}
+      </section>
+
+      {/* Sponsors */}
+      <section className="space-y-6">
+        {/* <div className="space-y-2">
+          <h2 className="text-2xl sm:text-3xl font-bold tracking-tighter">
+            Sponsors
+          </h2>
+          <p className="text-muted-foreground">
+            Workshop organization and coordination
+          </p>
+        </div> */}
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {sponsorsData.sponsors.map((spnsor, index) => (
+            <Card key={index}>
+              {/* <CardHeader>
+                <CardTitle>{spnsor.name}</CardTitle>
+                <CardDescription>{spnsor.affiliation}</CardDescription>
+              </CardHeader> */}
+              <CardContent>
+                <div className="space-y-4">
+                  {/* <div className="aspect-square bg-muted rounded-md flex items-center justify-center">
+                    <img
+                      src={spnsor.photo}
+                      alt={`Photo of ${spnsor.name}`}
+                      className="object-cover w-full h-full"
+                      loading="lazy"
+                    />
+                  </div> */}
+                  <div className="bg-white dark:bg-white aspect-square rounded-md flex items-center justify-center p-4">
+                    <img
+                      src={spnsor.photo}
+                      alt={`Photo of ${spnsor.name}`}
+                      className="max-h-40 sm:max-h-64 md:max-h-40 w-auto object-contain"
+                      loading="lazy"
+                    />
+                  </div>
+                  {/* <p className="text-sm text-muted-foreground">{chair.bio}</p> */}
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-between">
+                {/* <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex gap-2"
+                  asChild
+                >
+                  <a href={`mailto:${chair.email}`}>
+                    <Mail className="h-4 w-4" /> Email
+                  </a>
+                </Button> */}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex gap-2"
+                  asChild
+                >
+                  <a href={spnsor.website} target="_blank" rel="noreferrer">
+                    Website <ExternalLink className="h-4 w-4" />
+                  </a>
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export default Sponsors;

src/components/footer.tsx

@@ -101,6 +101,12 @@ export function Footer() {
           >
             Organizers
           </Link>
+          <Link
+            to="/sponsors"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            Sponsors
+          </Link>
           <Link
             to="/sponsorship"
             className="text-sm text-muted-foreground hover:text-foreground"

src/components/header.tsx

@@ -17,6 +17,7 @@ const navItems = [
   // { name: "Schedule", path: "/iccv2025/schedule" },
   { name: "Program", path: "/program" },
   { name: "Organizers", path: "/organizers" },
+  { name: "Sponsors", path: "/sponsors" },
   { name: "Sponsorship Opportunities", path: "/sponsorship" },
   // { name: "Past Events", path: "/iccv2025/past-events" },
   { name: "Contact", path: "/contact" },

src/data/sponsors.json

@@ -0,0 +1,24 @@
+{
+  "title": "Sponsors",
+  "subtitle": "Meet the team behind the Machine Learning Workshop",
+  "sponsors": [
+    {
+      "name": "ExaWizards Inc.",
+      "affiliation": "ExaWizards Inc.",
+      "photo": "/sponsors/exawizards.png",
+      "website": "https://exawizards.com/en/"
+    },
+    {
+      "name": "SB Intuitions",
+      "affiliation": "SB Intuitions",
+      "photo": "/sponsors/sbint.png",
+      "website": "https://www.sbintuitions.co.jp/en/"
+    },
+    {
+      "name": "LY Corporation",
+      "affiliation": "LY Corporation",
+      "photo": "/sponsors/ly.png",
+      "website": "https://www.lycorp.co.jp/en"
+    }
+  ]
+}