Implemented pricing page

This commit is contained in:
kbe
2025-08-14 18:38:57 +02:00
parent 9d5f57c13e
commit a1e49a1e1a
3 changed files with 40 additions and 32 deletions

View File

@@ -35,16 +35,19 @@ const PricingCard: React.FC<PricingCardProps> = ({
return (
<div className={`flex flex-col ${cardBg} border ${cardBorder} rounded-xl ${cardShadow} overflow-hidden transition-all duration-300 transform hover:scale-105`}>
{isPopular && (
<div className={`${cardPopular} text-white text-xs font-semibold px-3 py-1.5 rounded-t-xl`}>
<div className={`${cardPopular} px-3 py-1.5 text-center text-white text-xs font-semibold rounded-t-xl`}>
Most Popular
</div>
)}
{!isPopular && (
<div className="py-3.5"></div>
)}
<div className="p-6">
<h3 className={`text-2xl font-bold ${cardText}`}>{title}</h3>
<p className="mt-4 text-sm text-gray-400">
{title === 'Start' && 'The perfect starting place for your web app or personal project.'}
{title === 'Pro' && 'Everything you need to build and scale your app.'}
{title === 'Premium' && 'Critical security, performance, observability, platform SLAs, and support.'}
{title === 'Basic' && 'Perfect for food bloggers and home cooks looking to enhance their culinary photography.'}
{title === 'Pro' && 'Everything you need to showcase restaurant dishes professionally and attract more customers.'}
{title === 'MasterChef' && 'Complete professional suite for food photographers and culinary brands demanding perfection.'}
</p>
<p className="mt-8">
<span className="text-5xl font-extrabold">{price}</span>