save the selected city to localstorage

src/AppRouter.tsx

@@ -88,11 +88,11 @@ export function AppRouter({
                     } />
 
                     {/* Home Route */}
-                    <Route path="/melbourne" element={
+                    <Route path="/:cityName/:cityId" element={
                         <motion.div key="home" {...pageTransition}>
                             <MelbournePage {...commonNavHandlers} />
                         </motion.div>
-                    } />
+                        } />
 
                     {/* Passes Route */}
                     <Route path="/passes" element={
@@ -106,7 +106,7 @@ export function AppRouter({
                     } />
 
                     {/* Attractions Routes */}
-                    <Route path="/attractions" element={
+                    <Route path="/:cityName/:cityId/attractions" element={
                         <motion.div key="attractions" {...pageTransition}>
                             <AttractionsPage {...commonNavHandlers} />
                         </motion.div>

src/components/CitySelectionDialog.tsx

@@ -20,6 +20,9 @@ interface CitySelectionDialogProps {
   onCitySelect?: (cityId: string) => void; // ✅ Updated to pass cityId
 }
 
+export const slugify = (name: string | null) =>
+  name?.toLowerCase().replace(/\s+/g, '-');
+
 export function CitySelectionDialog({
   isOpen,
   onClose,
@@ -41,13 +44,17 @@ export function CitySelectionDialog({
     );
   }
 
-
   const handleCityClick = (city: City) => {
     console.log('Selected city:', city.cityName);
 
     // ✅ Call the onCitySelect callback if provided (passing cityId)
     if (onCitySelect) {
-      onCitySelect(String(city.cityName));
+      // onCitySelect(String(city.cityName));
+      // navigate(`/${city.cityName}/${city.id}`)
+
+      navigate(`/${slugify(city.cityName)}/${city.id}`);
+      localStorage.setItem("cityId", String(city.id))
+      localStorage.setItem("cityName", String(city.cityName))
     } else {
       // ✅ Default behavior: navigate to passes page
       navigate(`/passes?city=${encodeURIComponent(city.cityName)}`);

src/components/Navbar.tsx

@@ -8,7 +8,7 @@ import { ImageWithFallback } from './figma/ImageWithFallback';
 import { CTAButton } from './CTAButton';
 import logoImage from '../assets/cit-logo.png';
 import melbourneLogo from '../assets/melbourne-logo.png';
-import { CitySelectionDialog } from './CitySelectionDialog';
+import { CitySelectionDialog, slugify } from './CitySelectionDialog';
 import { useAuth } from '../context/AuthContext';
 import { LoginModal } from './LoginModal';
 
@@ -104,6 +104,8 @@ export default function Navbar({
     }
   };
 
+  const cityId = localStorage.getItem("cityId")
+  const cityName = localStorage.getItem("cityName")
 
   // More flexible navigation configuration
   const navigationConfig = {
@@ -129,20 +131,20 @@ export default function Navbar({
         isShared: false
       },
       // Position 4 - Shared item
-      {
+      // {
-        label: 'Your Card',
+      //   label: 'Your Card',
-        path: '/passes',
+      //   path: '/passes',
-        isShared: true,
+      //   isShared: true,
-        landingLabel: 'Your Card',
+      //   landingLabel: 'Your Card',
-        melbourneLabel: 'Your Card'
+      //   melbourneLabel: 'Your Card'
-      },
+      // },
       // Position 5
       {
         label: 'FAQ',
         path: '/faq',
         isShared: false
       },
-       {
+      {
         label: 'Your Postcard',
         path: '/postcards',
         isShared: true,
@@ -154,7 +156,7 @@ export default function Navbar({
       // Position 1
       {
         label: 'Attractions',
-        path: '/attractions',
+        path: `/${slugify(cityName)}/${cityId}/attractions`,
         isShared: false
       },
       // Position 2
@@ -185,7 +187,7 @@ export default function Navbar({
         landingLabel: 'Your Card',
         melbourneLabel: 'Your Card'
       },
-        {
+      {
         label: 'Your Postcard',
         path: '/postcards',
         isShared: true,
@@ -559,7 +561,7 @@ export default function Navbar({
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <Link to={currentSource === 'melbourne' ? '/melbourne' : '/'}>
+                <Link to={currentSource === 'melbourne' ? '/' : '/'}>
                   <ImageWithFallback
                     src={currentSource === 'melbourne' ? melbourneLogo : logoImage}
                     alt={

src/pages/AttractionsPage.tsx

@@ -29,187 +29,6 @@ interface Attraction {
   passType: string;
 }
 
-//   {
-//     id: '1',
-//     name: 'Centipede Tour - Guided Arizona Desert Tour by ATV',
-//     description: 'Experience the thrill of off-road adventure through the stunning Arizona desert landscape',
-//     image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Paris, France',
-//     duration: '4 days',
-//     rating: 4.8,
-//     price: 189.25,
-//     category: 'adventure',
-//     hasReservation: true,
-//     reviewCount: 243,
-//     passType: 'unlimited'
-//   },
-//   {
-//     id: '2',
-//     name: 'Molokini and Turtle Town Snorkeling Adventure Aboard',
-//     description: 'Snorkel in crystal-clear waters and swim alongside sea turtles in this unforgettable marine adventure',
-//     image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'New York, USA',
-//     duration: '4 days',
-//     rating: 4.8,
-//     price: 225,
-//     category: 'adventure',
-//     hasReservation: false,
-//     reviewCount: 167,
-//     passType: 'selective'
-//   },
-//   {
-//     id: '3',
-//     name: 'Westminster Walking Tour & Westminster Abbey Entry',
-//     description: 'Explore the heart of London with guided tours of historic Westminster and the famous Abbey',
-//     image: 'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZXN0bWluc3RlciUyMGFiYmV5JTIwbG9uZG9ufGVufDF8fHx8MTc1ODEwNDkwNnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'London, UK',
-//     duration: '4 days',
-//     rating: 4.8,
-//     price: 343,
-//     category: 'culture',
-//     hasReservation: true,
-//     reviewCount: 343,
-//     passType: 'unlimited'
-//   },
-//   {
-//     id: '4',
-//     name: 'All Inclusive Ultimate Circle Island Day Tour with Lunch',
-//     description: 'Comprehensive island tour including all major attractions, lunch, and transportation',
-//     image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'New York, USA',
-//     duration: '4 days',
-//     rating: 4.8,
-//     price: 225,
-//     category: 'adventure',
-//     hasReservation: false,
-//     reviewCount: 243,
-//     passType: 'unlimited'
-//   },
-//   {
-//     id: '5',
-//     name: 'Space Center Houston Admission Ticket',
-//     description: 'Explore NASA\'s Johnson Space Center and discover the wonders of space exploration',
-//     image: 'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGFjZSUyMGNlbnRlciUyMG5hc2ElMjBob3VzdG9ufGVufDF8fHx8MTc1ODEwNDkxM3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Paris, France',
-//     duration: '4 days',
-//     rating: 4.8,
-//     price: 225,
-//     category: 'family',
-//     hasReservation: true,
-//     reviewCount: 243,
-//     passType: 'selective'
-//   },
-//   {
-//     id: '6',
-//     name: 'Melbourne Skydeck Observatory',
-//     description: 'Experience breathtaking 360-degree views from the Southern Hemisphere\'s highest viewing platform',
-//     image: 'https://images.unsplash.com/photo-1677200922658-d0df5b2ac91e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhdHRyYWN0aW9ucyUyMGZhbW91cyUyMGxhbmRtYXJrc3xlbnwxfHx8fDE3NTc0MDEwODV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Melbourne CBD',
-//     duration: '2 hours',
-//     rating: 4.5,
-//     price: 25,
-//     category: 'adventure',
-//     hasReservation: true,
-//     reviewCount: 892,
-//     passType: 'selective'
-//   },
-//   {
-//     id: '7',
-//     name: 'Royal Botanic Gardens Melbourne',
-//     description: 'Explore 38 hectares of stunning gardens featuring over 8,500 species of plants',
-//     image: 'https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'South Yarra',
-//     duration: '3 hours',
-//     rating: 4.7,
-//     price: 0,
-//     category: 'nature',
-//     hasReservation: false,
-//     reviewCount: 1245,
-//     passType: 'selective'
-//   },
-//   {
-//     id: '8',
-//     name: 'Federation Square Cultural Precinct',
-//     description: 'Melbourne\'s cultural precinct featuring galleries, museums, and unique architecture',
-//     image: 'https://images.unsplash.com/photo-1580688027085-8220709e3d84?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZWRlcmF0aW9uJTIwc3F1YXJlJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NzQwMTA5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Melbourne CBD',
-//     duration: '3 hours',
-//     rating: 4.3,
-//     price: 0,
-//     category: 'culture',
-//     hasReservation: true,
-//     reviewCount: 672,
-//     passType: 'unlimited'
-//   },
-//   {
-//     id: '9',
-//     name: 'St Kilda Pier & Little Penguins',
-//     description: 'Watch little penguins return home at sunset while enjoying the scenic pier',
-//     image: 'https://images.unsplash.com/photo-1597889790884-2bb63cfbd4f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdCUyMGtpbGRhJTIwcGllciUyMG1lbGJvdXJuZXxlbnwxfHx8fDE3NTc0MDEwOTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'St Kilda',
-//     duration: '2 hours',
-//     rating: 4.4,
-//     price: 0,
-//     category: 'nature',
-//     hasReservation: false,
-//     reviewCount: 543,
-//     passType: 'unlimited'
-//   },
-//   {
-//     id: '10',
-//     name: 'Queen Victoria Market Experience',
-//     description: 'Historic market offering fresh produce, gourmet foods, and unique souvenirs',
-//     image: 'https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0JTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NzQwMTA5OHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Melbourne CBD',
-//     duration: '2 hours',
-//     rating: 4.6,
-//     price: 0,
-//     category: 'culture',
-//     hasReservation: true,
-//     reviewCount: 987,
-//     passType: 'selective'
-//   },
-//   {
-//     id: '11',
-//     name: 'Melbourne Zoo Adventure',
-//     description: 'Meet over 320 animal species from around the world in naturalistic habitats',
-//     image: 'https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc1NzMzNzgxMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Parkville',
-//     duration: '4 hours',
-//     rating: 4.5,
-//     price: 40,
-//     category: 'family',
-//     hasReservation: false,
-//     reviewCount: 1156,
-//     passType: 'selective'
-//   },
-//   {
-//     id: '12',
-//     name: 'Great Ocean Road Day Tour',
-//     description: 'Scenic coastal drive featuring the famous Twelve Apostles and stunning ocean views',
-//     image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
-//     location: 'Great Ocean Road',
-//     duration: '12 hours',
-//     rating: 4.9,
-//     price: 85,
-//     category: 'adventure',
-//     hasReservation: true,
-//     reviewCount: 678,
-//     passType: 'unlimited'
-//   }
-// ];
-// const filterCategories = [
-//   { value: 'with-reservation', label: 'With Reservation', count: 3 },
-//   { value: 'without-reservation', label: 'Without Reservation', count: 3 },
-//   { value: 'beach', label: 'Beach', count: 3 },
-//   { value: 'adventure', label: 'Adventure', count: 3 },
-//   { value: 'mountains', label: 'Mountains', count: 3 },
-//   { value: 'family', label: 'Family Friendly', count: 3 }
-// ];
-// const passTypeCategories = [
-//   { value: 'selective', label: 'Flexi Pass', count: 6 },
-//   { value: 'unlimited', label: 'Unlimited Pass', count: 6 }
-// ];
 interface AttractionsPageProps {
   onSignInClick: () => void;
   onSignOutClick?: () => void;
@@ -229,7 +48,10 @@ export function AttractionsPage({
   const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
   const [selectedPassType, setSelectedPassType] = useState<string | null>(null);
 
-  const cityId = 1
+  const { cityId } = useParams()
+  const cityName = localStorage.getItem("cityName")
+
+  console.log(cityName)
 
   const { data: filterData, isLoading } = useGetAttractionFiltersQuery(cityId)
   const { data: attractions } = useGetCustomerAttractionsQuery({
@@ -308,12 +130,12 @@ export function AttractionsPage({
         <div className="text-center mb-12">
           <h1 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight text-gray-900 mb-4">
             <span className="font-light">Discover</span>{' '}
-            <span className="font-bold italic text-gradient-primary pr-1">Melbourne's</span>{' '}
+            <span className="font-bold italic text-gradient-primary pr-1">{cityName}'s</span>{' '}
             <span className="font-normal">Best</span>{' '}
             <span className="font-semibold text-emphasis">Attractions</span>
           </h1>
           <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
-            Skip the lines and explore Melbourne's most iconic destinations with your CityCard pass
+            Skip the lines and explore {cityName}'s most iconic destinations with your CityCard pass
           </p>
         </div>
         {/* City Card Promotional Banner */}
@@ -423,7 +245,7 @@ export function AttractionsPage({
           <div className="flex-1">
             {/* Header */}
             <div className="mb-8">
-              <h1 className="text-[48px] font-medium text-[#2d2d2d] mb-6">Attractions in Melbourne</h1>
+              <h1 className="text-[48px] font-medium text-[#2d2d2d] mb-6">Attractions in {cityName}</h1>
               {/* Results count */}
               <p className="text-[16px] text-[#414141] mb-2">
                 Showing {showingFrom}-{showingTo} of {totalItems} Item(s)