amliq-dashboard 2.0.0

package/src/pages/marketing/DataCoverage.tsx

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion'
+import { FadeUp } from './animations'
+
+const regions = [
+  { name: 'Americas', lists: ['US OFAC SDN', 'US OFAC Consolidated', 'Canada OSFI', 'Brazil COAF'], color: '#3B82F6' },
+  { name: 'Europe', lists: ['EU Financial Sanctions', 'UK OFSI', 'Swiss SECO', 'French DG Trésor'], color: '#8B5CF6' },
+  { name: 'Middle East & Africa', lists: ['Israel NBCTF', 'UAE CBUAE', 'Saudi SAMA', 'South Africa FIC'], color: '#F59E0B' },
+  { name: 'Asia Pacific', lists: ['UN Consolidated', 'Japan MOF', 'Singapore MAS', 'Australia DFAT', 'South Korea KoFIU', 'Hong Kong HKMA'], color: '#00B894' },
+  { name: 'Intelligence', lists: ['PEP Database (1M+)', 'Wikidata Politicians', 'RCA Graph', 'FATF Black/Grey Lists', 'ICIJ Offshore Leaks', 'Adverse Media'], color: '#EF4444' },
+]
+
+export default function DataCoverage() {
+  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">Global coverage</p>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0F172A]"
+              style={{ letterSpacing: '-0.03em' }}>
+              86 lists. 195 countries. 3M+ entities.
+            </h2>
+            <p className="text-[#64748B] mt-5 max-w-xl mx-auto">
+              Updated daily from official sources. Growing to 5M+ with AI-powered entity discovery.
+            </p>
+          </div>
+        </FadeUp>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {regions.map((r, i) => (
+            <FadeUp key={r.name} delay={i * 0.08}>
+              <motion.div className="p-6 rounded-2xl"
+                style={{ background: '#FAFBFC', border: '1px solid rgba(0,0,0,0.06)' }}
+                whileHover={{ y: -3, boxShadow: '0 8px 30px rgba(0,0,0,0.06)' }}
+                transition={{ type: 'spring', stiffness: 300, damping: 20 }}>
+                <div className="flex items-center gap-2 mb-4">
+                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: r.color }} />
+                  <span className="text-sm font-bold text-[#0F172A]">{r.name}</span>
+                </div>
+                <div className="space-y-1.5">
+                  {r.lists.map(l => (
+                    <p key={l} className="text-xs text-[#64748B]">
+                      <span className="text-[#00B894] mr-1.5 font-bold">+</span>{l}
+                    </p>
+                  ))}
+                </div>
+              </motion.div>
+            </FadeUp>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/DataRain.tsx

@@ -0,0 +1,30 @@
+const cols = Array.from({ length: 20 }, (_, i) => i)
+const chars = '01アイウエオカキクケコサシスセソAMLIQ$%#@!&OFAC'
+
+function getChar(col: number) {
+  return chars[(col * 7 + 3) % chars.length]
+}
+
+export default function DataRain() {
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+      <div className="relative w-full h-full">
+        {cols.map(i => (
+          <div
+            key={i}
+            className="absolute top-0 text-xs font-mono whitespace-pre leading-5"
+            style={{
+              left: `${(i / cols.length) * 100}%`,
+              color: i % 3 === 0 ? '#00FFFF' : '#22C55E',
+              opacity: 0.04,
+              animation: `rain ${8 + (i % 5) * 2}s linear infinite`,
+              animationDelay: `${-(i % 7) * 1.2}s`,
+            }}
+          >
+            {Array.from({ length: 30 }, (_, j) => getChar(i + j)).join('\n')}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/pages/marketing/EnterpriseCTA.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Phone } from 'lucide-react'
+
+export default function EnterpriseCTA() {
+  const { t } = useTranslation('marketing')
+
+  return (
+    <div className="bg-gradient-to-r from-indigo-900/50 to-blue-900/50 border border-indigo-800 rounded-xl p-8 text-center">
+      <h3 className="text-2xl font-bold text-white mb-2">{t('enterprise.heading')}</h3>
+      <p className="text-zinc-400 mb-6">{t('enterprise.description')}</p>
+
+      <div className="flex flex-col sm:flex-row gap-4 justify-center mb-6">
+        <button type="button" className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
+          {t('enterprise.cta')}
+        </button>
+        <a href="tel:+1234567890" className="px-8 py-3 border border-white/10 hover:border-white/20 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2">
+          <Phone size={16} />
+          (855) 924-3447
+        </a>
+      </div>
+
+      <p className="text-sm text-zinc-400">{t('enterprise.note')}</p>
+    </div>
+  )
+}

package/src/pages/marketing/FAQItem.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+interface FAQItemProps {
+  question: string
+  answer: string
+}
+
+export default function FAQItem({ question, answer }: FAQItemProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="border border-white/[0.06] rounded-xl">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className="w-full px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors"
+      >
+        <span className="text-white font-medium text-left">{question}</span>
+        <ChevronDown size={20} className={`text-zinc-400 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && <div className="px-6 pb-4 text-zinc-400 border-t border-white/[0.06]">{answer}</div>}
+    </div>
+  )
+}

package/src/pages/marketing/FAQSchema.tsx

@@ -0,0 +1,43 @@
+const faqs = [
+  {
+    q: 'What is AMLIQ?',
+    a: 'AMLIQ is an AI-powered AML/CFT sanctions screening platform for financial institutions. It screens entities against global sanctions lists including OFAC, UN, EU, and UK with sub-50ms latency.',
+  },
+  {
+    q: 'How does AMLIQ compare to World-Check?',
+    a: 'AMLIQ offers 6-layer AI matching (Exact, Fuzzy, Phonetic, Token, Embedding, Graph) at 1/10th the cost of Refinitiv World-Check, with explainable AI showing why each match was found.',
+  },
+  {
+    q: 'What sanctions lists does AMLIQ screen against?',
+    a: 'AMLIQ screens against OFAC SDN, UN Consolidated, EU Financial Sanctions Facility, UK OFSI, Israeli NBCTF, and OpenSanctions — covering 18,699+ sanctioned entities updated continuously.',
+  },
+  {
+    q: 'How fast is AMLIQ screening?',
+    a: 'AMLIQ delivers sub-50ms single-entity screening and supports batch processing for bulk portfolios via REST API.',
+  },
+  {
+    q: 'Does AMLIQ have an API?',
+    a: 'Yes. AMLIQ provides a REST API with endpoints for single screening, batch screening (CSV/JSON), and alert management. Full API documentation is available at amliq.com/api/docs.',
+  },
+]
+
+function buildSchema() {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faqs.map(f => ({
+      '@type': 'Question',
+      name: f.q,
+      acceptedAnswer: { '@type': 'Answer', text: f.a },
+    })),
+  }
+}
+
+export default function FAQSchema() {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(buildSchema()) }}
+    />
+  )
+}

package/src/pages/marketing/FAQSection.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import FAQItem from './FAQItem'
+
+export default function FAQSection() {
+  const { t } = useTranslation('marketing')
+  const items = t('faq.items', { returnObjects: true }) as Array<{ q: string; a: string }>
+
+  return (
+    <section className="py-20 px-4">
+      <div className="max-w-3xl mx-auto">
+        <h2 className="text-4xl font-bold text-white text-center mb-12">{t('faq.heading')}</h2>
+        <div className="space-y-3">
+          {items.map((faq, i) => <FAQItem key={i} question={faq.q} answer={faq.a} />)}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/FeatureDetail.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react'
+
+interface FeatureDetailProps {
+  icon: ReactNode
+  title: string
+  description: string
+}
+
+export default function FeatureDetail({ icon, title, description }: FeatureDetailProps) {
+  return (
+    <div className="p-6 rounded-xl bg-white/[0.02] hover:bg-white/[0.04] border border-white/[0.06] hover:border-white/[0.12] transition-all">
+      <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-indigo-600 to-blue-600 flex items-center justify-center mb-4 text-white">
+        {icon}
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
+      <p className="text-sm text-zinc-400">{description}</p>
+    </div>
+  )
+}

package/src/pages/marketing/FeaturesGrid.tsx

@@ -0,0 +1,60 @@
+import { Layers, Zap, Globe, Brain, ShieldCheck, Building } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+interface Feature {
+  icon: ReactNode
+  title: string
+  desc: string
+  code: string
+}
+
+const features: Feature[] = [
+  { icon: <Layers size={20} />, title: '6-Layer Matching', desc: 'Exact, Fuzzy, Phonetic, Token, Embedding, and Graph layers in concert.', code: 'engine.match(entity, 6)' },
+  { icon: <Zap size={20} />, title: 'Real-Time Screening', desc: 'Sub-50ms single lookups. Batch processing for bulk portfolios.', code: 'latency: 12ms avg' },
+  { icon: <Globe size={20} />, title: 'Global Coverage', desc: 'OFAC, UN, EU, UK OFSI, Israeli NBCTF lists updated continuously.', code: 'lists: [OFAC,UN,EU,UK]' },
+  { icon: <Brain size={20} />, title: 'AI Intelligence', desc: 'Explainable match reasoning with auto-escalation rules.', code: 'explain(match).reason' },
+  { icon: <ShieldCheck size={20} />, title: 'Enterprise Security', desc: 'SOC 2 Type II. E2E encryption, audit trails, RBAC.', code: 'auth: SOC2 | ISO27001' },
+  { icon: <Building size={20} />, title: 'Multi-Tenant', desc: 'Per-org configuration, custom thresholds, granular RBAC.', code: 'tenant.config(org_id)' },
+]
+
+function Card({ icon, title, desc, code }: Feature) {
+  return (
+    <div className="group relative bg-white/[0.02] rounded-xl p-6 transition-all duration-300 hover:-translate-y-1 overflow-hidden"
+      style={{ border: '1px solid rgba(0,255,255,0.08)' }}>
+      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"
+        style={{ background: 'conic-gradient(from var(--angle,0deg), #00FFFF, #3B82F6, #A855F7, #00FFFF)', padding: '1px', mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', maskComposite: 'exclude', WebkitMaskComposite: 'xor', animation: 'border-rotate 3s linear infinite' }} />
+      <div className="relative z-10">
+        <div className="w-10 h-10 rounded-lg bg-cyan-400/10 flex items-center justify-center mb-4 text-cyan-400 group-hover:bg-cyan-400/20 transition-colors"
+          style={{ boxShadow: '0 0 10px rgba(0,255,255,0.1)' }}>
+          {icon}
+        </div>
+        <h3 className="text-[#F8FAFC] font-semibold mb-2">{title}</h3>
+        <p className="text-sm text-[#94A3B8] leading-relaxed mb-3">{desc}</p>
+        <code className="text-[11px] font-mono text-cyan-400/60 bg-cyan-400/[0.05] px-2 py-1 rounded">
+          {code}
+        </code>
+      </div>
+    </div>
+  )
+}
+
+export default function FeaturesGrid() {
+  return (
+    <section id="features" className="py-24 px-4">
+      <div className="max-w-6xl mx-auto">
+        <p className="text-sm text-cyan-400 font-mono text-center mb-3 uppercase tracking-widest">
+          // capabilities
+        </p>
+        <h2 className="text-3xl sm:text-4xl font-bold text-[#F8FAFC] text-center mb-4">
+          Everything you need for compliance
+        </h2>
+        <p className="text-[#94A3B8] text-center mb-16 max-w-2xl mx-auto">
+          Purpose-built screening infrastructure replacing expensive legacy tools.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {features.map(f => <Card key={f.title} {...f} />)}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/FeaturesSpotlight.tsx

@@ -0,0 +1,68 @@
+import { motion } from 'framer-motion'
+import { SlideIn, FadeUp } from './animations'
+
+const features = [
+  { label: 'Screening', title: 'Sub-1ms Sanctions Screening',
+    desc: 'Screen any entity against 3M+ profiles from 86 lists. 6-layer AI engine with every match explained.',
+    code: 'POST /api/v1/screen\n{ "entity_name": "Hassan Ali" }\n\n→ 200 OK (1ms)\n{ "total_matches": 4,\n  "confidence": 0.94 }',
+  },
+  { label: 'AI Cascade', title: 'Claude AI Disambiguation',
+    desc: 'Uncertain matches sent to Claude AI. Reduces false positives by 92%. No other vendor has this.',
+    code: 'Score: 0.62 (uncertain)\n→ Claude: "Common Arabic name\n  pattern, Hassan is family"\n→ Confidence → 0.85 ✓',
+  },
+  { label: 'Crypto', title: 'Wallet Sanctions Screening',
+    desc: 'Screen ETH/BTC/TRX wallets against 13,674 sanctioned addresses. Sub-microsecond lookup.',
+    code: 'POST /api/v1/crypto/screen\n{ "wallet": "0x7d84...ab4e" }\n\n→ { "decision": "BLOCKED",\n    "list": "FBI Lazarus" }',
+  },
+  { label: 'Freetext', title: 'Document Screening',
+    desc: 'Paste any document. AI extracts names and screens each against sanctions lists automatically.',
+    code: 'POST /api/v1/screen/freetext\n{ "text": "Wire to Sberbank\n  for HAMAS..." }\n\n→ HAMAS: HIGH (94%)\n  Sberbank: HIGH (94%)',
+  },
+]
+
+export default function FeaturesSpotlight() {
+  return (
+    <section id="features" className="py-28 px-4">
+      <div className="max-w-6xl mx-auto">
+        <FadeUp>
+          <p className="text-xs uppercase tracking-[0.2em] text-[#00B894] font-semibold text-center mb-3">
+            Capabilities
+          </p>
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0F172A] text-center mb-20"
+            style={{ letterSpacing: '-0.03em' }}>
+            Everything you need for compliance
+          </h2>
+        </FadeUp>
+
+        {features.map((f, i) => {
+          const reverse = i % 2 === 1
+          return (
+            <div key={f.title} className="grid md:grid-cols-2 gap-16 items-center mb-28">
+              <SlideIn from={reverse ? 'right' : 'left'}>
+                <div className={reverse ? 'md:order-2' : ''}>
+                  <span className="text-xs uppercase tracking-[0.2em] text-[#00B894] font-semibold">{f.label}</span>
+                  <h3 className="text-2xl lg:text-3xl font-bold text-[#0F172A] mt-3 mb-4"
+                    style={{ letterSpacing: '-0.02em' }}>{f.title}</h3>
+                  <p className="text-[#64748B] leading-relaxed text-[15px]">{f.desc}</p>
+                </div>
+              </SlideIn>
+              <SlideIn from={reverse ? 'left' : 'right'} delay={0.15}>
+                <motion.pre
+                  className={`text-sm leading-relaxed p-6 rounded-2xl overflow-x-auto text-[#334155] ${reverse ? 'md:order-1' : ''}`}
+                  style={{
+                    fontFamily: "'JetBrains Mono', monospace",
+                    background: '#F8FAFC',
+                    border: '1px solid rgba(0,0,0,0.06)',
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.04)',
+                  }}
+                  whileHover={{ boxShadow: '0 8px 30px rgba(0,0,0,0.08)' }}>
+                  {f.code}
+                </motion.pre>
+              </SlideIn>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/FooterSection.tsx

@@ -0,0 +1,92 @@
+import { Link } from 'react-router-dom'
+import { ShieldCheck, Twitter, Linkedin } from 'lucide-react'
+
+const columns = [
+  { title: 'Product', links: [
+    { label: 'Screening', href: '#screening' },
+    { label: 'Monitoring', href: '#monitoring' },
+    { label: 'API Reference', href: '#api' },
+    { label: 'Pricing', href: '#pricing' },
+  ]},
+  { title: 'Solutions', links: [
+    { label: 'Banks', href: '#' },
+    { label: 'Fintechs', href: '#' },
+    { label: 'MSBs', href: '#' },
+    { label: 'Crypto', href: '#' },
+  ]},
+  { title: 'Company', links: [
+    { label: 'About', href: '/about' },
+    { label: 'Blog', href: '/blog' },
+    { label: 'Careers', href: '/careers' },
+    { label: 'Contact', href: 'mailto:info@amliq.finance' },
+  ]},
+  { title: 'Resources', links: [
+    { label: 'Documentation', href: '/docs' },
+    { label: 'Status', href: '/status' },
+    { label: 'Changelog', href: '/changelog' },
+    { label: 'Security', href: '/security' },
+  ]},
+]
+
+const badges = ['SOC 2 Type II', 'ISO 27001', 'GDPR']
+const socials = [
+  { icon: <Twitter size={16} />, href: '#', label: 'Twitter' },
+  { icon: <Linkedin size={16} />, href: '#', label: 'LinkedIn' },
+]
+
+export default function FooterSection() {
+  return (
+    <footer style={{ borderTop: '1px solid rgba(255,255,255,0.06)' }} className="pt-16 pb-8 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
+          <div className="col-span-2 md:col-span-1">
+            <span className="text-lg font-bold text-[#EDEDEF] flex items-center gap-1">
+              AMLIQ<span className="w-1.5 h-1.5 rounded-full bg-[#00D4AA] -mt-2" />
+            </span>
+            <p className="text-sm text-[#7C7C82] leading-relaxed mt-2">
+              AI-powered sanctions screening for modern finance.
+            </p>
+            <div className="flex gap-3 mt-4">
+              {socials.map(s => (
+                <a key={s.label} href={s.href} aria-label={s.label}
+                  className="text-[#7C7C82] hover:text-[#EDEDEF] transition-colors">
+                  {s.icon}
+                </a>
+              ))}
+            </div>
+          </div>
+          {columns.map(col => (
+            <div key={col.title}>
+              <p className="text-sm font-semibold text-[#EDEDEF] mb-4">{col.title}</p>
+              <ul className="space-y-2.5">
+                {col.links.map(l => (
+                  <li key={l.label}>
+                    <Link to={l.href} className="text-sm text-[#7C7C82] hover:text-[#EDEDEF] transition-colors">
+                      {l.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="pt-6 flex flex-col md:flex-row items-center justify-between gap-4"
+          style={{ borderTop: '1px solid rgba(255,255,255,0.06)' }}>
+          <p className="text-xs text-[#7C7C82]/60">
+            &copy; 2026 AMLIQ. All rights reserved.
+            &nbsp;&middot;&nbsp;<Link to="/privacy" className="hover:text-[#EDEDEF]">Privacy</Link>
+            &nbsp;&middot;&nbsp;<Link to="/terms" className="hover:text-[#EDEDEF]">Terms</Link>
+          </p>
+          <div className="flex items-center gap-4">
+            {badges.map(b => (
+              <div key={b} className="flex items-center gap-1.5 text-xs text-[#7C7C82]/60">
+                <ShieldCheck size={12} className="text-[#22C55E]" />
+                {b}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/pages/marketing/GradientOrbs.tsx

@@ -0,0 +1,26 @@
+import { motion } from 'framer-motion'
+
+export default function GradientOrbs() {
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none -z-10">
+      <motion.div
+        className="absolute w-[600px] h-[600px] rounded-full opacity-[0.07]"
+        style={{ background: 'radial-gradient(circle, #00B894, transparent 70%)', top: '-10%', right: '-10%' }}
+        animate={{ x: [0, 30, 0], y: [0, -20, 0] }}
+        transition={{ duration: 18, repeat: Infinity, ease: 'easeInOut' }}
+      />
+      <motion.div
+        className="absolute w-[500px] h-[500px] rounded-full opacity-[0.05]"
+        style={{ background: 'radial-gradient(circle, #6366F1, transparent 70%)', bottom: '10%', left: '-8%' }}
+        animate={{ x: [0, -25, 0], y: [0, 30, 0] }}
+        transition={{ duration: 22, repeat: Infinity, ease: 'easeInOut' }}
+      />
+      <motion.div
+        className="absolute w-[400px] h-[400px] rounded-full opacity-[0.04]"
+        style={{ background: 'radial-gradient(circle, #F59E0B, transparent 70%)', top: '40%', right: '20%' }}
+        animate={{ x: [0, 20, 0], y: [0, -25, 0] }}
+        transition={{ duration: 15, repeat: Infinity, ease: 'easeInOut' }}
+      />
+    </div>
+  )
+}

package/src/pages/marketing/HeroSearch.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import { Search, AlertTriangle, CheckCircle } from 'lucide-react'
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8080'
+
+interface Match {
+  entity_name: string; list_id: string; confidence: number;
+  layers: { layer: string; score: number }[];
+}
+interface Result {
+  total_matches: number; processing_time_ms: number; matches: Match[];
+}
+
+export default function HeroSearch() {
+  const [query, setQuery] = useState('')
+  const [result, setResult] = useState<Result | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const search = async () => {
+    if (!query.trim()) return
+    setLoading(true)
+    try {
+      const resp = await fetch(`${API_BASE}/api/v1/screen/public-demo`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: query.trim() }),
+      })
+      const json = await resp.json()
+      setResult(json.data ?? json)
+    } catch {
+      setResult(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') search()
+  }
+
+  const top = result?.matches?.[0]
+
+  return (
+    <div className="max-w-2xl mx-auto mt-14 font-mono">
+      <div className="relative">
+        <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-cyan-500/60" />
+        <input type="text" value={query}
+          onChange={e => setQuery(e.target.value)}
+          onKeyDown={handleKey}
+          placeholder="Try it: Vladimir Putin, HAMAS, Sberbank..."
+          className="w-full bg-white/[0.03] border border-cyan-400/20 rounded-lg pl-11 pr-24 py-3 text-cyan-300 text-sm focus:outline-none focus:border-cyan-400/40"
+          style={{ boxShadow: '0 0 10px rgba(0,255,255,0.05)' }} />
+        <button onClick={search} disabled={loading || !query.trim()}
+          className="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-[#00D4AA] text-[#0A0A0B] text-xs font-semibold rounded-md disabled:opacity-40 cursor-pointer">
+          {loading ? '...' : 'Screen'}
+        </button>
+      </div>
+
+      {result && (
+        <div className="mt-3 rounded-lg border overflow-hidden"
+          style={{ background: 'rgba(255,255,255,0.02)', borderColor: 'rgba(0,255,255,0.15)' }}>
+          <div className="px-4 py-2 border-b border-cyan-400/10 flex items-center justify-between">
+            <span className="text-[10px] text-cyan-500/60 uppercase tracking-widest">AMLIQ Live</span>
+            <span className="text-[10px] text-[#94A3B8] flex items-center gap-1.5">
+              <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full" />
+              {result.processing_time_ms}ms — {result.total_matches} matches
+            </span>
+          </div>
+
+          {top ? (
+            <>
+              <div className="px-4 pt-3 flex items-center justify-between">
+                <div>
+                  <p className="text-[#F8FAFC] font-semibold text-sm">{top.entity_name}</p>
+                  <p className="text-cyan-500/50 text-xs mt-0.5">{top.list_id}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-2xl font-bold text-[#22C55E]">
+                    {Math.round(top.confidence * 100)}%
+                  </p>
+                  <p className="text-[10px] text-[#94A3B8]">confidence</p>
+                </div>
+              </div>
+              <div className="px-4 pt-3 grid grid-cols-4 gap-1.5">
+                {(top.layers ?? []).slice(0, 4).map(l => (
+                  <div key={l.layer} className="text-center">
+                    <div className="h-1 rounded-full bg-white/10 mb-1 overflow-hidden">
+                      <div className="h-full rounded-full"
+                        style={{ width: `${l.score * 100}%`, background: 'linear-gradient(90deg, #22C55E, #00FFFF)' }} />
+                    </div>
+                    <p className="text-[9px] text-[#94A3B8]">{l.layer}</p>
+                  </div>
+                ))}
+              </div>
+              <div className="px-4 py-3 flex items-center justify-between">
+                <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-red-500/10 border border-red-500/20 rounded text-xs font-semibold text-[#EF4444]">
+                  <AlertTriangle size={12} /> HIGH RISK
+                </span>
+                <span className="text-[10px] text-cyan-500/40">{result.total_matches} total matches</span>
+              </div>
+            </>
+          ) : (
+            <div className="px-4 py-6 text-center">
+              <CheckCircle size={24} className="text-emerald-400 mx-auto mb-2" />
+              <p className="text-emerald-400 text-sm font-semibold">No Matches</p>
+              <p className="text-[10px] text-[#94A3B8] mt-1">Entity cleared against all lists</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/pages/marketing/HeroSection.tsx

@@ -0,0 +1,72 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import GradientOrbs from './GradientOrbs'
+
+const words = 'Screen sanctions in milliseconds, not minutes'.split(' ')
+
+export default function HeroSection() {
+  const navigate = useNavigate()
+
+  return (
+    <section className="relative pt-32 pb-20 px-4 overflow-hidden">
+      <GradientOrbs />
+
+      <div className="relative max-w-4xl mx-auto text-center z-10">
+        <motion.p
+          className="flex items-center justify-center gap-2 text-sm text-[#64748B] mb-8"
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}>
+          <span className="w-1.5 h-1.5 rounded-full bg-[#00B894] animate-pulse" />
+          AI-powered sanctions screening · Free to start
+        </motion.p>
+
+        <h1 className="text-4xl sm:text-5xl lg:text-[64px] font-bold leading-[1.1] mb-6"
+          style={{ letterSpacing: '-0.03em' }}>
+          {words.map((word, i) => (
+            <motion.span key={i} className="inline-block mr-[0.3em] text-[#0F172A]"
+              initial={{ opacity: 0, y: 24, filter: 'blur(4px)' }}
+              animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+              transition={{ duration: 0.5, delay: 0.3 + i * 0.06, ease: [0.25, 0.4, 0, 1] }}>
+              {word}
+            </motion.span>
+          ))}
+        </h1>
+
+        <motion.p
+          className="text-lg text-[#64748B] max-w-2xl mx-auto leading-relaxed mb-10"
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.9 }}>
+          6-layer AI matching catches what keyword search misses.
+          <br className="hidden sm:block" />
+          86 global lists — 3M+ entities. Explainable results.
+          <br className="hidden sm:block" />
+          From first API call to production in under 5 minutes.
+        </motion.p>
+
+        <motion.div
+          className="flex flex-col sm:flex-row gap-4 justify-center"
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 1.1 }}>
+          <motion.button type="button" onClick={() => navigate('/signup')}
+            className="px-8 py-3.5 bg-[#00B894] text-white font-semibold rounded-xl text-sm cursor-pointer"
+            whileHover={{ scale: 1.04, boxShadow: '0 8px 30px rgba(0,184,148,0.3)' }}
+            whileTap={{ scale: 0.98 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 17 }}>
+            Start Free
+          </motion.button>
+          <motion.button type="button"
+            onClick={() => window.open('https://calendly.com/amliq', '_blank')}
+            className="px-8 py-3.5 text-[#1A1A2E] font-medium rounded-xl text-sm cursor-pointer border border-[#E2E8F0]"
+            whileHover={{ scale: 1.04, backgroundColor: '#F8FAFC' }}
+            whileTap={{ scale: 0.98 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 17 }}>
+            Watch Demo
+          </motion.button>
+        </motion.div>
+      </div>
+    </section>
+  )
+}