From 29468d2fd703dbf6866dbeeb49bafc34f45d603b Mon Sep 17 00:00:00 2001
From: ahmad1368 <ahmad.salempoor@gmail.com>
Date: Tue, 24 Mar 2026 19:23:49 -0700
Subject: [PATCH] Refactor navigation and hero to use dynamic city-based CTAs
 (Issue #3)

- Added dynamic "Get Your Ticket" CTA in Hero based on selected city
- Updated Navigation to use ticketUrl from citySpecificContent
- Kept sharedHeroContent CTAs for volunteer link usage
- Implemented updateContent logic to update CTA href/text on city change
- Removed old Hero CTAs from UI while preserving data structure
---
 src/components/Hero.astro       | 22 ++++++++--
 src/components/Navigation.astro | 74 +++++++++++++++++++++++----------
 src/lib/content.ts              | 52 +++++++++++++++++------
 3 files changed, 109 insertions(+), 39 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 8f5e44f..8800062 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -7,6 +7,8 @@ interface Props {
 }
 
 const { content, splineUrl = '' } = Astro.props;
+ 
+
 ---
 
 <section class="hero">
@@ -27,8 +29,10 @@ const { content, splineUrl = '' } = Astro.props;
 			<p class="hero-time">{content.time}</p>
 		</div>
 		<div class="hero-actions">
-			<a href={content.primaryCta.href} class="btn btn-primary">{content.primaryCta.text}</a>
-			<a href={content.secondaryCta.href} class="btn btn-secondary">{content.secondaryCta.text}</a>
+			<a href={content.primaryCta.href} class="btn btn-primary" data-hero-primary-Cta>{content.primaryCta.text}</a>
+			<!-- <a href={content.secondaryCta.href} class="btn btn-secondary">{content.secondaryCta.text}</a> -->
+	
+
 		</div>
 	</div>
 	</section>
@@ -36,6 +40,7 @@ const { content, splineUrl = '' } = Astro.props;
 <script is:inline type="module" src="https://unpkg.com/@splinetool/viewer@1.9.48/build/spline-viewer.js"></script>
 
 <script>
+
 	import { getCityStore } from '../lib/cityStore';
 	import { heroContent } from '../lib/content';
 
@@ -47,10 +52,13 @@ const { content, splineUrl = '' } = Astro.props;
 	const subtitleEl = document.querySelector('[data-city-subtitle]');
 	const descriptionEl = document.querySelector('[data-city-description]');
 	const metaEl = document.querySelector('[data-city-meta]');
+	const ctaButton = document.querySelector('[data-hero-primary-Cta]');
 
+	
 	function updateContent(city: 'vancouver' | 'toronto') {
 		const content = heroContent[city];
-
+      
+		
 		if (titleEl) titleEl.textContent = content.title;
 		if (cityNameEl) cityNameEl.textContent = content.cityName;
 		if (subtitleEl) subtitleEl.textContent = content.subtitle;
@@ -68,6 +76,13 @@ const { content, splineUrl = '' } = Astro.props;
 			if (timeEl) timeEl.textContent = content.time;
 		}
 
+
+
+if (ctaButton) {
+  ctaButton.href = content.primaryCta.href;
+  ctaButton.textContent = content.primaryCta.text;
+}
+
 		// Update page title
 		document.title = `${content.title} - ${content.cityName}`;
 	}
@@ -97,6 +112,7 @@ const { content, splineUrl = '' } = Astro.props;
 		});
 	}
 	*/
+
 </script>
 
 <style>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 3f8b1a4..b51f17d 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,6 +1,6 @@
 ---
-import CitySelector from './CitySelector.astro';
-import type { NavigationContent } from '../lib/content';
+import CitySelector from "./CitySelector.astro";
+import type { NavigationContent } from "../lib/content";
 
 interface Props {
 	content: NavigationContent;
@@ -12,7 +12,11 @@ const { content } = Astro.props;
 <nav class="nav">
 	<div class="nav-container">
 		<a href="/" class="nav-logo">
-			<img src="/images/Cloud-summit-logo.svg" alt="Cloud Summit 2026" class="nav-logo-img" />
+			<img
+				src="/images/Cloud-summit-logo.svg"
+				alt="Cloud Summit 2026"
+				class="nav-logo-img"
+			/>
 		</a>
 		<button class="hamburger" aria-label="Toggle menu">
 			<span></span>
@@ -21,35 +25,57 @@ const { content } = Astro.props;
 		</button>
 		<div class="nav-right">
 			<ul class="nav-links">
-				{content.links.map(link => (
-					<li><a href={link.href} target={link.href.startsWith('http') ? '_blank' : undefined} rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}>{link.text}</a></li>
-				))}
+				{
+					content.links.map((link) => (
+						<li>
+							<a
+								href={link.href}
+								target={
+									link.href.startsWith("http")
+										? "_blank"
+										: undefined
+								}
+								rel={
+									link.href.startsWith("http")
+										? "noopener noreferrer"
+										: undefined
+								}
+							>
+								{link.text}
+							</a>
+						</li>
+					))
+				}
 			</ul>
 			<CitySelector />
-			<a href={content.ctaHref} class="nav-cta">{content.ctaText}</a>
+			<!-- Disabled as part of Issue #3 (Header & Navigation update)
+     			Reason: Old CTA removed according to new design requirements -->
+			<!-- <a href={content.ctaHref} class="nav-cta">{content.ctaText}</a> -->
+
+			<!-- <a href={content.ctaHref} class="nav-cta">{content.ctaText}</a> -->
 		</div>
 	</div>
 </nav>
 
 <script>
