Add src/components/sections/pricing/PricingOne.tsx

src/components/sections/pricing/PricingOne.tsx

@@ -0,0 +1,76 @@
+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;