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

Fix og images

Browse source
This commit is contained in:
Andras Schmelczer 2026-03-14 22:05:00 +00:00
parent 49f7ec2f5a
commit 0500160fda
3 changed files with 57 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/invite/InvitePage.tsx
View file

@ -166,16 +166,16 @@ export default function InvitePage({
const isValid = invite?.valid && !invite.used;
return (
<div className="h-screen w-screen flex items-center justify-center bg-gradient-to-b from-navy-950 via-navy-900 to-navy-900">
<div className="w-[85%] bg-white dark:bg-warm-800 rounded-2xl border border-warm-200 dark:border-warm-700 shadow-xl overflow-hidden">
<div className="bg-gradient-to-br from-navy-950 to-teal-900 px-12 py-14 text-center">
<h2 className="text-4xl font-bold text-white mb-4">
<div className="w-[90%] bg-white dark:bg-warm-800 rounded-3xl border border-warm-200 dark:border-warm-700 shadow-xl overflow-hidden">
<div className="bg-gradient-to-br from-navy-950 to-teal-900 px-20 py-16 text-center">
<h2 className="text-[144px] leading-tight font-bold text-white mb-6">
{isValid
? isAdminInvite
? "You\u2019re invited!"
: 'Special offer!'
: 'Perfect Postcode'}
</h2>
<p className="text-warm-300 text-lg">
<p className="text-warm-300 text-6xl leading-snug">
{isValid && invite.invited_by
? isAdminInvite
? `${invite.invited_by} has invited you to get free lifetime access.`
@ -187,19 +187,19 @@ export default function InvitePage({
: 'Explore every neighbourhood in England'}
</p>
</div>
<div className="px-12 py-10 text-center">
<div className="px-20 py-14 text-center">
{isValid && !isAdminInvite && pricePence !== null && pricePence > 0 && (
<div className="mb-6">
<span className="text-warm-400 dark:text-warm-500 line-through text-2xl mr-3">
<div className="mb-8">
<span className="text-warm-400 dark:text-warm-500 line-through text-8xl mr-6">
{`\u00A3${pricePence / 100}`}
</span>
<span className="text-5xl font-extrabold text-teal-600 dark:text-teal-400">
<span className="text-[192px] leading-none font-extrabold text-teal-600 dark:text-teal-400">
{`\u00A3${(Math.round(pricePence * 0.7) / 100).toFixed(2)}`}
</span>
<span className="text-warm-500 dark:text-warm-400 ml-2 text-xl">/once</span>
<span className="text-warm-500 dark:text-warm-400 ml-4 text-6xl">/once</span>
</div>
)}
<p className="text-warm-600 dark:text-warm-400 text-lg">
<p className="text-warm-600 dark:text-warm-400 text-6xl">
Property prices, energy ratings, crime stats, school ratings &amp; more
</p>
</div>

52
frontend/src/components/map/Map.tsx
View file

@ -18,6 +18,7 @@ import { INITIAL_VIEW_STATE, MAP_MIN_ZOOM, MAP_BOUNDS, POI_GROUP_COLORS, POI_DEF
import LocationSearch, { type SearchedLocation } from './LocationSearch';
import MapLegend from './MapLegend';
import HoverCard from './HoverCard';
import { LogoIcon } from '../ui/icons/LogoIcon';
import type { FeatureFilters } from '../../types';
import { useDeckLayers } from '../../hooks/useDeckLayers';
import { MODE_LABELS, type TravelTimeEntry } from '../../hooks/useTravelTime';
@ -207,13 +208,50 @@ export default memo(function Map({
</MapGL>
{screenshotMode ? (
ogMode ? (
<div className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
<h1
className="text-5xl font-bold text-white drop-shadow-lg"
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
>
Your perfect postcode
</h1>
<div className="absolute inset-0 z-20 pointer-events-none flex flex-col">
{/* Center: Logo card with hero text */}
<div className="flex-1 flex items-center justify-center">
<div className="flex items-center gap-8 bg-navy-900/90 rounded-3xl px-14 py-10">
<LogoIcon className="w-24 h-24 text-teal-400" />
<span
className="font-bold text-white"
style={{ fontSize: '5.5rem', letterSpacing: '-0.03em' }}
>
Your perfect postcode
</span>
</div>
</div>
{/* Bottom bar */}
<div className="absolute bottom-0 left-0 right-0 flex items-center justify-between px-10 py-4 bg-white">
<div className="flex items-center gap-6">
<span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
Property prices
</span>
<span className="text-warm-300">|</span>
<span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
Energy ratings
</span>
<span className="text-warm-300">|</span>
<span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
Schools
</span>
<span className="text-warm-300">|</span>
<span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
Crime stats
</span>
<span className="text-warm-300">|</span>
<span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
Transport
</span>
</div>
<span
className="text-teal-600 font-semibold"
style={{ fontSize: '1rem' }}
>
perfect-postcode.co.uk
</span>
</div>
</div>
) : null
) : (

4
frontend/src/lib/consts.ts
View file

@ -19,7 +19,7 @@ export const FREE_ZONE_BOUNDS = { south: 51.44, west: -0.31, north: 51.59, east:
export const INITIAL_VIEW_STATE: ViewState = {
longitude: (FREE_ZONE_BOUNDS.west + FREE_ZONE_BOUNDS.east) / 2,
latitude: (FREE_ZONE_BOUNDS.south + FREE_ZONE_BOUNDS.north) / 2,
zoom: 14.5,
zoom: 14,
pitch: 0,
};
@ -35,7 +35,7 @@ export const ZOOM_TO_RESOLUTION_THRESHOLDS = [
{ maxZoom: 13, resolution: 9 },
] as const;
export const POSTCODE_ZOOM_THRESHOLD = 14.5;
export const POSTCODE_ZOOM_THRESHOLD = 15;
export const FEATURE_GRADIENT: { t: number; color: [number, number, number] }[] = [
{ t: 0, color: [46, 204, 113] },