andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fancier pricing page
Some checks failed
Build and publish Docker image / build-and-push (push) Failing after 6m6s
Details
CI / Check (push) Failing after 8m39s
Details

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-05 21:55:41 +01:00
parent 46c964ec81
commit 1e90acf6a5
1 changed files with 6 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

67
frontend/src/components/pricing/PricingPage.tsx
View file

@ -7,6 +7,7 @@ import { useLicense } from '../../hooks/useLicense';
import { logNonAbortError } from '../../lib/api';
import { trackEvent } from '../../lib/analytics';
import { apiUrl } from '../../lib/api';
import HexCanvas from '../home/HexCanvas';
// Feature list keys — resolved inside the component via t()
@ -128,72 +129,16 @@ export default function PricingPage({
return (
<div className="flex-1 overflow-y-auto bg-navy-950 relative">
{/* Aurora — sized divs with oklch gradients, no blur */}
<div className="fixed inset-0 pointer-events-none overflow-hidden">
{/* Green curtain — top left */}
<div
className="absolute w-[90vw] h-[80vh] -top-[10%] -left-[15%]"
style={{
background:
'radial-gradient(in oklch, ellipse closest-side, oklch(0.72 0.19 145 / 0.18) 0%, oklch(0.55 0.15 160 / 0.08) 50%, transparent 100%)',
animation: 'aurora-1 20s ease-in-out infinite',
}}
/>
{/* Teal sweep — center */}
<div
className="absolute w-[80vw] h-[70vh] top-[5%] left-[15%]"
style={{
background:
'radial-gradient(in oklch, ellipse closest-side, oklch(0.60 0.13 175 / 0.15) 0%, oklch(0.55 0.10 195 / 0.06) 50%, transparent 100%)',
animation: 'aurora-2 18s ease-in-out infinite',
}}
/>
{/* Purple curtain — right */}
<div
className="absolute w-[85vw] h-[90vh] -top-[5%] -right-[15%]"
style={{
background:
'radial-gradient(in oklch, ellipse closest-side, oklch(0.55 0.20 290 / 0.16) 0%, oklch(0.45 0.22 275 / 0.06) 50%, transparent 100%)',
animation: 'aurora-4 25s ease-in-out infinite',
}}
/>
{/* Deep violet — bottom right */}
<div
className="absolute w-[75vw] h-[70vh] -bottom-[5%] right-[5%]"
style={{
background:
'radial-gradient(in oklch, ellipse closest-side, oklch(0.60 0.22 300 / 0.13) 0%, oklch(0.50 0.20 285 / 0.05) 50%, transparent 100%)',
animation: 'aurora-3 22s ease-in-out infinite',
}}
/>
{/* Emerald — bottom left */}
<div
className="absolute w-[80vw] h-[75vh] -bottom-[10%] -left-[10%]"
style={{
background:
'radial-gradient(in oklch, ellipse closest-side, oklch(0.65 0.17 155 / 0.14) 0%, oklch(0.55 0.14 165 / 0.05) 50%, transparent 100%)',
animation: 'aurora-5 24s ease-in-out infinite',
}}
/>
{/* Cyan accent — upper center */}
<div
className="absolute w-[70vw] h-[60vh] top-[20%] left-[20%]"
style={{
background:
'radial-gradient(in oklch, ellipse closest-side, oklch(0.60 0.12 200 / 0.10) 0%, oklch(0.52 0.10 185 / 0.04) 50%, transparent 100%)',
animation: 'aurora-1 16s ease-in-out infinite reverse',
}}
/>
<div className="absolute inset-0 bg-gradient-to-b from-navy-950 via-navy-900 to-navy-950" />
<HexCanvas isDark />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_12%,rgba(20,184,166,0.16),transparent_38%),linear-gradient(180deg,rgba(10,14,26,0.20),rgba(10,14,26,0.82))]" />
</div>
<div className="relative z-10 max-w-5xl mx-auto px-6 pt-16 text-center mb-6">
<div className="relative z-10 max-w-5xl mx-auto px-6 pt-16 text-center mb-10">
<h1 className="text-3xl md:text-4xl font-bold text-white mb-3">{t('pricingPage.title')}</h1>
<p className="text-lg text-warm-300 max-w-lg mx-auto">{t('pricingPage.subtitle')}</p>
</div>
<div className="relative z-10 max-w-2xl mx-auto px-6 mb-12 text-center">
<p className="text-warm-400 text-sm leading-relaxed mb-2">{t('pricingPage.costContext')}</p>
<p className="text-warm-200 font-semibold">{t('pricingPage.lessThanSurvey')}</p>
<p className="mt-5 text-warm-200 font-semibold">{t('pricingPage.lessThanSurvey')}</p>
</div>
<div className="relative z-10 max-w-5xl mx-auto px-6 pb-8 md:pb-16">