Merge pull request #35 from codersforcauses/issue-2-Create_landing_page

Issue 2 create landing page

Author: allyharrison

.vscode/settings.json

@@ -9,5 +9,6 @@
   "typescript.tsdk": "${workspaceFolder}/client/node_modules/typescript/lib",
   "shellcheck.ignorePatterns": {
     "**/.env*": true
-  }
+  },
+  "editor.formatOnSave": true
 }

client/public/aicodeLogo.png

@@ -58,7 +58,7 @@ const CheckList: React.FC = () => {
   const completionPercentage = (completedCount / items.length) * 100;
 
   return (
-    <section className="mx-auto max-w-md">
+    <section className="mx-auto">
       {/* Main Card Container */}
       <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
         {/* Header Section */}
@@ -146,11 +146,11 @@ const CheckList: React.FC = () => {
         {/* Footer Section */}
         {completionPercentage === 100 && (
           <div className="border-t border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4">
-            <div className="flex items-center gap-3">
-              <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-green-600">
+            <div className="flex place-content-center items-center gap-6 align-middle">
+              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-green-600">
                 <CheckmarkIcon />
               </div>
-              <div>
+              <div className="px-auto">
                 <p className="body-lg text-green-800">
                   Equipment ready! Your drone meets all requirements
                 </p>

client/public/drone.jpg

@@ -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/public/squadroneLogo.png

@@ -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/FormatRules/CheckList.tsx

@@ -4,19 +4,10 @@ import { useRouter } from "next/router";
 import * as React from "react";
 import { FaFacebookF, FaInstagram } from "react-icons/fa";
 
+import { navlinks } from "@/lib/constants";
+
 export default function Footer() {
   const router = useRouter();
-  type NavLink = {
-    label: string;
-    href: string;
-  };
-  const navlinks: NavLink[] = [
-    { label: "Home", href: "/" },
-    { label: "Schedule", href: "/schedule" },
-    { label: "Format & Rules", href: "/format-rules" },
-    { label: "Guests & Sponsors", href: "/guests-sponsors" },
-    { label: "Leaderboard", href: "/leaderboard" },
-  ];
   return (
     <footer className="bg-dark px-6 py-12 text-light">
       <div className="mx-auto max-w-7xl">

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

@@ -4,63 +4,45 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 import { FiAlignJustify, FiX } from "react-icons/fi";
 
+import { navlinks } from "@/lib/constants";
+
 export default function Navbar() {
   const router = useRouter();
   const [menuOpen, setMenuOpen] = useState(false);
-  type NavLink = {
-    label: string;
-    href: string;
-  };
-  const navlinks: NavLink[] = [
-    { label: "Home", href: "/" },
-    { label: "Schedule", href: "/schedule" },
-    { label: "Format & Rules", href: "/format-rules" },
-    { label: "Guests & Sponsors", href: "/guests-sponsors" },
-    { label: "Leaderboard", href: "/leaderboard" },
-  ];
+
   const handleNav = () => {
     setMenuOpen(!menuOpen);
   };
   return (
-    <div className="fixed left-0 right-0 top-0 h-16 w-full bg-light">
+    <div className="fixed left-0 right-0 top-0 z-50 h-16 w-full bg-white shadow">
       <nav className="medium-sm mx-auto flex h-full max-w-7xl items-center justify-between">
         {/* Logo container */}
         <div className="relative mx-10 flex h-10 w-28 items-center">
-          <Image
+          <p>Logo</p>
+          {/* <Image
             className="object-contain"
             src="https://squadrone.com.au/wp-content/uploads/2024/11/squadrone-logo-01-scaled.webp"
             alt="Squadrone Logo"
             width={2560}
             height={889}
-          />
+          /> */}
         </div>
 
         {/* Navbar options/links container */}
-        <div className="hidden items-center gap-8 lg:flex">
-          {navlinks.map((link) => {
-            if (link.label === "Leaderboard") {
-              return (
-                <Link
-                  className="btn-primary mr-10"
-                  key={link.href}
-                  href={link.href}
-                >
-                  View Leaderboard
-                </Link>
-              );
-            }
-            return (
-              <Link
-                key={link.href}
-                href={link.href}
-                className={
-                  router.pathname === link.href ? "nav-link-active" : "nav-link"
-                }
-              >
-                {link.label}
-              </Link>
-            );
-          })}
+        <div className="hidden items-center gap-8 pr-6 lg:flex">
+          {navlinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={
+                router.pathname === link.href
+                  ? "nav-link-active"
+                  : "nav-link-base"
+              }
+            >
+              {link.label}
+            </Link>
+          ))}
         </div>
         {/* Mobile navbar */}
         <button onClick={handleNav} className="mr-5 lg:hidden">

client/src/components/ui/SchedulePage/index.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