Upload components/Pricing.jsx with huggingface_hub

components/Pricing.jsx

@@ -0,0 +1,112 @@
+import { motion } from 'framer-motion';
+import { Check, X } from 'lucide-react';
+
+export default function Pricing() {
+  const plans = [
+    {
+      name: "Starter",
+      price: "Free",
+      description: "Perfect for individuals and hobbyists",
+      features: ["Basic 3D scrolling", "100MB storage", "Community support", "Standard templates"],
+      cta: "Start for Free",
+      popular: false
+    },
+    {
+      name: "Pro",
+      price: "$29",
+      description: "For growing businesses and creators",
+      features: ["Advanced 3D effects", "10GB storage", "Priority support", "Custom templates", "Analytics dashboard"],
+      cta: "Get Pro",
+      popular: true
+    },
+    {
+      name: "Enterprise",
+      price: "Custom",
+      description: "For large organizations and teams",
+      features: ["Full AI capabilities", "Unlimited storage", "24/7 dedicated support", "Custom integration", "SLA agreement"],
+      cta: "Contact Sales",
+      popular: false
+    }
+  ];
+
+  return (
+    <section id="pricing" className="py-24 bg-slate-900 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-[30%] left-[20%] w-[40%] h-[40%] rounded-full bg-purple-600/10 blur-[100px]"></div>
+        <div className="absolute bottom-[20%] right-[15%] w-[30%] h-[30%] rounded-full bg-blue-600/10 blur-[80px]"></div>
+      </div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="text-center mb-20">
+          <motion.h2 
+            className="text-4xl md:text-5xl font-bold text-white mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+          >
+            Simple, <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">Transparent</span> Pricing
+          </motion.h2>
+          <motion.p 
+            className="text-xl text-slate-400 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.2 }}
+          >
+            Choose the perfect plan for your needs. No hidden fees, no surprises.
+          </motion.p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          {plans.map((plan, index) => (
+            <motion.div
+              key={index}
+              className={`relative p-8 rounded-3xl backdrop-blur-sm border transition-all duration-300 ${
+                plan.popular 
+                  ? 'bg-slate-800/50 border-purple-500 shadow-2xl shadow-purple-500/20 scale-105 z-10' 
+                  : 'bg-slate-800/30 border-slate-700 hover:border-slate-600'
+              }`}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.1 }}
+            >
+              {plan.popular && (
+                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-purple-600 to-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium">
+                  Most Popular
+                </div>
+              )}
+              
+              <div className="mb-8">
+                <h3 className="text-2xl font-bold text-white mb-2">{plan.name}</h3>
+                <div className="flex items-baseline gap-1">
+                  <span className="text-4xl font-bold text-white">{plan.price}</span>
+                  {plan.price !== "Free" && <span className="text-slate-400">/month</span>}
+                </div>
+                <p className="text-slate-400 mt-2">{plan.description}</p>
+              </div>
+              
+              <div className="space-y-4 mb-8">
+                {plan.features.map((feature, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <Check className="w-5 h-5 text-purple-400 flex-shrink-0" />
+                    <span className="text-slate-300 text-sm">{feature}</span>
+                  </div>
+                ))}
+              </div>
+              
+              <button className={`w-full py-3 rounded-xl font-bold transition-all duration-200 ${
+                plan.popular
+                  ? 'bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white'
+                  : 'bg-slate-700 hover:bg-slate-600 text-white'
+              }`}>
+                {plan.cta}
+              </button>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}