From 1e90acf6a54740cfe0b5f7b0c8544993cbb02f6d Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Tue, 5 May 2026 21:55:41 +0100
Subject: [PATCH] Fancier pricing page

---
 .../src/components/pricing/PricingPage.tsx    | 67 ++-----------------
 1 file changed, 6 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/pricing/PricingPage.tsx b/frontend/src/components/pricing/PricingPage.tsx
index 0ee64d7..c864d3d 100644
--- a/frontend/src/components/pricing/PricingPage.tsx
+++ b/frontend/src/components/pricing/PricingPage.tsx
@@ -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">