fix(spa): complete checkout flow, UI standardization, and tailwind v4 styling fixes

apps/spa/src/components/EmptyState.tsx

@@ -0,0 +1,40 @@
+import { PackageOpen } from 'lucide-react'
+import { Link } from 'react-router-dom'
+
+interface EmptyStateProps {
+  title?: string
+  message?: string
+  actionText?: string
+  actionLink?: string
+  actionClick?: () => void
+}
+
+export default function EmptyState({ 
+  title = 'Nothing found',
+  message = 'We could not find any items here.',
+  actionText = 'Browse Shop',
+  actionLink,
+  actionClick
+}: EmptyStateProps) {
+  const ButtonContent = () => (
+    <span className="inline-block mt-6 px-8 py-3 bg-spa-forest text-white rounded-xl text-sm font-bold uppercase tracking-widest hover:bg-spa-stone hover:shadow-lg transition-all cursor-pointer">
+      {actionText}
+    </span>
+  )
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4 text-center p-12 bg-white border border-spa-stone/10 rounded-2xl shadow-sm max-w-lg mx-auto my-8">
+      <div className="w-16 h-16 bg-spa-sage/30 rounded-full flex items-center justify-center mb-2">
+        <PackageOpen className="w-8 h-8 text-spa-forest" />
+      </div>
+      <h3 className="text-xl font-bold text-pop-black">{title}</h3>
+      <p className="text-spa-stone">{message}</p>
+      
+      {actionClick ? (
+        <div onClick={actionClick}><ButtonContent /></div>
+      ) : actionLink ? (
+        <Link to={actionLink}><ButtonContent /></Link>
+      ) : null}
+    </div>
+  )
+}