From e29b6ab6d331bd83d4ff8ca5f16fca77631cc15d Mon Sep 17 00:00:00 2001
From: Chris Stinemetz <chris.stinemetz@outlook.com>
Date: Sat, 31 Jan 2026 08:15:11 -0500
Subject: [PATCH 1/2] feat: Add launch banner with dynamic demo request flow

- Add persistent launch announcement banner with Megaphone icon
- Implement smart banner visibility: hides on /contact?type=demo, shows elsewhere
- Add 'Request Demo' CTA button linking to dynamic contact form
- Make contact page responsive to user intent:
  - Banner route: 'Request Demo' title with pre-filled subject
  - Direct navigation: 'Get In Touch' title with general form
- Replace rocket emoji with professional Megaphone icon from lucide-svelte
- Remove banner dismissal to maximize conversion opportunities during launch
- Improve UX with context-aware form experience

Optimizes conversion funnel for commercial launch while maintaining
clean user experience for both demo requests and general inquiries.
---
 src/routes/+layout.svelte       | 128 +++++++++++++++++++++++++++++++-
 src/routes/contact/+page.svelte |  24 +++++-
 2 files changed, 149 insertions(+), 3 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7ead3483..6bf35bb2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,12 +1,33 @@
 <script lang="ts">
 	import '../app.scss';
+	import { Megaphone } from 'lucide-svelte';
+	import { page } from '$app/stores';
 
 	let { children } = $props();
+
+	// Hide banner on contact page only when coming from demo request
+	let hideBanner = $derived(
+		$page.route.id === '/contact' && $page.url.searchParams.get('type') === 'demo'
+	);
 </script>
 
 <div class="bg-gradient"></div>
 <div class="bg-overlay"></div>
 
