29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
interface BlurOverlayProps {
|
|
onUnlock: () => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export default function BlurOverlay({ onUnlock, loading }: BlurOverlayProps) {
|
|
return (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center backdrop-blur-md bg-white/60 rounded-lg">
|
|
<div className="text-center p-8 max-w-md">
|
|
<div className="text-4xl mb-4">🔒</div>
|
|
<h3 className="text-xl font-bold text-dark mb-2">Unlock Full Output</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Your complete, professional-quality output is ready. Unlock it to access the full document, improvements, validation, and exports.
|
|
</p>
|
|
<button
|
|
onClick={onUnlock}
|
|
disabled={loading}
|
|
className="bg-accent hover:bg-accent/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors disabled:opacity-50"
|
|
>
|
|
{loading ? 'Processing...' : 'Unlock Now — Pay Once'}
|
|
</button>
|
|
<p className="text-xs text-gray-400 mt-3">Secure payment via LemonSqueezy</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|