+ {/* Map */}
+
+ );
+}
diff --git a/frontend/src/components/home/HomePage.tsx b/frontend/src/components/home/HomePage.tsx
index 9474261..bd47980 100644
--- a/frontend/src/components/home/HomePage.tsx
+++ b/frontend/src/components/home/HomePage.tsx
@@ -1,221 +1,326 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect } from 'react';
import { useFadeInRef } from '../../hooks/useFadeIn';
import HexCanvas from './HexCanvas';
+import HomeDemo from './HomeDemo';
+import BottomIllustration from './BottomIllustration';
+import CategoryArt from './CategoryArt';
+import { TickerValue } from '../ui/TickerValue';
+import type { FeatureMeta } from '../../types';
export default function HomePage({
onOpenDashboard,
+ onOpenPricing,
theme = 'light',
+ features = [],
}: {
onOpenDashboard: () => void;
+ onOpenPricing: () => void;
theme?: 'light' | 'dark';
+ features?: FeatureMeta[];
}) {
const scrollRef = useRef
+
+
+
+ {/* Sliders */}
+
+
+ {/* Colour spectrum legend */}
+
+
+
+
+
+ {activeFeature ? viewMeta?.name || activeFeature : 'Property density'}
+
+
+ {colorRange && (
+
+
+ )}
+
+ {demoFeatures.map((feature) => {
+ const value = sliderValues[feature.name];
+ if (!value || feature.min == null || feature.max == null) return null;
+ const isActive = activeFeature === feature.name;
+ return (
+
+
+ handleSliderChange(feature.name, [min, max])}
+ onPointerDown={() => handleDragStart(feature.name)}
+ onPointerUp={() => handleDragEnd()}
+ />
+
+ );
+ })}
+
+
+ {feature.name}
+
+
+ {formatValue(value[0], feature)} – {formatValue(value[1], feature)}
+
+
+
-
- {/* Hero */}
-
-
-
- Find where to live, not just what's for sale + {/* Hero — full-bleed */} +
+
+
- Every neighbourhood
+
-
- {/* The flip */}
- + Browsing listings is not a strategy. Knowing what you want is.
-
- Every neighbourhood
+
+ Find your{' '}
+ perfect postcode
- in England & Wales.
-
- One map. Your rules.
+ before you find your property.
-
- in England & Wales. -
- One map. Your rules. + before you find your property.
- Set the commute, budget, school rating, noise level, and crime threshold you'll - accept. Perfect Postcodes shows you every area that qualifies — instantly. +
+ Set the sliders to your expectations and the map highlights the areas that actually + match. Instantly.
-
+
-
-
- No signup · Free · Open data
-
+
-
-
-
-
-
-
- {/* Filter showcase */}
+ {/* Map + Slider demo */}
+ - The old way -
-- Pick a postcode. Google the schools. Check crime stats on another site. Look up - commute times. Realise it's too expensive. Start over. Repeat 40 times. -
+
+
+
+
-
-
+ - With Perfect Postcodes -
-- Tell the map what you need. Every hexagon that lights up is a place worth - looking at. Drill into any one to see individual properties, prices, and energy - ratings. -
+properties
+
+
+
+
+ data layers
+
+
Every
+ postcode in England
+
+
+ {/* Scale — "That's just two" + category cards */}
+
+ + See it in action +
++ Drag the sliders and watch the map respond. Every postcode scored, every filter instant. +
+
+
+
-
+
- 12 datasets. One slider each. + That's just three. We've built 43.
- Every filter narrows the map in real time. Combine as many as you like. + Spanning transport links, amenities, demographics, environment risk, broadband speeds, + crime, and more.
-
- {FILTERS.map((f) => (
-
- {/* How it works */}
-
-
{f.icon}
-
- {f.label}
+
+ {CATEGORIES.map((c) => (
+
))}
+
-
+
+
+
+ {c.icon}
+
+
+ {c.label}
+
+ {f.example}
-
-
- perfect postcode before you find your property.
-
-Set the sliders to your expectations and the map highlights the areas that actually match. Instantly.
-
- [tolerance] [output]")
+ sys.exit(1)
+ path = sys.argv[1]
+ tol = int(sys.argv[2]) if len(sys.argv) > 2 else 20
+ out = sys.argv[3] if len(sys.argv) > 3 else None
+ remove_white_bg(path, tol, out)
diff --git a/server-rs/src/features.rs b/server-rs/src/features.rs
index 007f3c8..e9fc688 100644
--- a/server-rs/src/features.rs
+++ b/server-rs/src/features.rs
@@ -86,20 +86,20 @@ pub static FEATURE_GROUPS: &[FeatureGroup] = &[
suffix: "",
raw: false,
},
- // FeatureConfig {
- // name: "Estimated current price",
- // bounds: Bounds::Fixed {
- // min: 0.0,
- // max: 2_000_000.0,
- // },
- // step: 10000.0,
- // description: "Inflation-adjusted estimate of the current property value",
- // detail: "Estimated by applying a repeat-sales price index to the last known sale price. The index tracks price changes within each postcode sector and property type. Properties sold recently will have estimates close to their sale price; older sales are adjusted more. Coverage depends on having enough repeat sales in the local area to build the index.",
- // source: "price-paid",
- // prefix: "£",
- // suffix: "",
- // raw: false,
- // },
+ FeatureConfig {
+ name: "Estimated current price",
+ bounds: Bounds::Fixed {
+ min: 0.0,
+ max: 2_000_000.0,
+ },
+ step: 10000.0,
+ description: "Inflation-adjusted estimate of the current property value",
+ detail: "Estimated by applying a repeat-sales price index to the last known sale price. The index tracks price changes within each postcode sector and property type. Properties sold recently will have estimates close to their sale price; older sales are adjusted more. Coverage depends on having enough repeat sales in the local area to build the index.",
+ source: "price-paid",
+ prefix: "£",
+ suffix: "",
+ raw: false,
+ },
FeatureConfig {
name: "Price per sqm",
bounds: Bounds::Percentile {
- Three clicks to clarity -
-
- {STEPS.map((step, i) => (
-
)}
+ {estimatedPrice !== undefined && (
+
-
- {i + 1}
-
-
- ))}
+ {/* Problem / solution / philosophy */}
+
-
- - {step.title} -
-{step.body}
-
+ {/* Cereal box — quirky margin note, hidden on narrow screens */}
+
- {/* Numbers */}
-
+
-
+ 
+
+ Your home is not a box of cereal. Don't let a discount on the wrong + property distract you from finding the right one. +
-
);
}
-const FILTERS = [
- { icon: '\u00A3', label: 'Sale price', example: 'e.g. under \u00A3400k' },
- { icon: '\uD83D\uDE86', label: 'Commute time', example: 'e.g. < 45 min to Bank' },
- { icon: '\uD83C\uDFEB', label: 'School quality', example: 'Ofsted Outstanding' },
- { icon: '\uD83D\uDEA8', label: 'Crime rate', example: 'Low burglary areas' },
- { icon: '\u26A1', label: 'Energy rating', example: 'EPC band A\u2013C' },
- { icon: '\uD83D\uDCCF', label: 'Floor area', example: 'e.g. 80+ sqm' },
- { icon: '\uD83D\uDD07', label: 'Road noise', example: 'Below 55 dB Lden' },
- { icon: '\uD83C\uDF10', label: 'Broadband speed', example: '100+ Mbps available' },
-];
+interface Category {
+ icon: string;
+ label: string;
+ group: string;
+ borderClass: string;
+ hoverBgClass: string;
+ iconBgClass: string;
+ artColorClass: string;
+}
-const STEPS = [
+const CATEGORIES: Category[] = [
{
- title: 'Add your deal-breakers',
- body: 'Slide the filters for everything you care about \u2014 price cap, max commute, school quality, noise. The map updates as you drag.',
- },
- {
- title: 'Spot the clusters',
- body: 'Hexagons light up where properties match. Zoom in and they split into finer cells. At street level you see individual postcode boundaries.',
- },
- {
- title: 'Dive into a neighbourhood',
- body: 'Click any hexagon to see every property inside it \u2014 sale prices, floor plans, energy ratings, tenure. Layer on cafes, GP surgeries, and parks from OpenStreetMap.',
- },
-];
+ icon: '\u{1F3E0}',
+ label: 'Property',
+ group: 'Property',
+ borderClass: 'border-l-teal-400 dark:border-l-teal-500',
+ hoverBgClass: 'hover:bg-teal-50/50 dark:hover:bg-teal-900/20',
+ iconBgClass: 'bg-teal-100 dark:bg-teal-900/40',
+ artColorClass: 'text-teal-400 dark:text-teal-600',
-const STATS = [
- { value: '26M+', label: 'property records' },
- { value: '12', label: 'open datasets' },
- { value: '1.7M', label: 'postcodes mapped' },
+ },
+ {
+ icon: '\u{1F686}',
+ label: 'Transport',
+ group: 'Transport',
+ borderClass: 'border-l-blue-400 dark:border-l-blue-500',
+ hoverBgClass: 'hover:bg-blue-50/50 dark:hover:bg-blue-900/20',
+ iconBgClass: 'bg-blue-100 dark:bg-blue-900/40',
+ artColorClass: 'text-blue-400 dark:text-blue-600',
+
+ },
+ {
+ icon: '\u{1F3EB}',
+ label: 'Schools',
+ group: 'Education',
+ borderClass: 'border-l-amber-400 dark:border-l-amber-500',
+ hoverBgClass: 'hover:bg-amber-50/50 dark:hover:bg-amber-900/20',
+ iconBgClass: 'bg-amber-100 dark:bg-amber-900/40',
+ artColorClass: 'text-amber-400 dark:text-amber-600',
+
+ },
+ {
+ icon: '\u{1F6A8}',
+ label: 'Crime',
+ group: 'Crime',
+ borderClass: 'border-l-rose-400 dark:border-l-rose-500',
+ hoverBgClass: 'hover:bg-rose-50/50 dark:hover:bg-rose-900/20',
+ iconBgClass: 'bg-rose-100 dark:bg-rose-900/40',
+ artColorClass: 'text-rose-400 dark:text-rose-600',
+
+ },
+ {
+ icon: '\u{1F465}',
+ label: 'Demographics',
+ group: 'Demographics',
+ borderClass: 'border-l-violet-400 dark:border-l-violet-500',
+ hoverBgClass: 'hover:bg-violet-50/50 dark:hover:bg-violet-900/20',
+ iconBgClass: 'bg-violet-100 dark:bg-violet-900/40',
+ artColorClass: 'text-violet-400 dark:text-violet-600',
+
+ },
+ {
+ icon: '\u{1F3EA}',
+ label: 'Amenities',
+ group: 'Amenities',
+ borderClass: 'border-l-emerald-400 dark:border-l-emerald-500',
+ hoverBgClass: 'hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20',
+ iconBgClass: 'bg-emerald-100 dark:bg-emerald-900/40',
+ artColorClass: 'text-emerald-400 dark:text-emerald-600',
+
+ },
+ {
+ icon: '\u{1F30D}',
+ label: 'Environment',
+ group: 'Environment',
+
+ borderClass: 'border-l-orange-400 dark:border-l-orange-500',
+ hoverBgClass: 'hover:bg-orange-50/50 dark:hover:bg-orange-900/20',
+ iconBgClass: 'bg-orange-100 dark:bg-orange-900/40',
+ artColorClass: 'text-orange-400 dark:text-orange-600',
+
+ },
+ {
+ icon: '\u{1F4E1}',
+ label: 'Broadband',
+ group: 'Environment',
+
+ borderClass: 'border-l-sky-400 dark:border-l-sky-500',
+ hoverBgClass: 'hover:bg-sky-50/50 dark:hover:bg-sky-900/20',
+ iconBgClass: 'bg-sky-100 dark:bg-sky-900/40',
+ artColorClass: 'text-sky-400 dark:text-sky-600',
+
+ },
+ {
+ icon: '\u{1F4CA}',
+ label: 'Deprivation',
+ group: 'Deprivation',
+ borderClass: 'border-l-fuchsia-400 dark:border-l-fuchsia-500',
+ hoverBgClass: 'hover:bg-fuchsia-50/50 dark:hover:bg-fuchsia-900/20',
+ iconBgClass: 'bg-fuchsia-100 dark:bg-fuchsia-900/40',
+ artColorClass: 'text-fuchsia-400 dark:text-fuchsia-600',
+
+ },
];
diff --git a/frontend/src/components/map/MapLegend.tsx b/frontend/src/components/map/MapLegend.tsx
index d440d99..0531b35 100644
--- a/frontend/src/components/map/MapLegend.tsx
+++ b/frontend/src/components/map/MapLegend.tsx
@@ -2,6 +2,7 @@ import { formatValue } from '../../lib/format';
import { FEATURE_GRADIENT, DENSITY_GRADIENT, DENSITY_GRADIENT_DARK } from '../../lib/consts';
import { gradientToCss } from '../../lib/utils';
import { CloseIcon } from '../ui/icons/CloseIcon';
+import { TickerValue } from '../ui/TickerValue';
export default function MapLegend({
featureLabel,
@@ -50,8 +51,8 @@ export default function MapLegend({
-
{/* Final CTA */}
-
- {STATS.map((s) => (
-
+
-
- ))}
- {s.value}
- {s.label}
-
+
+ Here's the problem with property search: listings only show you what's on + the market{' '} + right now{' '} + — a thin slice of what an area is actually like. And even if you could look + beyond them, there are{' '} + + millions of postcodes + {' '} + across England. You can't research them all yourself. +
++ We built this for you — years of historical transactions and public records, + extended with proprietary algorithms so the map doesn't just show raw data, it{' '} + + surfaces the patterns that matter + + . +
++ Understand areas first. Then find the right property within them, with expectations + you've set — not ones the market set for you. +
+
- Ready to narrow it down?
+ The biggest financial decision of your life
+
+
+ {/* Bottom illustration */}
+
- Ready to narrow it down?
+ The biggest financial decision of your life
+
+ deserves proper tools behind it.
- 100% open data. No account required. Just set your filters and go. + One payment, lifetime access. Set your filters and go.
- +
+
+
+
{mode === 'density' ? (
<>
- {formatValue(range[0])}
- {formatValue(range[1])}
+
diff --git a/frontend/src/components/map/PropertiesPane.tsx b/frontend/src/components/map/PropertiesPane.tsx
index 6c64e4f..23d898d 100644
--- a/frontend/src/components/map/PropertiesPane.tsx
+++ b/frontend/src/components/map/PropertiesPane.tsx
@@ -143,6 +143,7 @@ function PropertyLoadingSkeleton() {
function PropertyCard({ property }: { property: Property }) {
const price = getNum(property, 'Last known price', 'latest_price');
+ const estimatedPrice = getNum(property, 'Estimated current price');
const pricePerSqm = getNum(property, 'Price per sqm', 'price_per_sqm');
const floorArea = getNum(property, 'Total floor area (sqm)', 'total_floor_area');
const rooms = getNum(
@@ -172,6 +173,14 @@ function PropertyCard({ property }: { property: Property }) {
)}
+ Est. value:{' '}
+
+ £{formatNumber(estimatedPrice)}
+
+
+ )}
{property.property_type && (
diff --git a/frontend/src/components/pricing/PricingPage.tsx b/frontend/src/components/pricing/PricingPage.tsx
new file mode 100644
index 0000000..d944f82
--- /dev/null
+++ b/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 (
+
diff --git a/frontend/src/components/ui/MobileMenu.tsx b/frontend/src/components/ui/MobileMenu.tsx
index 742a539..98d4dc5 100644
--- a/frontend/src/components/ui/MobileMenu.tsx
+++ b/frontend/src/components/ui/MobileMenu.tsx
@@ -82,6 +82,7 @@ export default function MobileMenu({
{user && mobileNavItem('saved-searches', 'Saved')}
{mobileNavItem('data-sources', 'Data Sources')}
{mobileNavItem('faq', 'FAQ')}
+ {mobileNavItem('pricing', 'Pricing')}
{/* Dashboard actions */}
{activePage === 'dashboard' && (
diff --git a/frontend/src/components/ui/TickerValue.tsx b/frontend/src/components/ui/TickerValue.tsx
new file mode 100644
index 0000000..e144499
--- /dev/null
+++ b/frontend/src/components/ui/TickerValue.tsx
@@ -0,0 +1,39 @@
+const DIGITS = '0123456789';
+const H = 1.15; // digit slot height in em
+
+function Digit({ char, delay, active }: { char: string; delay: number; active: boolean }) {
+ const idx = DIGITS.indexOf(char);
+ if (idx === -1) return {char};
+
+ const offset = active ? -idx * H : 0;
+
+ return (
+
+
+ {DIGITS.split('').map((d) => (
+
+ {d}
+
+ ))}
+
+
+ );
+}
+
+export function TickerValue({ text, active = true }: { text: string; active?: boolean }) {
+ const chars = text.split('');
+ const len = chars.length;
+ return (
+
+ {chars.map((ch, i) => (
+
+
+ );
+}
diff --git a/frontend/src/components/ui/Header.tsx b/frontend/src/components/ui/Header.tsx
index 1a6168d..465b18e 100644
--- a/frontend/src/components/ui/Header.tsx
+++ b/frontend/src/components/ui/Header.tsx
@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
import type { AuthUser } from '../../hooks/useAuth';
import { DownloadIcon } from './icons/DownloadIcon';
import { BookmarkIcon } from './icons/BookmarkIcon';
-import { MapPinIcon } from './icons/MapPinIcon';
+import { LogoIcon } from './icons/LogoIcon';
import { CheckIcon } from './icons/CheckIcon';
import { ClipboardIcon } from './icons/ClipboardIcon';
import { MenuIcon } from './icons/MenuIcon';
@@ -12,7 +12,7 @@ import { SpinnerIcon } from './icons/SpinnerIcon';
import UserMenu from './UserMenu';
import MobileMenu from './MobileMenu';
-export type Page = 'home' | 'dashboard' | 'data-sources' | 'faq' | 'saved-searches';
+export type Page = 'home' | 'dashboard' | 'data-sources' | 'faq' | 'saved-searches' | 'pricing';
export default function Header({
activePage,
@@ -97,7 +97,7 @@ export default function Header({
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
onClick={() => onPageChange('home')}
>
-
+
+
+
+
+ + One price. Yours forever. +
++ No subscriptions, no recurring fees. Pay once and get lifetime access to every feature. +
+
+ {/* Price header */}
+
+
+
+
+ {/* Features list */}
+
+ Lifetime License
+
+
+ £100
+ /once
+
+ + One-time payment, no subscription +
+
+
+ -
+ {FEATURES.map((feature) => (
+
-
+
+ {feature} +
+ ))}
+
+ 30-day money-back guarantee +
+