feat(empty-states): startkort on six pages with strata imagery (#1603)

Replace the true-empty states on Kundfakturor, Transaktioner, Underlag,
Loner, Bokforing and Skattekonto with StartCard: a self-contained dark
hero (image-derived ground baked into the strata render, white primary
CTA) that says what the page can do instead of what is missing. Primary
CTAs lead with the connect/setup action per page (bank via PSD2 deep
link, mailboxes, Skatteverket, migration import); filtered/search empty
states and viewer fallbacks keep the old compact states. Design signed
off in the Startkort prototype iterations 2026-08-13.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

components/transactions/InboxZeroState.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components/ui/button'
 import { EmptyState } from '@/components/ui/empty-state'
+import { StartCard } from '@/components/dashboard/StartCard'
 import { Check, Upload, Plus } from 'lucide-react'
 import Link from 'next/link'
 
@@ -13,22 +14,24 @@ interface InboxZeroStateProps {
 
 export default function InboxZeroState({ hasTransactions, onCreateTransaction }: InboxZeroStateProps) {
   const t = useTranslations('tx_inbox_zero')
+  const tStart = useTranslations('start_cards')
 
   if (!hasTransactions) {
-    // No transactions at all
+    // No transactions at all: the start card leads with the bank connection
+    // (the import page's own "Rekommenderat" path) and keeps the bank-file
+    // import as the alternative. Manual creation stays reachable from the
+    // header split button.
     return (
-      <EmptyState icon={Upload} title={t('empty_title')} description={t('empty_description')}>
-        <Button asChild>
-          <Link href="/import">
-            <Upload className="mr-2 h-4 w-4" />
-            {t('import_btn')}
-          </Link>
-        </Button>
-        <Button variant="outline" onClick={onCreateTransaction}>
-          <Plus className="mr-2 h-4 w-4" />
-          {t('add_manual_btn')}
-        </Button>
-      </EmptyState>
+      <div className="animate-fade-in">
+        <StartCard
+          card="sthlm"
+          layout="bleed-left"
+          title={tStart('transactions_title')}
+          body={tStart('transactions_body')}
+          primary={{ label: tStart('transactions_primary'), href: '/import?mode=psd2' }}
+          secondary={{ label: tStart('transactions_secondary'), href: '/import?mode=bank' }}
+        />
+      </div>
     )
   }