Layout & Upload page skeleton

backend/main.go

@@ -10,5 +10,5 @@ func main() {
     r.GET("/health", func(c *gin.Context) {
         c.JSON(http.StatusOK, gin.H{"status": "ok"})
     })
-    r.Run()   // listens on :8080
+    r.Run()
 }

frontend/package-lock.json

@@ -10,8 +10,10 @@
       "dependencies": {
         "@ifrc-go/icons": "^2.0.1",
         "@ifrc-go/ui": "^1.3.0",
+        "lucide-react": "^0.525.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.30.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.30.1",
@@ -870,6 +872,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
@@ -3326,6 +3337,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.525.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
+      "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -3804,6 +3824,38 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
+      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
+      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",

frontend/package.json

@@ -29,7 +29,9 @@
   "dependencies": {
     "@ifrc-go/icons": "^2.0.1",
     "@ifrc-go/ui": "^1.3.0",
+    "lucide-react": "^0.525.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.30.1"
   }
 }

frontend/src/App.tsx

@@ -1,11 +1,24 @@
-import { Button } from "@ifrc-go/ui";
+/* src/App.tsx */
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import RootLayout from './layouts/RootLayout';
+import UploadPage from './pages/UploadPage';
+import AnalyticsPage from './pages/AnalyticsPage';
+import ExplorePage from './pages/ExplorePage';
+import HelpPage from './pages/HelpPage';
 
