chore: kanban template

apps/kanban/src/routes/automations.tsx

@@ -0,0 +1,63 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { Route as RootRoute } from './__root'
+
+export const Route = createFileRoute('/automations')({
+  component: AutomationsPage,
+})
+
+function AutomationsPage() {
+  const { t } = useTranslation()
+  const { cards } = RootRoute.useLoaderData()
+  const total = cards.length
+  const active = cards.filter((card) => card.status === 'doing').length
+
+  const rails = [
+    {
+      key: 'onboarding',
+      state: total > 0 ? 'active' : 'idle',
+    },
+    {
+      key: 'queue',
+      state: active > 0 ? 'warming' : 'standby',
+    },
+    {
+      key: 'surface',
+      state: 'ready',
+    },
+  ] as const
+
+  return (
+    <section className="page-grid">
+      <div className="panel wide">
+        <div className="section-heading">
+          <h2>{t('automations.heading')}</h2>
+          <p>{t('automations.sub')}</p>
+        </div>
+        <div className="automation-list">
+          {rails.map((rail) => (
+            <article key={rail.key} className="automation-card">
+              <div className="automation-topline">
+                <h3>{t(`automations.rails.${rail.key}.name`)}</h3>
+                <span data-state={rail.state}>{t(`automations.states.${rail.state}`)}</span>
+              </div>
+              <p>{t(`automations.rails.${rail.key}.detail`)}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+
+      <div className="panel">
+        <div className="section-heading">
+          <h2>{t('automations.why.heading')}</h2>
+          <p>{t('automations.why.sub')}</p>
+        </div>
+        <ul className="bullet-list">
+          {(t('automations.why.bullets', { returnObjects: true }) as string[]).map((bullet) => (
+            <li key={bullet}>{bullet}</li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}