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

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
) : (