kbe/dishpix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wip on dark theme

Browse Source
This commit is contained in:
kbe
2025-08-14 18:24:43 +02:00
parent 8aba6e31c8
commit e53748d7a9
3 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/pricing/page.tsx
View File

@@ -18,7 +18,7 @@ const PricingPage = () => {
};
const getPrice = (basePrice: number) => {
return isYearly ? basePrice * 10 : basePrice;
return isYearly ? Math.round(basePrice * 10 * 0.8) : basePrice;
};
const getBillingPeriod = () => {
@@ -39,34 +39,23 @@ const PricingPage = () => {
{/* Pricing Toggle (Monthly/Yearly) */}
<div className="mt-12 flex justify-center">
<div className="relative inline-flex items-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-l-full focus:outline-none transition-colors ${
className={`relative px-4 py-2 text-sm font-medium rounded-full focus:outline-none transition-colors ${
!isYearly
? 'bg-white text-gray-700 shadow'
: 'bg-gray-200 text-gray-500'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-400'
}`}
>
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 ${
className={`relative px-4 py-2 text-sm font-medium rounded-full focus:outline-none transition-colors ${
isYearly
? 'bg-white text-gray-700 shadow'
: 'bg-gray-200 text-gray-500'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-400'
}`}
>
Yearly
@@ -75,7 +64,7 @@ const PricingPage = () => {
</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">
<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)}`}
@@ -90,7 +79,7 @@ const PricingPage = () => {
'Traffic & performance insights',
]}
ctaText="Start Deploying"
ctaHref="#"
ctaHref="/signup?plan=start"
/>
<PricingCard
title="Pro"
@@ -106,7 +95,7 @@ const PricingPage = () => {
'Email support',
]}
ctaText="Start a free trial"
ctaHref="#"
ctaHref="/signup?plan=pro"
isPopular={true}
/>
<PricingCard
@@ -123,7 +112,7 @@ const PricingPage = () => {
'Advanced Support',
]}
ctaText="Contact Sales"
ctaHref="#"
ctaHref="/contact-sales"
/>
</div>
</div>