Adding stuff
This commit is contained in:
@@ -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>
|
||||
|
||||
+59
-13
@@ -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">
|
||||
|
||||
+103
-10
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user