feat(web): unify landing and routed page premium UI

Author: ritik0506

apps/web/src/components/AgentTimeline.tsx

@@ -4,27 +4,15 @@ import type { AgentState } from "../hooks/useJobStream";
 
 export function AgentTimeline({ agents }: { agents: AgentState[] }) {
   return (
-    <div style={{ position: "relative" }}>
+    <div className="sf-agent-timeline">
       {/* Vertical connector line */}
-      <div
-        style={{
-          position: "absolute",
-          left: "39px",
-          top: "24px",
-          bottom: "24px",
-          width: "2px",
-          background: "linear-gradient(to bottom, #6366f1, #8b5cf6, #23232f)",
-          borderRadius: "1px",
-          zIndex: 0,
-        }}
-      />
+      <div className="sf-agent-timeline-line" />
 
-      <div style={{ display: "flex", flexDirection: "column", gap: "12px", position: "relative", zIndex: 1 }}>
-        {agents.map((agent, i) => (
+      <div className="sf-agent-timeline-list">
+        {agents.map((agent) => (
           <div
             key={agent.name}
             className="animate-fade-in"
-            style={{ animationDelay: `${i * 60}ms`, animationFillMode: "both" }}
           >
             <AgentCard agent={agent} />
           </div>

apps/web/src/components/Layout.tsx

@@ -5,78 +5,26 @@ export function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation();
 
   return (
-    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
-      {/* ─── Navbar ─────────────────────────────────────────────────────── */}
-      <nav
-        style={{
-          position: "sticky",
-          top: 0,
-          zIndex: 100,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "0 32px",
-          height: "64px",
-          background: "rgba(10, 10, 15, 0.8)",
-          backdropFilter: "blur(16px) saturate(180%)",
-          borderBottom: "1px solid #23232f",
-        }}
-      >
+    <div className="sf-shell">
+      <nav className="sf-nav">
         <Link
           to="/"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "10px",
-            textDecoration: "none",
-            color: "#f0f0f5",
-          }}
+          className="sf-logo"
         >
-          {/* Logo icon */}
-          <div
-            style={{
-              width: "32px",
-              height: "32px",
-              borderRadius: "8px",
-              background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "16px",
-              fontWeight: 800,
-              color: "#fff",
-              boxShadow: "0 2px 8px rgba(99, 102, 241, 0.3)",
-            }}
-          >
-            S
-          </div>
-          <span style={{ fontSize: "18px", fontWeight: 700, letterSpacing: "-0.02em" }}>
-            Stack<span style={{ color: "#8b5cf6" }}>Forge</span>
-          </span>
+          <div className="sf-logo-icon">S</div>
+          <span>StackForge</span>
         </Link>
 
-        <div style={{ display: "flex", alignItems: "center", gap: "24px" }}>
+        <div className="sf-nav-links">
           <NavLink to="/" active={location.pathname === "/"}>
             Home
           </NavLink>
         </div>
       </nav>
 
-      {/* ─── Main ──────────────────────────────────────────────────────── */}
-      <main style={{ flex: 1 }}>{children}</main>
+      <main className="sf-main">{children}</main>
 
-      {/* ─── Footer ────────────────────────────────────────────────────── */}
-      <footer
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "24px 32px",
-          borderTop: "1px solid #23232f",
-          fontSize: "13px",
-          color: "#5c5c6f",
-        }}
-      >
+      <footer className="sf-footer">
         Built with AI agents&nbsp;·&nbsp;StackForge © {new Date().getFullYear()}
       </footer>
     </div>
@@ -95,16 +43,7 @@ function NavLink({
   return (
     <Link
       to={to}
-      style={{
-        fontSize: "14px",
-        fontWeight: active ? 600 : 400,
-        color: active ? "#f0f0f5" : "#9898a8",
-        textDecoration: "none",
-        transition: "color 250ms",
-        position: "relative",
-        paddingBottom: "2px",
-        borderBottom: active ? "2px solid #6366f1" : "2px solid transparent",
-      }}
+      className={`sf-nav-link ${active ? "is-active" : ""}`}
     >
       {children}
     </Link>

apps/web/src/components/TelemetryPanel.tsx

@@ -72,13 +72,7 @@ function AnimatedNumber({
   }, [watchValue]);
 
   return (
-    <span
-      style={{
-        display: "inline-block",
-        transform: pulse ? "scale(1.1)" : "scale(1)",
-        transition: "transform 200ms ease",
-      }}
-    >
+    <span className={`sf-telemetry-animated-number ${pulse ? "is-pulse" : ""}`}>
       {display}
     </span>
   );
@@ -155,24 +149,13 @@ export function TelemetryPanel({ jobId, isDemo = false }: { jobId?: string; isDe
 
   return (
     <aside
-      style={{
-        position: "fixed",
-        right: "20px",
-        bottom: "20px",
-        width: "min(360px, calc(100vw - 32px))",
-        zIndex: 40,
-        background: "#12121b",
-        border: "1px solid #23232f",
-        borderRadius: "14px",
-        boxShadow: "0 14px 38px rgba(0, 0, 0, 0.45)",
-        padding: "16px",
-      }}
+      className="sf-telemetry-panel"
     >
-      <div style={{ fontSize: "15px", fontWeight: 700, marginBottom: "12px", color: "#f0f0f5" }}>
+      <div className="sf-telemetry-title">
         📊 This Run
       </div>
 
-      <div style={{ borderTop: "1px solid #23232f", borderBottom: "1px solid #23232f", padding: "12px 0" }}>
+      <div className="sf-telemetry-stats-wrap">
         <StatRow
           label="Total tokens"
           value={<AnimatedNumber display={formatInt(telemetry.totalTokensUsed)} watchValue={telemetry.totalTokensUsed} />}
@@ -196,34 +179,34 @@ export function TelemetryPanel({ jobId, isDemo = false }: { jobId?: string; isDe
         />
       </div>
 
-      <div style={{ marginTop: "12px" }}>
-        <div style={{ fontSize: "13px", color: "#9898a8", marginBottom: "10px" }}>Provider breakdown:</div>
+      <div className="sf-telemetry-group">
+        <div className="sf-telemetry-group-title">Provider breakdown:</div>
         {providerRows.length === 0 && (
-          <div style={{ fontSize: "12px", color: "#6f6f84" }}>No provider calls yet</div>
+          <div className="sf-telemetry-empty">No provider calls yet</div>
         )}
         {providerRows.map((row, index) => (
           <ProviderRow
             key={`provider-${row.name}`}
             name={toDisplayName(row.name)}
             calls={row.calls}
             ratio={providerTotalCalls > 0 ? (row.calls / providerTotalCalls) * 100 : 0}
-            color={index % 2 === 0 ? "#3b82f6" : "#a855f7"}
+            variant={index % 2 === 0 ? "provider-a" : "provider-b"}
           />
         ))}
       </div>
 
-      <div style={{ marginTop: "10px" }}>
-        <div style={{ fontSize: "13px", color: "#9898a8", marginBottom: "10px" }}>Model breakdown:</div>
+      <div className="sf-telemetry-group sf-telemetry-group-tight">
+        <div className="sf-telemetry-group-title">Model breakdown:</div>
         {modelRows.length === 0 && (
-          <div style={{ fontSize: "12px", color: "#6f6f84" }}>No model calls yet</div>
+          <div className="sf-telemetry-empty">No model calls yet</div>
         )}
         {modelRows.map((row, index) => (
           <ProviderRow
             key={`model-${row.name}`}
             name={row.name}
             calls={row.calls}
             ratio={modelTotalCalls > 0 ? (row.calls / modelTotalCalls) * 100 : 0}
-            color={index % 2 === 0 ? "#22c55e" : "#14b8a6"}
+            variant={index % 2 === 0 ? "model-a" : "model-b"}
           />
         ))}
       </div>
@@ -233,18 +216,9 @@ export function TelemetryPanel({ jobId, isDemo = false }: { jobId?: string; isDe
 
 function StatRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        fontSize: "13px",
-        color: "#f0f0f5",
-        marginBottom: "7px",
-      }}
-    >
-      <span style={{ color: "#9898a8" }}>{label}</span>
-      <strong style={{ fontWeight: 700 }}>{value}</strong>
+    <div className="sf-telemetry-stat-row">
+      <span className="sf-telemetry-stat-label">{label}</span>
+      <strong className="sf-telemetry-stat-value">{value}</strong>
     </div>
   );
 }
@@ -253,31 +227,23 @@ function ProviderRow({
   name,
   calls,
   ratio,
-  color,
+  variant,
 }: {
   name: string;
   calls: number;
   ratio: number;
-  color: string;
+  variant: "provider-a" | "provider-b" | "model-a" | "model-b";
 }) {
   return (
-    <div style={{ display: "grid", gridTemplateColumns: "minmax(84px, 1fr) 2fr auto", alignItems: "center", gap: "8px", marginBottom: "8px" }}>
+    <div className="sf-telemetry-provider-row">
       <span
         title={name}
-        style={{
-          fontSize: "12px",
-          color: "#f0f0f5",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-        }}
+        className="sf-telemetry-provider-name"
       >
         {name}
       </span>
-      <div style={{ background: "#1d1d2a", borderRadius: "999px", height: "10px", overflow: "hidden" }}>
-        <div style={{ width: `${ratio}%`, height: "100%", transition: "width 300ms ease", background: color }} />
-      </div>
-      <span style={{ fontSize: "12px", color: "#9898a8", minWidth: "56px", textAlign: "right" }}>{calls} calls</span>
+      <progress className={`sf-telemetry-provider-progress is-${variant}`} max={100} value={ratio} />
+      <span className="sf-telemetry-provider-calls">{calls} calls</span>
     </div>
   );
 }