Design System Upgrades
Stripe-inspired design refinements applied platform-wide:
- Indigo Glow: glass-morphism hover effect on feature cards and interactive surfaces with inset rgba(99,91,255,0.08) shadow and cubic-bezier transition.
- Heading Typography: -0.02em letter-spacing on all h1-h3 for tighter, professional appearance.
- Security Pulse: animated green glow keyframe on shield icon with 3s ease-in-out cycle.
- Snappy Transitions: cubic-bezier(0.215, 0.61, 0.355, 1) timing for high-end interactive feel.
- SVG Animations: float, pulse-ring, and data-flow keyframes for product illustrations.
Security Status Component
A new SecurityStatus component in the global navigation header displays a green-pulsing shield icon. Clicking it opens a Radix UI Popover showing live security details: AES-256-GCM encryption, RSA-2048 key exchange, TLS 1.3 transport, session status, and zero-knowledge architecture confirmation.
Product Page Enhancements
Rich new sections added to all product landing pages:
- Interactive Demos: encryption toggle, price signal slider, hash verification, and PGP email encryption — all client-side interactive widgets.
- Use-Case Cards: three persona-specific scenarios per product (importer, forwarder, finance/compliance).
- Social Proof Strips: platform-wide stats (50M+ signals, 10K+ traders, 0 breaches).
- FAQ Accordions: 4-5 questions per product using Radix UI accordion with smooth animations.
- Product Comparison Table: /products/compare with side-by-side feature matrix across all 4 products.
- Integration Diagram: SVG showing cross-product data flow (Drive → Email → Alerts → Security).
Drive UX Upgrades
Three targeted improvements to TradeDrive:
- Breadcrumb Refactor: ChevronDown dropdown shows sibling folders at each level. Breadcrumb items are droppable zones for drag-and-drop file moves up the hierarchy.
- Upload Manager: minimized state shows a circular SVG progress ring instead of a flat bar. Completed uploads get an animated SVG checkmark with path-draw animation. Encrypting status now uses indigo (#635BFF) color to distinguish from upload blue.
- Skeleton Loaders: SpreadsheetSkeleton renders a shimmer grid matching Excel layout. DocumentSkeleton renders a shimmer page with heading and paragraph lines. Both replace the generic spinner in editor Suspense boundaries.