feat(layout): add reusable page hero and services page shells

- replace bespoke page and library banners with PageHero.astro
- add ServicesPage.astro for the live-style English services landing page
- restyle shared hero/container measurements for the new layout shell
- add self-hosted services card images

www/src/components/PageHero.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  title: string;
+  image?: string;
+  eyebrow?: string;
+  constrain?: boolean;
+}
+const { title, image, eyebrow, constrain = false } = Astro.props;
+---
+
+<header class:list={['page-hero', { 'page-hero--image': image, 'page-hero--constrained': image && constrain }]} style={image ? `--hero-image: url("${image}")` : undefined}>
+  <div class="container">
+    {eyebrow
+      ? <div class="page-hero__copy"><p class="script-label">{eyebrow}</p><h1>{title}</h1></div>
+      : <h1>{title}</h1>
+    }
+  </div>
+</header>

www/src/components/ServicesPage.astro

@@ -0,0 +1,78 @@
+---
+import Button from './Button.astro';
+---
+
+<style>
+  .services-intro { padding-block: 5rem 1.25rem; }
+  .services-intro-cta { margin-top: 2rem; text-align: center; }
+
+  .services-cards-section { background: var(--color-primary); padding-block: 3rem; }
+  .services-cards-section h2 { color: white; margin-top: 0; text-align: center; }
+  .services-cards-desc { color: white; margin-bottom: 2rem; }
+
+  .service-cards-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
+  .service-card-link { background-color: var(--color-accent); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 6px; display: block; padding: 20% 2rem 2rem; text-align: center; text-decoration: none; transition: all .3s ease-in-out; }
+  .service-card-link:hover { transform: scale(1.05); }
+  .service-card-link:hover .service-card-title { background: #fffc; border-color: var(--color-accent-strong); color: var(--color-primary) !important; }
+  .service-card-title { background: var(--color-accent); border: 2px solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-primary) !important; display: inline-block; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.5; margin: 0; padding: .65rem 1.2rem; position: relative; top: .15rem; white-space: nowrap; }
+
+  .services-diagnosis-section { margin-block: 6rem; }
+  .services-diagnosis-card { background: var(--color-tint); border-radius: 6px; padding: 2rem 1.25rem; }
+  .services-diagnosis-inner { align-items: center; display: flex; flex-direction: column; gap: 2rem; justify-content: space-between; }
+  .services-diagnosis-text h2 { margin-top: 0; }
+  .services-diagnosis-text p { margin-bottom: 0; }
+  .services-diagnosis-btn { min-width: fit-content; }
+
+  @media (min-width: 768px) { .service-cards-grid { gap: 30px; grid-template-columns: repeat(2, 1fr); } .services-diagnosis-card { padding: 4.375rem; } .services-diagnosis-inner { flex-direction: row; } }
+  @media (min-width: 768px) and (max-width: 1023px) { .service-card-link:last-child { grid-column: 1 / -1; margin-inline: auto; padding-top: calc(10% - 3px); width: calc(50% - 15px); } }
+  @media (min-width: 1024px) { .service-cards-grid { grid-template-columns: repeat(3, 1fr); } .service-card-link { padding-top: 42%; } }
+</style>
+
+<section class="services-intro">
+  <div class="container">
+    <h2>Autism Spectrum Disorder Services</h2>
+    <p>Autism Spectrum Disorder (ASD) refers to a group of complex brain development disorders and is characterized by difficulties with social interaction, verbal and non-verbal communication, and emotional control.</p>
+    <p>The Arizona Institute for Autism helps with Autism Evaluations and Diagnostic Screenings, Applied Behavior Analysis (ABA) Therapy, and Educational Programming tailored to each learner's needs. To support meaningful skill development, we design integrative ABA programs for children diagnosed with autism. We offer both individualized and group ABA Therapy, along with educational services that reflect each child's unique strengths and goals.</p>
+    <h3>AIA ABA &amp; Educational Options</h3>
+    <ul>
+      <li>In-Center</li>
+      <li>In-School</li>
+      <li>In-Home</li>
+      <li>Early Intervention</li>
+      <li>Academic Readiness</li>
+      <li>Clinical Supervision</li>
+      <li>Parent Consultation</li>
+    </ul>
+    <h3>Does My Learner Have Autism?</h3>
+    <p>Approximately 1 in 36 children in the United States will receive an autism diagnosis each year. If your child exhibits any of the behaviors listed above, it is possible that he or she may be diagnosed on the autism spectrum. Diagnosing children with Autism Spectrum Disorder can be challenging and complex. The most important thing you can do is consult a professional if you think your child is displaying atypical behavior.</p>
+    <p class="services-intro-cta"><Button href="/client-consultation">Consult with a Client Advocate</Button></p>
+  </div>
+</section>
+
+<section class="services-cards-section">
+  <div class="container">
+    <h2>Our Services</h2>
+    <p class="services-cards-desc">Arizona Institute for Autism (AIA) offers a comprehensive range of services tailored to individuals with Autism Spectrum Disorder (ASD). Our programs include early intervention for young children, Applied Behavior Analysis (ABA) therapy, social skills groups, and educational support services. AIA is committed to providing personalized care plans to enhance the quality of life for children with autism and their families.</p>
+    <div class="service-cards-grid">
+      <a href="/aba-therapy" class="service-card-link" style="background-image:url('/assets/images/services-card-behavioral.jpg')"><h3 class="service-card-title">Behavioral Services</h3></a>
+      <a href="/autism-evaluations" class="service-card-link" style="background-image:url('/assets/images/services-card-psychological.jpg')"><h3 class="service-card-title">Psychological Services</h3></a>
+      <a href="/learner-social-club" class="service-card-link" style="background-image:url('/assets/images/services-card-sociological.jpg')"><h3 class="service-card-title">Sociological Services</h3></a>
+    </div>
+  </div>
+</section>
+
+<section class="services-diagnosis-section">
+  <div class="container container-w">
+    <div class="services-diagnosis-card">
+      <div class="services-diagnosis-inner">
+        <div class="services-diagnosis-text">
+          <h2>Need Autism Diagnosis Support?</h2>
+          <p>To meet diagnostic criteria for ASD, a child must have persistent deficits in each of three areas of social communication and interaction plus at least two of four types of restricted repetitive behaviors. Consult with a Client Advocate today to receive individual and family support!</p>
+        </div>
+        <div class="services-diagnosis-btn">
+          <Button href="/client-consultation">Get a Free Consultation</Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