-	import { getCityStore } from '../lib/cityStore';
-	import { citySpecificContent } from '../lib/content';
-	import type { City } from '../lib/content';
+	import { getCityStore } from "../lib/cityStore";
+	import { citySpecificContent } from "../lib/content";
+	import type { City } from "../lib/content";
 
-	const hamburger = document.querySelector('.hamburger');
-	const navRight = document.querySelector('.nav-right');
+	const hamburger = document.querySelector(".hamburger");
+	const navRight = document.querySelector(".nav-right");
 
-	hamburger?.addEventListener('click', () => {
-		hamburger.classList.toggle('active');
-		navRight?.classList.toggle('active');
+	hamburger?.addEventListener("click", () => {
+		hamburger.classList.toggle("active");
+		navRight?.classList.toggle("active");
 	});
 
 	// Close menu when clicking on a link
-	const navLinks = document.querySelectorAll('.nav-links a, .nav-cta');
-	navLinks.forEach(link => {
-		link.addEventListener('click', () => {
-			hamburger?.classList.remove('active');
-			navRight?.classList.remove('active');
+	const navLinks = document.querySelectorAll(".nav-links a, .nav-cta");
+	navLinks.forEach((link) => {
+		link.addEventListener("click", () => {
+			hamburger?.classList.remove("active");
+			navRight?.classList.remove("active");
 		});
 	});
 
@@ -57,7 +83,9 @@ const { content } = Astro.props;
 	function updateTicketUrl() {
 		const cityStore = getCityStore();
 		const currentCity = cityStore.getCity();
-		const ticketLink = document.querySelector('.nav-links a[href*="luma.com"]') as HTMLAnchorElement;
+		const ticketLink = document.querySelector(
+			'.nav-links a[href*="luma.com"]',
+		) as HTMLAnchorElement;
 
 		if (ticketLink) {
 			ticketLink.href = citySpecificContent[currentCity].ticketUrl;
@@ -79,8 +107,8 @@ const { content } = Astro.props;
 	}
 
 	// Run when DOM is ready
-	if (document.readyState === 'loading') {
-		document.addEventListener('DOMContentLoaded', initCityAwareNav);
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initCityAwareNav);
 	} else {
 		initCityAwareNav();
 	}
diff --git a/src/lib/content.ts b/src/lib/content.ts
index 8ea4529..710d009 100644
--- a/src/lib/content.ts
+++ b/src/lib/content.ts
@@ -37,8 +37,8 @@ export interface NavLink {
 
 export interface NavigationContent {
   links: NavLink[];
-  ctaText: string;
-  ctaHref: string;
+  // ctaText: string; Disabled as part of Issue #3 (Header & Navigation update)
+  // ctaHref: string; Disabled as part of Issue #3 (Header & Navigation update)
 }
 
 export type City = 'vancouver' | 'toronto';
@@ -88,30 +88,56 @@ export function getHeroContent(city: City): HeroContent {
   return {
     ...sharedHeroContent,
     ...citySpecificContent[city],
+    // Added as part of Issue #3 (Header & Navigation)
+    primaryCta: {
+      text: 'Get Your Ticket',
+      href: citySpecificContent[city].ticketUrl,
+    },
+    secondaryCta: {
+      text: '',
+      href: '',
+    },
   };
 }
 
+
 // For backwards compatibility
 export const heroContent: Record<City, HeroContent> = {
   vancouver: getHeroContent('vancouver'),
   toronto: getHeroContent('toronto'),
 };
 
+// Disabled as part of Issue #3 (Header & Navigation update)
+// Reason: This button is removed according to new design requirements
+// // Helper function to get navigation content with city-specific ticket URL
+// export function getNavigationContent(city: City): NavigationContent {
+//   return {
+//     links: [
+//       { text: 'About Cloud Summit', href: '/about-cloud-summit' },
+//       // { text: 'Our Event Team', href: '/our-team' },
+//       { text: 'Call for Speakers', href: '/our-speakers' },
+//       { text: 'Sponsorship Info', href: '/our-sponsors' },
+//       {
+//         text: 'Get Earlybird Tickets',
+//         href: citySpecificContent[city].ticketUrl,
+//       },
+//     ],
+//     ctaText: 'Become a Sponsor',
+//     ctaHref: 'https://tally.so/r/wLqXvO',
+//   };
+
+// }
+
+// Added as part of Issue #3 (Header & Navigation)
+// Reason: Replace old CTAs with new "Get Your Ticket" button
+// Link is dynamic based on selected city
 // Helper function to get navigation content with city-specific ticket URL
 export function getNavigationContent(city: City): NavigationContent {
   return {
     links: [
-      { text: 'About Cloud Summit', href: '/about-cloud-summit' },
-      // { text: 'Our Event Team', href: '/our-team' },
-      { text: 'Call for Speakers', href: '/our-speakers' },
-      { text: 'Sponsorship Info', href: '/our-sponsors' },
-      {
-        text: 'Get Earlybird Tickets',
-        href: citySpecificContent[city].ticketUrl,
-      },
-    ],
-    ctaText: 'Become a Sponsor',
-    ctaHref: 'https://tally.so/r/wLqXvO',
+      { text: 'Get Tickets', href: citySpecificContent[city].ticketUrl },
+      { text: 'Apply to Volunteer', href: sharedHeroContent.primaryCta.href },     
+    ]
   };
 }