amliq-dashboard 2.0.0

package/src/pages/marketing/LandingPage.tsx

@@ -0,0 +1,45 @@
+import HeroSection from './HeroSection'
+import ProductShowcase from './ProductShowcase'
+import MatchingLayers from './MatchingLayers'
+import LogoMarquee from './LogoMarquee'
+import FeaturesSpotlight from './FeaturesSpotlight'
+import StatsBar from './StatsBar'
+import CompetitiveEdge from './CompetitiveEdge'
+import DataCoverage from './DataCoverage'
+import QuoteRotator from './QuoteRotator'
+import CaseStudy from './CaseStudy'
+import PricingSection from './PricingSection'
+import CTASection from './CTASection'
+import FAQSchema from './FAQSchema'
+
+export default function LandingPage() {
+  return (
+    <div
+      className="text-[#1A1A2E] scroll-smooth"
+      style={{
+        background: '#FFFFFF',
+        fontFamily: "'Inter', -apple-system, sans-serif",
+      }}
+    >
+      <header>
+        <HeroSection />
+        <ProductShowcase />
+      </header>
+      <LogoMarquee />
+      <StatsBar />
+      <MatchingLayers />
+      <section aria-label="Features">
+        <FeaturesSpotlight />
+      </section>
+      <CompetitiveEdge />
+      <DataCoverage />
+      <QuoteRotator />
+      <CaseStudy />
+      <section aria-label="Pricing">
+        <PricingSection />
+      </section>
+      <CTASection />
+      <FAQSchema />
+    </div>
+  )
+}

