From 8b6a5fac3d20dea93f1e5d345ced66b17d19fc34 Mon Sep 17 00:00:00 2001
From: J4k3Ng0 <jngow0803@gmail.com>
Date: Sun, 26 Apr 2026 23:03:50 +1000
Subject: [PATCH] Finalised About Page

---
 .../frontend/client/App.tsx                   |   2 +
 .../client/components/MobileNavigation.tsx    |  13 +-
 .../frontend/client/pages/About.tsx           | 121 ++++++++++++++++++
 .../frontend/client/pages/CrowdMonitor.tsx    |  55 +++++---
 .../frontend/package-lock.json                |   2 -
 .../frontend/package.json                     |   2 -
 6 files changed, 171 insertions(+), 24 deletions(-)
 create mode 100644 26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/About.tsx

diff --git a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/App.tsx b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/App.tsx
index 3a56b3cb4..0c0b3e2fd 100644
--- a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/App.tsx
+++ b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/App.tsx
@@ -13,6 +13,7 @@ import Analytics from "./pages/Analytics";
 import Reports from "./pages/Reports";
 import ApiDiagnostics from "./pages/ApiDiagnostics";
 import ErrorDemo from "./pages/ErrorDemo";
+import About from "./pages/About";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient({
@@ -83,6 +84,7 @@ export default function App() {
               <Route path="/analytics" element={<Analytics />} />
               <Route path="/reports" element={<Reports />} />
               <Route path="/api-diagnostics" element={<ApiDiagnostics />} />
+              <Route path="/about" element={<About />} />
               <Route path="/error-demo" element={<ErrorDemo />} />
               <Route path="/stitch" element={<Index />} />
               {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
diff --git a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx
index 0376f6ac3..8f0c79bbe 100644
--- a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx
+++ b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx
@@ -51,6 +51,12 @@ const navigationItems = [
     icon: Terminal,
     description: "System monitoring",
   },
+  {
+  name: "About",
+  href: "/about",
+  icon: Zap, // or any icon you like
+  description: "About this system",
+  },
 ];
 
 export default function MobileNavigation() {
@@ -191,8 +197,8 @@ export default function MobileNavigation() {
 
       {/* Bottom Navigation for Mobile */}
       <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t z-40">
-        <div className="grid grid-cols-5 gap-1">
-          {navigationItems.slice(1, 5).map((item) => {
+        <div className="grid grid-cols-7 gap-10 px-3">
+          {navigationItems.slice(1, 7).map((item) => {
             const Icon = item.icon;
             const active = isActive(item.href);
 
@@ -201,7 +207,8 @@ export default function MobileNavigation() {
                 key={item.name}
                 to={item.href}
                 className={`flex flex-col items-center py-2 px-1 transition-colors ${
-                  active ? "text-green-600" : "text-gray-500"
+                  active 
+                  ? "text-green-600" : "text-gray-500 hover:bg-gray-100 hover:shadow-md hover:scale-[1.02] hover:ring-gray-200"
                 }`}
               >
                 <Icon className="w-5 h-5 mb-1" />
diff --git a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/About.tsx b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/About.tsx
new file mode 100644
index 000000000..546d68667
--- /dev/null
+++ b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/About.tsx
@@ -0,0 +1,121 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import MobileNavigation from "@/components/MobileNavigation";
+
+export default function About() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-blue-50">
+      <MobileNavigation />
+
+      <div className="lg:ml-64 p-6 space-y-6 max-w-5xl">
+        {/* Title */}
+        <h1 className="text-3xl font-bold">About the Project</h1>
+
+        {/* Overview */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Project Overview</CardTitle>
+          </CardHeader>
+          <CardContent className="text-gray-600 leading-relaxed space-y-3">
+            <p>
+              Project 4, RedBack Orion is one of our company's initiatives aimed
+              at redefining sports engagement.
+            </p>
+            <p>
+              The system focuses on building an intelligent, real-time tracking
+              platform for athletes across multiple sports—especially AFL
+              (Footy), one of Australia’s most popular sports.
+            </p>
+            <p>
+              It tracks player performance live while also monitoring crowd
+              density in stadiums to ensure audience safety during peak times.
+            </p>
+          </CardContent>
+        </Card>
+
+          {/* Features */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Features</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6 text-gray-700">
+              
+          {/* Player Performance */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Player Performance</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
+                <li>Live stats: active players, goals, efficiency, disposals</li>
+                <li>Player info: name, age, team, position</li>
+                <li>Detailed stats: kicks, handballs, tackles</li>
+                <li>Performance ratings</li>
+                <li>Heatmaps and analytics</li>
+                <li>Player comparison</li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          {/* Crowd Monitoring */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Crowd Monitoring</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
+                <li>Total attendance and density tracking</li>
+                <li>Real-time stadium heatmap</li>
+                <li>Zone analytics (capacity, flow)</li>
+                <li>Wait times and movement</li>
+                <li>Safety alerts and risk detection</li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          {/* Analytics */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Analytics</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
+                <li>Upload AFL or crowd footage</li>
+                <li>Automated video analysis</li>
+                <li>Generated reports</li>
+                <li>Processing queue tracking</li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          {/* Reports */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Reports</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
+                <li>Download reports</li>
+                <li>Quick report generation</li>
+                <li>Custom report builder</li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          {/* API Diagnostics */}
+          <Card>
+            <CardHeader>
+              <CardTitle>API Diagnostics</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-gray-600">
+                Monitor system performance and debug API interactions in real-time.
+              </p>
+            </CardContent>
+          </Card>
+
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
\ No newline at end of file
diff --git a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx
index 8192889d9..6530752df 100644
--- a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx
+++ b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx
@@ -43,7 +43,7 @@ const generateCrowdData = () => {
       capacity: 15000,
       current: 13200,
       color: "#ef4444", // red-500
-      coordinates: { x: 50, y: 20, width: 40, height: 15 },
+      coordinates: { x: 50, y: 12, width: 40, height: 12 },
       entryPoints: ["Gate A", "Gate B"],
       facilities: ["Toilets", "Food Court", "Merchandise"],
       temperature: 24,
@@ -55,19 +55,24 @@ const generateCrowdData = () => {
       capacity: 8000,
       current: 6800,
       color: "#f97316", // orange-500
-      coordinates: { x: 50, y: 10, width: 40, height: 10 },
+      coordinates: { x: 50, y: 0, width: 40, height: 12 },
       entryPoints: ["Gate A-Upper"],
       facilities: ["Toilets", "Bar"],
       temperature: 26,
       safety: "normal",
     },
+
+
+
+
+
     {
       id: 3,
       name: "Southern Stand - Lower",
       capacity: 12000,
       current: 11400,
       color: "#dc2626", // red-600
-      coordinates: { x: 50, y: 75, width: 40, height: 15 },
+      coordinates: { x: 50, y: 76, width: 40, height: 12 },
       entryPoints: ["Gate C", "Gate D"],
       facilities: ["Toilets", "Food Court", "First Aid"],
       temperature: 23,
@@ -79,7 +84,7 @@ const generateCrowdData = () => {
       capacity: 6000,
       current: 5700,
       color: "#dc2626", // red-600
-      coordinates: { x: 50, y: 90, width: 40, height: 10 },
+      coordinates: { x: 50, y: 88, width: 40, height: 12 },
       entryPoints: ["Gate C-Upper"],
       facilities: ["Premium Bar"],
       temperature: 25,
@@ -115,7 +120,7 @@ const generateCrowdData = () => {
       capacity: 2000,
       current: 1850,
       color: "#dc2626", // red-600
-      coordinates: { x: 50, y: 35, width: 30, height: 8 },
+      coordinates: { x: 50, y: 25, width: 30, height: 12 },
       entryPoints: ["Premium Entrance"],
       facilities: ["VIP Lounge", "Premium Dining"],
       temperature: 21,
@@ -127,7 +132,7 @@ const generateCrowdData = () => {
       capacity: 1500,
       current: 1425,
       color: "#dc2626", // red-600
-      coordinates: { x: 50, y: 57, width: 30, height: 8 },
+      coordinates: { x: 50, y: 63, width: 30, height: 12 },
       entryPoints: ["Premium Entrance"],
       facilities: ["VIP Lounge", "Premium Bar"],
       temperature: 21,
@@ -349,10 +354,16 @@ export default function CrowdMonitor() {
                       <button
                         key={zone.id}
                         onClick={() => setSelectedZone(zone)}
-                        className={`absolute transition-all duration-300 hover:opacity-80 border-2 ${
+                        className={`absolute transition-all duration-300 border-2 
+                           hover:scale-105 hover:z-10 hover:shadow-xl hover:ring-2 hover:ring-white
+                           border-transparent ${
                           selectedZone.id === zone.id
                             ? "border-white border-4"
                             : "border-transparent"
+                        } ${
+                           zone.name.includes("Stand") || zone.name.includes("Premium")
+                             ? "-translate-x-1/2"
+                             : ""
                         }`}
                         style={{
                           left: `${zone.coordinates.x}%`,
@@ -405,13 +416,19 @@ export default function CrowdMonitor() {
                   <CardTitle>{selectedZone.name}</CardTitle>
                   <CardDescription className="flex items-center gap-4">
                     <Badge
-                      variant={
-                        selectedZone.density >= 95
-                          ? "destructive"
-                          : selectedZone.density >= 85
-                            ? "secondary"
-                            : "default"
-                      }
+                      className={`
+                         ${
+                          selectedZone.density >= 95
+                            ? "bg-red-600 text-white"
+                            : selectedZone.density >= 85
+                            ? "bg-orange-500 text-white"
+                            : selectedZone.density >= 70
+                            ? "bg-amber-500 text-white"
+                            : selectedZone.density >= 50
+                            ? "bg-yellow-400 text-black"
+                                : "bg-green-500 text-white"
+                            }
+                          `}
                     >
                       {getDensityLabel(selectedZone.density)}
                     </Badge>
@@ -657,7 +674,9 @@ export default function CrowdMonitor() {
                             .map((zone, index) => (
                               <div
                                 key={zone.id}
-                                className="flex justify-between items-center p-2 bg-gray-50 rounded"
+                                className="flex justify-between items-center p-2 bg-gray-50 rounded transition-all
+                                  duration-300 cursor-pointer hover:bg-gray-100 hover:shadow-md hover:scale-[1.02] 
+                                  hover:ring-2 hover:ring-blue-200"
                               >
                                 <span className="text-sm truncate">
                                   {zone.name}
@@ -685,7 +704,8 @@ export default function CrowdMonitor() {
                 <CardContent>
                   <div className="space-y-3">
                     {criticalZones.length > 0 && (
-                      <div className="p-3 bg-red-50 border border-red-200 rounded">
+                      <div className="p-3 bg-red-50 border border-red-200 rounded transition-all
+                          duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-red-400 cursor-pointer">
                         <div className="flex items-center gap-2 mb-2">
                           <AlertTriangle className="w-5 h-5 text-red-500" />
                           <span className="font-medium text-red-700">
@@ -706,7 +726,8 @@ export default function CrowdMonitor() {
                     )}
 
                     {highDensityZones.length > 0 && (
-                      <div className="p-3 bg-orange-50 border border-orange-200 rounded">
+                      <div className="p-3 bg-orange-50 border border-orange-200 rounded transition-all
+                          duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-orange-400 cursor-pointer">
                         <div className="flex items-center gap-2 mb-2">
                           <Eye className="w-5 h-5 text-orange-500" />
                           <span className="font-medium text-orange-700">
diff --git a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package-lock.json b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package-lock.json
index 55b51768b..357867669 100644
--- a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package-lock.json
+++ b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package-lock.json
@@ -12,8 +12,6 @@
         "google-auth-library": "^10.3.0",
         "jsonwebtoken": "^9.0.2",
         "lucide-react": "^0.541.0",
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0",
         "react-loading-skeleton": "^3.5.0",
         "react-router-dom": "^7.8.2",
         "recharts": "^3.1.2",
diff --git a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package.json b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package.json
index aff81d774..c672dd172 100644
--- a/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package.json
+++ b/26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package.json
@@ -27,8 +27,6 @@
     "google-auth-library": "^10.3.0",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.541.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "react-loading-skeleton": "^3.5.0",
     "react-router-dom": "^7.8.2",
     "recharts": "^3.1.2",