src/pages/about/cafe.astro

@@ -7,7 +7,7 @@ const cafeImages = await getCafePageImages();
 ---
 
 <BaseLayout title="Cafe" description="A friendly, dog-friendly cafe at Swansea Airport.">
-  <section class="container cafe-page">
+  <section class="container prose cafe-page">
     <div class="cafe-copy">
       <h1 class="section-title">The Whirlybird Cafe</h1>
       <p>
@@ -52,10 +52,6 @@ const cafeImages = await getCafePageImages();
     gap: 1.25rem;
   }
 
-  .cafe-copy {
-    max-width: 72ch;
-  }
-
   .cafe-gallery {
     overflow: hidden;
     border-radius: var(--radius);

src/pages/about/history.astro

@@ -3,31 +3,141 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="History" description="A brief history of Swansea Airport, formerly RAF Fairwood Common.">
-  <section class="container prose">
+  <script is:inline>
-    <p class="eyebrow">About</p>
+    document.documentElement.classList.add('js');
-    <h1 class="section-title">History</h1>
+  </script>
 
-    <p>
+  <section class="container prose history-page">
+    <figure class="history-banner" data-history-banner>
+      <img src="/images/chipmunk.jpeg" alt="Historic aircraft at Swansea Airport" />
+    </figure>
+
+    <p class="eyebrow reveal-item" data-reveal>About</p>
+    <h1 class="section-title reveal-item" data-reveal>History</h1>
+
+    <p class="reveal-item" data-reveal>
       Swansea Airport stands on a site with deep aviation roots. Before operating as Swansea
       Airport, the airfield was known as RAF Fairwood Common.
     </p>
 
-    <p>
+    <p class="reveal-item" data-reveal>
       During the wartime period, Fairwood Common played an operational role as part of the wider
       air defence and training network. Its location on the Gower Peninsula gave it a strategic
       position, and over time the airfield developed infrastructure that shaped its later civil use.
     </p>
 
-    <p>
+    <p class="reveal-item" data-reveal>
       In the post-war years, the site evolved from military use into a civilian aerodrome. That
       transition reflected the broader story of many UK airfields, where former RAF stations became
       local centres for flight training, private aviation, and community flying activity.
     </p>
 
-    <p>
+    <p class="reveal-item" data-reveal>
       Today, Swansea Airport continues that legacy. While the role of the airfield has changed, its
       connection to aviation history remains central to its identity, linking RAF Fairwood Common's
       past with present-day operations serving Swansea and the surrounding region.
     </p>
   </section>
 </BaseLayout>
+
+<style>
+  .history-banner {
+    --history-parallax: 0px;
+
+    margin: 0 0 1.5rem;
+    overflow: hidden;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    aspect-ratio: 21 / 9;
+    background: var(--line);
+  }
+
+  .history-banner img {
+    display: block;
+    width: 100%;
+    height: calc(100% + 6rem);
+    margin-top: -3rem;
+    object-fit: cover;
+    transform: translate3d(0, var(--history-parallax), 0) scale(1.03);
+    will-change: transform;
+  }
+
+  :global(.js) .reveal-item {
+    opacity: 0;
+    transform: translateY(1.4rem);
+    transition:
+      opacity 680ms ease,
+      transform 680ms ease;
+  }
+
+  :global(.js) .reveal-item.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @media (max-width: 640px) {
+    .history-banner {
+      aspect-ratio: 16 / 9;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .history-banner img,
+    :global(.js) .reveal-item {
+      transform: none;
+      transition: none;
+    }
+
+    :global(.js) .reveal-item {
+      opacity: 1;
+    }
+  }
+</style>
+
+<script>
+  const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+  const banner = document.querySelector('[data-history-banner]');
+  const revealItems = Array.from(document.querySelectorAll('[data-reveal]'));
+
+  if (!motionQuery.matches) {
+    let ticking = false;
+
+    const updateBanner = () => {
+      if (!(banner instanceof HTMLElement)) return;
+
+      const rect = banner.getBoundingClientRect();
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+      const progress = (viewportHeight - rect.top) / (viewportHeight + rect.height);
+      const clampedProgress = Math.min(Math.max(progress, 0), 1);
+      const offset = (clampedProgress - 0.5) * 64;
+
+      banner.style.setProperty('--history-parallax', `${offset}px`);
+      ticking = false;
+    };
+
+    const requestBannerUpdate = () => {
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(updateBanner);
+    };
+
+    updateBanner();
+    window.addEventListener('scroll', requestBannerUpdate, { passive: true });
+    window.addEventListener('resize', requestBannerUpdate);
+
+    const revealObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add('is-visible');
+          revealObserver.unobserve(entry.target);
+        });
+      },
+      { threshold: 0.16, rootMargin: '0px 0px -8% 0px' }
+    );
+
+    revealItems.forEach((item) => revealObserver.observe(item));
+  } else {
+    revealItems.forEach((item) => item.classList.add('is-visible'));
+  }
+</script>