www/src/layouts/BlogIndexLayout.astro

@@ -1,11 +1,12 @@
 ---
 import BaseLayout from './BaseLayout.astro';
+import PageHero from '../components/PageHero.astro';
 const { title, description, lang = 'en' } = Astro.props;
 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"><div class="library-banner-copy"><p class="script-label">Welcome to</p><h1>{title}</h1></div></div></header>
+  <PageHero title={title} image="/assets/images/hero-library-index.webp" eyebrow="Welcome to" constrain />
   <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

@@ -3,6 +3,8 @@ import BaseLayout from './BaseLayout.astro';
 import FormShell from '../components/FormShell.astro';
 import TeamPage from '../components/TeamPage.astro';
 import AboutPage from '../components/AboutPage.astro';
+import ServicesPage from '../components/ServicesPage.astro';
+import PageHero from '../components/PageHero.astro';
 import { pageHeroImages } from '../data/page-visuals';
 const { entry } = Astro.props;
 const showForm = ['client-consultation', 'contact', 'schedule-consultation', 'referrals'].includes(entry.data.slug);
@@ -49,13 +51,13 @@ 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 || 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>
+  <PageHero title={bannerTitle} image={heroImage} constrain />
   {entry.data.slug === 'team' && entry.data.lang === 'en'
     ? <TeamPage />
     : entry.data.slug === 'about' && entry.data.lang === 'en'
     ? <AboutPage />
+    : entry.data.slug === 'services' && entry.data.lang === 'en'
+    ? <ServicesPage />
     : <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
   {showForm && <FormShell title={bannerTitle} showBackground={entry.data.slug === 'client-consultation'} />}
 </BaseLayout>

www/src/styles/components.css

@@ -13,7 +13,7 @@
 .site-header { background: white; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
 .header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
 .brand img { width: 150px; }
-.main-nav { margin-left: auto; margin-right: auto; }
+.main-nav { margin-inline: auto; }
 .main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
 .main-nav li { position: relative; }
 .main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
@@ -64,13 +64,13 @@
 .like-view-counter button { background: white; border: 1px solid var(--color-border); border-radius: 999px; padding: .6rem 1rem; }
 .like-view-counter button.liked { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }
 .like-view-counter button:disabled { cursor: wait; opacity: .65; }
-.source-page-banner { background: var(--color-tint); padding-block: 4rem; text-align: center; }
-.source-page-banner h1 { margin: 0; }
-.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; }
+.page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
+.page-hero h1 { margin: 0; }
+.page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
+.page-hero--image > .container { padding-block: 10rem; }
+.page-hero--image h1 { max-width: 600px; }
+.page-hero__copy { max-width: 600px; }
+.page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
 .library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
 .library-intro h2 { color: white; }
 .library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
@@ -142,7 +142,8 @@
   .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; }
+  .page-hero--image > .container { padding-block: 6.25rem; }
+  .page-hero--image { text-align: center; }
+  .page-hero--image h1, .page-hero__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/layout.css

@@ -3,6 +3,7 @@ html { scroll-behavior: smooth; }
 body { background: var(--color-background); margin: 0; overflow-x: hidden; }
 img { display: block; height: auto; max-width: 100%; }
 .container, .container-narrow { margin-inline: auto; padding-inline: 20px; width: min(100%, var(--container)); }
+.container-w { width: min(100%, var(--container-w)); }
 .container-narrow { width: min(100%, 820px); }
 .section { padding-block: clamp(3rem, 7vw, 5rem); }
 .section-tint, .page-header { background: var(--color-tint); }

www/src/styles/variables.css

@@ -24,4 +24,5 @@
   --shadow-sm: 0 2px 8px rgb(37 64 128 / 10%);
   --shadow-md: 0 8px 24px rgb(37 64 128 / 14%);
   --container: 1020px;
+  --container-w: 1208px;
 }