feat(page): match live contact page layout

2026-07-02 15:13:52 -07:00
1 parent 8c9c581cc0
commit 77b83f5d21
@@ -0,0 +1,84 @@
+---
+import Button from './Button.astro';
+import EmailObfuscation from './EmailObfuscation.astro';
+
+interface Props {
+  title?: string;
+}
+
+const { title = 'Contact AIA' } = Astro.props;
+---
+
+<form class="contact-form-card" method="post" action="">
+  <!-- TODO: Wire this form to Netlify Forms, a custom API endpoint, or another backend service. -->
+  <!-- TODO: Add spam protection before production launch. -->
+  <h3 class="contact-form-card__title">{title}</h3>
+  <div class="contact-form-card__fields">
+    <label>Parent or guardian name<input name="name" autocomplete="name" /></label>
+    <label>Email<input type="email" name="email" autocomplete="email" /></label>
+    <label>Phone<input type="tel" name="phone" autocomplete="tel" /></label>
+    <label>Service of interest<select name="service"><option>ABA Therapy</option><option>Autism Evaluation</option><option>Learner Social Club</option><option>Other</option></select></label>
+    <label>How can we help?<textarea name="message" rows="5"></textarea></label>
+    <Button type="submit" disabled aria-describedby="contact-form-note" class="contact-form-card__submit">Submit</Button>
+    <p id="contact-form-note" class="contact-form-card__note">Online submission is not yet connected. Please call <EmailObfuscation phone="(480) 687-7099" hrefValue="+14806877099" obfuscatedText="9907-786 (084)" />.</p>
+  </div>
+</form>
+
+<style>
+  .contact-form-card {
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0 4px 4px 0 rgb(81 81 81 / 4%), 0 4px 16px 0 rgb(81 81 81 / 8%);
+    margin: 0 auto;
+    max-width: 600px;
+    overflow: hidden;
+  }
+
+  .contact-form-card__title {
+    border-bottom: 1px solid #f1f1f1;
+    margin: 0;
+    padding: 1.2rem 1.5rem;
+    text-align: center;
+  }
+
+  .contact-form-card__fields {
+    display: grid;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .contact-form-card label {
+    display: grid;
+    font-weight: 700;
+    gap: .4rem;
+  }
+
+  .contact-form-card input,
+  .contact-form-card select,
+  .contact-form-card textarea {
+    background: #fcf9f5;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    color: var(--color-primary);
+    font: inherit;
+    padding: .8rem;
+    width: 100%;
+  }
+
+  .contact-form-card textarea {
+    resize: vertical;
+  }
+
+  .contact-form-card :global(.contact-form-card__submit) {
+    justify-self: center;
+    max-width: 375px;
+    width: 100%;
+  }
+
+  .contact-form-card__note {
+    color: var(--color-muted);
+    font-size: .9rem;
+    margin: 0;
+    text-align: center;
+  }
+</style>
@@ -0,0 +1,111 @@
+---
+import ContactForm from '../ContactForm.astro';
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<section class="contact-page">
+  <div class="container contact-page__grid">
+    <div class="contact-page__copy">
+      <slot />
+    </div>
+    <ContactForm title={title} />
+  </div>
+</section>
+
+<section class="contact-map-section" aria-label="Map showing Arizona Institute for Autism in Scottsdale">
+  <div id="aia-contact-map" class="contact-map"></div>
+</section>
+
+<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script is:inline>
+(() => {
+  const mapElement = document.getElementById('aia-contact-map');
+
+  if (!mapElement || !window.L) return;
+
+  const map = window.L.map(mapElement).setView([33.63, -111.88756], 12);
+  const tiles = window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    maxZoom: 19
+  });
+
+  tiles.on('tileload', (event) => {
+    if (event.tile && !event.tile.alt) {
+      event.tile.alt = 'OpenStreetMap tile showing area around Arizona Institute for Autism in Scottsdale, AZ';
+    }
+  });
+
+  tiles.addTo(map);
+
+  window.L.marker([33.617746, -111.88756]).addTo(map).bindPopup(`
+    <span style="display:block;text-align:center">
+      <b>Arizona Institute for Autism</b><br>
+      <img alt="Arizona Institute for Autism" src="/assets/images/aia-logo.svg" width="94">
+    </span>
+  `).openPopup();
+})();
+</script>
+
+<style>
+  .contact-page {
+    background: white;
+    padding-block: 100px;
+  }
+
+  .contact-page__grid {
+    align-items: start;
+    display: grid;
+    gap: clamp(2rem, 5vw, 4rem);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .contact-page__copy {
+    color: var(--color-primary);
+    text-align: left;
+  }
+
+  .contact-page__copy :global(h2) {
+    margin: 0 0 25px;
+  }
+
+  .contact-page__copy :global(p) {
+    margin: 0 0 25px;
+  }
+
+  .contact-page__copy :global(.content-button) {
+    margin-bottom: 40px;
+  }
+
+  .contact-map-section {
+    background: white;
+    margin: 0;
+    padding: 0;
+  }
+
+  .contact-map {
+    height: 360px;
+    width: 100%;
+  }
+
+  @media (max-width: 992px) {
+    .contact-page {
+      padding-block: 50px;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .contact-page__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .contact-page__copy :global(.content-button) {
+      display: table;
+      margin-inline: auto;
+    }
+  }
+</style>