Adding stuff

src/layouts/BaseLayout.astro

@@ -52,6 +52,7 @@ const pageTitle = title ? `${title} · ${site.name}` : site.name;
     <footer class="site-footer">
       <div class="container footer-grid">
         <section>
+          <img class="footer-logo" src="/images/swansea.webp" alt="Swansea Airport logo" loading="lazy" />
           <p class="eyebrow">Airport essentials</p>
           <p>{site.address}</p>
           <p>{site.licensedHours}</p>

src/pages/index.astro

@@ -16,12 +16,44 @@ const [notices, fuelPrices, events, news] = await Promise.all([
 
 const featuredEvents = events.filter((event) => event.is_featured).slice(0, 3);
 const latestNews = news.slice(0, 3);
+
+const businessPromos = [
+  {
+    name: 'Go Skydive',
+    href: 'https://www.goskydive.com/dropzone/skydive-centre-swansea/',
+    logo: '/images/goskydive.png',
+    alt: 'Go Skydive logo',
+    description: 'Tandem skydiving and experiences from Swansea.',
+  },
+  {
+    name: 'Gower Flight Centre',
+    href: 'https://www.gowerflightcentre.co.uk/',
+    logo: '/images/gowerflightcentre.jpg',
+    alt: 'Gower Flight Centre logo',
+    description: 'Flying lessons, aircraft hire, and pilot training.',
+  },
+  {
+    name: 'Fly A Spitfire',
+    href: 'https://flyaspitfire.com/',
+    logo: '/images/flyaspitfire.png',
+    alt: 'Fly A Spitfire logo',
+    description: 'Spitfire flight experiences and aviation events.',
+  },
+  {
+    name: 'AeroSuperBatics',
+    href: 'https://www.aerosuperbatics.com/',
+    logo: '/images/aerosuperbatics.jpg',
+    alt: 'AeroSuperBatics logo',
+    description: 'Wingwalking and aerobatic entertainment flights.',
+  },
+];
 ---
 
 <BaseLayout title="Home" description="Fast, clear airfield information for pilots and visitors.">
   <section class="hero">
     <div class="container hero-stack">
       <div class="hero-panel">
+        <img class="hero-logo" src="/images/swansea.webp" alt="Swansea Airport logo" loading="eager" />
         <p class="eyebrow">Operational website</p>
         <h1 class="hero-title">Welcome to Swansea Airport - Fairwood Common</h1>
         <p class="hero-copy">
@@ -39,28 +71,42 @@ const latestNews = news.slice(0, 3);
   </section>
 
   <section class="container story-flow">
-    <article class="story-copy surface">
+    <article class="story-copy">
       <p class="eyebrow">Flying from Swansea</p>
       <h2 class="section-title">A practical base for training, touring, and quick access</h2>
       <p>
         Swansea Airport is set up for straightforward arrivals and departures, with a compact layout, a clear operating rhythm, and enough room to keep the focus on flying rather than logistics.
       </p>
-    </article>
-
-    <figure class="story-image surface">
-      <img src="/images/cessna.jpg" alt="A Cessna aircraft on the apron at Swansea Airport" loading="lazy" />
-      <figcaption>
-        A light aircraft on the apron, shown here as an example of the kind of general aviation traffic the site is designed to support.
-      </figcaption>
-    </figure>
-
-    <article class="story-copy surface">
-      <p class="eyebrow">For pilots and visitors</p>
-      <h2 class="section-title">Useful information stays close at hand</h2>
       <p>
         Operational notices, fuel pricing, events, and visitor guidance are presented together so people can scan what they need without digging through the page.
       </p>
     </article>
+
+    <figure class="story-image">
+      <img src="/images/cessna.jpg" alt="A Cessna aircraft on the apron at Swansea Airport" loading="lazy" />
+    </figure>
+  </section>
+
+  <section class="container business-promo">
+    <div class="section-head">
+      <div>
+        <p class="eyebrow">On site businesses</p>
+        <h2 class="section-title">Experience, training, and adventure from one airfield</h2>
+      </div>
+    </div>
+
+    <div class="business-grid">
+      {businessPromos.map((business) => (
+        <a class="business-card" href={business.href} target="_blank" rel="noopener noreferrer">
+          <img class="business-logo" src={business.logo} alt={business.alt} loading="lazy" />
+          <div class="business-copy">
+            <h3>{business.name}</h3>
+            <p>{business.description}</p>
+            <span class="business-link">Visit website</span>
+          </div>
+        </a>
+      ))}
+    </div>
   </section>
 
   <div class="container stack">

src/styles/global.css

@@ -216,9 +216,17 @@ section {
   padding: 1.6rem;
 }
 
+.hero-logo {
+  display: block;
+  width: min(12rem, 42vw);
+  height: auto;
+  margin-bottom: 1rem;
+}
+
 .hero-title {
   margin: 0;
-  font-family: 'Fraunces', Georgia, serif;
+  font-family: 'Manrope', system-ui, sans-serif;
+  font-weight: 800;
   font-size: clamp(2.2rem, 5vw, 4.6rem);
   line-height: 0.98;
 }
@@ -267,13 +275,16 @@ section {
 
 .story-flow {
   display: grid;
-  gap: 1rem;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
+  gap: 1.25rem;
+  align-items: center;
   margin-top: 0.5rem;
 }
 
 .story-copy {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.85rem;
+  padding: 0.5rem 0;
 }
 
 .story-copy p:last-child {
@@ -281,8 +292,12 @@ section {
 }
 
 .story-image {
+  margin: 0;
   overflow: hidden;
-  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
 }
 
 .story-image img {
@@ -290,12 +305,70 @@ section {
   display: block;
   aspect-ratio: 16 / 9;
   object-fit: cover;
+  border-radius: 0;
+  box-shadow: none;
 }
 
-.story-image figcaption {
-  padding: 0.9rem 1rem 1rem;
+.business-promo {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.business-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.business-card {
+  display: grid;
+  grid-template-columns: 6.5rem minmax(0, 1fr);
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  box-shadow: var(--shadow);
+}
+
+.business-card:hover {
+  color: inherit;
+  transform: translateY(-1px);
+}
+
+.business-logo {
+  width: 100%;
+  height: 100%;
+  max-height: 5rem;
+  object-fit: contain;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.business-copy {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.business-copy h3 {
+  margin: 0;
+  font-family: 'Manrope', system-ui, sans-serif;
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+
+.business-copy p {
+  margin: 0;
   color: var(--muted);
-  font-size: 0.95rem;
+}
+
+.business-link {
+  color: var(--brand);
+  font-size: 0.92rem;
+  font-weight: 800;
 }
 
 .stats-grid {
@@ -339,7 +412,8 @@ section {
 
 .section-title {
   margin: 0;
-  font-family: 'Fraunces', Georgia, serif;
+  font-family: 'Manrope', system-ui, sans-serif;
+  font-weight: 800;
   font-size: clamp(1.4rem, 2.8vw, 2.2rem);
 }
 
@@ -418,6 +492,8 @@ section {
 .surface h4,
 .notice h3 {
   margin-top: 0;
+  font-family: 'Manrope', system-ui, sans-serif;
+  font-weight: 800;
 }
 
 .card p:last-child,
@@ -439,6 +515,13 @@ section {
   padding: 2rem 0;
 }
 
+.footer-logo {
+  display: block;
+  width: min(9rem, 34vw);
+  height: auto;
+  margin-bottom: 0.9rem;
+}
+
 .site-footer a {
   color: inherit;
 }
@@ -459,7 +542,8 @@ section {
 
 .prose h2,
 .prose h3 {
-  font-family: 'Fraunces', Georgia, serif;
+  font-family: 'Manrope', system-ui, sans-serif;
+  font-weight: 800;
 }
 
 .stack {
@@ -475,7 +559,16 @@ section {
   }
 
   .story-flow {
-    gap: 0.85rem;
+    grid-template-columns: 1fr;
+    gap: 0.9rem;
+  }
+
+  .business-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .business-card {
+    grid-template-columns: 5.5rem minmax(0, 1fr);
   }
 
   .topbar-inner,