Pricing.jsx
1 export default function Pricing() { 2 return ( 3 <div className="text-center"> 4 <div className="p-20"> 5 <div className="mb-10"> 6 <h1>Simple, Transparent Pricing</h1> 7 <p>Choose the plan that fits your needs. Upgrade or downgrade anytime.</p> 8 </div> 9 <div id="price-cards" className="flex justify-center items-center gap-7 text-left"> 10 <div className="price-card"> 11 <div className="price-heading"> 12 <h2>Starter</h2> 13 <p>Perfect for getting started</p> 14 </div> 15 <p><span className="price">$0</span>/Month</p> 16 <div className="price-features"> 17 <p>✅ Access to 10 free tools</p> 18 <p>✅ Basic templates</p> 19 <p>✅ 1 project per month</p> 20 <p>✅ Access to 10 free tools</p> 21 </div> 22 <button className="btn w-full brand-color">Get Started Free</button> 23 </div> 24 <div id="pro-card" className="brand-color indicator"> 25 <span className="indicator-item indicator-center badge badge-warning badge-soft">Most Popular</span> 26 <div className="flex gap-5 flex-col"> 27 <div className="price-heading"> 28 <h2>Pro</h2> 29 <p>Best for professionals</p> 30 </div> 31 <p><span className="price">$29</span>/Month</p> 32 <div className="price-features"> 33 <p>✅ Access to all premium tools</p> 34 <p>✅ Unlimited templates</p> 35 <p>✅ Priority support</p> 36 <p>✅ Unlimited projects</p> 37 <p>✅ Cloud sync</p> 38 <p>✅ Advanced analytics</p> 39 </div> 40 <button className="btn w-full overflow-hidden mt-auto">Start Pro Trial</button> 41 </div> 42 </div> 43 44 <div className="price-card"> 45 <div className="price-heading"> 46 <h2>Enterprise</h2> 47 <p>For teams and businesses</p> 48 </div> 49 <p><span className="price">$99</span>/Month</p> 50 <div className="price-features"> 51 <p>✅ Everything in Pro</p> 52 <p>✅ Team collaboration</p> 53 <p>✅ Custom integrations</p> 54 <p>✅ Dedicated support</p> 55 <p>✅ SLA guarantee</p> 56 <p>✅ Custom branding</p> 57 </div> 58 <button className="btn w-full brand-color">Contact Sales</button> 59 </div> 60 </div> 61 </div> 62 <div className="brand-color p-20"> 63 <h1>Ready to Transform Your Workflow?</h1> 64 <p className="mb-5">Join thousands of professionals who are already using Digitools to work smarter.<br />Start your free trial today.</p> 65 <div className="flex gap-2 justify-center"> 66 <button className="btn">Explore Products</button> 67 <button className="btn brand-color">View Pricing</button> 68 </div> 69 <p className="mt-2">14-day free trial • No credit card required • Cancel anytime</p> 70 </div> 71 </div> 72 ); 73 };