Add Styling Changes for schedule

Add resizable container as well as the ProgressBar component to the schedule page
Changed various padding, and responsiveness for mobile for the EventCard, as well as changing the title inside the ProgressBar

Author: Connor2803

client/src/components/ui/SchedulePage/EventCard.tsx

@@ -18,7 +18,7 @@ export default function EventCard({
   imageSrc,
 }: EventCardProps) {
   return (
-    <div className="mb-14 flex items-start gap-4 rounded-3xl bg-gray-100 p-6">
+    <div className="mb-14 flex flex-col items-center gap-4 rounded-3xl bg-gray-100 p-6 sm:flex-row">
       {/* Text */}
       <div className="min-w-0 flex-[5] pr-4 pt-2">
         <p className="body-lg mb-1 text-secondary">{date}</p>
@@ -65,13 +65,14 @@ export default function EventCard({
         <p className="line-clamp-3 text-text">{description}</p>
       </div>
       {/* Image */}
-      <div className="relative h-[333px] min-w-[411px] flex-[3]">
+      <div className="relative aspect-[411/333] w-full max-w-xs flex-[3] sm:max-w-sm md:max-w-md lg:max-w-lg">
         <Image
           src={imageSrc}
-          alt="placeholder-svg"
+          alt="Event image"
           fill
           className="rounded-2xl object-cover"
           priority
+          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
         />
       </div>
     </div>

client/src/components/ui/SchedulePage/index.tsx

@@ -1,23 +1,13 @@
 import Image from "next/image";
 
+import ProgressBar from "../progress";
 import EventCard from "./EventCard";
 
 export default function SchedulePage() {
   return (
-    <div>
-      <h1 className="title-large text-center font-bold text-dark">
-        {" "}
-        Drone Competition Schedule{" "}
-      </h1>
-      <div className="relative mx-auto h-[80px] w-[1100px]">
-        <Image
-          src="/ProgressBar1.svg"
-          alt="Progress Bar"
-          fill
-          className="object-contain"
-          priority
-        />
-      </div>
+    <div className="container mx-auto px-4 py-8">
+      <ProgressBar pageName="schedule" />
+
       <p className="medium-lg pt-8">Our next competition is: </p>
       <p className="subtitle pb-8 font-bold">Monday - July 9th, 2025</p>
 
@@ -27,7 +17,7 @@ export default function SchedulePage() {
         location="Melbourne Convention Centre"
         time="5:00pm - 8:00pm"
         description="The first stage of the competition kicks off with teams battling it out in the group round."
-        imageSrc="/drone.svg"
+        imageSrc="/drone.jpg"
       />
 
       <EventCard
@@ -36,15 +26,15 @@ export default function SchedulePage() {
         location="Murdoch University"
         time="1:00pm - 4:00pm"
         description="Knock out each other!"
-        imageSrc="/drone.svg"
+        imageSrc="/drone.jpg"
       />
       <EventCard
         date="Wednesday - 11 July 2025"
         title="Finals Day"
         location="Location"
         time="5:00pm - 8:00pm"
         description="The final match to determine the drone champion of 2025!"
-        imageSrc="/drone.svg"
+        imageSrc="/drone.jpg"
       />
     </div>
   );

client/src/components/ui/progress.tsx

@@ -8,7 +8,7 @@ export default function ProgressBar({ pageName }: { pageName: string }) {
   switch (pageName) {
     case "schedule":
       progress = 0;
-      titleName = "Schedule";
+      titleName = "Drone Competition Schedule";
       break;
     case "format-rules":
       progress = 25;
@@ -28,7 +28,9 @@ export default function ProgressBar({ pageName }: { pageName: string }) {
     <div>
       <div className="customerBar w-full flex-col justify-center gap-2">
         <div className="mb-10 flex items-center justify-center">
-          <a className="title-large">{titleName}</a>
+          <a className="title-large text-center text-[2.5rem] font-bold text-dark">
+            {titleName}
+          </a>
         </div>
         <div className="flex flex-1">
           <div

client/src/pages/format-rules.tsx

@@ -102,7 +102,7 @@ const FormatRulesPage: NextPage = () => {
         {/* Navbar is still included from _app.tsx line 46 */}
 
         {/* Main Content - Add pt-20 to avoid being blocked by fixed navbar */}
-        <main className="container mx-auto px-4 py-8 pt-10 md:pt-20">
+        <main className="container mx-auto px-4 py-8 pt-10 md:pt-12">
           <div className="mx-auto px-5 py-10 md:px-12">
             {/* Hero Section */}
             <div className="mb-8 text-center">

client/src/pages/schedule.tsx

@@ -13,7 +13,7 @@ export default function Schedule() {
   return (
     <main
       className={cn(
-        "flex min-h-screen flex-col items-center gap-4 bg-light p-24 font-sans",
+        "md:pt-15 flex min-h-screen flex-col items-center gap-4 bg-light px-4 py-10 pt-4 font-sans md:px-12",
         fontSans.variable,
       )}
     >