feat: Add customizable CTA labels for homepage sections

Author: eric15342335

src/app/page.tsx

@@ -31,7 +31,7 @@ export default function Home() {
         mediaAlt="ALPHA HKU Icon"
         isVideo={false}
         ctaHref="/upcoming-event"
-        ctaLabel="Learn More"
+        ctaLabel="Learn More About This Program"
       />
       <WhoWeAre />
       <WhatsHappening
@@ -41,19 +41,22 @@ export default function Home() {
             description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             image: "/file.svg",
             href: "/upcoming-event",
+            ctaLabel: "Magis Cognoscere",
           },
           {
             title: "Event 2",
             description: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
             image: "/globe.svg",
             href: "/upcoming-event",
+            ctaLabel: "Plura Lege",
           },
           {
             title: "Event 3",
             description:
               "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
             image: "/window.svg",
             href: "/upcoming-event",
+            ctaLabel: "Explorare Porro",
           },
         ]}
       />

src/components/sections/whats-happening.tsx

@@ -6,6 +6,7 @@ type WhatsHappeningEvent = {
   description: string;
   image: string;
   href: string;
+  ctaLabel: string;
 };
 
 export function WhatsHappening({ events }: { events: WhatsHappeningEvent[] }) {
@@ -27,14 +28,14 @@ export function WhatsHappening({ events }: { events: WhatsHappeningEvent[] }) {
                   className="rounded-lg object-contain"
                 />
               </div>
-              <div className="space-y-2">
+              <div className="space-y-2 flex flex-col flex-1">
                 <h3 className="text-2xl font-semibold">{event.title}</h3>
                 <p className="text-muted-foreground">{event.description}</p>
                 <a
                   href={event.href}
-                  className="text-primary hover:underline mt-2 inline-block"
+                  className="text-primary hover:underline mt-auto pt-2 inline-block"
                 >
-                  Read More
+                  {event.ctaLabel}
                 </a>
               </div>
             </Card>