Add Fluxon frontend storefront

frontend/src/ui/Layout.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { Link, NavLink } from "react-router-dom";
+import { useCart } from "../state/CartContext";
+import { useAuth } from "../state/AuthContext";
+
+export function Layout({ children }: { children: ReactNode }) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { itemCount } = useCart();
+  const { user, logout } = useAuth();
+
+  return (
+    <div className="app-shell">
+      <header className="site-header">
+        <Link to="/" className="brand-mark">
+          <span className="brand-badge">F</span>
+          <span>
+            Fluxon
+            <small>Visual commerce demo</small>
+          </span>
+        </Link>
+
+        <button type="button" className="menu-toggle" onClick={() => setMenuOpen((value) => !value)} aria-label="Toggle menu">
+          Menu
+        </button>
+
+        <nav className={`main-nav ${menuOpen ? "open" : ""}`}>
+          <NavLink to="/" onClick={() => setMenuOpen(false)}>
+            Home
+          </NavLink>
+          <NavLink to="/products" onClick={() => setMenuOpen(false)}>
+            Shop
+          </NavLink>
+          <NavLink to="/account" onClick={() => setMenuOpen(false)}>
+            Account
+          </NavLink>
+          {user ? (
+            <button type="button" className="nav-action" onClick={logout}>
+              Logout
+            </button>
+          ) : (
+            <NavLink to="/login" onClick={() => setMenuOpen(false)}>
+              Login
+            </NavLink>
+          )}
+          <NavLink to="/cart" className="cart-link" onClick={() => setMenuOpen(false)}>
+            Cart <span>{itemCount}</span>
+          </NavLink>
+        </nav>
+      </header>
+
+      <main>{children}</main>
+
+      <footer className="site-footer">
+        <div>
+          <strong>Fluxon</strong>
+          <p>Frontend demo built to stay presentable even while the API is still evolving.</p>
+        </div>
+        <div className="footer-grid">
+          <span>Hybrid API mode</span>
+          <span>Responsive storefront</span>
+          <span>Checkout-ready flow</span>
+        </div>
+      </footer>
+    </div>
+  );
+}