Progress

frontend/src/components/pricing/PricingPage.tsx

@@ -0,0 +1,69 @@
+import { CheckIcon } from '../ui/icons/CheckIcon';
+
+const FEATURES = [
+  '56 data layers across England',
+  'Every postcode scored and filterable',
+  'Unlimited map exploration and exports',
+  'Historical price data back to 1995',
+  'Crime, schools, transport, broadband & more',
+  'All future data updates included',
+];
+
+export default function PricingPage({
+  onOpenDashboard,
+}: {
+  onOpenDashboard: () => void;
+}) {
+  return (
+    <div className="flex-1 overflow-y-auto bg-warm-50 dark:bg-navy-950">
+      <div className="max-w-3xl mx-auto px-6 py-16">
+        <div className="text-center mb-12">
+          <h1 className="text-3xl md:text-4xl font-bold text-navy-950 dark:text-warm-100 mb-3">
+            One price. Yours forever.
+          </h1>
+          <p className="text-lg text-warm-500 dark:text-warm-400 max-w-lg mx-auto">
+            No subscriptions, no recurring fees. Pay once and get lifetime access to every feature.
+          </p>
+        </div>
+
+        <div className="max-w-md mx-auto bg-white dark:bg-warm-800 rounded-2xl border border-warm-200 dark:border-warm-700 shadow-lg overflow-hidden">
+          {/* Price header */}
+          <div className="bg-gradient-to-br from-navy-950 to-teal-900 px-8 py-10 text-center">
+            <div className="text-sm font-semibold text-teal-400 uppercase tracking-wide mb-2">
+              Lifetime License
+            </div>
+            <div className="flex items-baseline justify-center gap-1">
+              <span className="text-5xl font-extrabold text-white">£100</span>
+              <span className="text-warm-400 text-lg">/once</span>
+            </div>
+            <p className="text-warm-300 text-sm mt-2">
+              One-time payment, no subscription
+            </p>
+          </div>
+
+          {/* Features list */}
+          <div className="px-8 py-8">
+            <ul className="space-y-4">
+              {FEATURES.map((feature) => (
+                <li key={feature} className="flex items-start gap-3">
+                  <CheckIcon className="w-5 h-5 text-teal-600 dark:text-teal-400 shrink-0 mt-0.5" />
+                  <span className="text-warm-700 dark:text-warm-300">{feature}</span>
+                </li>
+              ))}
+            </ul>
+
+            <button
+              onClick={onOpenDashboard}
+              className="w-full mt-8 px-6 py-4 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-lg shadow-lg shadow-coral-500/25"
+            >
+              Get started
+            </button>
+            <p className="text-center text-sm text-warm-400 dark:text-warm-500 mt-3">
+              30-day money-back guarantee
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}