feat(home): Update hero and 'Who We Are' content

Author: eric15342335

src/app/page.tsx

@@ -17,11 +17,19 @@ export default function Home() {
         slides={[
           {
             imageSrc: "/home/Pond Lilies by the Law Faculty.webp",
-            text: "Next generation voices for peace.",
+            text: <i>Next generation voices for peace.</i>,
           },
           {
             imageSrc: "/home/Main Building 4.webp",
-            text: "ALPHA University Chapter at the University of Hong Kong.",
+            text: (
+              <>
+                The first and only global student initiative
+                <br />
+                based in Hong Kong
+                <br />
+                for constructive peace and humanity.
+              </>
+            ),
           },
         ]}
         heightClassName="h-[30rem]"
@@ -61,7 +69,7 @@ export default function Home() {
           }
         >
           <Button asChild>
-            <Link href="/about-us">Explore Our Story</Link>
+            <Link href="/about-us/our-story">Explore Our Story</Link>
           </Button>
         </PageHeader>
       </section>

src/components/sections/hero.tsx

@@ -11,7 +11,7 @@ import Autoplay from "embla-carousel-autoplay";
 
 type HeroSlide = {
   imageSrc: string;
-  text: string;
+  text: string | React.ReactNode;
 };
 
 type HeroProps = {
@@ -51,7 +51,7 @@ export function Hero({ slides, heightClassName }: HeroProps) {
                   style={{ backgroundImage: `url('${slide.imageSrc}')` }}
                 >
                   <div className="absolute inset-0 bg-black/40" />
-                  <span className="relative z-10 text-4xl font-semibold text-center text-white">
+                  <span className="relative z-10 text-2xl md:text-4xl font-semibold text-center text-white">
                     {slide.text}
                   </span>
                 </div>