This commit is contained in:
Andras Schmelczer 2026-04-04 17:44:44 +01:00
parent b94cf17d75
commit 0c6d207967
41 changed files with 1809 additions and 1204 deletions

View file

@ -68,23 +68,24 @@ export default function HomePage({
<div className="relative z-10 max-w-4xl mx-auto px-6 md:px-10 pt-16 md:pt-24 backdrop-blur-[2px] flex-1 flex flex-col">
<div>
<h1 className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-[1.1] tracking-tight">
{t('home.heroTitle1')} <span className="text-teal-400">{t('home.heroTitle2')}</span>.
{t('home.heroTitle1')} <span className="text-teal-400">{t('home.heroTitle2')}</span>
.
<br />
{t('home.heroTitle3')}
</h1>
<p className="text-lg text-warm-300 mb-6 leading-relaxed max-w-xl">
<p className="text-base md:text-lg text-warm-300 mb-6 leading-relaxed max-w-xl">
{t('home.heroSubtitle')}
</p>
<p className="text-lg text-warm-400 mb-8 max-w-xl">
<p className="text-base md:text-lg text-warm-400 mb-8 max-w-xl">
{t('home.heroDescription')}
</p>
<div className="flex flex-wrap items-center gap-4 mb-10">
<div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 mb-10">
<button
onClick={() => {
trackEvent('CTA Click', { location: 'hero', label: 'explore_map' });
onOpenDashboard();
}}
className="px-7 py-3.5 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-base shadow-lg shadow-coral-500/25"
className="px-7 py-3.5 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-base shadow-lg shadow-coral-500/25 text-center"
>
{t('home.exploreTheMap')}
</button>
@ -113,12 +114,12 @@ export default function HomePage({
};
requestAnimationFrame(step);
}}
className="px-[26px] py-[12px] border-2 border-teal-400 text-teal-400 rounded-lg font-semibold hover:bg-teal-400/10 transition-colors text-base"
className="px-[26px] py-[12px] border-2 border-teal-400 text-teal-400 rounded-lg font-semibold hover:bg-teal-400/10 transition-colors text-base text-center"
>
{t('home.seeTheDifference')}
</button>
</div>
<div className="flex flex-wrap gap-x-12 gap-y-4 pt-3 border-t border-white/10">
<div className="flex flex-wrap gap-x-8 sm:gap-x-12 gap-y-4 pt-3 border-t border-white/10">
<div>
<div className="text-2xl md:text-3xl font-bold text-white">
<TickerValue text="13M" active={statsActive} />
@ -132,7 +133,9 @@ export default function HomePage({
<div className="text-sm text-warm-400">{t('home.statFilters')}</div>
</div>
<div>
<div className="text-2xl md:text-3xl font-bold text-white">{t('home.statEvery')}</div>
<div className="text-2xl md:text-3xl font-bold text-white">
{t('home.statEvery')}
</div>
<div className="text-sm text-warm-400">{t('home.statPostcodeInEngland')}</div>
</div>
</div>
@ -142,30 +145,26 @@ export default function HomePage({
</div>
{/* Our philosophy */}
<div className="px-6 md:px-12 lg:px-20 pt-20 pb-4">
<h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-6">
<div className="px-6 md:px-12 lg:px-20 pt-12 md:pt-20 pb-4">
<h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-6">
{t('home.ourPhilosophy')}
</h2>
<div className="space-y-4 text-lg md:text-xl leading-relaxed text-warm-700 dark:text-warm-300">
<p>
{t('home.philosophyP1')}
</p>
<p>
{t('home.philosophyP2')}
</p>
<p>{t('home.philosophyP1')}</p>
<p>{t('home.philosophyP2')}</p>
</div>
</div>
{/* How to use it + Comparison table (two columns) */}
<div id="how-it-works" className="max-w-7xl mx-auto px-6 pt-10 pb-2">
<div ref={whyRef} className="fade-in-section">
<div className="grid lg:grid-cols-[2fr_3fr] gap-12 items-start">
<div className="grid lg:grid-cols-[2fr_3fr] gap-8 lg:gap-12 items-start">
{/* Left: How to use it */}
<div>
<h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-6 md:mb-10">
{t('home.howToUseIt')}
</h2>
<div className="space-y-8">
<div className="space-y-6 md:space-y-8">
{[
{ title: t('home.howStep1Title'), desc: t('home.howStep1Desc') },
{ title: t('home.howStep2Title'), desc: t('home.howStep2Desc') },
@ -190,11 +189,11 @@ export default function HomePage({
</div>
{/* Right: Comparison table */}
<div id="comparison">
<h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-6 md:mb-10">
{t('home.othersVs')}{' '}
<span className="inline-flex items-baseline gap-3 whitespace-nowrap">
<span className="inline-flex items-baseline gap-2 md:gap-3">
{t('header.appName')}{' '}
<LogoIcon className="w-8 h-8 text-teal-600 dark:text-teal-400" />
<LogoIcon className="w-6 h-6 md:w-8 md:h-8 text-teal-600 dark:text-teal-400" />
</span>
</h2>
<div className="overflow-x-auto rounded-xl border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 shadow-sm">
@ -218,10 +217,34 @@ export default function HomePage({
</thead>
<tbody>
{[
{ feature: t('home.compSearchWithout'), subtitle: t('home.compSearchWithoutSub'), listings: false, postcode: false, guides: false },
{ feature: t('home.compAreaData'), subtitle: t('home.compAreaDataSub'), listings: false, postcode: true, guides: true },
{ feature: t('home.compPropertyData'), subtitle: t('home.compPropertyDataSub'), listings: true, postcode: false, guides: false },
{ feature: t('home.compFilters'), subtitle: t('home.compFiltersSub'), listings: false, postcode: false, guides: false },
{
feature: t('home.compSearchWithout'),
subtitle: t('home.compSearchWithoutSub'),
listings: false,
postcode: false,
guides: false,
},
{
feature: t('home.compAreaData'),
subtitle: t('home.compAreaDataSub'),
listings: false,
postcode: true,
guides: true,
},
{
feature: t('home.compPropertyData'),
subtitle: t('home.compPropertyDataSub'),
listings: true,
postcode: false,
guides: false,
},
{
feature: t('home.compFilters'),
subtitle: t('home.compFiltersSub'),
listings: false,
postcode: false,
guides: false,
},
].map((row, i, arr) => (
<tr
key={i}
@ -261,7 +284,7 @@ export default function HomePage({
</div>
{/* The real cost CTA */}
<div className="max-w-4xl mx-auto px-6 pt-20 pb-12">
<div className="max-w-4xl mx-auto px-6 pt-12 md:pt-20 pb-12">
<div ref={ctaRef} className="fade-in-section text-center">
<h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-4 leading-snug">
{t('home.ctaTitle')}
@ -274,7 +297,7 @@ export default function HomePage({
trackEvent('CTA Click', { location: 'bottom', label: 'explore_map' });
onOpenDashboard();
}}
className="px-8 py-4 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-lg shadow-lg shadow-coral-500/25"
className="w-full sm:w-auto px-8 py-4 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-lg shadow-lg shadow-coral-500/25"
>
{t('home.exploreTheMap')}
</button>
@ -287,4 +310,3 @@ export default function HomePage({
</div>
);
}