63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
const UpgradeModal = ({ isOpen, onClose }) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
|
/>
|
|
|
|
{/* Modal Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
className="relative bg-white rounded-[32px] shadow-2xl w-full max-w-sm overflow-hidden p-10 flex flex-col items-center text-center"
|
|
>
|
|
<h4 className="text-[22px] font-bold text-gray-900 mb-6">Note</h4>
|
|
|
|
<h3 className="text-[20px] font-bold text-gray-900 mb-4 leading-tight">
|
|
Membership Upgrade Required
|
|
</h3>
|
|
|
|
<p className="text-[#888] text-[15px] leading-relaxed mb-10 px-2 font-medium">
|
|
You are currently a Free Member. Upgrade to a Premium Plan to start sending interests and connecting with your perfect match.
|
|
</p>
|
|
|
|
<div className="flex w-full gap-4">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 py-4 border border-gray-200 text-gray-500 rounded-2xl font-bold text-[16px] hover:bg-gray-50 transition-all active:scale-[0.98]"
|
|
>
|
|
Later
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
navigate('/subscription-plan');
|
|
onClose();
|
|
}}
|
|
className="flex-1 py-4 bg-[#e91e4a] text-white rounded-2xl font-bold text-[16px] shadow-lg shadow-red-200 hover:bg-[#d81b45] transition-all active:scale-[0.98]"
|
|
>
|
|
Upgrade Now
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default UpgradeModal;
|