package/src/pages/marketing/LogoCloud.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Building2, Landmark, Shield, Globe, Scale, Wallet } from 'lucide-react'
+
+export default function LogoCloud() {
+  const { t } = useTranslation('marketing')
+  const segments = [
+    { icon: <Landmark size={20} />, label: t('logo_cloud.banks') },
+    { icon: <Shield size={20} />, label: t('logo_cloud.fintechs') },
+    { icon: <Building2 size={20} />, label: t('logo_cloud.msbs') },
+    { icon: <Globe size={20} />, label: t('logo_cloud.neobanks') },
+    { icon: <Scale size={20} />, label: t('logo_cloud.regulators') },
+    { icon: <Wallet size={20} />, label: t('logo_cloud.payments') },
+  ]
+
+  return (
+    <section className="py-16 border-y border-white/[0.04]">
+      <div className="max-w-7xl mx-auto px-4">
+        <p className="text-center text-sm text-zinc-400 mb-12">{t('logo_cloud.subtitle')}</p>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+          {segments.map(s => (
+            <div key={s.label} className="flex items-center justify-center gap-2 p-4 border border-white/[0.06] rounded-xl hover:border-white/[0.12] transition-colors">
+              <span className="text-zinc-400">{s.icon}</span>
+              <span className="text-sm text-zinc-400">{s.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/LogoMarquee.tsx

@@ -0,0 +1,45 @@
+import { Shield, Globe, Database, Lock, Zap, FileCheck } from 'lucide-react'
+
+const dataSources = [
+  { name: 'OFAC SDN', icon: Shield },
+  { name: 'UN Sanctions', icon: Globe },
+  { name: 'EU Consolidated', icon: Database },
+  { name: 'UK OFSI', icon: Lock },
+  { name: 'IL NBCTF', icon: Shield },
+  { name: 'OpenSanctions', icon: Database },
+  { name: 'PEP Lists', icon: FileCheck },
+  { name: '3M+ Entities', icon: Zap },
+]
+
+function SourceBadge({ name, icon: Icon }: { name: string; icon: typeof Shield }) {
+  return (
+    <div className="flex items-center gap-2 px-8 shrink-0 opacity-60 hover:opacity-100 transition-opacity">
+      <div className="w-8 h-8 rounded-md bg-[#F1F5F9] flex items-center justify-center">
+        <Icon size={14} className="text-[#00B894]" />
+      </div>
+      <span className="text-sm text-[#64748B] whitespace-nowrap font-medium">{name}</span>
+    </div>
+  )
+}
+
+export default function LogoMarquee() {
+  return (
+    <section className="py-16 overflow-hidden"
+      style={{ borderTop: '1px solid rgba(0,0,0,0.06)', borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
+      <p className="text-center text-xs uppercase tracking-[0.05em] text-[#64748B] font-medium mb-8">
+        Screening against global sanctions and watchlists
+      </p>
+      <div className="relative">
+        <div className="absolute left-0 top-0 bottom-0 w-24 z-10"
+          style={{ background: 'linear-gradient(90deg, #FFFFFF, transparent)' }} />
+        <div className="absolute right-0 top-0 bottom-0 w-24 z-10"
+          style={{ background: 'linear-gradient(270deg, #FFFFFF, transparent)' }} />
+        <div className="flex items-center marquee-track">
+          {[...dataSources, ...dataSources].map((src, i) => (
+            <SourceBadge key={`${src.name}-${i}`} name={src.name} icon={src.icon} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/MarketingNav.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Menu, X } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
+import MobileMenu from './MobileMenu'
+
+const navLinks = [
+  { label: 'Features', href: '#features' },
+  { label: 'Pricing', href: '#pricing' },
+]
+
+export default function MarketingNav() {
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const [scrolled, setScrolled] = useState(false)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <>
+      <motion.nav
+        className="sticky top-0 z-50 transition-all duration-300"
+        style={{
+          background: scrolled ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.6)',
+          backdropFilter: 'blur(20px) saturate(180%)',
+          borderBottom: scrolled ? '1px solid rgba(0,0,0,0.06)' : '1px solid transparent',
+          boxShadow: scrolled ? '0 1px 3px rgba(0,0,0,0.04)' : 'none',
+        }}>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <a href="/" className="flex items-center gap-1 group">
+            <span className="text-xl font-extrabold text-[#0F172A] tracking-tight">AMLIQ</span>
+            <motion.span className="w-1.5 h-1.5 rounded-full bg-[#00B894] -mt-3"
+              animate={{ scale: [1, 1.3, 1] }}
+              transition={{ duration: 2, repeat: Infinity }} />
+          </a>
+          <div className="hidden md:flex items-center gap-8">
+            {navLinks.map(l => (
+              <a key={l.label} href={l.href}
+                className="text-sm text-[#64748B] hover:text-[#0F172A] transition-colors font-medium">
+                {l.label}
+              </a>
+            ))}
+          </div>
+          <div className="hidden md:flex items-center gap-4">
+            <button type="button" onClick={() => navigate('/login')}
+              className="text-sm text-[#64748B] hover:text-[#0F172A] transition-colors cursor-pointer font-medium">
+              Login
+            </button>
+            <motion.button type="button"
+              onClick={() => window.open('https://calendly.com/amliq', '_blank')}
+              className="px-5 py-2 bg-[#00B894] text-white text-sm font-semibold rounded-xl cursor-pointer"
+              whileHover={{ scale: 1.04, boxShadow: '0 4px 16px rgba(0,184,148,0.3)' }}
+              whileTap={{ scale: 0.97 }}>
+              Book a Demo
+            </motion.button>
+          </div>
+          <button type="button" onClick={() => setMobileOpen(!mobileOpen)}
+            className="md:hidden text-[#0F172A] p-2 -mr-2">
+            {mobileOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        </div>
+      </motion.nav>
+      <AnimatePresence>
+        {mobileOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.25 }}>
+            <MobileMenu onClose={() => setMobileOpen(false)} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}

package/src/pages/marketing/MatchingLayers.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
+import { FadeUp, ScaleIn } from './animations'
+
+const layers = [
+  { name: 'Exact', score: 100, color: '#00B894' },
+  { name: 'Fuzzy', score: 92, color: '#22C55E' },
+  { name: 'Phonetic', score: 88, color: '#6366F1' },
+  { name: 'Token', score: 85, color: '#8B5CF6' },
+  { name: 'Embedding', score: 79, color: '#EC4899' },
+  { name: 'Graph', score: 71, color: '#F59E0B' },
+]
+
+function LayerBar({ name, score, color, delay }: {
+  name: string; score: number; color: string; delay: number
+}) {
+  const [width, setWidth] = useState(0)
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const obs = new IntersectionObserver(([e]) => {
+      if (e.isIntersecting) { setTimeout(() => setWidth(score), delay); obs.disconnect() }
+    }, { threshold: 0.3 })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [score, delay])
+
+  return (
+    <motion.div ref={ref} className="flex items-center gap-4"
+      whileHover={{ x: 2 }} transition={{ type: 'spring', stiffness: 400 }}>
+      <span className="w-24 text-right text-sm font-semibold text-[#64748B] shrink-0">{name}</span>
+      <div className="flex-1 h-9 rounded-lg bg-[#F1F5F9] overflow-hidden relative">
+        <motion.div
+          className="h-full rounded-lg flex items-center justify-end pr-3"
+          style={{ width: `${width}%`, background: `linear-gradient(90deg, ${color}, ${color}CC)` }}
+          initial={{ width: 0 }}
+          animate={{ width: `${width}%` }}
+          transition={{ duration: 1.2, ease: [0.25, 0.4, 0, 1], delay: delay / 1000 }}>
+          {width > 0 && <span className="text-xs font-bold text-white">{score}%</span>}
+        </motion.div>
+      </div>
+    </motion.div>
+  )
+}
+
+export default function MatchingLayers() {
+  return (
+    <section className="py-28 px-4">
+      <div className="max-w-3xl mx-auto">
+        <FadeUp>
+          <p className="text-xs uppercase tracking-[0.2em] text-[#00B894] font-semibold text-center mb-3">
+            Matching Engine
+          </p>
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-4 text-[#0F172A]"
+            style={{ letterSpacing: '-0.03em' }}>
+            6-layer AI pipeline
+          </h2>
+          <p className="text-[#64748B] text-center mb-14 max-w-lg mx-auto">
+            Every entity flows through six independent matching layers.
+            Each score is weighted and explained.
+          </p>
+        </FadeUp>
+        <ScaleIn>
+          <div className="space-y-4 p-8 rounded-2xl" style={{
+            background: '#FAFBFC', border: '1px solid rgba(0,0,0,0.06)',
+            boxShadow: '0 8px 30px rgba(0,0,0,0.04)',
+          }}>
+            <p className="text-xs text-[#94A3B8] mb-3" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+              screening &quot;Mohammad Ali Hassan&quot;
+            </p>
+            {layers.map((l, i) => <LayerBar key={l.name} {...l} delay={i * 200} />)}
+          </div>
+        </ScaleIn>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/MobileMenu.tsx

@@ -0,0 +1,45 @@
+import { useNavigate } from 'react-router-dom'
+
+interface MobileMenuProps {
+  onClose: () => void
+}
+
+const links = [
+  { label: 'Features', href: '#features' },
+  { label: 'Pricing', href: '#pricing' },
+  { label: 'Solutions', href: '#screening' },
+  { label: 'Contact', href: 'mailto:info@amliq.finance' },
+]
+
+export default function MobileMenu({ onClose }: MobileMenuProps) {
+  const navigate = useNavigate()
+
+  const go = (path: string) => {
+    navigate(path)
+    onClose()
+  }
+
+  return (
+    <div
+      className="md:hidden px-4 py-6 space-y-4"
+      style={{ background: '#FAFBFC', borderBottom: '1px solid rgba(0,0,0,0.08)' }}
+    >
+      {links.map(l => (
+        <a key={l.label} href={l.href} onClick={onClose}
+          className="block text-[#64748B] hover:text-[#1A1A2E] transition-colors">
+          {l.label}
+        </a>
+      ))}
+      <div className="pt-4 space-y-3" style={{ borderTop: '1px solid rgba(0,0,0,0.08)' }}>
+        <button type="button" onClick={() => go('/login')}
+          className="w-full text-left text-[#64748B] hover:text-[#1A1A2E] transition-colors">
+          Login
+        </button>
+        <button type="button" onClick={() => go('/signup')}
+          className="w-full px-4 py-2.5 bg-[#00B894] hover:bg-[#00A383] text-white font-semibold rounded-lg transition-colors">
+          Book a Demo
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/pages/marketing/PricingCard.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Check } from 'lucide-react'
+import { Plan } from '../../types/billing'
+
+interface PricingCardProps {
+  plan: Plan
+  annual?: boolean
+  productType?: string
+}
+
+export default function PricingCard({ plan, annual = false }: PricingCardProps) {
+  const { t } = useTranslation('marketing')
+  const price = annual ? plan.annualPrice : plan.monthlyPrice
+  const displayPrice = annual ? (price / 12).toFixed(0) : price.toFixed(0)
+  const isEnterprise = price === 0 || plan.name === 'Enterprise'
+  const popular = plan.highlighted
+
+  return (
+    <div className={`relative card-vibrancy p-lg transition-all ${popular ? 'border-apple-blue shadow-[0_0_24px_rgba(10,132,255,0.15)]' : ''} hover:border-white/20`}>
+      {popular && (
+        <div className="absolute -top-3 left-4 bg-apple-blue text-white sf-caption font-bold px-md py-xs rounded-apple-md">
+          {t('pricing.most_popular')}
+        </div>
+      )}
+
+      <h3 className="sf-headline text-white mb-lg">{plan.name}</h3>
+
+      {!isEnterprise ? (
+        <div className="mb-lg">
+          <span className="text-5xl font-bold text-white">${displayPrice}</span>
+          <span className="sf-caption text-apple-label-tertiary ml-xs">{t('pricing.per_month')}</span>
+          {annual && (
+            <div className="sf-caption text-apple-label-secondary mt-sm">
+              {t('pricing.billed_yearly', { price: price.toFixed(0) })}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="mb-lg text-3xl font-bold text-white">{t('pricing.custom')}</div>
+      )}
+
+      <button type="button" className={`w-full py-md rounded-apple-md font-semibold transition-colors cursor-pointer mb-lg ${popular ? 'bg-apple-blue hover:bg-blue-600 text-white' : 'border border-white/20 text-white hover:border-white/40'}`}>
+        {isEnterprise ? t('pricing.contact_sales') : t('pricing.get_started')}
+      </button>
+
+      <div className="space-y-sm">
+        {plan.features.map((f, i) => (
+          <div key={i} className="flex items-start gap-sm">
+            <Check size={14} className="text-apple-green mt-0.5 shrink-0" />
+            <span className="sf-caption text-apple-label-secondary">{f}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/pages/marketing/PricingFeatureRow.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Check } from 'lucide-react'
+
+interface PricingFeatureRowProps {
+  label: string
+  included: boolean
+}
+
+export default function PricingFeatureRow({ label, included }: PricingFeatureRowProps) {
+  return (
+    <div className={`flex items-center gap-3 py-2 text-sm ${included ? 'text-zinc-400' : 'text-zinc-400 line-through'}`}>
+      {included ? <Check size={16} className="text-green-500 flex-shrink-0" /> : <div className="w-4 h-4 flex-shrink-0" />}
+      {label}
+    </div>
+  )
+}

package/src/pages/marketing/PricingSection.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { Check } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { FadeUp } from './animations'
+import PricingToggle from './PricingToggle'
+
+interface Plan {
+  name: string; monthly: number; features: string[]
+  highlighted?: boolean; enterprise?: boolean
+}
+
+const plans: Plan[] = [
+  { name: 'Free', monthly: 0, features: [
+    '100 screenings/mo', 'OFAC + UN + EU lists', 'REST API', '6-layer matching',
+    'Community support', '7-day retention',
+  ]},
+  { name: 'Pro', monthly: 299, highlighted: true, features: [
+    '50,000 screenings/mo', 'All 86 sanctions lists', '3M+ entity database',
+    'AI cascade (Claude)', 'Freetext screening', 'Batch screening',
+    'Webhooks & MFA', 'Priority support', '90-day retention',
+  ]},
+  { name: 'Enterprise', monthly: 0, enterprise: true, features: [
+    'Unlimited screenings', 'Custom list uploads', 'On-premise agent',
+    'SAML SSO', 'Dedicated CSM + SLA', 'Self-hosted option',
+    'Crypto wallet screening', 'Transaction orchestration',
+  ]},
+]
+
+function PlanCard({ plan, annual }: { plan: Plan; annual: boolean }) {
+  const price = annual ? Math.round(plan.monthly * 0.8) : plan.monthly
+  const hl = plan.highlighted
+  return (
+    <motion.div
+      className={`relative rounded-2xl p-6 ${hl ? '-translate-y-2' : ''}`}
+      style={{
+        background: hl ? '#FAFBFC' : '#FFFFFF',
+        border: `1px solid ${hl ? '#00B894' : 'rgba(0,0,0,0.06)'}`,
+        boxShadow: hl ? '0 8px 40px rgba(0,184,148,0.12)' : '0 2px 8px rgba(0,0,0,0.04)',
+      }}
+      whileHover={{ y: hl ? -12 : -6, boxShadow: '0 16px 50px rgba(0,0,0,0.1)' }}
+      transition={{ type: 'spring', stiffness: 300, damping: 20 }}>
+      {hl && (
+        <div className="absolute -top-3 left-6 px-3 py-0.5 text-[11px] font-bold rounded-full text-white
+          bg-gradient-to-r from-[#00B894] to-[#059669] uppercase tracking-wider">
+          Most Popular
+        </div>
+      )}
+      <h3 className="text-lg font-bold text-[#0F172A] mb-4">{plan.name}</h3>
+      {plan.enterprise ? (
+        <p className="text-3xl font-extrabold text-[#0F172A] mb-6">Custom</p>
+      ) : price === 0 ? (
+        <p className="text-4xl font-extrabold text-[#0F172A] mb-6">Free</p>
+      ) : (
+        <div className="mb-6">
+          <span className="text-4xl font-extrabold text-[#0F172A]">${price}</span>
+          <span className="text-sm text-[#94A3B8] ml-1">/mo</span>
+        </div>
+      )}
+      <motion.button type="button"
+        className={`w-full py-3 rounded-xl font-semibold text-sm mb-6 cursor-pointer ${hl
+          ? 'bg-[#00B894] text-white' : 'text-[#0F172A] border border-[#E2E8F0]'}`}
+        whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+        {plan.enterprise ? 'Contact Sales' : price === 0 ? 'Get Started Free' : 'Start Free Trial'}
+      </motion.button>
+      <ul className="space-y-3">
+        {plan.features.map(f => (
+          <li key={f} className="flex items-start gap-2.5">
+            <Check size={14} className="text-[#00B894] mt-0.5 shrink-0" />
+            <span className="text-sm text-[#64748B]">{f}</span>
+          </li>
+        ))}
+      </ul>
+    </motion.div>
+  )
+}
+
+export default function PricingSection() {
+  const [annual, setAnnual] = useState(false)
+  return (
+    <section id="pricing" className="py-28 px-4">
+      <div className="max-w-5xl mx-auto">
+        <FadeUp>
+          <p className="text-xs uppercase tracking-[0.2em] text-[#00B894] font-semibold text-center mb-3">Pricing</p>
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0F172A] text-center mb-4"
+            style={{ letterSpacing: '-0.03em' }}>
+            Simple, transparent pricing
+          </h2>
+          <p className="text-[#64748B] text-center mb-10 max-w-xl mx-auto">
+            Start free. Scale as you grow. No hidden fees.
+          </p>
+          <PricingToggle annual={annual} onChange={setAnnual} />
+        </FadeUp>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+          {plans.map((p, i) => (
+            <FadeUp key={p.name} delay={i * 0.1}>
+              <PlanCard plan={p} annual={annual} />
+            </FadeUp>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/PricingToggle.tsx

@@ -0,0 +1,40 @@
+interface PricingToggleProps {
+  annual: boolean
+  onChange: (annual: boolean) => void
+}
+
+export default function PricingToggle({ annual, onChange }: PricingToggleProps) {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <button
+        type="button"
+        onClick={() => onChange(false)}
+        className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+          !annual
+            ? 'bg-[#00B894]/10 text-[#00B894]'
+            : 'text-[#64748B] hover:text-[#0F172A]'
+        }`}
+        style={!annual ? { border: '1px solid rgba(0,184,148,0.2)' } : {}}
+      >
+        Monthly
+      </button>
+      <button
+        type="button"
+        onClick={() => onChange(true)}
+        className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+          annual
+            ? 'bg-[#00B894]/10 text-[#00B894]'
+            : 'text-[#64748B] hover:text-[#0F172A]'
+        }`}
+        style={annual ? { border: '1px solid rgba(0,184,148,0.2)' } : {}}
+      >
+        Annual
+      </button>
+      {annual && (
+        <span className="text-xs font-semibold text-[#22C55E] bg-[#22C55E]/10 px-2.5 py-1 rounded">
+          Save 20%
+        </span>
+      )}
+    </div>
+  )
+}

package/src/pages/marketing/ProductPricingCards.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Product } from '../../types/billing'
+import PricingCard from './PricingCard'
+
+interface ProductPricingCardsProps {
+  product: Product
+  annual?: boolean
+}
+
+export function ProductPricingCards({ product, annual = false }: ProductPricingCardsProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-lg">
+      {product.plans.map(plan => (
+        <PricingCard
+          key={plan.id}
+          plan={plan}
+          annual={annual}
+          productType={product.type}
+        />
+      ))}
+    </div>
+  )
+}

package/src/pages/marketing/ProductShowcase.tsx

@@ -0,0 +1,81 @@
+import { useNavigate } from 'react-router-dom'
+import { Shield, Zap, Globe, Brain, Layers, BarChart3 } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { FadeUp, ScaleIn } from './animations'
+
+const features = [
+  { icon: Layers, label: '6-Layer AI Matching', detail: 'Exact, Fuzzy, Phonetic, Token, Embedding, Graph' },
+  { icon: Zap, label: 'Sub-50ms Screening', detail: '18,699+ entities screened in real-time' },
+  { icon: Globe, label: 'Global List Coverage', detail: 'OFAC, UN, EU, UK OFSI, IL NBCTF, OpenSanctions' },
+  { icon: Shield, label: 'PEP + RCA Screening', detail: 'Politicians, relatives, close associates' },
+  { icon: Brain, label: 'Explainable Results', detail: 'Every match shows why it matched and how' },
+  { icon: BarChart3, label: 'Ongoing Monitoring', detail: 'Continuous re-screening when lists update' },
+]
+
+export default function ProductShowcase() {
+  const navigate = useNavigate()
+
+  return (
+    <section className="px-4 pb-24 pt-8">
+      <div className="max-w-5xl mx-auto">
+        <ScaleIn>
+          <div className="relative rounded-2xl overflow-hidden"
+            style={{ border: '1px solid rgba(0,0,0,0.06)', background: '#FAFBFC',
+              boxShadow: '0 20px 60px rgba(0,0,0,0.06)' }}>
+
+            <div className="flex items-center gap-2 px-4 py-3 bg-[#F1F5F9]">
+              <span className="w-3 h-3 rounded-full bg-[#EF4444]" />
+              <span className="w-3 h-3 rounded-full bg-[#F59E0B]" />
+              <span className="w-3 h-3 rounded-full bg-[#22C55E]" />
+              <span className="ml-4 text-xs text-[#94A3B8]">AMLIQ Dashboard — Sanctions Screening</span>
+            </div>
+
+            <div className="p-8 md:p-12">
+              <div className="grid md:grid-cols-2 gap-8 mb-10">
+                {features.map((f, i) => (
+                  <FadeUp key={f.label} delay={i * 0.08}>
+                    <motion.div className="flex gap-4 items-start group"
+                      whileHover={{ x: 4 }} transition={{ type: 'spring', stiffness: 300 }}>
+                      <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0
+                        bg-gradient-to-br from-[#00B894]/10 to-[#00B894]/5 border border-[#00B894]/15">
+                        <f.icon size={18} color="#00B894" />
+                      </div>
+                      <div>
+                        <p className="text-[#0F172A] font-semibold text-sm">{f.label}</p>
+                        <p className="text-[#64748B] text-xs mt-1 leading-relaxed">{f.detail}</p>
+                      </div>
+                    </motion.div>
+                  </FadeUp>
+                ))}
+              </div>
+
+              <div className="border-t border-[#E2E8F0] pt-8 flex flex-col sm:flex-row items-center justify-between gap-6">
+                <div>
+                  <p className="text-[#0F172A] font-semibold">See it screening real sanctions data</p>
+                  <p className="text-[#64748B] text-sm mt-1">
+                    18,699+ OFAC entities · PEP databases · IL NBCTF · Hebrew + English
+                  </p>
+                </div>
+                <div className="flex gap-3">
+                  <motion.button type="button" onClick={() => navigate('/signup')}
+                    className="px-6 py-3 bg-[#00B894] text-white font-semibold text-sm rounded-xl cursor-pointer"
+                    whileHover={{ scale: 1.03, boxShadow: '0 6px 24px rgba(0,184,148,0.25)' }}
+                    whileTap={{ scale: 0.97 }}>
+                    Start Free Trial
+                  </motion.button>
+                  <motion.button type="button"
+                    onClick={() => window.open('https://calendly.com/amliq', '_blank')}
+                    className="px-6 py-3 text-[#1A1A2E] text-sm rounded-xl cursor-pointer border border-[#E2E8F0]"
+                    whileHover={{ scale: 1.03, backgroundColor: '#F8FAFC' }}
+                    whileTap={{ scale: 0.97 }}>
+                    Book a Demo
+                  </motion.button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ScaleIn>
+      </div>
+    </section>
+  )
+}