feat(page-hero): photo bg + overlay for liquid-glass header consistency on inner pages

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 (
-    <div
-      className="-mt-[60px] bg-[#223e0d] px-8 pt-[calc(60px+48px)] pb-16 lg:-mt-[120px] lg:pt-[calc(120px+64px)]"
-      style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
-    >
-      <div className="mx-auto max-w-[1204px]">
-        <h1 className="text-[clamp(32px,5vw,64px)] leading-tight font-bold text-white uppercase">
+    <div className="relative -mt-[60px] overflow-hidden px-8 pb-16 pt-[calc(60px+48px)] lg:-mt-[120px] lg:pt-[calc(120px+64px)]">
+      <Image
+        src={src}
+        alt=""
+        fill
+        priority
+        sizes="100vw"
+        className="object-cover"
+        style={{ zIndex: -2 }}
+      />
+      <div
+        className="absolute inset-0"
+        style={{ zIndex: -1, background: 'rgba(34,62,13,0.55)' }}
+      />
+      <div className="relative mx-auto max-w-[1140px] text-white">
+        <h1
+          className="text-[40px] font-bold uppercase leading-[1.1] lg:text-[56px]"
+          style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
+        >
           {title}
         </h1>
         {subtitle && (
-          <p className="mt-4 max-w-[600px] text-[18px] leading-relaxed text-white/80">{subtitle}</p>
+          <p
+            className="mt-4 max-w-[680px] text-[18px] leading-[1.5]"
+            style={{ fontFamily: 'var(--font-poppins, Poppins), sans-serif' }}
+          >
+            {subtitle}
+          </p>
         )}
         {children}
       </div>