-function App() {
-  return (
-    <main className="flex flex-col items-center gap-6 p-8">
-      <h1 className="text-3xl font-bold text-ifrcRed">PromptAid Vision</h1>
-      <Button name="ifrc-button" size={2} variant="primary">IFRC Button</Button>
-    </main>
-  );
+const router = createBrowserRouter([
+  {
+    element: <RootLayout />,   // header sticks here
+    children: [
+      { path: '/',          element: <UploadPage /> },
+      { path: '/upload',    element: <UploadPage /> },
+      { path: '/analytics', element: <AnalyticsPage /> },
+      { path: '/explore',   element: <ExplorePage /> },
+      { path: '/help',      element: <HelpPage /> },
+    ],
+  },
+]);
+
+export default function App() {
+  return <RouterProvider router={router} />;
 }
-export default App;

frontend/src/components/HeaderNav.tsx

@@ -0,0 +1,50 @@
+import { NavLink } from "react-router-dom";
+import { IconButton } from "@ifrc-go/ui";
+import {
+  UploadCloudLineIcon,
+  AnalysisIcon,
+  SearchLineIcon,
+  QuestionLineIcon,
+} from "@ifrc-go/icons";
+
+/* Style helper for active vs. inactive nav links */
+const navLink = ({ isActive }: { isActive: boolean }) =>
+  `flex items-center gap-1 px-3 py-2 text-sm transition-colors ${
+    isActive ? "text-ifrcRed font-semibold" : "text-gray-600 hover:text-ifrcRed"
+  }`;
+
+/* Put page info in one list so it’s easy to extend */
+const navItems = [
+  { to: "/upload",    label: "Upload",    Icon: UploadCloudLineIcon },
+  { to: "/analytics", label: "Analytics", Icon: AnalysisIcon },
+  { to: "/explore",   label: "Explore",   Icon: SearchLineIcon },
+];
+
+export default function HeaderNav() {
+  return (
+    <header className="bg-white border-b border-ifrcRed/40">
+      <div className="flex items-center justify-between px-6 py-3">
+
+        {/* ── Logo + title ─────────────────────────── */}
+        <NavLink to="/" className="flex items-center gap-2">
+          <img src="/ifrc-logo.svg" alt="IFRC logo" className="h-6" />
+          <span className="font-semibold">PromptAid Vision</span>
+        </NavLink>
+
+        {/* ── Centre nav links ─────────────────────── */}
+        <nav className="flex gap-6">
+          {navItems.map(({ to, label, Icon }) => (
+            <NavLink key={to} to={to} className={navLink}>
+              <Icon className="w-4 h-4" /> {label}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* ── Right-side utility buttons ───────────── */}
+        <NavLink to="/help" className={navLink}>
+          <QuestionLineIcon className="w-4 h-4" />
+        </NavLink>
+      </div>
+    </header>
+  );
+}

frontend/src/layouts/RootLayout.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom';
+import HeaderNav from '../components/HeaderNav';
+
+export default function RootLayout() {
+  return (
+    <>
+      <HeaderNav />
+      {/* All routed pages render here */}
+      <Outlet />
+    </>
+  );
+}

frontend/src/pages/AnalyticsPage.tsx

@@ -0,0 +1,9 @@
+import { PageContainer, Heading } from '@ifrc-go/ui';
+
+export default function AnalyticsPage() {
+  return (
+    <PageContainer className="py-10 text-center">
+      <Heading level={2}>Analytics</Heading>
+    </PageContainer>
+  );
+}

frontend/src/pages/ExplorePage.tsx

@@ -0,0 +1,9 @@
+import { PageContainer, Heading } from '@ifrc-go/ui';
+
+export default function ExplorePage() {
+  return (
+    <PageContainer className="py-10 text-center">
+      <Heading level={2}>Explore Dataset</Heading>
+    </PageContainer>
+  );
+}

frontend/src/pages/HelpPage.tsx

@@ -0,0 +1,9 @@
+import { PageContainer, Heading } from '@ifrc-go/ui';
+
+export default function HelpPage() {
+  return (
+    <PageContainer className="py-10 text-center">
+      <Heading level={2}>Help &amp; Support</Heading>
+    </PageContainer>
+  );
+}

frontend/src/pages/UploadPage.tsx

@@ -0,0 +1,109 @@
+/*  UploadPage.tsx  ------------------------------------------------------ */
+import { useCallback, useState } from 'react';
+import type { DragEvent } from 'react';
+import {
+  PageContainer,
+  Heading,
+  Button,
+  RawFileInput,   // thin wrapper around <input type="file">
+  Container,
+} from '@ifrc-go/ui';
+import {
+  UploadCloudLineIcon,
+  ArrowRightLineIcon,
+} from '@ifrc-go/icons';
+import { Link } from 'react-router-dom';
+
+export default function UploadPage() {
+  const [file, setFile] = useState<File | null>(null);
+
+  /* ---- drag-and-drop + file-picker handlers -------------------------- */
+  const onDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const dropped = e.dataTransfer.files?.[0];
+    if (dropped) setFile(dropped);
+  }, []);
+
+  const onFileChange = useCallback<
+    React.ChangeEventHandler<HTMLInputElement>
+  >((e) => {
+    const chosen = e.target.files?.[0];
+    if (chosen) setFile(chosen);
+  }, []);
+
+  /* ------------------------------------------------------------------- */
+  return (
+    <PageContainer>
+      <div className="mx-auto max-w-3xl text-center px-4 py-10">
+        {/* Title & intro copy */}
+        <Heading level={2}>Upload Your Crisis Map</Heading>
+
+        <p className="mt-3 text-gray-700 leading-relaxed">
+          This app evaluates how well multimodal AI models turn emergency maps
+          into meaningful text. Upload your map, let the AI generate a
+          description, then review and rate the result based on your expertise.
+        </p>
+
+        {/* “More »” link  */}
+        <div className="mt-2">
+          <Link 
+            to="/help" 
+            className="text-ifrcRed text-xs hover:underline flex items-center gap-1"
+          >
+            More <ArrowRightLineIcon className="w-3 h-3" />
+          </Link>
+        </div>
+
+        {/* Drop-zone */}
+        <div
+          className="mt-10 border-2 border-dashed border-gray-300 bg-gray-50
+                     rounded-xl p-10 flex flex-col items-center gap-4
+                     hover:bg-gray-100 transition-colors"
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={onDrop}
+        >
+          <UploadCloudLineIcon className="w-10 h-10 text-ifrcRed" />
+
+          {file ? (
+            <p className="text-sm font-medium text-gray-800">
+              Selected file: {file.name}
+            </p>
+          ) : (
+            <>
+              <p className="text-sm text-gray-600">
+                Drag &amp; Drop a file here
+              </p>
+              <p className="text-xs text-gray-500">or</p>
+
+              {/* File-picker button */}
+              <input
+                type="file"
+                accept="image/*"
+                onChange={onFileChange}
+                className="hidden"
+                id="file-upload"
+              />
+              <label htmlFor="file-upload" className="cursor-pointer">
+                <button className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
+                  Upload
+                </button>
+              </label>
+            </>
+          )}
+        </div>
+
+        {/* Generate button */}
+        <Button
+          name="generate"
+          className="mt-8"
+          disabled={!file}
+          onClick={() => {
+            /* TODO: POST /maps, then POST /maps/{id}/caption */
+          }}
+        >
+          Generate
+        </Button>
+      </div>
+    </PageContainer>
+  );
+}