Shiny pricing page
This commit is contained in:
kbe
@@ -3,7 +3,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PricingCard from '@/components/pricing-card';
|
||||
import { useTheme } from '@/lib/theme-context';
|
||||
import { Sun, Moon } from 'lucide-react';
|
||||
import PricingToggle from '@/components/ui/pricing-toggle';
|
||||
|
||||
const PricingPage = () => {
|
||||
const [isYearly, setIsYearly] = useState(false);
|
||||
@@ -25,109 +25,85 @@ const PricingPage = () => {
|
||||
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>
|
||||
const getDiscountBadge = () => {
|
||||
if (isYearly) {
|
||||
return { text: 'Save 20%', style: 'text-green-500 dark:text-green-400' };
|
||||
}
|
||||
return { text: '', style: '' };
|
||||
};
|
||||
|
||||
{/* Pricing Toggle (Monthly/Yearly) */}
|
||||
<div className="mt-12 flex justify-center">
|
||||
<div className="relative inline-flex items-center">
|
||||
<button
|
||||
onClick={toggleBillingPeriod}
|
||||
className={`relative px-4 py-2 text-sm font-medium rounded-l-full focus:outline-none transition-colors ${
|
||||
!isYearly
|
||||
? 'bg-white text-gray-700 shadow'
|
||||
: 'bg-gray-200 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<span
|
||||
className={`w-12 h-6 px-1 bg-gray-300 rounded-full transition-transform duration-300 ease-in-out ${
|
||||
isYearly ? 'translate-x-12' : 'translate-x-0'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-5 h-5 bg-white rounded-full shadow transform transition-transform duration-300 ease-in-out ${
|
||||
isYearly ? 'translate-x-6' : 'translate-x-0'
|
||||
}`}
|
||||
></span>
|
||||
</span>
|
||||
<button
|
||||
onClick={toggleBillingPeriod}
|
||||
className={`relative px-4 py-2 text-sm font-medium rounded-r-full focus:outline-none transition-colors ${
|
||||
isYearly
|
||||
? 'bg-white text-gray-700 shadow'
|
||||
: 'bg-gray-200 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
Yearly
|
||||
</button>
|
||||
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">
|
||||
Find a plan to power your apps.
|
||||
</h1>
|
||||
<p className="mt-3 text-lg sm:text-xl transition-opacity duration-300">
|
||||
Dishpix supports teams of all sizes, with pricing that scales.
|
||||
</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="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="#"
|
||||
/>
|
||||
<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="#"
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing Cards Grid */}
|
||||
<div className="mt-16 space-y-16 sm:space-y-0 sm:grid sm:grid-cols-1 md:grid-cols-3 sm: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="#"
|
||||
/>
|
||||
<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="#"
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user