123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import PricingCard from '@/components/pricing-card';
|
|
import { useTheme } from '@/lib/theme-context';
|
|
import { Sun, Moon } from 'lucide-react';
|
|
|
|
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 ? Math.round(basePrice * 10 * 0.8) : basePrice;
|
|
};
|
|
|
|
const getBillingPeriod = () => {
|
|
return isYearly ? 'year' : 'month';
|
|
};
|
|
|
|
return (
|
|
<div className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900 text-gray-100' : 'bg-gray-50 text-gray-900'}`}>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-extrabold sm:text-5xl">
|
|
Find a plan to power your apps.
|
|
</h1>
|
|
<p className="mt-4 text-xl">
|
|
Dishpix supports teams of all sizes, with pricing that scales.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pricing Toggle (Monthly/Yearly) */}
|
|
<div className="mt-12 flex justify-center">
|
|
<div className="relative inline-flex items-center bg-gray-200 dark:bg-gray-700 rounded-full p-1">
|
|
<button
|
|
onClick={toggleBillingPeriod}
|
|
className={`relative px-4 py-2 text-sm font-medium rounded-full focus:outline-none transition-colors ${
|
|
!isYearly
|
|
? 'bg-white text-gray-900 shadow-sm'
|
|
: 'text-gray-400'
|
|
}`}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
onClick={toggleBillingPeriod}
|
|
className={`relative px-4 py-2 text-sm font-medium rounded-full focus:outline-none transition-colors ${
|
|
isYearly
|
|
? 'bg-white text-gray-900 shadow-sm'
|
|
: 'text-gray-400'
|
|
}`}
|
|
>
|
|
Yearly
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing Cards Grid */}
|
|
<div className="mt-12 sm:mt-16 lg:mt-20 space-y-8 sm:space-y-12 md:space-y-0 md:grid md:grid-cols-1 lg:grid-cols-3 md:gap-6 lg:gap-8">
|
|
<PricingCard
|
|
title="Start"
|
|
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',
|
|
]}
|
|
ctaText="Start Deploying"
|
|
ctaHref="/signup?plan=start"
|
|
/>
|
|
<PricingCard
|
|
title="Pro"
|
|
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',
|
|
]}
|
|
ctaText="Start a free trial"
|
|
ctaHref="/signup?plan=pro"
|
|
isPopular={true}
|
|
/>
|
|
<PricingCard
|
|
title="Premium"
|
|
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',
|
|
]}
|
|
ctaText="Contact Sales"
|
|
ctaHref="/contact-sales"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingPage; |