fix: restore missing live-site page imagery

- recover and self-host HubSpot-injected page hero assets
- map source heroes to page and library layouts
- restore the consultation form background
- add page imagery auditing
- update asset inventory and migration documentation

www/src/components/FormShell.astro

@@ -1,7 +1,7 @@
 ---
-const { title = 'Schedule Your Free Consultation' } = Astro.props;
+const { title = 'Schedule Your Free Consultation', showBackground = false } = Astro.props;
 ---
-<section class="form-section" aria-labelledby="form-title">
+<section class:list={['form-section', { 'form-section-background': showBackground }]} aria-labelledby="form-title">
   <div class="container form-grid">
     <div><p class="eyebrow">Get started</p><h2 id="form-title">{title}</h2><p>Tell our client advocates how we can help. Submission is disabled until a production form backend is selected.</p></div>
     <form class="form" method="post" action="">

www/src/data/page-visuals.ts

@@ -0,0 +1,20 @@
+export const pageHeroImages: Record<string, string> = {
+  'aba-therapy-intake-process': '/assets/images/hero-aba-therapy-intake-process.webp',
+  'aba-therapy': '/assets/images/hero-services-behavioral-aba.webp',
+  about: '/assets/images/hero-about.webp',
+  'autism-evaluations': '/assets/images/hero-services-psychological.webp',
+  careers: '/assets/images/hero-careers.webp',
+  'client-consultation': '/assets/images/hero-bg-blank.png',
+  'client-forms': '/assets/images/hero-client-forms.webp',
+  contact: '/assets/images/hero-contact-aia.webp',
+  'donate-autism-giveback': '/assets/images/hero-ways-to-giveback.webp',
+  'employee-portal': '/assets/images/hero-aba-employee-portal.webp',
+  faqs: '/assets/images/hero-faq.webp',
+  insurance: '/assets/images/hero-insurance-coverage-guide.webp',
+  'learner-social-club': '/assets/images/hero-services-sociological.webp',
+  'privacy-policy': '/assets/images/hero-bg-blank.png',
+  referrals: '/assets/images/hero-referrals.webp',
+  services: '/assets/images/hero-pediatric-services.webp',
+  team: '/assets/images/hero-meet-the-aia-team.webp',
+  tour: '/assets/images/hero-schedule-aia-tour.webp'
+};

www/src/layouts/BlogIndexLayout.astro

@@ -5,7 +5,7 @@ const languagePrefix = lang === 'en' ? '' : `/${lang}`;
 const canonical = `https://www.azinstitute4autism.com${languagePrefix}/library`;
 ---
 <BaseLayout title={title} description={description} canonical={canonical} lang={lang}>
-  <header class="library-banner"><div class="container"><p class="script-label">Welcome to</p><h1>{title}</h1></div></header>
+  <header class="library-banner"><div class="container"><div class="library-banner-copy"><p class="script-label">Welcome to</p><h1>{title}</h1></div></div></header>
   <section class="library-intro"><div class="container"><h2>Library</h2><p>{description}</p></div></section>
   <div class="container section library-layout"><slot /></div>
 </BaseLayout>

www/src/layouts/PageLayout.astro

@@ -2,6 +2,7 @@
 import BaseLayout from './BaseLayout.astro';
 import FormShell from '../components/FormShell.astro';
 import TeamPage from '../components/TeamPage.astro';
+import { pageHeroImages } from '../data/page-visuals';
 const { entry } = Astro.props;
 const showForm = ['client-consultation', 'contact', 'schedule-consultation', 'referrals'].includes(entry.data.slug);
 const serviceTitles: Record<string, Record<string, string>> = {
@@ -44,13 +45,14 @@ const pageTitles: Record<string, Record<string, string>> = {
 };
 const bannerTitle = serviceTitles[entry.data.lang]?.[entry.data.slug] || pageTitles[entry.data.lang]?.[entry.data.slug] || entry.data.title.split('|')[0].trim();
 const isService = Boolean(serviceTitles[entry.data.lang]?.[entry.data.slug]);
+const heroImage = pageHeroImages[entry.data.slug];
 ---
-<BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage} lang={entry.data.lang}>
-  <header class:list={['source-page-banner', { 'service-banner': isService }]}>
+<BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage || heroImage} lang={entry.data.lang}>
+  <header class:list={['source-page-banner', { 'has-source-image': heroImage, 'service-banner': isService }]} style={heroImage ? `background-image: url("${heroImage}")` : undefined}>
     <div class="container"><h1>{bannerTitle}</h1></div>
   </header>
   {entry.data.slug === 'team' && entry.data.lang === 'en'
     ? <TeamPage />
     : <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
-  {showForm && <FormShell title={bannerTitle} />}
+  {showForm && <FormShell title={bannerTitle} showBackground={entry.data.slug === 'client-consultation'} />}
 </BaseLayout>

www/src/styles/components.css

@@ -54,8 +54,10 @@
 .faq summary { cursor: pointer; font-weight: 700; }
 .source-page-banner { background: var(--color-tint); padding-block: 4rem; text-align: center; }
 .source-page-banner h1 { margin: 0; }
-.service-banner { background-color: #e8f1ee; background-image: radial-gradient(circle at 14% 45%, rgb(37 64 128 / 9%) 0 54px, transparent 55px), radial-gradient(circle at 28% 25%, rgb(37 64 128 / 10%) 0 22px, transparent 23px), radial-gradient(circle at 74% 50%, rgb(37 64 128 / 8%) 0 42px, transparent 43px); padding-block: 7rem; }
-.library-banner { background: var(--color-tint); padding-block: 5rem; text-align: center; }
+.source-page-banner.has-source-image { background-color: var(--color-tint); background-position: center; background-repeat: no-repeat; background-size: cover; padding-block: 10rem; text-align: left; }
+.source-page-banner.has-source-image h1 { max-width: 600px; }
+.library-banner { background-color: var(--color-tint); background-image: url('/assets/images/hero-library-index.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; padding-block: 10rem; text-align: left; }
+.library-banner-copy { max-width: 600px; }
 .library-banner h1 { margin: 0; }
 .library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
 .library-intro h2 { color: white; }
@@ -140,5 +142,7 @@
   .blog-list .blog-card { grid-template-columns: 1fr; }
   .article-featured { height: auto; }
   .team-grid { grid-template-columns: 1fr; }
+  .source-page-banner.has-source-image, .library-banner { padding-block: 6.25rem; text-align: center; }
+  .source-page-banner.has-source-image h1, .library-banner-copy { margin-inline: auto; }
 }
 @media (min-width: 761px) and (max-width: 1050px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

www/src/styles/forms.css

@@ -1,4 +1,5 @@
 .form-section { background: var(--color-tint); padding-block: var(--space-xl); }
+.form-section.form-section-background { background-image: url('/assets/images/rbt-toddler-play.webp'); background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
 .form-grid { display: grid; gap: var(--space-xl); grid-template-columns: .8fr 1.2fr; }
 .form { background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: grid; gap: var(--space-md); padding: var(--space-lg); }
 .form label { display: grid; font-weight: 700; gap: var(--space-xs); }