76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Check } from 'lucide-react';
|
|
|
|
const PricingOne = () => {
|
|
const plans = [
|
|
{
|
|
name: 'Starter',
|
|
price: '$9',
|
|
period: '/month',
|
|
features: ['Up to 5 projects', 'Basic support', 'Core components']
|
|
},
|
|
{
|
|
name: 'Pro',
|
|
price: '$29',
|
|
period: '/month',
|
|
features: ['Unlimited projects', 'Priority support', 'All components', 'Custom themes'],
|
|
popular: true
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
price: '$99',
|
|
period: '/month',
|
|
features: ['Unlimited everything', '24/7 support', 'Custom development', 'SLA guarantee']
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-white dark:bg-gray-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-4xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Choose Your Plan
|
|
</h2>
|
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
Simple, transparent pricing for teams of all sizes.
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{plans.map((plan, index) => (
|
|
<div key={index} className={`bg-gray-50 dark:bg-gray-800 rounded-xl p-8 ${plan.popular ? 'ring-2 ring-blue-600' : ''}`}>
|
|
{plan.popular && (
|
|
<span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium mb-4 inline-block">
|
|
Most Popular
|
|
</span>
|
|
)}
|
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{plan.name}
|
|
</h3>
|
|
<div className="mb-6">
|
|
<span className="text-4xl font-bold text-gray-900 dark:text-white">{plan.price}</span>
|
|
<span className="text-gray-600 dark:text-gray-300">{plan.period}</span>
|
|
</div>
|
|
<ul className="space-y-3 mb-8">
|
|
{plan.features.map((feature, featureIndex) => (
|
|
<li key={featureIndex} className="flex items-center">
|
|
<Check className="w-5 h-5 text-green-600 mr-3" />
|
|
<span className="text-gray-600 dark:text-gray-300">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button className={`w-full py-3 px-6 rounded-lg font-medium transition-colors ${
|
|
plan.popular
|
|
? 'bg-blue-600 text-white hover:bg-blue-700'
|
|
: 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600'
|
|
}`}>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default PricingOne; |