115 lines
4.3 KiB
TypeScript
115 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import PricingCard from '@/components/pricing-card';
|
|
import { useTheme } from '@/lib/theme-context';
|
|
import PricingToggle from '@/components/ui/pricing-toggle';
|
|
|
|
const PricingPage = () => {
|
|
const [isYearly, setIsYearly] = useState(false);
|
|
const { theme } = useTheme();
|
|
|
|
useEffect(() => {
|
|
document.body.classList.add('pricing-page');
|
|
}, []);
|
|
|
|
const toggleBillingPeriod = () => {
|
|
setIsYearly(!isYearly);
|
|
};
|
|
|
|
const getPrice = (basePrice: number) => {
|
|
return isYearly ? basePrice * 10 : basePrice;
|
|
};
|
|
|
|
const getBillingPeriod = () => {
|
|
return isYearly ? 'year' : 'month';
|
|
};
|
|
|
|
const getDiscountBadge = () => {
|
|
if (isYearly) {
|
|
return { text: 'Save 20%', style: 'text-green-500 dark:text-green-400' };
|
|
}
|
|
return { text: '', style: '' };
|
|
};
|
|
|
|
return (
|
|
<div className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900 text-gray-100' : 'bg-gray-50 text-gray-900'} transition-colors duration-300`}>
|
|
<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">
|
|
Transform your food photos with AI
|
|
</h1>
|
|
<p className="mt-3 text-lg sm:text-xl transition-opacity duration-300">
|
|
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}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pricing Toggle (Monthly/Yearly) */}
|
|
<PricingToggle isYearly={isYearly} onToggle={toggleBillingPeriod} />
|
|
|
|
{/* 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="Basic"
|
|
price={`$${getPrice(9)}`}
|
|
billingPeriod={getBillingPeriod()}
|
|
features={[
|
|
'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 Enhancing"
|
|
ctaHref="#"
|
|
/>
|
|
<PricingCard
|
|
title="Pro"
|
|
price={`$${getPrice(29)}`}
|
|
billingPeriod={getBillingPeriod()}
|
|
features={[
|
|
'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 free trial"
|
|
ctaHref="#"
|
|
isPopular={true}
|
|
/>
|
|
<PricingCard
|
|
title="MasterChef"
|
|
price={`$${getPrice(99)}`}
|
|
billingPeriod={getBillingPeriod()}
|
|
features={[
|
|
'Everything in Pro, plus:',
|
|
'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="Get Started"
|
|
ctaHref="#"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingPage; |