refactor(layout): Add top padding to pages and rename Hero prop to content

Author: eric15342335

src/app/about-us/exco/page.tsx

@@ -9,8 +9,8 @@ export const metadata: Metadata = buildPageMetadata("/about-us/exco", { descript
 
 export default function ExecutiveCommittee() {
   return (
-    <section>
-      <div className="container mx-auto p-4">
+    <section className="pt-8">
+      <div className="container mx-auto px-4">
         <PageHeader
           title="Executive Committee"
           description={`${description} Hover a card to learn more.`}

src/app/about-us/our-story/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = buildPageMetadata("/about-us/our-story", { des
 
 export default function OurStory() {
   return (
-    <section className="py-16">
+    <section className="pt-12">
       <PageHeader
         title="Our Story"
         descriptionClassName="text-left"

src/app/about-us/partners/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = buildPageMetadata("/about-us/partners", { desc
 
 export default function Partners() {
   return (
-    <section className="flex min-h-[85vh] flex-col items-center justify-center gap-4 text-center m-auto w-fit">
+    <section className="flex flex-col items-center justify-center gap-4 text-center m-auto w-fit pt-8">
       <PageHeader
         title="Partners"
         descriptionClassName="max-w-2xl"

src/app/join-us/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = buildPageMetadata("/join-us", { description })
 
 export default function JoinUs() {
   return (
-    <section className="flex min-h-[85vh] flex-col items-center justify-center gap-4 text-center m-auto w-fit">
+    <section className="pt-8 flex flex-col items-center gap-4 text-center m-auto w-fit">
       <PageHeader
         title="Join The Team at ALPHA University Chapter at the University of Hong Kong, an initiative with great potential."
         description="We provide opportunities for:"

src/app/page.tsx

@@ -17,11 +17,11 @@ export default function Home() {
         slides={[
           {
             imageSrc: "/home/Pond Lilies by the Law Faculty.webp",
-            text: <i>Next generation voices for peace.</i>,
+            content: <i>Next generation voices for peace.</i>,
           },
           {
             imageSrc: "/home/Main Building 4.webp",
-            text: (
+            content: (
               <>
                 The first and only global student initiative
                 <br />

src/components/sections/hero.tsx

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