Phase 2 and Demo

2026-05-02 20:14:15 -05:00
parent d909cb7c30
commit 056bd27f89
36 changed files with 3867 additions and 299 deletions
@@ -1,27 +1,100 @@
 /**
- * Bidder home – event welcome screen, quick nav to Live / Silent / My Bids.
- * TODO: fetch event details, show upcoming lots, paddle number, QR code.
+ * Bidder home — welcome screen, quick nav cards, event status strip.
+ * TODO: fetch active event details from /api/events/active.
 */
+import { Link } from "react-router-dom";
+import { useAuthStore, bidderName } from "../../store/auth.js";
+
+// ── Quick-action cards ─────────────────────────────────────────────────────────
+const QUICK_ACTIONS = [
+  {
+    to: "/live",
+    label: "Live Auction",
+    sub: "Bid in real time",
+    bg: "bg-brand-700",
+    text: "text-white",
+    sub_text: "text-brand-200",
+    icon: "🎙",
+  },
+  {
+    to: "/silent",
+    label: "Silent Auction",
+    sub: "Browse & place bids",
+    bg: "bg-gold-500",
+    text: "text-white",
+    sub_text: "text-gold-100",
+    icon: "🏷️",
+  },
+  {
+    to: "/my-bids",
+    label: "My Bids",
+    sub: "Track your activity",
+    bg: "bg-white",
+    text: "text-brand-800",
+    sub_text: "text-gray-400",
+    icon: "📋",
+    border: true,
+  },
+  {
+    to: "/checkout",
+    label: "Checkout",
+    sub: "Pay for won items",
+    bg: "bg-white",
+    text: "text-brand-800",
+    sub_text: "text-gray-400",
+    icon: "💳",
+    border: true,
+  },
+] as const;
+
 export default function HomePage() {
+  const bidder = useAuthStore((s) => s.bidder);
+
  return (
-    <main className="p-4 space-y-4">
-      <h1 className="text-2xl font-bold">Welcome to the Auction</h1>
-      <nav className="grid grid-cols-2 gap-3">
-        {[
-          { label: "🎙 Live Auction", href: "/live" },
-          { label: "🔇 Silent Auction", href: "/silent" },
-          { label: "📋 My Bids", href: "/my-bids" },
-          { label: "💳 Checkout", href: "/checkout" },
-        ].map(({ label, href }) => (
-          <a
-            key={href}
-            href={href}
-            className="block rounded-xl border border-gray-200 p-5 text-center font-semibold text-brand-700 hover:bg-brand-50"
-          >
-            {label}
-          </a>
-        ))}
-      </nav>
-    </main>
+    <div className="flex flex-col min-h-full">
+      {/* ── Hero strip ── */}
+      <div className="bg-brand-700 px-5 pt-6 pb-8">
+        <p className="text-brand-200 text-xs font-semibold uppercase tracking-widest mb-1">
+          Welcome back
+        </p>
+        <h1 className="text-white text-2xl font-black tracking-tight leading-tight">
+          {bidderName(bidder)}
+        </h1>
+        {bidder?.paddleNumber && (
+          <div className="inline-flex items-center gap-2 mt-3 bg-brand-800/60 rounded-xl px-3 py-1.5">
+            <span className="text-gold-300 font-black text-lg">#{bidder.paddleNumber}</span>
+            <span className="text-brand-200 text-xs">Your paddle number</span>
+          </div>
+        )}
+      </div>
+
+      {/* ── Cards grid (overlaps hero by 1rem) ── */}
+      <div className="px-4 -mt-4 space-y-3">
+        {/* Event status card */}
+        <div className="card px-4 py-3 flex items-center gap-3 animate-fade-in">
+          <span className="text-2xl">🌿</span>
+          <div>
+            <p className="font-semibold text-sm text-gray-800">Storybook Farm Charity Gala</p>
+            <p className="text-xs text-gray-400 mt-0.5">Auction is live — good luck!</p>
+          </div>
+          <span className="ml-auto w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+        </div>
+
+        {/* Quick-action grid */}
+        <div className="grid grid-cols-2 gap-3 pb-4">
+          {QUICK_ACTIONS.map(({ to, label, sub, bg, text, sub_text, icon, border }) => (
+            <Link
+              key={to}
+              to={to}
+              className={`rounded-2xl p-4 flex flex-col gap-1 shadow-card active:scale-[0.97] transition-transform ${bg} ${border ? "border border-gray-100" : ""}`}
+            >
+              <span className="text-2xl leading-none">{icon}</span>
+              <p className={`font-bold text-sm mt-1 ${text}`}>{label}</p>
+              <p className={`text-xs ${sub_text}`}>{sub}</p>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
  );
 }