@hanzo/dashboard 0.2.0 → 0.2.1

package/src/dashboard.css

@@ -0,0 +1,157 @@
+/**
+ * @hanzo/dashboard motion + numeric-face stylesheet.
+ *
+ * Import ONCE in a consumer app (e.g. `import '@hanzo/dashboard/dashboard.css'`).
+ * It ships the CSS the dashboard layer's JS-driven motion pairs with: the loading
+ * shimmer, the live-feed pulse, the fade-up entrance, the deploy-Pipeline track
+ * animations, and the tabular-numeral face for metric values.
+ *
+ * Every animation here is reduced-motion-guarded (→ static) — the count-up + live
+ * sparkline are driven in JS and gated by `prefers-reduced-motion` in the hooks;
+ * these are the pure-CSS bits. One place defines the easing; components apply the
+ * classes. Extracted verbatim from the Hanzo Cloud Console so the "videogame-like"
+ * feel is identical across apps.
+ */
+
+/* Tabular numerals — metric values, prices, counts and IDs align on a fixed
+   advance width so columns of numbers read cleanly (the dashboard-grade detail). */
+.tnum {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+/* Motion — a single fade-up entrance (~0.4s ease-out, small upward travel,
+   staggered by the consumer). One place defines it; <FadeIn> applies the class. */
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-up {
+  animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-up {
+    animation: none;
+  }
+}
+
+/* Overview motion — the "videogame-like" live dashboard. The count-up +
+   live sparkline are driven in JS (rAF, gated by prefers-reduced-motion in the
+   hooks); these are the pure-CSS bits: a loading shimmer, a live-feed pulse, and
+   a brief highlight when a tile's number changes. */
+
+/* Skeleton shimmer — an honest "loading", never fabricated content. */
+@keyframes shimmer {
+  0% {
+    background-position: -160px 0;
+  }
+  100% {
+    background-position: 160px 0;
+  }
+}
+
+.skeleton {
+  background-color: var(--color3, rgba(148, 163, 184, 0.14));
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color4, rgba(148, 163, 184, 0.22)) 50%,
+    transparent 100%
+  );
+  background-size: 160px 100%;
+  background-repeat: no-repeat;
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+
+/* Live-feed pulse — the "Live" dot on a streaming panel. */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+}
+
+/* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
+@keyframes row-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.row-in {
+  animation: row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+  .row-in {
+    animation: none;
+  }
+}
+
+/* Pipeline — the deploy-stage line. A smooth flowing gradient marches along the
+   active leg of the track (stroke-dashoffset), a soft halo pulses out from the
+   current stage, and the status dot breathes. All reduced-motion-guarded (→
+   static). One place defines the easing; Pipeline applies the classes. */
+@keyframes hz-pipe-flow {
+  to {
+    stroke-dashoffset: -28;
+  }
+}
+.hz-pipe-flow {
+  stroke-dasharray: 5 9;
+  animation: hz-pipe-flow 0.85s linear infinite;
+}
+
+@keyframes hz-pipe-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.34;
+  }
+  70% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
+}
+.hz-pipe-pulse {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: hz-pipe-pulse 1.7s ease-out infinite;
+}
+
+.hz-pipe-dot {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-pipe-flow,
+  .hz-pipe-pulse,
+  .hz-pipe-dot {
+    animation: none;
+  }
+}

package/src/index.ts

