Upload components/Pricing.jsx with huggingface_hub

components/Pricing.jsx

@@ -1,86 +1,101 @@
 import React from 'react';
-import { Check } from 'lucide-react';
 
-export default function Pricing() {
+const Pricing = () => {
+  const plans = [
+    {
+      name: "Starter",
+      price: "$999",
+      period: "/month",
+      description: "Perfect for research and small projects",
+      features: [
+        "Up to 100GB dataset access",
+        "Basic API rate limits",
+        "Email support",
+        "Standard preprocessing"
+      ]
+    },
+    {
+      name: "Professional",
+      price: "$2,499",
+      period: "/month",
+      description: "Ideal for growing AI teams",
+      features: [
+        "Up to 1TB dataset access",
+        "Higher API rate limits",
+        "Priority support",
+        "Advanced preprocessing",
+        "Custom dataset requests"
+      ],
+      popular: true
+    },
+    {
+      name: "Enterprise",
+      price: "Custom",
+      period: "",
+      description: "For large-scale production deployments",
+      features: [
+        "Full dataset access",
+        "Unlimited API usage",
+        "24/7 dedicated support",
+        "Custom preprocessing",
+        "White-glove onboarding",
+        "SLA guarantees"
+      ]
+    }
+  ];
+
   return (
-    <section id="pricing" className="py-24 bg-slate-900">
+    <section id="pricing" className="py-20 bg-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
-          <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
-            Simple, Transparent Pricing
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            Flexible Pricing
           </h2>
-          <p className="mt-4 text-xl text-gray-400">
-            Choose the plan that fits your model's appetite.
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Scale with your needs - from research prototypes to enterprise deployments
           </p>
         </div>
-
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {/* Starter Plan */}
-          <div className="bg-brand-dark border border-white/10 rounded-2xl p-8 flex flex-col">
-            <h3 className="text-xl font-bold text-white">Researcher</h3>
-            <p className="text-gray-400 mt-2">Perfect for fine-tuning and experiments.</p>
-            <div className="mt-6 mb-6">
-              <span className="text-4xl font-bold text-white">$499</span>
-              <span className="text-gray-400">/mo</span>
-            </div>
-            <ul className="space-y-4 mb-8 flex-1">
-              {['1TB Monthly Transfer', 'Access to Public Datasets', 'Basic API Access', 'Community Support'].map((item) => (
-                <li key={item} className="flex items-center text-gray-300">
-                  <Check className="h-5 w-5 text-brand-accent mr-3" />
-                  {item}
-                </li>
-              ))}
-            </ul>
-            <button className="w-full py-3 px-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-lg transition-colors">
-              Start Trial
-            </button>
-          </div>
-
-          {/* Pro Plan */}
-          <div className="bg-brand-dark border border-brand-accent rounded-2xl p-8 flex flex-col relative transform scale-105 shadow-2xl shadow-brand-accent/10">
-            <div className="absolute top-0 right-0 bg-brand-accent text-brand-dark text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
-              POPULAR
+          {plans.map((plan, index) => (
+            <div key={index} className={`relative rounded-2xl border-2 p-8 ${
+              plan.popular 
+                ? 'border-primary-600 shadow-xl scale-105' 
+                : 'border-gray-200'
+            }`}>
+              {plan.popular && (
+                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                  <span className="bg-primary-600 text-white px-4 py-1 rounded-full text-sm font-semibold">
+                    Most Popular
+                  </span>
+                </div>
+              )}
+              <h3 className="text-2xl font-bold text-gray-900 mb-2">{plan.name}</h3>
+              <div className="mb-4">
+                <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
+                <span className="text-gray-600">{plan.period}</span>
+              </div>
+              <p className="text-gray-600 mb-6">{plan.description}</p>
+              <ul className="space-y-3 mb-8">
+                {plan.features.map((feature, featureIndex) => (
+                  <li key={featureIndex} className="flex items-center text-gray-600">
+                    <span className="text-green-500 mr-2">✓</span>
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+              <button className={`w-full py-3 rounded-lg font-semibold transition-colors ${
+                plan.popular
+                  ? 'bg-primary-600 text-white hover:bg-primary-700'
+                  : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
+              }`}>
+                Get Started
+              </button>
             </div>
-            <h3 className="text-xl font-bold text-white">Startup</h3>
-            <p className="text-gray-400 mt-2">For serious pre-training runs.</p>
-            <div className="mt-6 mb-6">
-              <span className="text-4xl font-bold text-white">$2,499</span>
-              <span className="text-gray-400">/mo</span>
-            </div>
-            <ul className="space-y-4 mb-8 flex-1">
-              {['50TB Monthly Transfer', 'Curated Premium Datasets', 'High-Speed Direct Connect', 'Priority Support', 'Data Versioning'].map((item) => (
-                <li key={item} className="flex items-center text-white">
-                  <Check className="h-5 w-5 text-brand-accent mr-3" />
-                  {item}
-                </li>
-              ))}
-            </ul>
-            <button className="w-full py-3 px-4 bg-brand-accent hover:bg-sky-400 text-brand-dark font-bold rounded-lg transition-colors shadow-lg shadow-brand-accent/25">
-              Get Started
-            </button>
-          </div>
-
-          {/* Enterprise Plan */}
-          <div className="bg-brand-dark border border-white/10 rounded-2xl p-8 flex flex-col">
-            <h3 className="text-xl font-bold text-white">Enterprise</h3>
-            <p className="text-gray-400 mt-2">Custom solutions for foundation models.</p>
-            <div className="mt-6 mb-6">
-              <span className="text-4xl font-bold text-white">Custom</span>
-            </div>
-            <ul className="space-y-4 mb-8 flex-1">
-              {['Unlimited Transfer', 'Private Dataset Hosting', 'Dedicated Hardware Clusters', '24/7 SLA Support', 'On-prem Deployment Options'].map((item) => (
-                <li key={item} className="flex items-center text-gray-300">
-                  <Check className="h-5 w-5 text-brand-accent mr-3" />
-                  {item}
-                </li>
-              ))}
-            </ul>
-            <button className="w-full py-3 px-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-lg transition-colors">
-              Contact Sales
-            </button>
-          </div>
+          ))}
         </div>
       </div>
     </section>
   );
-}
+};
+
+export default Pricing;