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

vibes

Browse source
This commit is contained in:
Andras Schmelczer 2026-03-15 17:38:26 +00:00
parent 80c093b7ba
commit f72c43a9fa
101 changed files with 2168 additions and 1177 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/components/home/ScrollStory.tsx
View file

@ -14,7 +14,7 @@ const DEMO_FEATURE_NAMES = [
'Good+ primary schools within 5km',
'Number of restaurants within 2km',
];
const noop = () => { };
const noop = () => {};
// Filter fractions per stage: featureName -> [minFrac, maxFrac]
// 0 = feature.min, 1 = feature.max
@ -75,10 +75,7 @@ const STEPS: { heading: string | null; body: React.ReactNode }[] = [
</p>
<p className="text-base md:text-lg leading-snug md:leading-relaxed">
You&apos;re about to spend{' '}
<strong className="text-navy-950 dark:text-warm-100">
up to &pound;500k
</strong>{' '}
on a home.
<strong className="text-navy-950 dark:text-warm-100">up to &pound;500k</strong> on a home.
</p>
</>
),
@ -91,7 +88,9 @@ const STEPS: { heading: string | null; body: React.ReactNode }[] = [
<div className="shrink-0 w-7 h-7 md:w-8 md:h-8 rounded-full bg-teal-600 text-white flex items-center justify-center font-bold text-xs md:text-sm">
1
</div>
<h3 className="text-lg md:text-xl font-bold text-navy-950 dark:text-warm-100">Set your must-haves</h3>
<h3 className="text-lg md:text-xl font-bold text-navy-950 dark:text-warm-100">
Set your must-haves
</h3>
</div>
<p className="text-base md:text-lg leading-snug md:leading-relaxed">
Say you want a home{' '}
@ -127,8 +126,8 @@ const STEPS: { heading: string | null; body: React.ReactNode }[] = [
body: (
<p className="text-base md:text-lg leading-snug md:leading-relaxed">
&hellip;all within{' '}
<strong className="text-navy-950 dark:text-warm-100">45 minutes of Manchester</strong>{' '}
by public transport.
<strong className="text-navy-950 dark:text-warm-100">45 minutes of Manchester</strong> by
public transport.
</p>
),
},
@ -137,11 +136,13 @@ const STEPS: { heading: string | null; body: React.ReactNode }[] = [
body: (
<>
<p className="text-base md:text-lg leading-snug md:leading-relaxed mb-2 md:mb-4 font-semibold text-navy-950 dark:text-warm-100">
No area chosen. No listings browsed. Yet you already know exactly where your needs are met.
No area chosen. No listings browsed. Yet you already know exactly where your needs are
met.
</p>
<p className="text-base md:text-lg leading-snug md:leading-relaxed">
That&apos;s just 4 filters. We&apos;ve built <strong className="text-navy-950 dark:text-warm-100">56</strong> &mdash;
covering commute times, crime, broadband, noise, schools, amenities, and more.
That&apos;s just 4 filters. We&apos;ve built{' '}
<strong className="text-navy-950 dark:text-warm-100">56</strong> &mdash; covering commute
times, crime, broadband, noise, schools, amenities, and more.
</p>
</>
),
@ -337,9 +338,13 @@ export default function ScrollStory({ features, theme }: ScrollStoryProps) {
);
})}
{/* Travel time indicator */}
<div className={`transition-opacity duration-700 ${STAGES[stage].travel ? 'opacity-100' : 'opacity-30'}`}>
<div
className={`transition-opacity duration-700 ${STAGES[stage].travel ? 'opacity-100' : 'opacity-30'}`}
>
<div className="flex justify-between items-baseline text-xs md:text-sm mb-1 md:mb-1.5 gap-1.5 md:gap-2">
<span className={`font-medium truncate ${STAGES[stage].travel ? 'text-navy-950 dark:text-warm-100' : 'text-warm-400 dark:text-warm-500'}`}>
<span
className={`font-medium truncate ${STAGES[stage].travel ? 'text-navy-950 dark:text-warm-100' : 'text-warm-400 dark:text-warm-500'}`}
>
Commute to Manchester
</span>
{STAGES[stage].travel && (
@ -369,7 +374,11 @@ export default function ScrollStory({ features, theme }: ScrollStoryProps) {
</div>
<div
className="h-1.5 md:h-2.5 rounded-full overflow-hidden"
style={{ background: gradientToCss(theme === 'dark' ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT) }}
style={{
background: gradientToCss(
theme === 'dark' ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT
),
}}
/>
<div className="flex justify-between mt-1 text-[10px] md:text-xs text-warm-500 dark:text-warm-400">
<span>Fewer</span>