feat: add sponsor tiers

himarplupi · Oct 14, 2024 · 729cba2 · 729cba2
1 parent 4ed3c3b
commit 729cba2
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/components/common/sponsor-media-section.tsx b/src/components/common/sponsor-media-section.tsx
@@ -7,6 +7,7 @@ import LogoMenyala from "@/assets/sponsors/LogoMenyala.png";
 import LogoRuru from "@/assets/sponsors/LogoRuru.jpg";
 import { BlurFade } from "@/components/ui/blur-fade";
 import { Marquee } from "@/components/ui/marquee";
+import { cn } from "@/lib/utils";
 
 type SponsorMediaPartner = {
   name: string;
@@ -24,28 +25,35 @@ const sponsorMediaPartners: SponsorMediaPartner[] = [
   },
   {
     name: "Ruru Snack",
-    logo: LogoMenyala,
+    logo: LogoRuru,
   },
   {
     name: "PT Paragon Technology and Innovation",
     logo: LogoKahf,
   },
   {
     name: "Menyala by OCBC",
-    logo: LogoRuru,
+    logo: LogoMenyala,
   },
 ];
 
-const firstRow = sponsorMediaPartners.slice(0, sponsorMediaPartners.length / 2);
-const secondRow = sponsorMediaPartners.slice(sponsorMediaPartners.length / 2);
+const firstRow = sponsorMediaPartners.slice(0, 3);
+const secondRow = sponsorMediaPartners.slice(3);
 
 const SponsorMediaPartnerCard = ({
   logo,
+  size = "md",
 }: {
   logo: StaticImageData | null;
+  size?: "md" | "lg";
 }) => {
   return (
-    <figure className="relative flex aspect-video h-36 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl object-center p-4">
+    <figure
+      className={cn(
+        "relative flex aspect-video cursor-pointer items-center justify-center overflow-hidden rounded-xl object-center p-4",
+        size === "lg" ? "h-36 w-full" : "h-24 w-48",
+      )}
+    >
       {logo && (
         <Image
           src={logo}
@@ -70,6 +78,7 @@ export function SponsorMediaSection() {
         <Marquee pauseOnHover className="[--duration:10s]">
           {firstRow.map((sponsorMediaPartner) => (
             <SponsorMediaPartnerCard
+              size="lg"
               key={sponsorMediaPartner.name}
               logo={sponsorMediaPartner.logo}
             />