From a1e49a1e1affcd04dd3173dbbca1436ff979f519 Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Thu, 14 Aug 2025 18:38:57 +0200
Subject: [PATCH] Implemented pricing page

---
 app/pricing/page.tsx        | 59 ++++++++++++++++++++-----------------
 components/pricing-card.tsx | 11 ++++---
 lib/theme-context.tsx       |  2 +-
 3 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index ac6b89b..7d3bab4 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -37,10 +37,10 @@ const PricingPage = () => {
           <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
             <div className="text-center">
               <h1 className="text-3xl font-extrabold sm:text-4xl md:text-5xl transition-all duration-300">
-                Find a plan to power your apps.
+                Transform your food photos with AI
               </h1>
               <p className="mt-3 text-lg sm:text-xl transition-opacity duration-300">
-                Dishpix supports teams of all sizes, with pricing that scales.
+                Choose the perfect plan to enhance your culinary photography with cutting-edge AI technology.
               </p>
               <p className="mt-2 text-sm font-medium text-indigo-600 dark:text-indigo-400 transition-colors duration-300">
                 {getDiscountBadge().text}
@@ -53,19 +53,19 @@ const PricingPage = () => {
             {/* Pricing Cards Grid */}
             <div className="mt-12 sm:mt-16 lg:mt-20 space-y-8 sm:space-y-12 md:space-y-16 lg:space-y-0 sm:grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 sm:gap-6 lg:gap-8 transition-all duration-300">
               <PricingCard
-                title="Start"
+                title="Basic"
                 price={`$${getPrice(9)}`}
                 billingPeriod={getBillingPeriod()}
                 features={[
-                  'Import your repo, deploy in seconds',
-                  'Automatic CI/CD',
-                  'Web Application Firewall',
-                  'Global, automated CDN',
-                  'Fluid compute',
-                  'DDoS Mitigation',
-                  'Traffic & performance insights',
+                  'Enhance up to 50 food photos/month',
+                  'Basic AI food recognition',
+                  'Standard lighting correction',
+                  'Color enhancement',
+                  'Remove minor blemishes',
+                  'Basic background cleanup',
+                  'Standard resolution exports',
                 ]}
-                ctaText="Start Deploying"
+                ctaText="Start Enhancing"
                 ctaHref="#"
               />
               <PricingCard
@@ -73,32 +73,37 @@ const PricingPage = () => {
                 price={`$${getPrice(29)}`}
                 billingPeriod={getBillingPeriod()}
                 features={[
-                  'Everything in Start, plus:',
-                  '10x more included usage',
-                  'Observability tools',
-                  'Faster builds',
-                  'Cold start prevention',
-                  'Advanced WAF Protection',
-                  'Email support',
+                  'Everything in Basic, plus:',
+                  'Enhance up to 500 food photos/month',
+                  'Advanced AI food styling',
+                  'Professional lighting simulation',
+                  'Gourmet color grading',
+                  'Remove unwanted objects',
+                  'AI-powered ingredient recognition',
+                  'High-resolution exports',
+                  'Priority processing',
                 ]}
-                ctaText="Start a free trial"
+                ctaText="Start free trial"
                 ctaHref="#"
                 isPopular={true}
               />
               <PricingCard
-                title="Premium"
+                title="MasterChef"
                 price={`$${getPrice(99)}`}
                 billingPeriod={getBillingPeriod()}
                 features={[
                   'Everything in Pro, plus:',
-                  'Guest & Team access controls',
-                  'SCIM & Directory Sync',
-                  'Managed WAF Rulesets',
-                  'Multi-region compute & failover',
-                  '99.99% SLA',
-                  'Advanced Support',
+                  'Unlimited food photo enhancements',
+                  'AI-generated food styling suggestions',
+                  'Restaurant-quality presentation',
+                  'Advanced background replacement',
+                  'Multi-dish composition',
+                  'Professional food photography presets',
+                  '4K resolution exports',
+                  'Batch processing capabilities',
+                  'Priority support',
                 ]}
-                ctaText="Contact Sales"
+                ctaText="Get Started"
                 ctaHref="#"
               />
             </div>
diff --git a/components/pricing-card.tsx b/components/pricing-card.tsx
index 4f52452..130aeb6 100644
--- a/components/pricing-card.tsx
+++ b/components/pricing-card.tsx
@@ -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>
diff --git a/lib/theme-context.tsx b/lib/theme-context.tsx
index b1ab659..26517d9 100644
--- a/lib/theme-context.tsx
+++ b/lib/theme-context.tsx
@@ -11,7 +11,7 @@ interface ThemeContextType {
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>('dark'); // Default to dark mode
+  const [theme, setTheme] = useState<Theme>('light'); // Default to light mode (white backgrounds)
 
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme') as Theme | null;