Spaces:
Sleeping
Sleeping
File size: 3,367 Bytes
5804785 798f426 5804785 798f426 5804785 798f426 5804785 798f426 5804785 798f426 5804785 798f426 5804785 798f426 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import React from 'react';
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-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 md:text-4xl font-bold text-gray-900 mb-4">
Flexible Pricing
</h2>
<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">
{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>
))}
</div>
</div>
</section>
);
};
export default Pricing; |