amliq-dashboard 2.0.0

package/src/pages/billing/SeatManager.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getSeats, addSeat, removeSeat } from '../../api/billing'
+import { SeatRow } from './SeatRow'
+import { Seat } from '../../types/billing'
+import { Plus } from 'lucide-react'
+
+export function SeatManager() {
+  const { t } = useTranslation('billing')
+  const [seats, setSeats] = useState<Seat[]>([])
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState('Investigator')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getSeats()
+      .then(s => setSeats(s))
+      .catch(() => setSeats([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleAdd = async () => {
+    if (!email) return
+    const newSeat = await addSeat(email, role)
+    setSeats([...seats, newSeat])
+    setEmail('')
+    setRole('Investigator')
+  }
+
+  const handleRemove = async (userId: string) => {
+    await removeSeat(userId)
+    setSeats(seats.filter(s => s.userId !== userId))
+  }
+
+  if (loading) return <div className="sf-body text-apple-label-secondary">{t('seats.loading')}</div>
+
+  return (
+    <div className="space-y-md">
+      <div className="flex flex-col sm:flex-row gap-xs">
+        <input
+          type="email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          placeholder={t('seats.email_placeholder')}
+          aria-label={t('seats.email_placeholder')}
+          className="flex-1 px-md py-sm bg-white/5 border border-white/10 rounded-apple-md sf-body text-white placeholder:text-apple-label-secondary focus:outline-none focus:ring-2 focus:ring-apple-blue focus:border-apple-blue"
+        />
+        <div className="flex gap-xs">
+          <select
+            value={role}
+            onChange={e => setRole(e.target.value)}
+            aria-label={t('seats.role')}
+            className="flex-1 sm:flex-none px-md py-sm bg-white/5 border border-white/10 rounded-apple-md sf-body text-white focus:outline-none focus:ring-2 focus:ring-apple-blue focus:border-apple-blue"
+          >
+            <option>{t('seats.investigator')}</option>
+            <option>{t('seats.analyst')}</option>
+            <option>{t('seats.manager')}</option>
+          </select>
+          <button
+            onClick={handleAdd}
+            aria-label={t('seats.add')}
+            className="px-md py-sm bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md flex items-center gap-xs transition-colors cursor-pointer"
+          >
+            <Plus className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-xs">
+        {seats.map(seat => (
+          <SeatRow key={seat.userId} seat={seat} onRemove={handleRemove} />
+        ))}
+      </div>
+
+      <p className="sf-caption text-apple-label-secondary">
+        {t('seats.used', { current: seats.length, total: 3 })}
+      </p>
+    </div>
+  )
+}

package/src/pages/billing/SeatRow.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Seat } from '../../types/billing'
+import { X } from 'lucide-react'
+
+interface SeatRowProps {
+  seat: Seat
+  onRemove: (userId: string) => void
+}
+
+export function SeatRow({ seat, onRemove }: SeatRowProps) {
+  const initials = (seat.email ?? '').split('@')[0].slice(0, 2).toUpperCase() || '??'
+
+  return (
+    <div className="flex items-center justify-between p-md bg-white/5 rounded-apple-md hover:bg-white/10 transition-colors">
+      <div className="flex items-center gap-md">
+        <div className="w-8 h-8 rounded-apple-md bg-apple-blue/20 flex items-center justify-center">
+          <span className="text-xs font-medium text-apple-blue">{initials}</span>
+        </div>
+        <div>
+          <p className="sf-body text-white">{seat.email}</p>
+          <p className="sf-caption text-apple-label-secondary">{seat.role}</p>
+        </div>
+      </div>
+      <button
+        onClick={() => onRemove(seat.userId)}
+        className="p-xs hover:bg-red-600/20 rounded-apple-md text-red-400 transition-colors"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}

package/src/pages/billing/SubscriptionCard.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Subscription } from '../../types/billing'
+import { Zap, LayoutDashboard, Code, Code2, FileText } from 'lucide-react'
+import clsx from 'clsx'
+
+interface SubscriptionCardProps {
+  subscription: Subscription
+}
+
+const productIcons = {
+  api: Zap,
+  dashboard: LayoutDashboard,
+  sdk: Code,
+  iframe: Code2,
+  dataset: FileText
+}
+
+const productNames = {
+  api: 'API Access',
+  dashboard: 'Dashboard',
+  sdk: 'SDK',
+  iframe: 'iFrame Widget',
+  dataset: 'Dataset CSV'
+}
+
+export function SubscriptionCard({ subscription }: SubscriptionCardProps) {
+  const { t } = useTranslation('billing')
+  const Icon = productIcons[subscription.product as keyof typeof productIcons] ?? Zap
+  const name = productNames[subscription.product as keyof typeof productNames] ?? subscription.product
+  const price = subscription.plan?.monthlyPrice ?? 0
+  const renewDate = new Date(subscription.currentPeriodEnd)
+
+  return (
+    <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg hover:border-white/20 transition-colors">
+      <div className="flex items-start justify-between mb-md">
+        <div className="flex items-center gap-md">
+          <div className="p-md bg-apple-blue/20 rounded-apple-md">
+            <Icon className="w-5 h-5 text-apple-blue" />
+          </div>
+          <div>
+            <h3 className="sf-body font-medium text-white">{name}</h3>
+            <p className="sf-caption text-apple-label-secondary">{subscription.plan?.name ?? 'Free'} plan</p>
+          </div>
+        </div>
+        <span className={clsx('text-xs font-medium px-md py-xs rounded-apple-md', subscription.status === 'active' ? 'bg-green-600/20 text-green-400' : 'bg-yellow-600/20 text-yellow-400')}>
+          {subscription.status}
+        </span>
+      </div>
+
+      <div className="space-y-sm mb-lg">
+        <div className="flex justify-between">
+          <span className="sf-caption text-apple-label-secondary">{t('subscriptions.monthly_cost')}</span>
+          <span className="sf-body text-white">${price}</span>
+        </div>
+        {subscription.seatCount && (
+          <div className="flex justify-between">
+            <span className="sf-caption text-apple-label-secondary">{t('subscriptions.active_seats')}</span>
+            <span className="sf-body text-white">{subscription.seatCount}</span>
+          </div>
+        )}
+        <div className="flex justify-between">
+          <span className="sf-caption text-apple-label-secondary">{t('subscriptions.renews')}</span>
+          <span className="sf-body text-white">{renewDate.toLocaleDateString()}</span>
+        </div>
+      </div>
+
+      <button className="w-full px-md py-sm bg-white/10 hover:bg-white/20 text-white rounded-apple-md sf-body transition-colors cursor-pointer">
+        {t('subscriptions.manage')}
+      </button>
+    </div>
+  )
+}

package/src/pages/billing/UpgradeModal.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { X } from 'lucide-react'
+import { Plan } from '../../types/billing'
+
+interface UpgradeModalProps {
+  visible: boolean
+  plan: Plan | null
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export default function UpgradeModal({ visible, plan, onConfirm, onCancel }: UpgradeModalProps) {
+  const { t } = useTranslation('billing')
+  if (!visible || !plan) return null
+
+  const price = plan.monthlyPrice.toFixed(2)
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      role="dialog" aria-modal="true" aria-labelledby="upgrade-title"
+      onKeyDown={(e) => { if (e.key === 'Escape') onCancel() }}>
+      <div className="bg-apple-bg rounded-xl border border-white/[0.06] p-6 max-w-md w-full mx-4">
+        <div className="flex items-center justify-between mb-4">
+          <h3 id="upgrade-title" className="text-lg font-semibold text-white">
+            {t('upgrade.title', { plan: plan.name })}
+          </h3>
+          <button type="button" onClick={onCancel} aria-label={t('upgrade.cancel')}
+            className="text-zinc-400 hover:text-white cursor-pointer">
+            <X size={20} />
+          </button>
+        </div>
+        <p className="text-sm text-zinc-400 mb-6">{t('upgrade.description', { price })}</p>
+        <div className="bg-white/5 rounded-lg p-4 mb-6">
+          <p className="text-xs text-zinc-400">{t('upgrade.new_limit')}</p>
+          <p className="text-xl font-bold text-white">
+            {t('upgrade.screenings_mo', { count: ((plan.limits['screenings'] ?? 0) / 1000).toFixed(0) })}
+          </p>
+        </div>
+        <div className="flex flex-col-reverse sm:flex-row gap-3">
+          <button type="button" onClick={onCancel}
+            className="flex-1 px-4 py-2 border border-white/10 text-white rounded-lg hover:bg-white/5 transition-colors cursor-pointer">
+            {t('upgrade.cancel')}
+          </button>
+          <button type="button" onClick={onConfirm}
+            className="flex-1 px-4 py-2 bg-apple-blue hover:bg-apple-blue/80 text-white rounded-lg transition-colors font-medium cursor-pointer">
+            {t('upgrade.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/UsageHistory.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { api } from '../../api/client'
+
+interface UsagePoint { month: string; screenings: number }
+
+export default function UsageHistory() {
+  const { t } = useTranslation('billing')
+  const [history, setHistory] = useState<UsagePoint[]>([])
+  useEffect(() => {
+    api.get<UsagePoint[]>('/billing/usage/history')
+      .then(setHistory)
+      .catch(() => setHistory([]))
+  }, [])
+
+  const maxScreenings = Math.max(...history.map(h => h.screenings), 1)
+
+  return (
+    <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg">
+      <h3 className="sf-body font-medium text-white mb-lg">{t('usage.history_title')}</h3>
+      <div className="h-64 flex items-end justify-between gap-sm">
+        {history.map((point, i) => (
+          <div key={i} className="flex-1 flex flex-col items-center gap-sm">
+            <div className="w-full h-64 flex flex-col items-center justify-end">
+              <div
+                className="w-full bg-gradient-to-t from-apple-blue to-blue-400 rounded-t-apple-md"
+                style={{ height: `${(point.screenings / maxScreenings) * 100}%` }}
+                title={`${point.screenings} screenings`}
+              />
+            </div>
+            <span className="sf-caption text-xs">{point.month}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/UsageMeter.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+interface UsageMeterProps {
+  label: string
+  current: number
+  max: number
+}
+
+export default function UsageMeter({ label, current, max }: UsageMeterProps) {
+  const percentage = (current / max) * 100
+  const color = percentage < 80 ? 'bg-green-600' : percentage < 95 ? 'bg-amber-600' : 'bg-red-600'
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <label className="text-sm font-medium text-zinc-400">{label}</label>
+        <span className="text-xs text-zinc-400">
+          {current.toLocaleString()} / {max.toLocaleString()} ({percentage.toFixed(1)}%)
+        </span>
+      </div>
+      <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
+        <div className={`h-full ${color} transition-all duration-500`} style={{ width: `${Math.min(percentage, 100)}%` }} />
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/UsageOverview.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import UsageMeter from './UsageMeter'
+import { UsageRecord } from '../../types/billing'
+import { getUsage } from '../../api/billing'
+
+export default function UsageOverview() {
+  const { t } = useTranslation('billing')
+  const [usage, setUsage] = useState<UsageRecord | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getUsage('dashboard').then(setUsage).finally(() => setLoading(false))
+  }, [])
+
+  if (loading || !usage) return <div className="animate-pulse h-32 bg-white/5 rounded-xl" />
+
+  return (
+    <div className="bg-white/[0.02] rounded-xl border border-white/[0.06] p-6 space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold text-white mb-1">{t('usage.current_usage')}</h3>
+        <p className="text-sm text-zinc-400">{usage.product}</p>
+      </div>
+
+      {usage.metrics.map(m => (
+        <UsageMeter key={m.name} label={m.name} current={m.current} max={m.limit} />
+      ))}
+
+      {usage.metrics.some(m => m.current > m.limit * 0.9) && (
+        <div className="bg-amber-900/20 border border-amber-800 rounded-lg p-4">
+          <p className="text-sm text-amber-200">
+            {t('usage.warning', { percent: 90 })}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/pages/legal/PrivacyPolicy.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function PrivacyPolicy() {
+  const { t } = useTranslation('legal')
+  const sections = t('privacy.sections', { returnObjects: true }) as Array<{
+    title: string; body: string
+  }>
+
+  return (
+    <article className="max-w-3xl mx-auto px-6 py-20">
+      <h1 className="text-4xl font-bold text-white mb-2">{t('privacy.title')}</h1>
+      <p className="text-sm text-zinc-400 mb-12">{t('privacy.last_updated')}</p>
+
+      <div className="space-y-8 text-zinc-400 leading-relaxed">
+        {sections.map((section, i) => (
+          <section key={i}>
+            <h2 className="text-lg font-semibold text-white mb-3">{section.title}</h2>
+            <p>{section.body}</p>
+          </section>
+        ))}
+      </div>
+    </article>
+  )
+}

package/src/pages/legal/TermsOfService.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function TermsOfService() {
+  const { t } = useTranslation('legal')
+  const sections = t('terms.sections', { returnObjects: true }) as Array<{
+    title: string; body: string
+  }>
+
+  return (
+    <article className="max-w-3xl mx-auto px-6 py-20">
+      <h1 className="text-4xl font-bold text-white mb-2">{t('terms.title')}</h1>
+      <p className="text-sm text-zinc-400 mb-12">{t('terms.last_updated')}</p>
+
+      <div className="space-y-8 text-zinc-400 leading-relaxed">
+        {sections.map((section, i) => (
+          <section key={i}>
+            <h2 className="text-lg font-semibold text-white mb-3">{section.title}</h2>
+            <p>{section.body}</p>
+          </section>
+        ))}
+      </div>
+    </article>
+  )
+}

package/src/pages/marketing/BundleCallout.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Star } from 'lucide-react'
+
+export function BundleCallout() {
+  const { t } = useTranslation('marketing')
+
+  return (
+    <div className="bg-gradient-to-r from-apple-blue/20 to-purple-600/20 border border-apple-blue/30 rounded-apple-lg p-lg mx-auto max-w-2xl">
+      <div className="flex items-start gap-md">
+        <Star className="w-5 h-5 text-apple-blue flex-shrink-0 mt-sm" />
+        <div>
+          <h3 className="sf-headline text-white mb-xs">{t('bundle.title')}</h3>
+          <p className="sf-body text-apple-label-secondary mb-lg">
+            {t('bundle.description')}
+          </p>
+          <button type="button" className="px-lg py-sm bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md sf-body font-medium transition-colors">
+            {t('bundle.cta')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/marketing/CTASection.tsx

@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { FadeUp } from './animations'
+
+export default function CTASection() {
+  const navigate = useNavigate()
+
+  return (
+    <section className="py-28 px-4">
+      <div className="max-w-3xl mx-auto text-center relative">
+        <div className="absolute -inset-20 rounded-3xl opacity-20 pointer-events-none"
+          style={{ background: 'radial-gradient(ellipse, rgba(0,184,148,0.15), transparent 70%)' }} />
+        <FadeUp>
+          <div className="relative rounded-3xl p-8 sm:p-14 overflow-hidden"
+            style={{
+              background: 'linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%)',
+              border: '1px solid rgba(0,0,0,0.06)',
+              boxShadow: '0 20px 60px rgba(0,0,0,0.06)',
+            }}>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0F172A] mb-5"
+              style={{ letterSpacing: '-0.03em' }}>
+              Ready to modernize your compliance?
+            </h2>
+            <p className="text-[#64748B] mb-10 max-w-lg mx-auto text-[15px]">
+              100 free screenings/month. No credit card required.
+              Deploy in minutes, not months.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <motion.button type="button" onClick={() => navigate('/signup')}
+                className="px-8 py-4 bg-gradient-to-r from-[#00B894] to-[#059669] text-white font-semibold rounded-xl text-sm cursor-pointer"
+                whileHover={{ scale: 1.04, boxShadow: '0 8px 30px rgba(0,184,148,0.35)' }}
+                whileTap={{ scale: 0.97 }}>
+                Start Free
+              </motion.button>
+              <motion.button type="button"
+                onClick={() => window.open('https://calendly.com/amliq', '_blank')}
+                className="px-8 py-4 bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white font-semibold rounded-xl text-sm cursor-pointer"
+                whileHover={{ scale: 1.04, boxShadow: '0 8px 30px rgba(99,102,241,0.3)' }}
+                whileTap={{ scale: 0.97 }}>
+                Book a Demo
+              </motion.button>
+            </div>
+          </div>
+        </FadeUp>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/CaseStudy.tsx

@@ -0,0 +1,37 @@
+import { motion } from 'framer-motion'
+import { FadeUp, Parallax } from './animations'
+
+export default function CaseStudy() {
+  return (
+    <section className="py-28 px-4 relative overflow-hidden">
+      <Parallax speed={0.2}>
+        <div className="absolute inset-0 opacity-30"
+          style={{ background: 'radial-gradient(ellipse at 50% 50%, rgba(0,184,148,0.08), transparent 60%)' }} />
+      </Parallax>
+      <div className="max-w-3xl mx-auto text-center relative z-10">
+        <FadeUp>
+          <p className="text-xs uppercase tracking-[0.2em] text-[#00B894] font-semibold mb-10">
+            Case Study
+          </p>
+          <blockquote>
+            <motion.p
+              className="text-2xl sm:text-3xl lg:text-4xl font-bold leading-snug mb-10 text-[#0F172A]"
+              style={{ letterSpacing: '-0.02em' }}>
+              &ldquo;AMLIQ reduced our false positives by 70% while cutting screening costs by 80%.&rdquo;
+            </motion.p>
+          </blockquote>
+          <div className="flex items-center justify-center gap-4">
+            <div className="w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold
+              bg-gradient-to-br from-[#00B894] to-[#059669] text-white">
+              JR
+            </div>
+            <div className="text-left">
+              <p className="text-sm font-semibold text-[#0F172A]">James Richardson</p>
+              <p className="text-sm text-[#94A3B8]">Head of Compliance, Meridian Fintech</p>
+            </div>
+          </div>
+        </FadeUp>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/ComparisonTable.tsx

@@ -0,0 +1,66 @@
+import { Check, X } from 'lucide-react'
+
+type Val = true | false | string
+interface Row { feature: string; amliq: Val; worldCheck: Val; dowJones: Val; manual: Val }
+
+const rows: Row[] = [
+  { feature: 'Starting Price', amliq: '$299/mo', worldCheck: '$15K+/yr', dowJones: '$10K+/yr', manual: '$50K+/yr' },
+  { feature: 'Screening Speed', amliq: '<50ms', worldCheck: '200-500ms', dowJones: '300-800ms', manual: 'Hours' },
+  { feature: 'AI Matching Layers', amliq: '6 layers', worldCheck: '2 layers', dowJones: '1 layer', manual: '0' },
+  { feature: 'Custom Thresholds', amliq: true, worldCheck: false, dowJones: false, manual: false },
+  { feature: 'Explainable Results', amliq: true, worldCheck: false, dowJones: false, manual: true },
+  { feature: 'Self-Hosted Option', amliq: true, worldCheck: false, dowJones: false, manual: true },
+  { feature: 'REST API', amliq: true, worldCheck: true, dowJones: true, manual: false },
+]
+
+function Cell({ val, highlight }: { val: Val; highlight?: boolean }) {
+  if (val === true) return <Check size={16} className={highlight ? 'text-[#22C55E] mx-auto' : 'text-emerald-700 mx-auto'} style={highlight ? { filter: 'drop-shadow(0 0 4px rgba(34,197,94,0.5))' } : {}} />
+  if (val === false) return <X size={16} className="text-[#EF4444]/40 mx-auto" />
+  return <span className={`text-xs ${highlight ? 'text-cyan-300 font-semibold' : 'text-[#94A3B8]'}`}>{val}</span>
+}
+
+export default function ComparisonTable() {
+  const heads = ['Feature', 'AMLIQ', 'World-Check', 'Dow Jones', 'Manual']
+
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-5xl mx-auto">
+        <p className="text-sm text-cyan-400 font-mono text-center mb-3 uppercase tracking-widest">
+          // comparison
+        </p>
+        <h2 className="text-3xl sm:text-4xl font-bold text-[#F8FAFC] text-center mb-12">
+          See how AMLIQ compares
+        </h2>
+
+        <div className="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0 rounded-xl border border-cyan-400/10" style={{
+          background: 'rgba(255,255,255,0.01)',
+          backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.01) 2px, rgba(0,255,255,0.01) 4px)',
+        }}>
+          <table className="w-full min-w-[540px]">
+            <thead>
+              <tr className="border-b border-cyan-400/10">
+                {heads.map((h, i) => (
+                  <th key={h} className={`py-4 px-5 text-sm font-mono ${i === 1 ? 'text-cyan-400' : 'text-[#94A3B8]'} ${i === 0 ? 'text-left sticky left-0 bg-[#020617] z-10' : 'text-center'}`}
+                    style={i === 1 ? { textShadow: '0 0 10px rgba(0,255,255,0.3)' } : {}}>
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r, i) => (
+                <tr key={r.feature} className={`border-b border-white/[0.03] ${i % 2 === 1 ? 'bg-white/[0.01]' : ''}`}>
+                  <td className="py-3 px-5 text-sm text-[#94A3B8] sticky left-0 bg-[#020617] z-10 font-mono text-xs">{r.feature}</td>
+                  <td className="py-3 text-center bg-cyan-400/[0.02]"><Cell val={r.amliq} highlight /></td>
+                  <td className="py-3 text-center"><Cell val={r.worldCheck} /></td>
+                  <td className="py-3 text-center"><Cell val={r.dowJones} /></td>
+                  <td className="py-3 text-center"><Cell val={r.manual} /></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/CompetitiveEdge.tsx

@@ -0,0 +1,55 @@
+import { Shield, Zap, Brain, Globe, DollarSign, Eye } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { FadeUp } from './animations'
+
+const advantages = [
+  { icon: Zap, stat: '200x', label: 'Faster', detail: 'Sub-1ms in-memory screening vs 200ms industry average', gradient: 'from-amber-400 to-orange-500' },
+  { icon: Brain, stat: '92%', label: 'Fewer false positives', detail: 'LLM cascade validated by Federal Reserve 2025 research', gradient: 'from-violet-400 to-purple-500' },
+  { icon: Globe, stat: '2.2M+', label: 'Entity profiles', detail: 'Growing to 5M+ from 328 global sources + Wikidata + AI', gradient: 'from-blue-400 to-cyan-500' },
+  { icon: Eye, stat: '6', label: 'Matching layers', detail: 'Exact, Fuzzy, Phonetic, Token, Embedding, Graph — fully explainable', gradient: 'from-emerald-400 to-teal-500' },
+  { icon: DollarSign, stat: '100x', label: 'Cheaper', detail: '$299/mo vs $30K-500K/year for legacy providers', gradient: 'from-green-400 to-emerald-500' },
+  { icon: Shield, stat: '30+', label: 'Country lists', detail: 'OFAC, UN, EU, UK, IL NBCTF + 25 country-specific sanctions lists', gradient: 'from-rose-400 to-pink-500' },
+]
+
+export default function CompetitiveEdge() {
+  return (
+    <section className="py-28 px-4">
+      <div className="max-w-6xl mx-auto">
+        <FadeUp>
+          <div className="text-center mb-20">
+            <p className="text-xs uppercase tracking-[0.2em] text-[#00B894] font-semibold mb-4">
+              Why compliance teams switch to AMLIQ
+            </p>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0F172A]"
+              style={{ letterSpacing: '-0.03em' }}>
+              Outperform legacy screening
+            </h2>
+          </div>
+        </FadeUp>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {advantages.map((a, i) => (
+            <FadeUp key={a.label} delay={i * 0.08}>
+              <motion.div
+                className="relative p-6 rounded-2xl cursor-default overflow-hidden group"
+                style={{ background: '#FAFBFC', border: '1px solid rgba(0,0,0,0.06)' }}
+                whileHover={{ y: -4, boxShadow: '0 12px 40px rgba(0,0,0,0.08)' }}
+                transition={{ type: 'spring', stiffness: 300, damping: 20 }}>
+                <div className="flex items-center gap-3 mb-4">
+                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center bg-gradient-to-br ${a.gradient} opacity-90`}>
+                    <a.icon size={18} color="white" />
+                  </div>
+                  <span className="text-3xl font-extrabold bg-gradient-to-r from-[#00B894] to-[#059669] bg-clip-text text-transparent">
+                    {a.stat}
+                  </span>
+                </div>
+                <p className="text-[#0F172A] font-semibold text-sm mb-1">{a.label}</p>
+                <p className="text-[#94A3B8] text-xs leading-relaxed">{a.detail}</p>
+              </motion.div>
+            </FadeUp>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}