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

LGTM

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-11 21:38:26 +01:00
parent 9248e26af2
commit f2a2651b8a
95 changed files with 3993 additions and 1471 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/home/HomePage.tsx
View file

@ -17,7 +17,7 @@ const HOME_BODY_CLASS = 'text-base leading-relaxed text-warm-600 dark:text-warm-
const HOME_PRIMARY_BUTTON_CLASS =
'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';
const PRODUCT_DEMO_VIDEO_SRC = '/video/recording.mp4';
const PRODUCT_DEMO_POSTER_SRC = '/video/poster.jpg';
const PRODUCT_DEMO_POSTER_SRC = '/video/recording.jpg';
const PRODUCT_DEMO_SECTION_ID = 'product-demo-video';
function highlightBrandText(text: string) {
@ -37,6 +37,7 @@ function highlightBrandText(text: string) {
}
function ProductDemoVideo() {
const { t } = useTranslation();
const sectionRef = useRef<HTMLDivElement | null>(null);
const videoRef = useRef<HTMLVideoElement | null>(null);
const [shouldLoadVideo, setShouldLoadVideo] = useState(false);
@ -94,7 +95,7 @@ function ProductDemoVideo() {
playsInline
preload={shouldLoadVideo ? 'metadata' : 'none'}
className="block aspect-video w-full bg-navy-950 object-contain"
aria-label="Perfect Postcode product demo"
aria-label={t('home.productDemoLabel')}
onPlay={() => setIsVideoPlaying(true)}
onPause={() => setIsVideoPlaying(false)}
onEnded={() => setIsVideoPlaying(false)}
@ -105,7 +106,7 @@ function ProductDemoVideo() {
type="button"
onClick={playVideo}
className="pointer-events-auto group flex h-20 w-20 items-center justify-center rounded-full bg-white/95 text-coral-500 shadow-2xl shadow-navy-950/40 ring-1 ring-white/60 transition-transform hover:scale-105 focus:outline-none focus-visible:scale-105 focus-visible:ring-4 focus-visible:ring-teal-300/75 md:h-24 md:w-24"
aria-label="Play Perfect Postcode product demo"
aria-label={t('home.playProductDemo')}
>
<PlayIcon className="h-11 w-11 -translate-x-0.5 md:h-14 md:w-14" />
</button>
@ -327,7 +328,7 @@ export default function HomePage({
<button
type="button"
className="hero-scroll-chevron absolute bottom-4 left-1/2 z-20 -translate-x-1/2 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
aria-label="Scroll to product demo"
aria-label={t('home.scrollToProductDemo')}
onClick={() => {
trackEvent('CTA Click', { location: 'hero_chevron', label: 'scroll_down' });
scrollToProductDemoVideo();