@@ -0,0 +1,119 @@
+// @hanzo/dashboard — the reusable dashboard layer on @hanzo/gui.
+//
+// Composable dashboard primitives extracted from the Hanzo Cloud Console so every
+// Hanzo app builds the SAME dashboard system: monochrome SVG charts, a live
+// count-up KPI + streaming-feed + health Overview, the Landing kit, and a deploy
+// Pipeline. Each is pure (data via props / a loader), typed, reduced-motion-guarded.
+//
+//   import '@hanzo/dashboard/dashboard.css'   // once, for the motion keyframes
+//   import { Overview, Kpi, Sparkline, Landing, Pipeline } from '@hanzo/dashboard'
+
+// Shared
+export type { IconComponent } from './types'
+
+// ── Charts (the ONE way to draw a trend / series / share / distribution) ─────
+export {
+  Sparkline,
+  Line,
+  Columns,
+  Donut,
+  Bars,
+  useContainerWidth,
+  CHART_PALETTE,
+  CHART_OTHER,
+  type ChartPoint,
+  type Slice,
+} from './charts/Charts'
+
+// ── Motion (pure math + rAF/interval hooks) ──────────────────────────────────
+export { easeOutCubic, countUpValue, progress, pushSample, shouldTick, effectiveInterval } from './motion/motion'
+export { useReducedMotion, usePageHidden, useCountUp, usePoll } from './motion/hooks'
+
+// ── Overview: the videogame-like dashboard ────────────────────────────
+export { Overview } from './overview/Overview'
+export { Tile } from './overview/tiles'
+export { Kpi, Feed, Board, Panel, SkeletonBar, EmptyPanel, PanelSpinner, LiveDot } from './overview/primitives'
+export type { KpiProps, FeedProps, BoardProps } from './overview/primitives'
+export {
+  formatMetric,
+  metricTarget,
+  deltaOf,
+  hasTrend,
+  statusColor,
+  healthColor,
+  severityColor,
+  worstHealth,
+  healthTally,
+  selectKpi,
+  selectSeries,
+  selectDistribution,
+  distributionTotal,
+  mergeActivity,
+  windowRows,
+  ago,
+  isSkeleton,
+  OK,
+  WARN,
+  BAD,
+  MUTED,
+  type Loadable,
+} from './overview/logic'
+export type {
+  OverviewConfig,
+  OverviewContext,
+  OverviewData,
+  OverviewRange,
+  OverviewTile,
+  MetricTile,
+  TimeseriesTile,
+  DistributionTile,
+  ActivityTile,
+  AlertsTile,
+  HealthTile,
+  MetricUnit,
+  LiveConfig,
+  LoadOverview,
+  OverviewKpi,
+  OverviewSeries,
+  OverviewSlice,
+  OverviewPoint,
+  OverviewEvent,
+  OverviewAlert,
+  OverviewHealth,
+} from './overview/config'
+
+// ── Landing kit (Hero / Metrics / Samples / Rail) ────────────────────────────
+export { Landing } from './landing/Landing'
+export { Hero } from './landing/Hero'
+export { Metrics } from './landing/Metrics'
+export { Samples } from './landing/Samples'
+export { Rail } from './landing/Rail'
+export { LandingCard, ActionRow, DeltaChip, openExternal } from './landing/parts'
+export { apexFromDocs, apiBaseFromDocs, landingDocsUrl, standardResources, supportMailto, type StandardResources } from './landing/logic'
+export type {
+  LandingConfig,
+  LandingAction,
+  LandingMetric,
+  ResourceLink,
+  CodeSample,
+  CodeLang,
+} from './landing/types'
+
+// ── Pipeline (deploy-stage line) ─────────────────────────────────────────────
+export { Pipeline, type PipelineProps } from './pipeline/Pipeline'
+export {
+  PIPELINE_STAGES,
+  pipelinePhase,
+  stageIndex,
+  isTerminalPhase,
+  pipelineModel,
+  pipelineTone,
+  type PipelinePhase,
+  type PipelineStage,
+  type PipelineStageName,
+  type PipelineModel,
+  type StageState,
+} from './pipeline/stages'
+
+// ── Analytics: web and product views over analytics.hanzo.ai ─────────────────
+export * from './analytics'

