src/components/CitySelectionDialog.tsx

@@ -48,7 +48,7 @@ export function CitySelectionDialog({
       // onCitySelect(String(city.cityName));
       // navigate(`/${city.cityName}/${city.id}`)
 
-      navigate(`/${slugify(city.cityName)}/${city.id}`);
+      navigate(`/${slugify(city.cityName)}`);
       localStorage.setItem("cityId", String(city.id))
       localStorage.setItem("cityName", String(city.cityName))
     } else {

src/components/MelbourneCardComparison.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Check, X, Star, Users, MapPin, Calendar, Clock, Zap, Eye } from 'lucide-react';
 import { Button } from './ui/button';
 import { motion } from 'motion/react';
@@ -74,7 +74,7 @@ interface MelbourneCardComparisonProps {
   cards: any[]
 }
 
-export function MelbourneCardComparison({ onCheckoutClick,cards }: MelbourneCardComparisonProps) {
+export function MelbourneCardComparison({ onCheckoutClick, cards }: MelbourneCardComparisonProps) {
   const [selectedCard, setSelectedCard] = useState<string>('unlimited');
 
   const cardOptions = [
@@ -199,8 +199,8 @@ export function MelbourneCardComparison({ onCheckoutClick,cards }: MelbourneCard
               <div className="font-poppins text-xl font-semibold text-gray-900">
                 Features
               </div>
-              {cardOptions.map((card) => (
-                <div key={card.id} className="text-center">
+              {cardOptions.map((card,index) => (
+                <div key={card.id ?? index} className="text-center">
                   <div className="mb-2">
                     <div className="font-poppins font-semibold text-2xl" style={{ color: '#F95F62' }}>{card.name}</div>
                   </div>
@@ -228,8 +228,8 @@ export function MelbourneCardComparison({ onCheckoutClick,cards }: MelbourneCard
                   <span className="font-medium text-gray-900">{feature.label}</span>
                 </div>
 
-                {cardOptions.map((card) => (
-                  <div key={card.id} className="text-center">
+                {cardOptions.map((card, index) => (
+                  <div key={card.id ?? index} className="text-center">
                     {renderFeatureValue(card.features[feature.key as keyof typeof card.features], card.id)}
                   </div>
                 ))}
@@ -245,8 +245,8 @@ export function MelbourneCardComparison({ onCheckoutClick,cards }: MelbourneCard
                 <div className="text-xs text-gray-500">Compare features above</div>
               </div>
 
-              {cardOptions.map((card) => (
-                <motion.div key={card.id} className="text-center">
+              {cardOptions.map((card,index) => (
+                <motion.div key={card.id ?? index} className="text-center">
                   <div className="mb-4">
                     <div className="text-3xl font-bold text-gray-900">{card.priceRange}</div>
                     <div className="text-sm text-gray-600">{card.duration}</div>

src/components/Navbar.tsx

@@ -89,9 +89,13 @@ export default function Navbar({
   const [lastKnownCity, setLastKnownCity] = useState<'landing' | 'melbourne'>('landing');
   const [isLoginOpen, setLoginOpen] = useState(false);
 
-  const { user, login, logout } = useAuth(); // from AuthContext
+  const { user, logout } = useAuth(); // from AuthContext
 
-  const cityLogo = sessionStorage.getItem("cityLogo") || ""
+  const cityLogo = sessionStorage.getItem("cityLogo")
+  const cityId = localStorage.getItem("cityId")
+  const cityName = localStorage.getItem("cityName")
+
+  const citySelected = location.pathname.includes(slugify(cityName) || "")
 
   const baseUrl = import.meta.env.VITE_BASE_URL;
 
@@ -108,8 +112,6 @@ export default function Navbar({
     }
   };
 
-  const cityId = localStorage.getItem("cityId")
-  const cityName = localStorage.getItem("cityName")
 
   // More flexible navigation configuration
   const navigationConfig = {
@@ -160,25 +162,25 @@ export default function Navbar({
       // Position 1
       {
         label: 'Attractions',
-        path: `/${slugify(cityName)}/${cityId}/attractions`,
+        path: `/${slugify(cityName)}/attractions`,
         isShared: false
       },
       // Position 2
       {
         label: 'Magic Itinerary',
-        path: '/magic-itinerary',
+        path: `/${slugify(cityName)}/magic-itinerary`,
         isShared: false
       },
       // Position 3
       {
         label: 'Super Savings',
-        path: '/super-savings',
+        path: `/${slugify(cityName)}/super-savings`,
         isShared: false
       },
       // Position 4 - Shared item
       {
         label: 'How It Works',
-        path: '/how-it-works',
+        path: `/${slugify(cityName)}/how-it-works`,
         isShared: true,
         landingLabel: 'Discover',
         melbourneLabel: 'How It Works'
@@ -186,14 +188,14 @@ export default function Navbar({
       // Position 5 - Shared item
       {
         label: 'Your Card',
-        path: '/passes',
+        path: `/${slugify(cityName)}/passes`,
         isShared: true,
         landingLabel: 'Your Card',
         melbourneLabel: 'Your Card'
       },
       {
         label: 'Your Postcard',
-        path: '/postcards',
+        path: `/${slugify(cityName)}/postcards`,
         isShared: true,
         landingLabel: 'Your Postcard',
         melbourneLabel: 'Your Postcard'
@@ -201,9 +203,6 @@ export default function Navbar({
     ]
   };
 
-  // Check if we're on landing page
-  const isLandingPage = location.pathname === '/';
-
   // Restore from session on mount
   useEffect(() => {
     const savedCity = sessionStorage.getItem('lastKnownCity');
@@ -565,9 +564,9 @@ export default function Navbar({
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <Link to={currentSource === 'melbourne' ? '/' : '/'}>
+                <Link to={citySelected ? `/${slugify(cityName)}` : '/'}>
                   <ImageWithFallback
-                    src={`${baseUrl}${cityLogo}`} alt={
+                    src={citySelected ? `${baseUrl}${cityLogo}` : logoImage} alt={
                       currentSource === 'melbourne'
                         ? 'Melbourne CityCards Logo'
                         : 'CityCards Logo'
@@ -634,7 +633,7 @@ export default function Navbar({
                         ? 'City'
                         : activeCity.charAt(0).toUpperCase() + activeCity.slice(1)
                     } */}
-                    {cityName ? cityName : "City"}
+                    {citySelected ? cityName : "City"}
                   </span>
 
                   <ChevronDown className="w-3.5 h-3.5" />
@@ -691,7 +690,7 @@ export default function Navbar({
                             label: 'My Profile',
                             icon: <User className="w-4 h-4" />,
                             action: () => {
-                              navigate('/profile');
+                              navigate(citySelected?`/${slugify(cityName)}/profile`:'/profile');
                               setActiveUserDropdown(false);
                             }
                           },

src/pages/AttractionsPage.tsx

@@ -49,7 +49,7 @@ export function AttractionsPage({
   const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
   const [selectedPassType, setSelectedPassType] = useState<string | null>(null);
 
-  const { cityId } = useParams()
+  const cityId = localStorage.getItem("cityId") 
   const cityName = localStorage.getItem("cityName")
 
   console.log(cityName)