amliq-dashboard 2.0.0

package/src/components/compliance/PEPResultCard.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { Shield, Globe, Calendar, AlertTriangle } from 'lucide-react'
+import { Card } from '../ui/Card'
+import { Badge } from '../ui/Badge'
+import type { PEPProfile } from '../../data/pepProfiles'
+
+const tierColors: Record<string, string> = {
+  Tier1: 'red', Tier2: 'orange', Tier3: 'blue', Tier4: 'green',
+}
+
+export function PEPResultCard({ profile }: { profile: PEPProfile }) {
+  const tierColor = tierColors[profile.tier] || 'gray'
+
+  return (
+    <Card className="space-y-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-md">
+          <div className="w-10 h-10 rounded-full bg-apple-red/20 flex items-center justify-center">
+            <Shield className="w-5 h-5 text-apple-red" />
+          </div>
+          <div>
+            <h3 className="sf-headline">{profile.name}</h3>
+            <p className="sf-caption">{profile.id}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-sm">
+          <Badge color={tierColor as 'red' | 'orange' | 'blue' | 'green'}>{profile.tier}</Badge>
+          {profile.isActive ? (
+            <Badge color="red">Active</Badge>
+          ) : (
+            <Badge color="green">Inactive</Badge>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-lg">
+        <InfoItem icon={Shield} label="Position" value={profile.position} />
+        <InfoItem icon={Globe} label="Country" value={profile.country} />
+        <InfoItem icon={Calendar} label="Since" value={profile.startDate} />
+        <InfoItem icon={AlertTriangle} label="Risk Weight" value={`${(profile.riskWeight * 100).toFixed(0)}%`} />
+      </div>
+
+      {profile.aliases.length > 0 && (
+        <div>
+          <p className="sf-caption mb-sm">Aliases</p>
+          <div className="flex flex-wrap gap-sm">
+            {profile.aliases.map(a => (
+              <span key={a} className="px-md py-xs bg-apple-bg-tertiary rounded-full text-xs">{a}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {profile.sanctions.length > 0 && (
+        <div>
+          <p className="sf-caption mb-sm">Sanctions Lists</p>
+          <div className="flex flex-wrap gap-sm">
+            {profile.sanctions.map(s => (
+              <Badge key={s} color="red">{s}</Badge>
+            ))}
+          </div>
+        </div>
+      )}
+    </Card>
+  )
+}
+
+function InfoItem({ icon: Icon, label, value }: { icon: typeof Shield; label: string; value: string }) {
+  return (
+    <div>
+      <div className="flex items-center gap-xs mb-xs">
+        <Icon className="w-3 h-3 text-apple-label-secondary" />
+        <p className="text-xs text-apple-label-secondary">{label}</p>
+      </div>
+      <p className="sf-body">{value}</p>
+    </div>
+  )
+}

package/src/components/config/MatchingModesCard.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { MatchingModesCard } from './MatchingModesCard'
+
+describe('MatchingModesCard', () => {
+  const defaultProps = {
+    strictMatching: true,
+    autoAlert: false,
+    onChange: vi.fn(),
+  }
+
+  it('renders card title', () => {
+    render(<MatchingModesCard {...defaultProps} />)
+    expect(screen.getByText('Matching Modes')).toBeInTheDocument()
+  })
+
+  it('renders strict matching toggle', () => {
+    render(<MatchingModesCard {...defaultProps} />)
+    expect(screen.getByText('Strict Matching Mode')).toBeInTheDocument()
+  })
+
+  it('renders auto alert toggle', () => {
+    render(<MatchingModesCard {...defaultProps} />)
+    expect(screen.getByText('Automatic Alerting')).toBeInTheDocument()
+  })
+
+  it('displays strict matching description', () => {
+    render(<MatchingModesCard {...defaultProps} />)
+    expect(screen.getByText('Require exact matches on key identifiers')).toBeInTheDocument()
+  })
+
+  it('displays auto alert description', () => {
+    render(<MatchingModesCard {...defaultProps} />)
+    expect(screen.getByText('Automatically create alerts for high-confidence matches')).toBeInTheDocument()
+  })
+
+  it('calls onChange when strict matching toggle clicked', async () => {
+    const handler = vi.fn()
+    render(<MatchingModesCard {...defaultProps} onChange={handler} />)
+    const label = screen.getByText('Strict Matching Mode').closest('label')
+    const toggle = label?.querySelector('div')
+    await userEvent.click(toggle!)
+    expect(handler).toHaveBeenCalledWith('strictMatching', false)
+  })
+
+  it('calls onChange when auto alert toggle clicked', async () => {
+    const handler = vi.fn()
+    render(<MatchingModesCard {...defaultProps} onChange={handler} />)
+    const label = screen.getByText('Automatic Alerting').closest('label')
+    const toggle = label?.querySelector('div')
+    await userEvent.click(toggle!)
+    expect(handler).toHaveBeenCalledWith('autoAlert', true)
+  })
+
+  it('reflects current mode states', () => {
+    const { rerender } = render(
+      <MatchingModesCard
+        strictMatching={true}
+        autoAlert={false}
+        onChange={vi.fn()}
+      />
+    )
+    expect(screen.getByText('Strict Matching Mode')).toBeInTheDocument()
+
+    rerender(
+      <MatchingModesCard
+        strictMatching={false}
+        autoAlert={true}
+        onChange={vi.fn()}
+      />
+    )
+    expect(screen.getByText('Automatic Alerting')).toBeInTheDocument()
+  })
+})

package/src/components/config/MatchingModesCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../ui/Card';
+import { Toggle } from '../ui/Toggle';
+import { Divider } from '../ui/Divider';
+
+interface ModesProps {
+  strictMatching: boolean;
+  autoAlert: boolean;
+  onChange: (key: string, value: boolean) => void;
+}
+
+export function MatchingModesCard({ strictMatching, autoAlert, onChange }: ModesProps) {
+  const { t } = useTranslation('config');
+
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('modes.title')}</h3>
+      <div className="space-y-md">
+        <div>
+          <Toggle
+            checked={strictMatching}
+            onChange={(v) => onChange('strictMatching', v)}
+            label={t('modes.strict')}
+          />
+          <p className="sf-caption mt-sm">{t('modes.strict_desc')}</p>
+        </div>
+        <Divider />
+        <div>
+          <Toggle
+            checked={autoAlert}
+            onChange={(v) => onChange('autoAlert', v)}
+            label={t('modes.auto_alert')}
+          />
+          <p className="sf-caption mt-sm">{t('modes.auto_alert_desc')}</p>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/config/ScreeningLayersCard.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { ScreeningLayersCard } from './ScreeningLayersCard'
+
+describe('ScreeningLayersCard', () => {
+  it('renders card title', () => {
+    render(<ScreeningLayersCard />)
+    expect(screen.getByText('Enabled Screening Layers')).toBeInTheDocument()
+  })
+
+  it('renders all screening layers', () => {
+    render(<ScreeningLayersCard />)
+    expect(screen.getByText(/OFAC Specially Designated Nationals/)).toBeInTheDocument()
+    expect(screen.getByText(/OFAC Consolidated Non-SDN/)).toBeInTheDocument()
+    expect(screen.getByText(/EU Consolidated Sanctions List/)).toBeInTheDocument()
+    expect(screen.getByText(/UN Security Council/)).toBeInTheDocument()
+    expect(screen.getByText(/UK Sanctions List/)).toBeInTheDocument()
+    expect(screen.getByText(/Canada UNSC/)).toBeInTheDocument()
+  })
+
+  it('enables all layers by default', () => {
+    const { container } = render(<ScreeningLayersCard />)
+    const toggles = container.querySelectorAll('div[class*="bg-apple-green"]')
+    expect(toggles.length).toBeGreaterThan(0)
+  })
+
+  it('toggles layer on and off', async () => {
+    render(<ScreeningLayersCard />)
+    const label = screen.getByText(/OFAC Specially Designated Nationals/).closest('label')
+    const toggleDiv = label?.querySelector('div')
+    await userEvent.click(toggleDiv!)
+    await userEvent.click(toggleDiv!)
+    expect(screen.getByText(/OFAC Specially Designated Nationals/)).toBeInTheDocument()
+  })
+
+  it('renders correct number of toggles', () => {
+    render(<ScreeningLayersCard />)
+    const labels = screen.getAllByText(/OFAC|EU|UN|UK|Canada/)
+    expect(labels.length).toBe(6)
+  })
+
+  it('allows toggling individual layers independently', async () => {
+    render(<ScreeningLayersCard />)
+    const ofacLabel = screen.getByText(/OFAC Specially Designated Nationals/).closest('label')
+    const euLabel = screen.getByText(/EU Consolidated Sanctions List/).closest('label')
+
+    const ofacToggle = ofacLabel?.querySelector('div')
+    const euToggle = euLabel?.querySelector('div')
+
+    await userEvent.click(ofacToggle!)
+    await userEvent.click(euToggle!)
+
+    expect(ofacLabel).toBeInTheDocument()
+    expect(euLabel).toBeInTheDocument()
+  })
+})

package/src/components/config/ScreeningLayersCard.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../ui/Card';
+import { Toggle } from '../ui/Toggle';
+
+const layers = [
+  'OFAC Specially Designated Nationals',
+  'OFAC Consolidated Non-SDN',
+  'EU Consolidated Sanctions List',
+  'UN Security Council',
+  'UK Sanctions List',
+  'Canada UNSC',
+];
+
+export function ScreeningLayersCard() {
+  const { t } = useTranslation('config');
+  const [enabled, setEnabled] = React.useState<Record<string, boolean>>(
+    layers.reduce((acc, layer) => ({ ...acc, [layer]: true }), {})
+  );
+
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('layers.title')}</h3>
+      <div className="space-y-md">
+        {layers.map((layer) => (
+          <Toggle
+            key={layer}
+            checked={enabled[layer]}
+            onChange={(v) => setEnabled({ ...enabled, [layer]: v })}
+            label={layer}
+          />
+        ))}
+      </div>
+    </Card>
+  );
+}

package/src/components/config/ThresholdsCard.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { ThresholdsCard } from './ThresholdsCard'
+
+describe('ThresholdsCard', () => {
+  const defaultConfig = {
+    fuzzyThreshold: 50,
+    alertThreshold: 75,
+  }
+
+  it('renders card title', () => {
+    render(<ThresholdsCard config={defaultConfig} onChange={vi.fn()} />)
+    expect(screen.getByText('Thresholds')).toBeInTheDocument()
+  })
+
+  it('renders fuzzy match threshold slider', () => {
+    render(<ThresholdsCard config={defaultConfig} onChange={vi.fn()} />)
+    expect(screen.getByText('Fuzzy Match Threshold')).toBeInTheDocument()
+  })
+
+  it('renders alert threshold slider', () => {
+    render(<ThresholdsCard config={defaultConfig} onChange={vi.fn()} />)
+    expect(screen.getByText('Auto-Alert Threshold')).toBeInTheDocument()
+  })
+
+  it('displays current fuzzy threshold value', () => {
+    render(<ThresholdsCard config={defaultConfig} onChange={vi.fn()} />)
+    expect(screen.getByText('50%')).toBeInTheDocument()
+  })
+
+  it('displays current alert threshold value', () => {
+    render(<ThresholdsCard config={defaultConfig} onChange={vi.fn()} />)
+    const percentages = screen.getAllByText(/\d+%/)
+    expect(percentages.some(el => el.textContent === '75%')).toBe(true)
+  })
+
+  it('updates fuzzy threshold on slider change', () => {
+    const handler = vi.fn()
+    const { container } = render(
+      <ThresholdsCard config={defaultConfig} onChange={handler} />
+    )
+    const sliders = container.querySelectorAll('input[type="range"]')
+    const fuzzySlider = sliders[0] as HTMLInputElement
+
+    fireEvent.change(fuzzySlider, { target: { value: '70' } })
+
+    expect(handler).toHaveBeenCalled()
+  })
+
+  it('updates alert threshold on slider change', () => {
+    const handler = vi.fn()
+    const { container } = render(
+      <ThresholdsCard config={defaultConfig} onChange={handler} />
+    )
+    const sliders = container.querySelectorAll('input[type="range"]')
+    const alertSlider = sliders[1] as HTMLInputElement
+
+    fireEvent.change(alertSlider, { target: { value: '85' } })
+
+    expect(handler).toHaveBeenCalled()
+  })
+
+  it('renders slider descriptions', () => {
+    render(<ThresholdsCard config={defaultConfig} onChange={vi.fn()} />)
+    expect(screen.getByText('Minimum confidence for potential matches')).toBeInTheDocument()
+    expect(screen.getByText('Automatically create alerts at this confidence level')).toBeInTheDocument()
+  })
+
+  it('sliders accept 0-100 range', async () => {
+    const handler = vi.fn()
+    const { container } = render(
+      <ThresholdsCard config={defaultConfig} onChange={handler} />
+    )
+    const sliders = container.querySelectorAll('input[type="range"]')
+    expect(sliders[0]).toHaveAttribute('min', '0')
+    expect(sliders[0]).toHaveAttribute('max', '100')
+  })
+})

package/src/components/config/ThresholdsCard.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../ui/Card';
+import { Divider } from '../ui/Divider';
+
+interface Config {
+  fuzzyThreshold: number;
+  alertThreshold: number;
+}
+
+interface ThresholdsCardProps {
+  config: Config;
+  onChange: (config: Config) => void;
+}
+
+export function ThresholdsCard({ config, onChange }: ThresholdsCardProps) {
+  const { t } = useTranslation('config');
+
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('thresholds.title')}</h3>
+      <div className="space-y-lg">
+        <div>
+          <div className="flex items-center justify-between mb-md">
+            <label className="sf-body">{t('thresholds.fuzzy_match')}</label>
+            <span className="sf-headline">{config.fuzzyThreshold}%</span>
+          </div>
+          <input type="range" min="0" max="100" value={config.fuzzyThreshold}
+            aria-label={t('thresholds.fuzzy_match')}
+            aria-valuetext={`${config.fuzzyThreshold}%`}
+            onChange={(e) => onChange({ ...config, fuzzyThreshold: parseInt(e.target.value) })}
+            className="w-full h-2 bg-apple-bg-tertiary rounded-full appearance-none cursor-pointer accent-apple-blue" />
+          <p className="sf-caption mt-sm">{t('thresholds.fuzzy_match_desc')}</p>
+        </div>
+        <Divider />
+        <div>
+          <div className="flex items-center justify-between mb-md">
+            <label className="sf-body">{t('thresholds.auto_alert')}</label>
+            <span className="sf-headline">{config.alertThreshold}%</span>
+          </div>
+          <input type="range" min="0" max="100" value={config.alertThreshold}
+            aria-label={t('thresholds.auto_alert')}
+            aria-valuetext={`${config.alertThreshold}%`}
+            onChange={(e) => onChange({ ...config, alertThreshold: parseInt(e.target.value) })}
+            className="w-full h-2 bg-apple-bg-tertiary rounded-full appearance-none cursor-pointer accent-apple-blue" />
+          <p className="sf-caption mt-sm">{t('thresholds.auto_alert_desc')}</p>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/dashboard/ActivityFeed.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CheckCircle, AlertCircle, Search, Clock, Shield } from 'lucide-react';
+import { api } from '../../api/client';
+
+interface AuditEntry {
+  id: string;
+  action: string;
+  entity_name?: string;
+  description?: string;
+  created_at: string;
+}
+
+const icons: Record<string, typeof CheckCircle> = {
+  screening: Search, alert_resolved: CheckCircle,
+  alert_escalated: AlertCircle, alert_created: Clock,
+};
+
+const dotColors: Record<string, string> = {
+  screening: 'bg-apple-blue shadow-[0_0_8px_rgba(10,132,255,0.6)]',
+  alert_resolved: 'bg-apple-green shadow-[0_0_8px_rgba(48,209,88,0.6)]',
+  alert_escalated: 'bg-apple-orange shadow-[0_0_8px_rgba(255,159,10,0.6)]',
+  alert_created: 'bg-apple-label-tertiary',
+};
+
+const iconColors: Record<string, string> = {
+  screening: 'text-apple-blue', alert_resolved: 'text-apple-green',
+  alert_escalated: 'text-apple-orange', alert_created: 'text-apple-label-tertiary',
+};
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
+
+export function ActivityFeed() {
+  const { t } = useTranslation('dashboard');
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+
+  useEffect(() => {
+    api.get<{ entries: AuditEntry[] }>('/audit?limit=8')
+      .then(d => setEntries(d?.entries ?? []))
+      .catch(() => setEntries([]))
+  }, []);
+
+  const hasEntries = entries.length > 0;
+
+  return (
+    <div className="card-vibrancy p-xl h-full">
+      <h3 className="sf-headline mb-lg">{t('recent_activity') || 'Recent Activity'}</h3>
+      {!hasEntries && (
+        <div className="flex flex-col items-center justify-center py-xl text-center">
+          <Shield className="w-8 h-8 text-apple-label-tertiary mb-md" />
+          <p className="sf-caption text-apple-label-tertiary">
+            No activity yet. Start screening to see results here.
+          </p>
+        </div>
+      )}
+      {hasEntries && (
+        <div className="relative ml-2">
+          <div className="absolute left-[5px] top-1 bottom-1 w-px bg-gradient-to-b from-white/20 via-white/10 to-transparent" />
+          <div className="space-y-lg">
+            {entries.map((item) => {
+              const type = item.action ?? 'screening';
+              const Icon = icons[type] ?? Search;
+              return (
+                <div key={item.id}
+                  className="relative flex items-start gap-md pl-6 py-sm rounded-apple-md
+                    hover:bg-white/[0.04] transition-all cursor-default">
+                  <div className={`absolute left-0 top-[10px] w-[11px] h-[11px] rounded-full ${dotColors[type] ?? dotColors.screening}`} />
+                  <Icon className={`w-4 h-4 mt-0.5 flex-shrink-0 ${iconColors[type] ?? iconColors.screening}`} />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-[13px] text-white truncate">
+                      {item.entity_name ?? item.description ?? item.action}
+                    </p>
+                    <p className="text-[11px] text-apple-label-tertiary/60 mt-px">
+                      {item.action} &middot; {timeAgo(item.created_at)}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/DashboardGreeting.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useAuth } from '../../context/AuthContext';
+
+export function DashboardGreeting() {
+  const { user } = useAuth();
+  const now = new Date();
+  const hour = now.getHours();
+  const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+  const dateStr = now.toLocaleDateString('en-US', {
+    weekday: 'long', month: 'long', day: 'numeric',
+  });
+  const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+  const name = user?.email?.split('@')[0];
+
+  return (
+    <div className="mb-xxl">
+      <h1 className="text-3xl font-bold tracking-tight text-white mb-xs">
+        {name ? `${greeting}, ${name}` : 'Welcome back'}
+      </h1>
+      <p className="sf-caption">{dateStr} &middot; {timeStr}</p>
+    </div>
+  );
+}

package/src/components/dashboard/DashboardSkeleton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+function SkeletonCard() {
+  return (
+    <div className="card-vibrancy p-xl">
+      <div className="skeleton h-3 w-20 mb-md" />
+      <div className="skeleton h-8 w-24 mb-sm" />
+      <div className="skeleton h-3 w-16" />
+    </div>
+  );
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div>
+      <div className="mb-xxl">
+        <div className="skeleton h-8 w-56 mb-sm" />
+        <div className="skeleton h-3 w-40" />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-lg mb-xxl">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <SkeletonCard key={i} />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-lg">
+        <div className="lg:col-span-2 card-vibrancy p-xl">
+          <div className="skeleton h-48 w-full" />
+        </div>
+        <div className="card-vibrancy p-xl">
+          <div className="skeleton h-48 w-full" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/QuickActions.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Search, UserCheck, Wallet, FileText, Package, Zap } from 'lucide-react'
+
+const actions = [
+  {
+    icon: Search, label: 'Screen Entity', description: 'Run 6-layer sanctions screening',
+    path: '/screen', color: 'from-apple-blue/20 to-apple-blue/5',
+  },
+  {
+    icon: UserCheck, label: 'PEP Check', description: 'Screen politically exposed persons',
+    path: '/compliance/pep', color: 'from-apple-green/20 to-apple-green/5',
+  },
+  {
+    icon: Wallet, label: 'Crypto Scan', description: 'Screen wallet addresses',
+    path: '/compliance/crypto', color: 'from-apple-orange/20 to-apple-orange/5',
+  },
+  {
+    icon: Zap, label: 'Transaction Screen', description: 'Screen payment sender & receiver',
+    path: '/compliance/txn', color: 'from-apple-purple/20 to-apple-purple/5',
+  },
+  {
+    icon: FileText, label: 'Freetext Scan', description: 'Paste a document, extract & screen names',
+    path: '/screen', color: 'from-apple-teal/20 to-apple-teal/5',
+  },
+  {
+    icon: Package, label: 'Batch Jobs', description: 'Screen customer lists in bulk',
+    path: '/batch', color: 'from-apple-indigo/20 to-apple-indigo/5',
+  },
+]
+
+export function QuickActions() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-md">
+      {actions.map(({ icon: Icon, label, description, path, color }) => (
+        <button key={path + label} onClick={() => navigate(path)}
+          className={`text-left p-lg rounded-apple-lg bg-gradient-to-br ${color}
+            border border-white/[0.06] hover:border-white/[0.12]
+            transition-all cursor-pointer group`}>
+          <div className="w-10 h-10 rounded-apple-md bg-white/[0.06] flex items-center justify-center mb-md
+            group-hover:bg-white/[0.1] transition-colors">
+            <Icon className="w-5 h-5 text-white/80" />
+          </div>
+          <p className="sf-headline text-sm mb-xs">{label}</p>
+          <p className="sf-caption text-white/50 text-xs">{description}</p>
+        </button>
+      ))}
+    </div>
+  )
+}