diff --git a/www/public/assets/images/services-card-behavioral.jpg b/www/public/assets/images/services-card-behavioral.jpg new file mode 100644 index 0000000..81e457e Binary files /dev/null and b/www/public/assets/images/services-card-behavioral.jpg differ diff --git a/www/public/assets/images/services-card-psychological.jpg b/www/public/assets/images/services-card-psychological.jpg new file mode 100644 index 0000000..480a04b Binary files /dev/null and b/www/public/assets/images/services-card-psychological.jpg differ diff --git a/www/public/assets/images/services-card-sociological.jpg b/www/public/assets/images/services-card-sociological.jpg new file mode 100644 index 0000000..6772da6 Binary files /dev/null and b/www/public/assets/images/services-card-sociological.jpg differ diff --git a/www/src/components/PageHero.astro b/www/src/components/PageHero.astro new file mode 100644 index 0000000..051f32e --- /dev/null +++ b/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; +--- + +
+
+ {eyebrow + ?

{eyebrow}

{title}

+ :

{title}

+ } +
+
diff --git a/www/src/components/ServicesPage.astro b/www/src/components/ServicesPage.astro new file mode 100644 index 0000000..4aefac6 --- /dev/null +++ b/www/src/components/ServicesPage.astro @@ -0,0 +1,78 @@ +--- +import Button from './Button.astro'; +--- + + + +
+
+

Autism Spectrum Disorder Services

+

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.

+

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.

+

AIA ABA & Educational Options

+ +

Does My Learner Have Autism?

+

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.

+

+
+
+ +
+
+

Our Services

+

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.

+
+

Behavioral Services

 +

Psychological Services

 +

Sociological Services

 +
+
+
+ +
+
+
+
+
+

Need Autism Diagnosis Support?

+

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!

+
+
+ +
+
+
+
+
diff --git a/www/src/layouts/BlogIndexLayout.astro b/www/src/layouts/BlogIndexLayout.astro index b9b0e21..c02f9b6 100644 --- a/www/src/layouts/BlogIndexLayout.astro +++ b/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`; --- -

Welcome to

{title}

+

Library

{description}

 diff --git a/www/src/layouts/PageLayout.astro b/www/src/layouts/PageLayout.astro index 4069038..30b416d 100644 --- a/www/src/layouts/PageLayout.astro +++ b/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]; --- -
-

{bannerTitle}

-
+ {entry.data.slug === 'team' && entry.data.lang === 'en' ? : entry.data.slug === 'about' && entry.data.lang === 'en' ? + : entry.data.slug === 'services' && entry.data.lang === 'en' + ? :
} {showForm && } diff --git a/www/src/styles/components.css b/www/src/styles/components.css index ba2ffda..fa46fa3 100644 --- a/www/src/styles/components.css +++ b/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)); } } diff --git a/www/src/styles/layout.css b/www/src/styles/layout.css index ffa08c9..02cedf6 100644 --- a/www/src/styles/layout.css +++ b/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); } diff --git a/www/src/styles/variables.css b/www/src/styles/variables.css index 37c97e4..0a256d2 100644 --- a/www/src/styles/variables.css +++ b/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; }