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

Update UI

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-01 11:07:58 +00:00
parent 2ac37ece97
commit 5f311233e4
10 changed files with 663 additions and 408 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/src/components/HomePage.tsx
View file

@ -182,28 +182,29 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
const ctaRef = useFadeInRef();
return (
<div
ref={scrollRef}
className="flex-1 overflow-y-auto bg-warm-50 relative"
>
<div ref={scrollRef} className="flex-1 overflow-y-auto bg-warm-50 relative">
<HexCanvas scrollProgress={scrollProgress} />
<div className="relative" style={{ zIndex: 1 }}>
{/* Hero */}
<div className="max-w-3xl mx-auto px-6 pt-20 pb-24">
<div ref={heroRef} className="fade-in-section backdrop-blur-sm bg-warm-50/60 rounded-2xl p-8 -mx-2">
<div
ref={heroRef}
className="fade-in-section backdrop-blur-sm bg-warm-50/60 rounded-2xl p-8 -mx-2"
>
<p className="text-teal-600 font-semibold tracking-wide uppercase text-sm mb-4">
Find where to live, not just what&apos;s for sale
</p>
<h1 className="text-5xl font-extrabold text-navy-950 mb-6 leading-[1.1] tracking-tight">
Every neighbourhood<br />
in England &amp; Wales.<br />
Every neighbourhood
<br />
in England &amp; Wales.
<br />
<span className="text-teal-600">One map. Your&nbsp;rules.</span>
</h1>
<p className="text-xl text-warm-600 mb-8 leading-relaxed max-w-xl">
Set the commute, budget, school rating, noise level, and crime
threshold you&apos;ll accept. Narrowit shows you every area that
qualifies &mdash; instantly.
Set the commute, budget, school rating, noise level, and crime threshold you&apos;ll
accept. Narrowit shows you every area that qualifies &mdash; instantly.
</p>
<div className="flex items-center gap-4">
<button
@ -225,19 +226,22 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
<div className="rounded-2xl backdrop-blur-sm bg-warm-50/40 border border-warm-200/50 p-8">
<div className="grid md:grid-cols-2 gap-8">
<div>
<h3 className="text-sm font-semibold text-warm-400 uppercase tracking-wide mb-2">The old way</h3>
<h3 className="text-sm font-semibold text-warm-400 uppercase tracking-wide mb-2">
The old way
</h3>
<p className="text-warm-700 leading-relaxed">
Pick a postcode. Google the schools. Check crime stats on
another site. Look up commute times. Realise it&apos;s too
expensive. Start over. Repeat 40 times.
Pick a postcode. Google the schools. Check crime stats on another site. Look up
commute times. Realise it&apos;s too expensive. Start over. Repeat 40 times.
</p>
</div>
<div>
<h3 className="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-2">With Narrowit</h3>
<h3 className="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-2">
With Narrowit
</h3>
<p className="text-warm-700 leading-relaxed">
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.
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.
</p>
</div>
</div>
@ -308,9 +312,7 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
{/* Final CTA */}
<div className="max-w-3xl mx-auto px-6 pb-24">
<div ref={ctaRef} className="fade-in-section text-center">
<h2 className="text-3xl font-bold text-navy-950 mb-3">
Ready to narrow it down?
</h2>
<h2 className="text-3xl font-bold text-navy-950 mb-3">Ready to narrow it down?</h2>
<p className="text-warm-500 mb-8 max-w-md mx-auto">
100% open data. No account required. Just set your filters and go.
</p>