From bcdd2a3a2d8055455bd4e7eca3bb95091fc09335 Mon Sep 17 00:00:00 2001 From: Vadym Samoilenko Date: Mon, 11 May 2026 13:18:48 +0100 Subject: [PATCH] feat(page-hero): photo bg + overlay for liquid-glass header consistency on inner pages --- src/components/ui/PageHero.tsx | 40 +++++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/src/components/ui/PageHero.tsx b/src/components/ui/PageHero.tsx index fe943ba..61f01a1 100644 --- a/src/components/ui/PageHero.tsx +++ b/src/components/ui/PageHero.tsx @@ -1,27 +1,51 @@ +import Image from 'next/image' import type { ReactNode } from 'react' +const DEFAULT_BG = '/images/page-hero-default.webp' + interface PageHeroProps { title: string subtitle?: string + bgSrc?: string | null children?: ReactNode } /** * Inner-page hero banner. Slides under the sticky header the same way the home hero does. * Header height: 60px mobile / 120px desktop → negative top margin pulls this section up. + * Accepts an optional bgSrc photo; falls back to DEFAULT_BG with a dark-green overlay. */ -export function PageHero({ title, subtitle, children }: PageHeroProps) { +export function PageHero({ title, subtitle, bgSrc, children }: PageHeroProps) { + const src = bgSrc ?? DEFAULT_BG return ( -
-
-

+
+ +
+
+

{title}

{subtitle && ( -

{subtitle}

+

+ {subtitle} +

)} {children}