package/src/landing/Hero.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+/**
+ * Hero — the clean product hero (kicker + title + one-line what-it-is + primary
+ * CTA): monochrome-tasteful with a functional accent + a pure-SVG hero graphic.
+ * White-labels by brand (`config.brandName`) and accent (`config.accent`).
+ */
+import type { ComponentProps } from 'react'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+
+import { CHART_PALETTE } from '../charts/Charts'
+import { openExternal } from './parts'
+import type { LandingAction, LandingConfig } from './types'
+
+/** A hex color at an alpha, as an `rgba()`. */
+function hex(h: string, a: number): string {
+  const n = h.replace('#', '')
+  const r = parseInt(n.slice(0, 2), 16)
+  const g = parseInt(n.slice(2, 4), 16)
+  const b = parseInt(n.slice(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+const act = (a: LandingAction) => (a.href ? openExternal(a.href) : a.onPress?.())
+
+export function Hero({ config: c }: { config: LandingConfig }) {
+  const Icon = c.icon
+  const accent = c.accent ?? CHART_PALETTE[0]
+  return (
+    <Card
+      borderWidth={1}
+      borderColor="$borderColor"
+      rounded="$6"
+      p="$5"
+      overflow="hidden"
+      style={{ background: `linear-gradient(115deg, ${hex(accent, 0.16)} 0%, ${hex(accent, 0.04)} 48%, rgba(0,0,0,0) 78%)` }}
+    >
+      <XStack items="center" gap="$4" flexWrap="wrap">
+        <YStack flex={1} minW={280} gap="$2.5">
+          {Icon || c.brandName ? (
+            <XStack items="center" gap="$2">
+              {Icon ? <Icon size={16} color={accent} /> : null}
+              {c.brandName ? (
+                <Text fontSize="$1" color="$color11" fontWeight="700" style={{ letterSpacing: 0.4, textTransform: 'uppercase' }}>
+                  {c.brandName}
+                </Text>
+              ) : null}
+            </XStack>
+          ) : null}
+          <Text fontSize="$8" fontWeight="900" color="$color12">
+            {c.title}
+          </Text>
+          <Text fontSize="$3" color="$color11" maxW={620}>
+            {c.tagline}
+          </Text>
+          {c.primary || c.secondary ? (
+            <XStack gap="$2" pt="$2" flexWrap="wrap" items="center">
+              {c.primary ? (
+                <AccentButton accent={accent} icon={c.primary.icon} onPress={() => act(c.primary as LandingAction)}>
+                  {c.primary.label}
+                </AccentButton>
+              ) : null}
+              {c.secondary ? (
+                <Button icon={c.secondary.icon} onPress={() => act(c.secondary as LandingAction)}>
+                  {c.secondary.label}
+                </Button>
+              ) : null}
+            </XStack>
+          ) : null}
+        </YStack>
+        <YStack items="center" justify="center" minW={170}>
+          <HeroGraphic size={170} accent={accent} />
+        </YStack>
+      </XStack>
+    </Card>
+  )
+}
+
+/** The one high-emphasis accent action (a filled button on the brand accent). */
+function AccentButton({ accent, children, ...props }: { accent: string } & ComponentProps<typeof Button>) {
+  return (
+    <Button {...props} borderWidth={1} style={{ backgroundColor: accent, borderColor: accent, color: '#fff' }} hoverStyle={{ opacity: 0.92 }} pressStyle={{ opacity: 0.85 }}>
+      {children}
+    </Button>
+  )
+}
+
+/** A pure-SVG hero motif — a glowing isometric "serving unit" cube. */
+function HeroGraphic({ size = 170, accent = CHART_PALETTE[0] }: { size?: number; accent?: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 200 200" aria-hidden style={{ display: 'block', maxWidth: '100%' }}>
+      <defs>
+        <radialGradient id="hz-hero-glow" cx="50%" cy="45%" r="60%">
+          <stop offset="0%" stopColor={accent} stopOpacity="0.55" />
+          <stop offset="55%" stopColor={accent} stopOpacity="0.14" />
+          <stop offset="100%" stopColor={accent} stopOpacity="0" />
+        </radialGradient>
+        <linearGradient id="hz-hero-cube" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#a78bfa" />
+          <stop offset="100%" stopColor={accent} />
+        </linearGradient>
+      </defs>
+      <circle cx="100" cy="96" r="92" fill="url(#hz-hero-glow)" />
+      {[74, 56, 40].map((r, i) => (
+        <circle key={r} cx="100" cy="96" r={r} fill="none" stroke={accent} strokeOpacity={0.18 + i * 0.12} strokeWidth={1.5} />
+      ))}
+      <g transform="translate(100 96)">
+        <polygon points="0,-34 30,-17 30,17 0,34 -30,17 -30,-17" fill="url(#hz-hero-cube)" fillOpacity="0.9" />
+        <polygon points="0,-34 30,-17 0,0 -30,-17" fill="#c4b5fd" fillOpacity="0.85" />
+        <polygon points="0,0 30,-17 30,17 0,34" fill={accent} fillOpacity="0.7" />
+        <polygon points="0,0 -30,-17 -30,17 0,34" fill="#6d28d9" fillOpacity="0.7" />
+      </g>
+    </svg>
+  )
+}

package/src/landing/Landing.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+/**
+ * Landing — the reusable polished landing/overview any product composes from a
+ * small `LandingConfig`: a clean hero, a live count-up metrics row, an interactive
+ * code-sample block (curl/python/ts/js + copy + Run), and a resources rail
+ * (docs/quickstart/examples/code/support). DRY — one landing system across products.
+ *
+ * Layout: hero on top, then a two-column body (main content + resource rail) that
+ * wraps to a single column on narrow viewports. `children` is the product's own
+ * REAL content, rendered below the code block so a product keeps everything it
+ * already had — this is polish, not a rewrite.
+ */
+import { useRef, type ReactNode } from 'react'
+import { XStack, YStack } from '@hanzo/gui'
+
+import { Hero } from './Hero'
+import { Metrics } from './Metrics'
+import { Samples } from './Samples'
+import { Rail } from './Rail'
+import type { LandingConfig } from './types'
+
+export function Landing({ config, children }: { config: LandingConfig; children?: ReactNode }) {
+  const codeRef = useRef<HTMLDivElement>(null)
+  const hasCode = Boolean(config.samples && config.samples.length)
+  const scrollToCode = () => codeRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+  return (
+    <YStack gap="$4">
+      <Hero config={config} />
+
+      <XStack gap="$4" flexWrap="wrap" items="flex-start">
+        <YStack flex={2} minW={360} gap="$4">
+          <Metrics config={config} />
+          {hasCode ? (
+            <div ref={codeRef} style={{ width: '100%' }}>
+              <Samples samples={config.samples as NonNullable<LandingConfig['samples']>} run={config.run} />
+            </div>
+          ) : null}
+          {children}
+        </YStack>
+
+        <Rail config={config} onViewCode={hasCode ? scrollToCode : undefined} />
+      </XStack>
+    </YStack>
+  )
+}

package/src/landing/Metrics.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+/**
+ * Metrics — the live KPI row for a landing. Count-up values + real sparklines +
+ * honest deltas, reusing the motion system (`useCountUp`/`usePoll`/
+ * `useReducedMotion`) and the shared `Sparkline`. Two modes:
+ *  - controlled: the parent passes `config.metrics` (it owns the data / reload);
+ *  - self-loading: `config.loadMetrics` (+ optional `pollMs`) fetches + polls here.
+ * Honest throughout: a null value renders "—", a background poll failure keeps the
+ * last real data, and a first-load failure shows a quiet note (metrics are
+ * supplementary — never a full error card).
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Card, Text, XStack, YStack } from '@hanzo/gui'
+
+import { CHART_PALETTE, Sparkline } from '../charts/Charts'
+import { useCountUp, usePoll, useReducedMotion } from '../motion/hooks'
+import { DeltaChip } from './parts'
+import type { LandingConfig, LandingMetric } from './types'
+
+export function Metrics({ config }: { config: LandingConfig }) {
+  const reduced = useReducedMotion()
+  const controlled = config.metrics !== undefined
+  const load = config.loadMetrics
+  const accent = config.accent ?? CHART_PALETTE[0]
+
+  const [metrics, setMetrics] = useState<LandingMetric[] | null>(config.metrics ?? null)
+  const [failed, setFailed] = useState(false)
+  const hasData = useRef(false)
+  hasData.current = metrics !== null
+
+  const { tick } = usePoll(!controlled && load && config.pollMs ? config.pollMs : 0)
+
+  // Controlled: mirror the parent-provided metrics.
+  useEffect(() => {
+    if (controlled) setMetrics(config.metrics ?? null)
+  }, [controlled, config.metrics])
+
+  // Self-loading: fetch (and re-fetch on each poll tick). Keep last-good on error.
+  useEffect(() => {
+    if (controlled || !load) return
+    let cancelled = false
+    void load()
+      .then((m) => {
+        if (!cancelled) {
+          setMetrics(m)
+          setFailed(false)
+        }
+      })
+      .catch(() => {
+        if (!cancelled && !hasData.current) setFailed(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [controlled, load, tick])
+
+  if (!metrics) {
+    if (failed) return <MetricsNote text="Live metrics aren’t connected for your organization yet — nothing is fabricated." />
+    if (!controlled && load) return <MetricsSkeleton />
+    return null
+  }
+  if (metrics.length === 0) return null
+
+  return (
+    <XStack flexWrap="wrap" gap="$3">
+      {metrics.map((m) => (
+        <MetricCard key={m.key} metric={m} reduced={reduced} accent={accent} />
+      ))}
+    </XStack>
+  )
+}
+
+function MetricCard({ metric, reduced, accent }: { metric: LandingMetric; reduced: boolean; accent: string }) {
+  const finite = metric.value != null && Number.isFinite(metric.value)
+  const target = finite ? (metric.value as number) : 0
+
+  // Count up from zero on first mount (then re-animate on every value change). Seeding
+  // via an after-mount effect means `useCountUp` animates 0 → value instead of snapping.
+  const [seeded, setSeeded] = useState(false)
+  useEffect(() => {
+    setSeeded(true)
+  }, [])
+  const shown = useCountUp(seeded ? target : 0, !reduced && finite)
+  const fmt = metric.format ?? ((n: number) => Math.round(n).toLocaleString())
+
+  return (
+    <Card p="$3.5" gap="$2" borderWidth={1} borderColor="$borderColor" bg="$color2" flex={1} minW={168}>
+      <XStack items="center" justify="space-between" gap="$2">
+        <Text fontSize="$2" color="$color10" numberOfLines={1}>
+          {metric.label}
+        </Text>
+        {metric.icon ?? null}
+      </XStack>
+      <Text fontSize="$8" fontWeight="900" color={finite ? '$color12' : '$color10'} numberOfLines={1}>
+        {finite ? fmt(shown) : '—'}
+      </Text>
+      <XStack items="center" justify="space-between" gap="$2" minH={22}>
+        {metric.deltaPct !== undefined ? <DeltaChip pct={metric.deltaPct ?? null} /> : <YStack />}
+        {metric.series && metric.series.filter((v) => Number.isFinite(v)).length >= 2 ? (
+          <Sparkline values={metric.series} width={72} height={22} color={accent} />
+        ) : metric.hint ? (
+          <Text fontSize="$1" color="$color9" numberOfLines={1}>
+            {metric.hint}
+          </Text>
+        ) : null}
+      </XStack>
+    </Card>
+  )
+}
+
+function MetricsSkeleton() {
+  return (
+    <XStack flexWrap="wrap" gap="$3">
+      {[0, 1, 2, 3].map((i) => (
+        <Card key={i} p="$3.5" gap="$2.5" borderWidth={1} borderColor="$borderColor" bg="$color2" flex={1} minW={168}>
+          <div className="skeleton" style={{ height: 10, width: '55%', borderRadius: 4 }} />
+          <div className="skeleton" style={{ height: 26, width: '72%', borderRadius: 6 }} />
+          <div className="skeleton" style={{ height: 10, width: '40%', borderRadius: 4 }} />
+        </Card>
+      ))}
+    </XStack>
+  )
+}
+
+function MetricsNote({ text }: { text: string }) {
+  return (
+    <Card p="$3.5" borderWidth={1} borderColor="$borderColor" bg="$color2">
+      <Text fontSize="$2" color="$color10">
+        {text}
+      </Text>
+    </Card>
+  )
+}

package/src/landing/Rail.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+/**
+ * Rail — the right rail of a product landing (Documentation, Quick Start, Examples,
+ * Code samples, API Reference, Quick Actions, Support). Every row is a REAL link
+ * (docs derived from `config.docsUrl`) or an in-console action — no dead rows.
+ * "Code samples" scrolls to the interactive block; Community/Support are opt-in
+ * (`config.discordUrl` / `config.supportEmail`), never a hardcoded brand link.
+ */
+import { YStack } from '@hanzo/gui'
+import { BookOpen, Boxes, Code2, LifeBuoy, MessageSquare, Rocket, Zap } from '@hanzogui/lucide-icons-2'
+
+import { ActionRow, LandingCard, openExternal } from './parts'
+import { apexFromDocs, standardResources } from './logic'
+import type { LandingAction, LandingConfig } from './types'
+
+const runAction = (a: LandingAction) => (a.href ? openExternal(a.href) : a.onPress?.())
+
+export function Rail({ config, onViewCode }: { config: LandingConfig; onViewCode?: () => void }) {
+  const docs = config.docsUrl
+  const std = standardResources(docs, config.docsProduct)
+  const apex = apexFromDocs(docs)
+  const supportAddr = config.supportEmail ?? `support@${apex}`
+  const support = `mailto:${supportAddr}`
+
+  return (
+    <YStack gap="$4" flex={1} minW={280}>
+      <LandingCard title="Resources" p="$3">
+        <YStack gap="$0.5">
+          <ActionRow icon={<BookOpen size={15} />} label="Documentation" sub="Guides & concepts" onPress={() => openExternal(std.docs)} />
+          <ActionRow icon={<Rocket size={15} />} label="Quick Start" sub="Ship in minutes" onPress={() => openExternal(std.quickstart)} />
+          <ActionRow icon={<Boxes size={15} />} label="Examples" sub="Sample projects" onPress={() => openExternal(std.examples)} />
+          {onViewCode ? <ActionRow icon={<Code2 size={15} />} label="Code samples" sub="Copy a real API call" onPress={onViewCode} /> : null}
+          <ActionRow icon={<Zap size={15} />} label="API Reference" sub={`api.${apex}`} onPress={() => openExternal(std.api)} />
+          {config.resources?.map((r) => (
+            <ActionRow key={r.id} icon={r.icon} label={r.label} sub={r.sub} onPress={() => (r.href ? openExternal(r.href) : r.onPress?.())} />
+          ))}
+        </YStack>
+      </LandingCard>
+
+      {config.actions?.length ? (
+        <LandingCard title="Quick Actions" p="$3">
+          <YStack gap="$0.5">
+            {config.actions.map((a) => (
+              <ActionRow key={a.label} icon={a.icon} label={a.label} onPress={() => runAction(a)} />
+            ))}
+          </YStack>
+        </LandingCard>
+      ) : null}
+
+      <LandingCard title="Need help?" p="$3">
+        <YStack gap="$0.5">
+          {config.discordUrl ? (
+            <ActionRow icon={<MessageSquare size={15} />} label="Community" sub="Join the chat" onPress={() => openExternal(config.discordUrl as string)} />
+          ) : null}
+          <ActionRow icon={<LifeBuoy size={15} />} label="Contact Support" sub={supportAddr} onPress={() => openExternal(support)} />
+        </YStack>
+      </LandingCard>
+    </YStack>
+  )
+}