290 lines
14 KiB
TypeScript
290 lines
14 KiB
TypeScript
import { useState, useEffect, useRef } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useFadeInRef } from '../../hooks/useFadeIn';
|
|
import HexCanvas from './HexCanvas';
|
|
import BottomIllustration from './BottomIllustration';
|
|
import { TickerValue } from '../ui/TickerValue';
|
|
import { LogoIcon } from '../ui/icons/LogoIcon';
|
|
import { trackEvent } from '../../lib/analytics';
|
|
|
|
export default function HomePage({
|
|
onOpenDashboard,
|
|
onOpenPricing: _onOpenPricing,
|
|
theme = 'light',
|
|
hidePricing: _hidePricing,
|
|
}: {
|
|
onOpenDashboard: () => void;
|
|
onOpenPricing: () => void;
|
|
theme?: 'light' | 'dark';
|
|
hidePricing?: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [statsActive, setStatsActive] = useState(false);
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setStatsActive(true), 300);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const whyRef = useFadeInRef();
|
|
const ctaRef = useFadeInRef();
|
|
|
|
// Scroll depth tracking
|
|
const scrolledSections = useRef(new Set<string>());
|
|
useEffect(() => {
|
|
const ids = ['how-it-works'];
|
|
const observers: IntersectionObserver[] = [];
|
|
ids.forEach((id) => {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting && !scrolledSections.current.has(id)) {
|
|
scrolledSections.current.add(id);
|
|
trackEvent('Scroll Depth', { section: id });
|
|
}
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
observer.observe(el);
|
|
observers.push(observer);
|
|
});
|
|
return () => observers.forEach((o) => o.disconnect());
|
|
}, []);
|
|
|
|
// 30s time-on-page event
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => trackEvent('Time on Page', { seconds: '30' }), 30000);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto bg-warm-50 dark:bg-navy-950 relative">
|
|
<div className="relative" style={{ zIndex: 1 }}>
|
|
{/* Hero */}
|
|
<div className="relative overflow-hidden bg-gradient-to-b from-navy-950 via-navy-900 to-navy-900 dark:from-navy-950 dark:via-navy-900 dark:to-navy-950 min-h-[calc(100dvh-3rem)] flex flex-col">
|
|
<HexCanvas isDark={theme === 'dark'} />
|
|
<div className="absolute top-1/3 left-1/4 w-[500px] h-[500px] bg-teal-500/[0.04] rounded-full blur-[120px] pointer-events-none" />
|
|
<div className="absolute bottom-0 right-1/4 w-[400px] h-[300px] bg-teal-600/[0.03] rounded-full blur-[100px] pointer-events-none" />
|
|
<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>.
|
|
<br />
|
|
{t('home.heroTitle3')}
|
|
</h1>
|
|
<p className="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">
|
|
{t('home.heroDescription')}
|
|
</p>
|
|
<div className="flex items-center 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"
|
|
>
|
|
{t('home.exploreTheMap')}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
trackEvent('CTA Click', { location: 'hero', label: 'see_difference' });
|
|
const target = document.getElementById('comparison');
|
|
if (!target) return;
|
|
const scroller = target.closest('.overflow-y-auto') as HTMLElement | null;
|
|
if (!scroller) return;
|
|
const start = scroller.scrollTop;
|
|
const end =
|
|
start +
|
|
target.getBoundingClientRect().top -
|
|
scroller.getBoundingClientRect().top -
|
|
48;
|
|
const distance = end - start;
|
|
const duration = 1200;
|
|
let startTime: number;
|
|
const step = (time: number) => {
|
|
if (!startTime) startTime = time;
|
|
const p = Math.min((time - startTime) / duration, 1);
|
|
const ease = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
|
|
scroller.scrollTop = start + distance * ease;
|
|
if (p < 1) requestAnimationFrame(step);
|
|
};
|
|
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"
|
|
>
|
|
{t('home.seeTheDifference')}
|
|
</button>
|
|
</div>
|
|
<div className="flex gap-12 pt-3 border-t border-white/10">
|
|
<div>
|
|
<div className="text-2xl md:text-3xl font-bold text-white">
|
|
<TickerValue text="13M" active={statsActive} />
|
|
</div>
|
|
<div className="text-sm text-warm-400">{t('home.statProperties')}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl md:text-3xl font-bold text-white">
|
|
<TickerValue text="56" active={statsActive} />
|
|
</div>
|
|
<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-sm text-warm-400">{t('home.statPostcodeInEngland')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1" />
|
|
</div>
|
|
</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">
|
|
{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>
|
|
</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">
|
|
{/* Left: How to use it */}
|
|
<div>
|
|
<h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10">
|
|
{t('home.howToUseIt')}
|
|
</h2>
|
|
<div className="space-y-8">
|
|
{[
|
|
{ title: t('home.howStep1Title'), desc: t('home.howStep1Desc') },
|
|
{ title: t('home.howStep2Title'), desc: t('home.howStep2Desc') },
|
|
{ title: t('home.howStep3Title'), desc: t('home.howStep3Desc') },
|
|
{ title: t('home.howStep4Title'), desc: t('home.howStep4Desc') },
|
|
].map((step, i) => (
|
|
<div key={i} className="flex gap-5">
|
|
<div className="shrink-0 w-10 h-10 rounded-full bg-teal-600 text-white flex items-center justify-center font-bold text-lg">
|
|
{i + 1}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-navy-950 dark:text-warm-100 mb-1">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-warm-600 dark:text-warm-400 leading-relaxed">
|
|
{step.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* Right: Comparison table */}
|
|
<div id="comparison">
|
|
<h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10">
|
|
{t('home.othersVs')}{' '}
|
|
<span className="inline-flex items-baseline gap-3 whitespace-nowrap">
|
|
{t('header.appName')}{' '}
|
|
<LogoIcon className="w-8 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">
|
|
<table className="w-full text-left">
|
|
<thead>
|
|
<tr className="border-b border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800">
|
|
<th className="px-2 md:px-5 py-3 md:py-4 text-xs md:text-sm font-bold text-navy-950 dark:text-warm-100" />
|
|
<th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-bold text-navy-950 dark:text-warm-100 text-center">
|
|
{t('home.listingPortals')}
|
|
</th>
|
|
<th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-bold text-navy-950 dark:text-warm-100 text-center">
|
|
{t('home.checkMyPostcode')}
|
|
</th>
|
|
<th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-bold text-navy-950 dark:text-warm-100 text-center">
|
|
{t('home.areaGuides')}
|
|
</th>
|
|
<th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-extrabold text-navy-950 dark:text-warm-100 text-center bg-teal-50 dark:bg-teal-900/30">
|
|
{t('header.appName')}
|
|
</th>
|
|
</tr>
|
|
</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 },
|
|
].map((row, i, arr) => (
|
|
<tr
|
|
key={i}
|
|
className={
|
|
i < arr.length - 1
|
|
? 'border-b border-warm-100 dark:border-warm-800'
|
|
: ''
|
|
}
|
|
>
|
|
<td className="px-2 md:px-5 py-2.5 md:py-3.5 text-xs md:text-sm text-warm-700 dark:text-warm-300">
|
|
{row.feature}
|
|
{row.subtitle && (
|
|
<div className="italic text-warm-500 dark:text-warm-400">
|
|
{row.subtitle}
|
|
</div>
|
|
)}
|
|
</td>
|
|
{[row.listings, row.postcode, row.guides].map((has, j) => (
|
|
<td
|
|
key={j}
|
|
className={`px-1.5 md:px-3 py-2.5 md:py-3.5 text-center text-base md:text-lg ${has ? 'text-green-500' : 'text-red-500'}`}
|
|
>
|
|
{has ? '\u2713' : '\u2717'}
|
|
</td>
|
|
))}
|
|
<td className="px-1.5 md:px-3 py-2.5 md:py-3.5 text-center text-base md:text-lg text-green-500 bg-teal-50 dark:bg-teal-900/30">
|
|
✓
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* The real cost CTA */}
|
|
<div className="max-w-4xl mx-auto px-6 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')}
|
|
</h2>
|
|
<p className="text-warm-600 dark:text-warm-400 mb-8 max-w-xl mx-auto leading-relaxed">
|
|
{t('home.ctaDescription')}
|
|
</p>
|
|
<button
|
|
onClick={() => {
|
|
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"
|
|
>
|
|
{t('home.exploreTheMap')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom illustration */}
|
|
<BottomIllustration isDark={theme === 'dark'} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|