Create UpgradeModal.jsx

frontend/src/components/ocr/UpgradeModal.jsx

@@ -0,0 +1,239 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { 
+    X, 
+    Sparkles, 
+    Zap, 
+    Shield, 
+    Cloud, 
+    BarChart3, 
+    Bot,
+    Globe,
+    Lock,
+    Rocket,
+    Users,
+    CheckCircle2,
+    ArrowRight
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const features = [
+    {
+        icon: Zap,
+        title: "Unlimited Extractions",
+        description: "Process unlimited documents with lightning-fast AI extraction",
+        color: "amber",
+        cta: "Try Pro",
+        gradient: "from-amber-500 to-orange-500"
+    },
+    {
+        icon: Bot,
+        title: "Advanced AI Models",
+        description: "Access GPT-4 Vision and specialized extraction models",
+        color: "indigo",
+        cta: "Talk to Sales",
+        gradient: "from-indigo-500 to-violet-500"
+    },
+    {
+        icon: Cloud,
+        title: "API Access",
+        description: "Integrate EZOFIS into your workflow with our REST API",
+        color: "blue",
+        cta: "View Docs",
+        gradient: "from-blue-500 to-cyan-500"
+    },
+    {
+        icon: BarChart3,
+        title: "Advanced Analytics",
+        description: "Track accuracy, processing time, and extraction insights",
+        color: "emerald",
+        cta: "Custom Demo",
+        gradient: "from-emerald-500 to-teal-500"
+    },
+    {
+        icon: Shield,
+        title: "Enterprise Security",
+        description: "SOC2 compliant with end-to-end encryption",
+        color: "slate",
+        cta: "Learn More",
+        gradient: "from-slate-600 to-slate-800"
+    },
+    {
+        icon: Users,
+        title: "Team Collaboration",
+        description: "Share extractions and collaborate with your team",
+        color: "purple",
+        cta: "Try Pro",
+        gradient: "from-purple-500 to-pink-500"
+    }
+];
+
+export default function UpgradeModal({ open, onClose }) {
+    if (!open) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={onClose}
+            />
+
+            {/* Modal */}
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                className="relative z-10 w-full max-w-6xl max-h-[90vh] mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="sticky top-0 bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600 text-white px-8 py-6 z-10">
+                    <button 
+                        onClick={onClose}
+                        className="absolute right-6 top-6 h-8 w-8 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                    
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="text-center"
+                    >
+                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-sm mb-4">
+                            <Sparkles className="h-4 w-4" />
+                            <span className="text-sm font-medium">Trial Limit Reached</span>
+                        </div>
+                        <h2 className="text-3xl font-bold mb-2">You've processed 2 documents</h2>
+                        <p className="text-white/80 text-lg">Upgrade to unlock the full power of EZOFIS AI</p>
+                    </motion.div>
+                </div>
+
+                {/* Stats Bar */}
+                <div className="grid grid-cols-3 gap-6 px-8 py-6 bg-slate-50 border-b border-slate-200">
+                    {[
+                        { label: "Accuracy Rate", value: "98.5%", icon: CheckCircle2 },
+                        { label: "Processing Speed", value: "< 3s", icon: Zap },
+                        { label: "Happy Customers", value: "10,000+", icon: Users }
+                    ].map((stat, i) => (
+                        <motion.div
+                            key={stat.label}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: i * 0.1 }}
+                            className="text-center"
+                        >
+                            <div className="flex items-center justify-center gap-2 mb-1">
+                                <stat.icon className="h-4 w-4 text-indigo-600" />
+                                <span className="text-2xl font-bold text-slate-900">{stat.value}</span>
+                            </div>
+                            <p className="text-sm text-slate-500">{stat.label}</p>
+                        </motion.div>
+                    ))}
+                </div>
+
+                {/* Features Grid - Scrollable */}
+                <div className="flex-1 overflow-auto px-8 py-8">
+                    <div className="text-center mb-8">
+                        <h3 className="text-2xl font-bold text-slate-900 mb-2">
+                            Unlock Premium Features
+                        </h3>
+                        <p className="text-slate-600">
+                            Scale your document processing with enterprise-grade capabilities
+                        </p>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {features.map((feature, index) => (
+                            <motion.div
+                                key={feature.title}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: 0.2 + index * 0.1 }}
+                                className="group relative bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all duration-300 hover:-translate-y-1 overflow-hidden"
+                            >
+                                {/* Gradient Background on Hover */}
+                                <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />
+                                
+                                <div className="relative">
+                                    <div className={cn(
+                                        "h-12 w-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300",
+                                        feature.color === "amber" && "bg-amber-50",
+                                        feature.color === "indigo" && "bg-indigo-50",
+                                        feature.color === "blue" && "bg-blue-50",
+                                        feature.color === "emerald" && "bg-emerald-50",
+                                        feature.color === "slate" && "bg-slate-50",
+                                        feature.color === "purple" && "bg-purple-50"
+                                    )}>
+                                        <feature.icon className={cn(
+                                            "h-6 w-6",
+                                            feature.color === "amber" && "text-amber-600",
+                                            feature.color === "indigo" && "text-indigo-600",
+                                            feature.color === "blue" && "text-blue-600",
+                                            feature.color === "emerald" && "text-emerald-600",
+                                            feature.color === "slate" && "text-slate-600",
+                                            feature.color === "purple" && "text-purple-600"
+                                        )} />
+                                    </div>
+                                    <h4 className="font-semibold text-slate-900 mb-2">{feature.title}</h4>
+                                    <p className="text-sm text-slate-600 mb-4 leading-relaxed">{feature.description}</p>
+                                    
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className={cn(
+                                            "w-full h-9 border transition-all group-hover:shadow-md",
+                                            feature.color === "amber" && "text-amber-600 hover:bg-amber-50 border-amber-200 hover:border-amber-300",
+                                            feature.color === "indigo" && "text-indigo-600 hover:bg-indigo-50 border-indigo-200 hover:border-indigo-300",
+                                            feature.color === "blue" && "text-blue-600 hover:bg-blue-50 border-blue-200 hover:border-blue-300",
+                                            feature.color === "emerald" && "text-emerald-600 hover:bg-emerald-50 border-emerald-200 hover:border-emerald-300",
+                                            feature.color === "slate" && "text-slate-600 hover:bg-slate-50 border-slate-200 hover:border-slate-300",
+                                            feature.color === "purple" && "text-purple-600 hover:bg-purple-50 border-purple-200 hover:border-purple-300"
+                                        )}
+                                    >
+                                        {feature.cta}
+                                        <ArrowRight className="h-3.5 w-3.5 ml-2 group-hover:translate-x-1 transition-transform" />
+                                    </Button>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* CTA Footer */}
+                <div className="sticky bottom-0 bg-white border-t border-slate-200 px-8 py-6">
+                    <div className="flex items-center justify-between gap-6">
+                        <div className="flex-1">
+                            <h4 className="font-semibold text-slate-900 mb-1">Ready to scale?</h4>
+                            <p className="text-sm text-slate-600">Choose the plan that fits your needs</p>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <Button
+                                variant="outline"
+                                size="lg"
+                                className="h-11 border-slate-300"
+                            >
+                                <Users className="h-4 w-4 mr-2" />
+                                Talk to Sales
+                            </Button>
+                            <Button
+                                size="lg"
+                                className="h-11 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30"
+                            >
+                                <Rocket className="h-4 w-4 mr-2" />
+                                Upgrade to Pro
+                                <Sparkles className="h-4 w-4 ml-2" />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
+    );
+}
+