+{#if !hideBanner}
+	<div class="launch-banner">
+		<div class="banner-content">
+			<div class="banner-text">
+				<span class="banner-icon">
+					<Megaphone size={18} />
+				</span>
+				<span class="banner-message">Context Engine is launching soon!</span>
+				<a href="/contact?type=demo" class="banner-cta">Request Demo</a>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <div class="app">
 	<main>
 		{@render children()}
@@ -14,12 +35,117 @@
 </div>
 
 <style lang="scss">
+	.launch-banner {
+		position: sticky;
+		top: 0;
+		z-index: 1000;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: white;
+		padding: 0.75rem 1rem;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		animation: slideDown 0.3s ease-out;
+	}
+
+	.banner-content {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.banner-text {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 1;
+	}
+
+	.banner-icon {
+		color: rgba(255, 255, 255, 0.9);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	@keyframes iconPulse {
+		0%,
+		100% {
+			opacity: 0.9;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.1);
+		}
+	}
+
+	.banner-message {
+		font-weight: 500;
+		font-size: 0.95rem;
+	}
+
+	.banner-cta {
+		background: rgba(255, 255, 255, 0.9);
+		color: #667eea;
+		text-decoration: none;
+		padding: 0.4rem 1rem;
+		border-radius: 1.25rem;
+		font-weight: 600;
+		font-size: 0.875rem;
+		margin-left: 1rem;
+		white-space: nowrap;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: white;
+			transform: translateY(-1px);
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		}
+
+		&:active {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes slideDown {
+		from {
+			transform: translateY(-100%);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.banner-message {
+			font-size: 0.875rem;
+		}
+
+		.banner-cta {
+			font-size: 0.8rem;
+			padding: 0.35rem 0.75rem;
+			margin-left: 0.75rem;
+		}
+
+		.banner-content {
+			padding: 0 0.5rem;
+		}
+
+		.banner-text {
+			gap: 0.25rem;
+		}
+	}
+
 	.app {
 		position: relative;
 		z-index: 1;
 		min-height: 100vh;
 	}
-	
+
 	main {
 		min-height: 100vh;
 		width: 100%;
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 50f74830..e39b1a62 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -11,8 +11,11 @@
 	} from 'lucide-svelte';
 	// Import Discord icon from a custom SVG since it's not in lucide
 	import { base } from '$app/paths';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
 
 	let formState: 'idle' | 'submitting' | 'success' | 'error' = $state('idle');
+	let isDemo = $state(false);
 	let formData = $state({
 		name: '',
 		email: '',
@@ -20,6 +23,13 @@
 		message: ''
 	});
 
+	onMount(() => {
+		isDemo = $page.url.searchParams.get('type') === 'demo';
+		if (isDemo) {
+			formData.subject = 'Request Demo';
+		}
+	});
+
 	async function handleSubmit(event: SubmitEvent) {
 		event.preventDefault();
 		formState = 'submitting';
@@ -56,7 +66,7 @@
 <div class="contact-container" in:fade={{ duration: 300 }}>
 	<div class="container">
 		<header class="contact-header">
-			<h1 class="hero-title">Get In Touch</h1>
+			<h1 class="hero-title">{isDemo ? 'Request Demo' : 'Get In Touch'}</h1>
 			<p class="hero-subtitle">
 				Let's discuss your MCP integration <span class="divider">//</span> Questions about Context Engine?
 			</p>
@@ -132,7 +142,10 @@
 
 			<form class="contact-form glass" onsubmit={handleSubmit}>
 				<div class="form-header">
-					<h2>Send a Message</h2>
+					<h2>{isDemo ? 'Request Demo' : 'Send a Message'}</h2>
+					{#if isDemo}
+						<p class="demo-subtitle">Let's schedule a personalized demo of Context Engine</p>
+					{/if}
 				</div>
 
 				<div class="form-group">
@@ -440,6 +453,13 @@
 		/* Form styling without sticky positioning */
 	}
 
+	.demo-subtitle {
+		color: var(--text-secondary);
+		font-size: 1rem;
+		margin: var(--spacing-xs) 0 0;
+		font-weight: 400;
+	}
+
 	.discord-icon {
 		color: #5865f2; /* Discord brand color */
 	}

From 6b5ba98d64b87f98fd7eace0be9ae9d6ca737785 Mon Sep 17 00:00:00 2001
From: Chris Stinemetz <chris.stinemetz@outlook.com>
Date: Sat, 31 Jan 2026 08:25:37 -0500
Subject: [PATCH 2/2] fix: Resolve SSR hydration mismatch and base path issues

- Replace onMount with  for isDemo state in contact page
  - Fixes SSR/client hydration mismatch causing content flicker
  - Ensures consistent rendering between server and client
  - Makes state reactive to URL parameter changes during navigation

- Use {base} path for banner CTA link instead of hardcoded '/contact'
  - Ensures compatibility with non-root deployment paths
  - Prevents broken links when deployed to subpaths like GitHub Pages
  - Maintains consistency with other site navigation

Improves user experience by eliminating layout shifts and ensures
robust deployment compatibility across different hosting environments.
---
 src/routes/+layout.svelte       |  3 ++-
 src/routes/contact/+page.svelte | 14 +++++---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6bf35bb2..36f93b78 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import '../app.scss';
 	import { Megaphone } from 'lucide-svelte';
 	import { page } from '$app/stores';
+	import { base } from '$app/paths';
 
 	let { children } = $props();
 
@@ -22,7 +23,7 @@
 					<Megaphone size={18} />
 				</span>
 				<span class="banner-message">Context Engine is launching soon!</span>
-				<a href="/contact?type=demo" class="banner-cta">Request Demo</a>
+				<a href="{base}/contact?type=demo" class="banner-cta">Request Demo</a>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index e39b1a62..4ed8e64e 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -15,21 +15,17 @@
 	import { onMount } from 'svelte';
 
 	let formState: 'idle' | 'submitting' | 'success' | 'error' = $state('idle');
-	let isDemo = $state(false);
+
+	// Reactive to URL changes, works with SSR and client-side navigation
+	let isDemo = $derived($page.url.searchParams.get('type') === 'demo');
+
 	let formData = $state({
 		name: '',
 		email: '',
-		subject: '',
+		subject: isDemo ? 'Request Demo' : '',
 		message: ''
 	});
 
-	onMount(() => {
-		isDemo = $page.url.searchParams.get('type') === 'demo';
-		if (isDemo) {
-			formData.subject = 'Request Demo';
-		}
-	});
-
 	async function handleSubmit(event: SubmitEvent) {
 		event.preventDefault();
 		formState = 'submitting';