feat: make FeaturedProgram component configurable with props

Author: eric15342335

src/app/page.tsx

@@ -24,7 +24,15 @@ export default function Home() {
         ]}
         heightClassName="h-[30rem]"
       />
-      <FeaturedProgram />
+      <FeaturedProgram
+        heading="Featured Program"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        mediaSrc="/favicon/android-chrome-512x512.png"
+        mediaAlt="ALPHA HKU Icon"
+        isVideo={false}
+        ctaHref="/upcoming-event"
+        ctaLabel="Learn More"
+      />
       <WhoWeAre />
       <WhatsHappening />
     </>

src/components/sections/featured-program.tsx

@@ -1,26 +1,59 @@
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import Image from "next/image";
 import Link from "next/link";
 
-export function FeaturedProgram() {
+type FeaturedProgramProps = {
+  heading: string;
+  description: string;
+  mediaSrc: string;
+  mediaAlt?: string;
+  isVideo?: boolean;
+  ctaHref: string;
+  ctaLabel?: string;
+};
+
+export function FeaturedProgram({
+  heading,
+  description,
+  mediaSrc,
+  mediaAlt,
+  isVideo = false,
+  ctaHref,
+  ctaLabel = "Learn More",
+}: FeaturedProgramProps) {
   return (
     <section>
       <div className="container mx-auto px-4">
         <Card className="p-8 border-primary/35 hover:border-primary transition-all">
           <div className="grid md:grid-cols-2 gap-8 items-center">
             <div className="space-y-4">
-              <h2 className="text-3xl font-bold">Featured Program</h2>
-              <p className="text-muted-foreground">
-                This is a description of the featured program. It highlights a key initiative and invites
-                users to learn more.
-              </p>
-              <Button asChild>
-                <Link href="#placeholder">Learn More</Link>
-              </Button>
+              <h2 className="text-3xl font-bold">{heading}</h2>
+              <p className="text-muted-foreground">{description}</p>
+              {ctaHref && ctaLabel ? (
+                <Button asChild>
+                  <Link href={ctaHref}>{ctaLabel}</Link>
+                </Button>
+              ) : null}
             </div>
             <div>
-              <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
-                <p className="text-muted-foreground">Embedded Video</p>
+              <div className="relative aspect-video bg-muted rounded-lg overflow-hidden">
+                {isVideo ? (
+                  <video
+                    src={mediaSrc}
+                    controls
+                    className="h-full w-full object-contain"
+                  />
+                ) : (
+                  <Image
+                    src={mediaSrc}
+                    alt={mediaAlt ?? heading}
+                    fill
+                    className="object-contain"
+                    sizes="(min-width: 768px) 50vw, 100vw"
+                    unoptimized
+                  />
+                )}
               </div>
             </div>
           </div>