From be8e45364edf8a7afe0f86d24cbc355a0b0a32ce Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 10 Sep 2026 16:18:12 -0400
Subject: [PATCH] Restore San Francisco meetup banner

---
 ...erdamBanner.svelte => MeetupBanner.svelte} | 24 +++++++------------
 src/routes/(site)/Header.svelte               |  2 ++
 2 files changed, 10 insertions(+), 16 deletions(-)
 rename src/lib/{AmsterdamBanner.svelte => MeetupBanner.svelte} (82%)

diff --git a/src/lib/AmsterdamBanner.svelte b/src/lib/MeetupBanner.svelte
similarity index 82%
rename from src/lib/AmsterdamBanner.svelte
rename to src/lib/MeetupBanner.svelte
index 993e60897..b5af08ac1 100644
--- a/src/lib/AmsterdamBanner.svelte
+++ b/src/lib/MeetupBanner.svelte
@@ -5,22 +5,22 @@
 <a
 	href="https://syntax.fm/meetup"
 	target="_blank"
-	class="layout amsterdam-banner"
+	rel="noopener noreferrer"
+	class="layout meetup-banner"
 >
 	<div class="banner-content">
 		<div class="text-section">
 			<p class="top-line">
 				<img src={syntaxLogo} alt="Syntax" class="syntax-logo" />
-				<img src="/js-nation-logo.png" alt="JS Nation" class="js-logo" />
 			</p>
-			<h2 class="title">AMSTERDAM MEETUP</h2>
-			<p class="date">JUNE 10TH &nbsp;6-9PM</p>
+			<h2 class="title">SAN FRANCISCO MEETUP</h2>
+			<p class="date">OCT 27TH &nbsp;5-7PM</p>
 		</div>
 	</div>
 </a>
 
 <style lang="postcss">
-	.amsterdam-banner {
+	.meetup-banner {
 		width: 100%;
 		position: relative;
 		overflow: hidden;
@@ -29,12 +29,13 @@
 		grid-column: 1 / -1;
 		--banner-bg: #e91e8c;
 		background-color: var(--banner-bg);
-		background-image: url(/amsterdam-canal.webp);
+		background-image: url('https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=1,anim=false,background=white,quality=85,width=1200,height=1200/uploads/gg/edf698e2-7bbd-4dce-9b9a-67268ba7f00c.jpg');
 		background-size: auto 100%;
 		background-position: right center;
 		background-repeat: no-repeat;
 		mask-image:
-			url(/repeating-paper-top.png), url(/paper-stripe-bottom.png), linear-gradient(var(--black), var(--black));
+			url(/repeating-paper-top.png), url(/paper-stripe-bottom.png),
+			linear-gradient(var(--black), var(--black));
 		--mask-size: 20px;
 		--mask-position: calc(100% + 5px);
 		mask-size:
@@ -96,15 +97,6 @@
 		}
 	}
 
-	.js-logo {
-		height: 2.6rem;
-		width: auto;
-
-		@media (--below-med) {
-			height: 1rem;
-		}
-	}
-
 	.title {
 		margin: 4px 0 0;
 		line-height: 0.95;
diff --git a/src/routes/(site)/Header.svelte b/src/routes/(site)/Header.svelte
index efeca53bb..c344e5976 100644
--- a/src/routes/(site)/Header.svelte
+++ b/src/routes/(site)/Header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Logo from '$lib/Logo.svelte';
+	import MeetupBanner from '$lib/MeetupBanner.svelte';
 	import Search from '$lib/search/Search.svelte';
 	import MobileNav from './MobileNav.svelte';
 	import { page } from '$app/stores';
@@ -10,6 +11,7 @@
 	let { transparent = false }: Props = $props();
 </script>
 
+<MeetupBanner />
 <header class="layout full" class:transparent style:--fg="var(--fg-1)">
 	<div class="header-container content">
 		<div class="logo">