Upload components/Pricing.jsx with huggingface_hub

components/Pricing.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+
+export default function Pricing() {
+  return (
+    <section id="pricing" className="py-24 bg-slate-900">
+      <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>
+          <p className="mt-4 text-xl text-gray-400">
+            Choose the plan that fits your model's appetite.
+          </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
+            </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>
+  );
+}