Merge pull request 'main' (#36) from main into testing

Reviewed-on: #36

.gitea/workflows/deploy.yml

@@ -0,0 +1,67 @@
+name: CityCards-Website
+
+on:
+    push:
+        branches:
+            - main
+            - beta
+            - testing
+            - uat-beta
+            - staging
+            - production
+
+jobs:
+    Build-CityCards-Website:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Code in Runner
+              uses: actions/checkout@v3
+            - name: Branch and Folder Selection for Deployment
+              run: |
+                    BRANCH_NAME=${{ gitea.ref_name }}
+                    case $BRANCH_NAME in
+                        #beta)
+                        #echo "PROJECT_FOLDER=/home/citycards/citycards-superadmin" >> $GITHUB_ENV
+                        #PROJECT_FOLDER="/home/citycards/citycards-superadmin"
+                        #;;
+                        testing)
+                        echo "PROJECT_FOLDER=/home/citycards/Test-Release/citycards-frontend/CityCards-Website" >> $GITHUB_ENV
+                        PROJECT_FOLDER="/home/citycards/Test-Release/citycards-frontend/CityCards-Website"
+                        ;;
+                        #client)
+                        #echo "PROJECT_FOLDER=/home/citycards/Client-Release/citycards-frontend/CityCards-AdminPanel" >> $GITHUB_ENV
+                        #PROJECT_FOLDER="/home/citycards/Client-Release/citycards-frontend/CityCards-AdminPanel"
+                        #;;
+                        #uat-beta)
+                        #echo "PROJECT_FOLDER=/home/citycards/UAT-Release/citycards-frontend/CityCards-AdminPanel" >> $GITHUB_ENV
+                        #PROJECT_FOLDER="/home/citycards/UAT-Release/citycards-frontend/CityCards-AdminPanel"
+                        #;;                        
+                        *)
+                        echo "Unknown Branch"
+                        exit 1 
+                        ;;
+                    esac
+                    echo "BRANCH_NAME=${{ gitea.ref_name }}" >> $GITHUB_ENV
+                    echo "SELECTED BRANCH : $BRANCH_NAME"
+                    echo "SELECTED FOLDER : $PROJECT_FOLDER"
+
+            - name: Deployment to Server SSH
+              uses: appleboy/ssh-action@v1
+              with:
+                host: ${{ secrets.BETA_SERVER_HOST }}
+                username: ${{ secrets.BETA_SERVER_USERNAME }}
+                password: ${{ secrets.BETA_SERVER_PASSWORD }}
+                port: ${{ secrets.BETA_SERVER_PORT }}
+                envs: BRANCH_NAME,PROJECT_FOLDER
+                script: |
+                        set -xe
+                        echo $BRANCH_NAME
+                        echo $PROJECT_FOLDER
+                        cd $PROJECT_FOLDER
+                        git fetch
+                        git reset --hard origin/$BRANCH_NAME
+                        git pull origin $BRANCH_NAME
+                        echo "BUILDING..... "
+                        npm i
+                        npm run build
+            

src/AppRouter.tsx

@@ -2,6 +2,7 @@ import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router
 import { motion, AnimatePresence } from 'motion/react';
 
 // Import all your pages
+import { ProtectedRoute } from './components/ProtectedRoute';
 import { MelbournePage } from './pages/MelbournePage';
 import { PassesPage } from './pages/PassesPage';
 import { AttractionsPage } from './pages/AttractionsPage';
@@ -178,31 +179,43 @@ export function AppRouter({
                     {/* User Routes */}
                     <Route path="/profile" element={
                         <motion.div key="profile" {...pageTransition}>
-                            <ProfilePage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <ProfilePage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/view-card-details/:cardId" element={
                         <motion.div key="profile" {...pageTransition}>
-                            <ViewCardDetailsPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <ViewCardDetailsPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
-               
+
 
                     {/* Itinerary Routes */}
                     <Route path="/create-itinerary" element={
                         <motion.div key="create-itinerary" {...pageTransition}>
-                            <CreateMagicItineraryPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+
+                                <CreateMagicItineraryPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
                     <Route path="/view-itinerary/:itineraryId" element={
                         <motion.div key="itinerary-view" {...pageTransition}>
-                            <ItineraryViewPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <ItineraryViewPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/itinerary-summary/:itineraryId" element={
                         <motion.div key="itinerary-summary" {...pageTransition}>
-                            <ItinerarySummaryPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+
+                                <ItinerarySummaryPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
@@ -276,12 +289,17 @@ export function AppRouter({
 
                     <Route path="/cart" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <CartPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+
+                                <CartPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/checkout" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <CheckoutPage {...commonNavHandlers} />
+                            <ProtectedRoute>
+                                <CheckoutPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/register" element={
@@ -289,11 +307,13 @@ export function AppRouter({
                             <RegisterPage {...commonNavHandlers} />
                         </motion.div>
                     } />
-                 
+
                     <Route path="/payment/:bookingId" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <PaymentDetailsPage {...commonNavHandlers} />
-                    </motion.div>
+                            <ProtectedRoute>
+                                <PaymentDetailsPage {...commonNavHandlers} />
+                            </ProtectedRoute>
+                        </motion.div>
                     } />
                     <Route path="/super-savings/:id" element={
                         <motion.div key="super-savings" {...pageTransition}>
@@ -305,26 +325,32 @@ export function AppRouter({
 
                     <Route path="/success" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <PaymentSuccessPage
-                                // onHomeClick={onHomeClick}
-                                // onPassesClick={onPassesClick}
-                                onSignInClick={onSignInClick}
-                                onSignOutClick={onSignOutClick}
-                                currentPage="success"
-                                user={user}
-                            />
+                            <ProtectedRoute>
+
+                                <PaymentSuccessPage
+                                    // onHomeClick={onHomeClick}
+                                    // onPassesClick={onPassesClick}
+                                    onSignInClick={onSignInClick}
+                                    onSignOutClick={onSignOutClick}
+                                    currentPage="success"
+                                    user={user}
+                                />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/cancel" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <PaymentCancelPage
-                                // onHomeClick={onHomeClick}
-                                // onPassesClick={onPassesClick}
-                                onSignInClick={onSignInClick}
-                                onSignOutClick={onSignOutClick}
-                                currentPage="cancel"
-                                user={user}
-                            />
+                            <ProtectedRoute>
+
+                                <PaymentCancelPage
+                                    // onHomeClick={onHomeClick}
+                                    // onPassesClick={onPassesClick}
+                                    onSignInClick={onSignInClick}
+                                    onSignOutClick={onSignOutClick}
+                                    currentPage="cancel"
+                                    user={user}
+                                />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                 </Routes>

src/Redux/Store.tsx

@@ -5,6 +5,7 @@ import { authApi } from "./services/auth.service";
 import { profileApi } from "./services/profile.service";
 import { cardsApi } from "./services/cards.service";
 import { itineraryApi } from "./services/itinerary.service";
+import { blogsApi } from "./services/blogs.service";
 
 export const store = configureStore({
   reducer: {
@@ -13,7 +14,8 @@ export const store = configureStore({
     [authApi.reducerPath]: authApi.reducer,
     [profileApi.reducerPath]: profileApi.reducer,
     [cardsApi.reducerPath]:cardsApi.reducer,
-    [itineraryApi.reducerPath]:itineraryApi.reducer
+    [itineraryApi.reducerPath]:itineraryApi.reducer,
+    [blogsApi.reducerPath]:blogsApi.reducer
 
   },
 
@@ -24,7 +26,8 @@ export const store = configureStore({
       authApi.middleware,
       profileApi.middleware,
       cardsApi.middleware,
-      itineraryApi.middleware
+      itineraryApi.middleware,
+      blogsApi.middleware
     ),
 });
 export type RootState = ReturnType<typeof store.getState>;

src/Redux/services/attractions.service.ts

@@ -30,6 +30,20 @@ export const attractionsApi = createApi({
         return `/attractions/customer/customer-attractions?${params.toString()}`;
       },
     }),
+   getAttractionsForHomePage: builder.query({
+      // cityId is required, others optional
+      query: ({ cityId, categoryId}) => {
+        const params = new URLSearchParams();
+
+        // required
+        params.append('cityXid', cityId);
+
+        // optional
+        if (categoryId) params.append('categoryXid', categoryId);
+
+        return `/attractions/list/city-attractions?${params.toString()}`;
+      },
+    }),
 
      getAttractionDetailsById: builder.query({
       query: (id: number) => `/attractions/customer/${id}`,
@@ -38,4 +52,4 @@ export const attractionsApi = createApi({
   }),
 });
 
-export const { useGetAttractionFiltersQuery,useGetCustomerAttractionsQuery,useGetAttractionDetailsByIdQuery } = attractionsApi;
+export const { useGetAttractionFiltersQuery,useGetCustomerAttractionsQuery,useGetAttractionDetailsByIdQuery,useGetAttractionsForHomePageQuery } = attractionsApi;

src/Redux/services/blogs.service.ts

@@ -0,0 +1,28 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { baseQuery } from "../baseQuery";
+
+export const blogsApi = createApi({
+  reducerPath: 'blogsApi',
+    baseQuery,
+  endpoints: (builder) => ({
+
+   getBlogsForCity: builder.query({
+      // cityId is required, others optional
+      query: ({ cityId, categoryId }) => {
+        const params = new URLSearchParams();
+
+        // required
+        params.append('cityXid', cityId);
+
+        // optional
+        if (categoryId) params.append('categoryXid', categoryId);
+
+        return `/website/list/blogs?${params.toString()}`;
+      },
+    }),
+
+
+  }),
+});
+
+export const { useGetBlogsForCityQuery } = blogsApi;

src/Redux/services/cities.service.ts

@@ -1,11 +1,8 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { createApi } from '@reduxjs/toolkit/query/react';
 import { baseQuery } from "../baseQuery";
 
 export const citiesApi = createApi({
     reducerPath: 'citiesApi',
-    // baseQuery: fetchBaseQuery({
-    //     baseUrl: 'https://testingapi.citycards.betadelivery.com',
-    // }),
     baseQuery,
     endpoints: (builder) => ({
 

src/components/EnhancedTestimonials.tsx

@@ -126,7 +126,7 @@ export function EnhancedTestimonials() {
                   style={{
                     transform: `rotate(${cardRotation}deg) translateY(${cardOffset}px)`,
                     transformOrigin: 'center center',
-                    minHeight: '480px',
+                    minHeight: '360px',
                     background: `
                       radial-gradient(circle at 20% 80%, rgba(255, 248, 235, 0.8) 0%, transparent 50%),
                       radial-gradient(circle at 80% 20%, rgba(250, 245, 230, 0.6) 0%, transparent 50%),

src/components/LandingMagicItinerary.tsx

@@ -112,7 +112,7 @@ export function LandingMagicItinerary() {
             >
               <Wand2 className="w-6 h-6 text-warm-coral drop-shadow-lg" />
             </motion.div>
-            <span className="font-semibold text-gray-800">AI-Powered Magic Itinerary</span>
+            <span className="font-semibold text-gray-800">Magic Itinerary</span>
             <motion.div
               className="w-2 h-2 bg-warm-coral rounded-full"
               animate={{
@@ -131,7 +131,7 @@ export function LandingMagicItinerary() {
             viewport={{ once: true }}
           >
             <span className="font-light">Plan Your</span>{' '}
-            <span className="font-bold italic bg-gradient-to-r from-warm-coral via-orange-500 to-rose-500 bg-clip-text pr-2 text-transparent drop-shadow-lg">
+            <span className="font-bold italic bg-gradient-to-r via-orange-500 to-rose-500 bg-clip-text pr-2 text-transparent drop-shadow-lg">
               Dream Journey
             </span>
             <br />
@@ -250,7 +250,7 @@ export function LandingMagicItinerary() {
           >
             <Button
               withShine={true}
-              className="py-6 px-14 rounded-full text-lg font-bold bg-gradient-to-r from-warm-coral via-orange-500 to-rose-500 hover:from-warm-coral/90 hover:via-orange-500/90 hover:to-rose-500/90 shadow-2xl hover:shadow-warm-coral/50 transition-all hover:scale-105 hover:-translate-y-1"
+              className="py-6 px-14 rounded-full text-lg font-bold bg-gradient-to-r via-orange-500 to-rose-500 hover:from-warm-coral/90 hover:via-orange-500/90 hover:to-rose-500/90 shadow-2xl hover:shadow-warm-coral/50 transition-all hover:scale-105 hover:-translate-y-1"
             >
               <span className="flex items-center gap-3">
                 <Wand2 className="w-5 h-5" />
@@ -258,11 +258,11 @@ export function LandingMagicItinerary() {
               </span>
             </Button>
 
-            <p className="text-gray-600 text-sm flex items-center gap-2">
+            {/* <p className="text-gray-600 text-sm flex items-center gap-2">
               <Sparkles className="w-4 h-4 text-warm-coral" />
               <span>Free to use • No credit card required</span>
               <Sparkles className="w-4 h-4 text-warm-coral" />
-            </p>
+            </p> */}
           </motion.div>
         </div>
       </div>

src/components/LandingVarietyOfAdventures.tsx

@@ -150,10 +150,10 @@ export function LandingVarietyOfAdventures() {
   const extendedCategories = [...melbourneCategories, ...melbourneCategories, ...melbourneCategories];
 
   return (
-    <section className="py-20 lg:py-28 bg-white overflow-hidden">
+    <section className="lg: bg-white overflow-hidden">
       <div className="container mx-auto px-4">
         {/* Header */}
-        <div className="text-center mb-16 max-w-4xl mx-auto">
+        <div className="text-center mb-2 max-w-4xl mx-auto">
           <motion.h2
             className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight text-foreground mb-6"
             initial={{ opacity: 0, y: 30 }}

src/components/LoginModal.tsx

@@ -1,3 +1,4 @@
+// LoginModal.tsx
 import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import { X } from 'lucide-react';
@@ -161,6 +162,7 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
 
         login(userData);
         toast.success("User Logged in successfully")
+        navigate("/passes")
       }
       onClose();
     } catch (err: any) {

src/components/MelbourneAttractions.tsx

@@ -3,271 +3,167 @@ import { ChevronLeft, ChevronRight, Clock, Users, Star, Zap, CheckCircle, MapPin
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { motion } from 'motion/react';
 import { useNavigate } from 'react-router-dom';
-
-const melbourneAttractions = [
-  {
-    id: 1,
-    name: "Royal Botanic Gardens",
-    city: "Melbourne",
-    country: "Australia",
-    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",
-    rating: 4.8,
-    reviews: "15,600+",
-    category: "Gardens",
-    originalPrice: "Free",
-    includedValue: "$25",
-    perks: [
-      { icon: Volume2, label: "Audio garden tour", color: "text-green-600" },
-      { icon: MapPin, label: "Garden maps", color: "text-blue-600" },
-      { icon: Camera, label: "Photo spots guide", color: "text-purple-600" }
-    ]
-  },
-  {
-    id: 2,
-    name: "Federation Square",
-    city: "Melbourne",
-    country: "Australia",
-    image: "https://images.unsplash.com/photo-1639655001512-e4b58d4874b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBmZWRlcmF0aW9uJTIwc3F1YXJlfGVufDF8fHx8MTc1NzMzNzc5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-    rating: 4.6,
-    reviews: "22,400+",
-    category: "Landmarks",
-    originalPrice: "Free",
-    includedValue: "$35",
-    perks: [
-      { icon: Volume2, label: "Cultural tours", color: "text-orange-600" },
-      { icon: Eye, label: "Gallery access", color: "text-blue-600" },
-      { icon: Users, label: "Event access", color: "text-purple-600" }
-    ]
-  },
-  {
-    id: 3,
-    name: "Queen Victoria Market",
-    city: "Melbourne",
-    country: "Australia",
-    image: "https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0fGVufDF8fHx8MTc1NzMzNzc5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-    rating: 4.7,
-    reviews: "18,200+",
-    category: "Markets",
-    originalPrice: "$45",
-    includedValue: "$45",
-    perks: [
-      { icon: Users, label: "Food tours", color: "text-orange-600" },
-      { icon: Coffee, label: "Tastings", color: "text-brown-600" },
-      { icon: Volume2, label: "History guide", color: "text-blue-600" }
-    ]
-  },
-  {
-    id: 4,
-    name: "Eureka Skydeck",
-    city: "Melbourne",
-    country: "Australia",
-    image: "https://images.unsplash.com/photo-1629677713183-29248e1268d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBldXJla2ElMjB0b3dlcnxlbnwxfHx8fDE3NTczMzc4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-    rating: 4.9,
-    reviews: "11,800+",
-    category: "Views",
-    originalPrice: "$32",
-    includedValue: "$32",
-    perks: [
-      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
-      { icon: Eye, label: "360° views", color: "text-purple-600" },
-      { icon: Camera, label: "Photo experiences", color: "text-blue-600" }
-    ]
-  },
-  {
-    id: 5,
-    name: "St Kilda Beach & Pier",
-    city: "Melbourne",
-    country: "Australia",
-    image: "https://images.unsplash.com/photo-1674732954456-159835c0a46b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzdCUyMGtpbGRhJTIwYmVhY2h8ZW58MXx8fHwxNzU3MzM3ODAzfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-    rating: 4.5,
-    reviews: "14,300+",
-    category: "Beach",
-    originalPrice: "Free",
-    includedValue: "$20",
-    perks: [
-      { icon: Users, label: "Penguin tours", color: "text-blue-600" },
-      { icon: MapPin, label: "Beach activities", color: "text-green-600" },
-      { icon: Camera, label: "Sunset spots", color: "text-purple-600" }
-    ]
-  },
-  {
-    id: 6,
-    name: "Melbourne Laneways",
-    city: "Melbourne",
-    country: "Australia",
-    image: "https://images.unsplash.com/photo-1705120624704-0970afc29fea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBsYW5ld2F5cyUyMHN0cmVldCUyMGFydHxlbnwxfHx8fDE3NTczMzc4MDd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-    rating: 4.8,
-    reviews: "19,500+",
-    category: "Street Art",
-    originalPrice: "$55",
-    includedValue: "$55",
-    perks: [
-      { icon: Palette, label: "Art tours", color: "text-pink-600" },
-      { icon: Coffee, label: "Café stops", color: "text-brown-600" },
-      { icon: Camera, label: "Photo walks", color: "text-purple-600" }
-    ]
-  },
-  {
-    id: 7,
-    name: "Melbourne Zoo",
-    city: "Melbourne", 
-    country: "Australia",
-    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",
-    rating: 4.7,
-    reviews: "13,900+",
-    category: "Wildlife",
-    originalPrice: "$42",
-    includedValue: "$42",
-    perks: [
-      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
-      { icon: Users, label: "Animal encounters", color: "text-orange-600" },
-      { icon: Volume2, label: "Keeper talks", color: "text-blue-600" }
-    ]
-  },
-  {
-    id: 8,
-    name: "Royal Exhibition Building",
-    city: "Melbourne",
-    country: "Australia", 
-    image: "https://images.unsplash.com/photo-1720523794299-c3b445d71a51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGV4aGliaXRpb24lMjBidWlsZGluZ3xlbnwxfHx8fDE3NTczMzc4MTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-    rating: 4.6,
-    reviews: "8,700+",
-    category: "Heritage",
-    originalPrice: "$25",
-    includedValue: "$25",
-    perks: [
-      { icon: Volume2, label: "Audio tours", color: "text-blue-600" },
-      { icon: Eye, label: "Exhibitions", color: "text-purple-600" },
-      { icon: MapPin, label: "Heritage walks", color: "text-green-600" }
-    ]
-  }
-];
-
-const categories = ["All", "Landmarks", "Gardens", "Markets", "Views", "Beach", "Street Art", "Wildlife", "Heritage"];
+import { useGetAttractionsForHomePageQuery } from '../Redux/services/attractions.service';
 
 export function MelbourneAttractions() {
-  const [activeCategory, setActiveCategory] = useState("All");
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
   const navigate = useNavigate();
-  const cityName = localStorage.getItem("cityName")
+  const cityName = localStorage.getItem("cityName");
+  const cityId = localStorage.getItem("cityId");
 
-  const filteredAttractions = activeCategory === "All" 
-    ? melbourneAttractions 
-    : melbourneAttractions.filter(attraction => attraction.category === activeCategory);
+  const { data: homePageAttractionsData } = useGetAttractionsForHomePageQuery({ cityId });
 
-  const AttractionCard = ({ attraction, index }: { attraction: typeof melbourneAttractions[0], index: number }) => (
-    <motion.div
-      initial={{ opacity: 0, y: 30 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay: index * 0.1 }}
-      viewport={{ once: true }}
-      className="group cursor-pointer flex-shrink-0 w-[280px] md:w-auto md:flex-shrink h-96 flip-card-container"
-    >
-      {/* 3D Flip Container */}
-      <div className="flip-card-inner group-hover:[transform:rotateY(180deg)] relative w-full h-full">
-        
-        {/* FRONT FACE */}
-        <div className="flip-card-face absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg">
-          {/* Background Image */}
-          <ImageWithFallback
-            src={attraction.image}
-            alt={attraction.name}
-            className="w-full h-full object-cover"
-          />
+  const apiAttractions = homePageAttractionsData?.attractions || [];
+  const apiCategories = homePageAttractionsData?.categories || [];
 
-          {/* Rating Badge */}
-          {/* <div className="absolute top-4 right-4 bg-white/95 backdrop-blur-sm rounded-full px-3 py-1.5 flex items-center gap-1 shadow-lg z-10">
-            <div className="w-4 h-4 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center">
-              <span className="text-white text-xs">★</span>
-            </div>
-            <span className="text-sm font-medium text-gray-900">{attraction.rating}</span>
-          </div> */}
+  // Filter attractions by selected category
+  const filteredAttractions = selectedCategoryId === null
+    ? apiAttractions
+    : apiAttractions.filter((attraction: any) =>
+        attraction.categories?.some((cat: any) => cat.id === selectedCategoryId)
+      );
 
-          {/* Front Content - Clean Title & Location */}
-          <div className="absolute bottom-0 left-0 right-0">
-            <div className="bg-gradient-to-t from-black/80 via-black/50 to-transparent p-6">
-              <h3 className="font-bold text-xl text-white mb-1">{attraction.name}</h3>
-              <p className="text-white/90 text-sm">
-                {attraction.city}, {attraction.country}
-              </p>
+  const AttractionCard = ({ attraction, index }: { attraction: any; index: number }) => {
+    // Get cover image or first image from galleries
+    const coverImage = attraction.galleries?.find((g: any) => g.isCoverImage)?.filePathUrl
+      || attraction.galleries?.[0]?.filePathUrl
+      || '';
+
+    // Filter only inclusions (isInclusion: true)
+    const inclusions = attraction.inclusions?.filter((inc: any) => inc.isInclusion) || [];
+
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: index * 0.1 }}
+        viewport={{ once: true }}
+        className="group cursor-pointer flex-shrink-0 w-[280px] md:w-auto md:flex-shrink h-96 flip-card-container"
+      >
+        <div className="flip-card-inner group-hover:[transform:rotateY(180deg)] relative w-full h-full">
+
+          {/* FRONT FACE */}
+          <div className="flip-card-face absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg">
+            <ImageWithFallback
+              src={coverImage}
+              alt={attraction.title}
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute bottom-0 left-0 right-0">
+              <div className="bg-gradient-to-t from-black/80 via-black/50 to-transparent p-6">
+                <h3 className="font-bold text-xl text-white mb-1">{attraction.title}</h3>
+                <p className="text-white/90 text-sm">{attraction.city?.cityName}, Australia</p>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* BACK FACE */}
-        <div className="flip-card-face flip-card-back absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-gray-900 to-black">
-          {/* Back Content Container */}
-          <div className="relative w-full h-full p-6 flex flex-col justify-center text-white">
-            
-            {/* Included Value Section */}
-            <div className="mb-4">
-              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-3 py-1.5 rounded-full text-sm font-medium mb-3">
-                <CheckCircle className="w-4 h-4" />
-                <span>Included Value</span>
+          {/* BACK FACE */}
+          <div className="flip-card-face flip-card-back absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-gray-900 to-black">
+            <div className="relative w-full h-full p-6 flex flex-col justify-center text-white">
+
+              {/* Pricing Section */}
+              <div className="mb-4">
+                <div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-3 py-1.5 rounded-full text-sm font-medium mb-3">
+                  <CheckCircle className="w-4 h-4" />
+                  <span>Included Value</span>
+                </div>
+                <div className="text-2xl font-bold mb-1">
+                  ${attraction.ticketPriceAdult}
+                  {attraction.ticketPriceChild && (
+                    <span className="text-sm font-normal text-white/70 ml-2">
+                      / Child ${attraction.ticketPriceChild}
+                    </span>
+                  )}
+                </div>
+                <p className="text-white/80 text-sm">
+                  {attraction.isBookingRequired ? 'Booking required' : 'No booking required'}
+                </p>
               </div>
-              <div className="text-2xl font-bold mb-1">{attraction.includedValue}</div>
-              <p className="text-white/80 text-sm">
-                {attraction.originalPrice === "Free"
-                  ? "Premium access included"
-                  : "Save money with CityCard"}
-              </p>
-            </div>
 
-            {/* What's Included List */}
-            <div className="mb-4">
-              <h4 className="font-semibold text-sm mb-3">What's Included:</h4>
-              <div className="space-y-2">
-                {attraction.perks.slice(0, 3).map((perk, perkIndex) => (
-                  <div key={perkIndex} className="flex items-center gap-3 text-white/90">
-                    <div className="w-6 h-6 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
-                      <perk.icon className="w-3 h-3 text-white" />
-                    </div>
-                    <span className="text-sm">{perk.label}</span>
+              {/* Inclusions List */}
+              {inclusions.length > 0 && (
+                <div className="mb-4">
+                  <h4 className="font-semibold text-sm mb-3">What's Included:</h4>
+                  <div className="space-y-2">
+                    {inclusions.slice(0, 3).map((inc: any) => (
+                      <div key={inc.id} className="flex items-center gap-3 text-white/90">
+                        <div className="w-6 h-6 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0">
+                          <CheckCircle className="w-3 h-3 text-white" />
+                        </div>
+                        <span className="text-sm">{inc.title}</span>
+                      </div>
+                    ))}
                   </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Duration & Meta Info */}
-            <div className="mb-4">
-              <div className="flex items-center gap-4 text-white/80 text-sm">
-                <div className="flex items-center gap-1">
-                  <Clock className="w-4 h-4" />
-                  <span>2-3 hours</span>
                 </div>
-                <div className="flex items-center gap-1">
-                  <Users className="w-4 h-4" />
-                  <span>All ages</span>
+              )}
+
+              {/* Duration & Group Info */}
+              <div className="mb-4">
+                <div className="flex items-center gap-4 text-white/80 text-sm">
+                  {attraction.durations && (
+                    <div className="flex items-center gap-1">
+                      <Clock className="w-4 h-4" />
+                      <span>{attraction.durations} mins</span>
+                    </div>
+                  )}
+                  {attraction.groupSize && (
+                    <div className="flex items-center gap-1">
+                      <Users className="w-4 h-4" />
+                      <span>Max {attraction.groupSize}</span>
+                    </div>
+                  )}
+                  {attraction.ageRange && (
+                    <div className="flex items-center gap-1">
+                      <Star className="w-4 h-4" />
+                      <span>{attraction.ageRange}</span>
+                    </div>
+                  )}
                 </div>
               </div>
-            </div>
 
-            {/* Footer Features */}
-            <div className="border-t border-white/20 pt-4">
-              <div className="flex items-center justify-between text-white/80 text-xs">
-                <div className="flex items-center gap-2">
-                  <MapPin className="w-3 h-3" />
-                  <span>Mobile ticket</span>
+              {/* Categories */}
+              {attraction.categories?.length > 0 && (
+                <div className="flex flex-wrap gap-1 mb-4">
+                  {attraction.categories.slice(0, 2).map((cat: any) => (
+                    <span
+                      key={cat.id}
+                      className="text-xs bg-white/20 text-white/90 px-2 py-0.5 rounded-full"
+                    >
+                      {cat.categoryName}
+                    </span>
+                  ))}
                 </div>
-                <div className="flex items-center gap-2">
-                  <CheckCircle className="w-3 h-3" />
-                  <span>Instant confirmation</span>
+              )}
+
+              {/* Footer */}
+              <div className="border-t border-white/20 pt-4">
+                <div className="flex items-center justify-between text-white/80 text-xs">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="w-3 h-3" />
+                    <span>Mobile ticket</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="w-3 h-3" />
+                    <span>Instant confirmation</span>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {/* Decorative Elements */}
-            <div className="absolute top-4 right-4 w-16 h-16 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full blur-xl"></div>
-            <div className="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-tr from-secondary/15 to-primary/15 rounded-full blur-lg"></div>
+              {/* Decorative Elements */}
+              <div className="absolute top-4 right-4 w-16 h-16 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full blur-xl"></div>
+              <div className="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-tr from-secondary/15 to-primary/15 rounded-full blur-lg"></div>
+            </div>
           </div>
-        </div>
 
-      </div>
-    </motion.div>
-  );
+        </div>
+      </motion.div>
+    );
+  };
 
   return (
     <section className="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
       <div className="container mx-auto px-4">
+
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -291,7 +187,7 @@ export function MelbourneAttractions() {
             <span className="font-semibold text-emphasis">Experiences</span>
           </h2>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Discover {cityName}'s iconic landmarks, vibrant culture, world-class dining, and hidden gems - all included with your {cityName} CityCard
+            Discover {cityName}'s iconic landmarks, vibrant culture, world-class dining, and hidden gems — all included with your {cityName} CityCard
           </p>
         </motion.div>
 
@@ -303,23 +199,41 @@ export function MelbourneAttractions() {
           viewport={{ once: true }}
           className="flex flex-wrap justify-center gap-3 mb-12"
         >
-          {categories.map((category, index) => (
+          {/* "All" button */}
+          <motion.button
+            initial={{ opacity: 0, scale: 0.8 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            onClick={() => setSelectedCategoryId(null)}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className={`px-6 py-4 h-14 rounded-2xl font-medium transition-all duration-300 ${
+              selectedCategoryId === null
+                ? 'bg-gradient-to-r from-primary to-secondary text-white shadow-xl shadow-primary/25 ring-2 ring-primary/20'
+                : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-primary/20 hover:bg-white'
+            }`}
+          >
+            All
+          </motion.button>
+
+          {/* Dynamic category buttons from API */}
+          {apiCategories.map((category: any, index: number) => (
             <motion.button
-              key={category}
+              key={category.id}
               initial={{ opacity: 0, scale: 0.8 }}
               whileInView={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.3, delay: index * 0.05 }}
               viewport={{ once: true }}
-              onClick={() => setActiveCategory(category)}
+              onClick={() => setSelectedCategoryId(category.id)}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               className={`px-6 py-4 h-14 rounded-2xl font-medium transition-all duration-300 ${
-                activeCategory === category
+                selectedCategoryId === category.id
                   ? 'bg-gradient-to-r from-primary to-secondary text-white shadow-xl shadow-primary/25 ring-2 ring-primary/20'
                   : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-primary/20 hover:bg-white'
               }`}
             >
-              {category}
+              {category.categoryName}
             </motion.button>
           ))}
         </motion.div>
@@ -327,52 +241,44 @@ export function MelbourneAttractions() {
         {/* Mobile Horizontal Carousel */}
         <div className="block md:hidden mb-8">
           <div className="relative">
-            {/* Scroll Container */}
             <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-4 px-4 -mx-4">
-              {filteredAttractions.map((attraction, index) => (
+              {filteredAttractions.map((attraction: any, index: number) => (
                 <AttractionCard key={attraction.id} attraction={attraction} index={index} />
               ))}
             </div>
-            
-            {/* Scroll Indicators */}
             <div className="flex justify-center mt-6 gap-2">
-              {Array.from({ length: Math.ceil(filteredAttractions.length / 2) }).map((_, index) => (
-                <div
-                  key={index}
-                  className="w-2 h-2 rounded-full bg-gray-300"
-                />
+              {Array.from({ length: Math.ceil(filteredAttractions.length / 2) }).map((_: any, index: number) => (
+                <div key={index} className="w-2 h-2 rounded-full bg-gray-300" />
               ))}
             </div>
-            
-            {/* Mobile Hint Text */}
             <div className="text-center mt-4">
-              <p className="text-sm text-gray-500">
-                Swipe to explore more Melbourne attractions
-              </p>
+              <p className="text-sm text-gray-500">Swipe to explore more {cityName} attractions</p>
             </div>
           </div>
         </div>
 
         {/* Desktop Bento Grid */}
         <div className="hidden md:block w-full">
-          {/* Top Row - 3 equal cards */}
           <div className="grid grid-cols-3 gap-6">
-            {filteredAttractions.slice(0, 3).map((attraction, index) => (
+            {filteredAttractions.slice(0, 3).map((attraction: any, index: number) => (
               <AttractionCard key={attraction.id} attraction={attraction} index={index} />
             ))}
           </div>
-
-          {/* Consistent Vertical Spacing */}
           <div className="h-6"></div>
-
-          {/* Bottom Row - 2 larger cards */}
           <div className="grid grid-cols-2 gap-6">
-            {filteredAttractions.slice(3, 5).map((attraction, index) => (
+            {filteredAttractions.slice(3, 5).map((attraction: any, index: number) => (
               <AttractionCard key={attraction.id} attraction={attraction} index={index + 3} />
             ))}
           </div>
         </div>
 
+        {/* Empty State */}
+        {filteredAttractions.length === 0 && (
+          <div className="text-center py-16 text-gray-500">
+            <p className="text-lg">No attractions found for this category.</p>
+          </div>
+        )}
+
         {/* Call to Action */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -385,16 +291,15 @@ export function MelbourneAttractions() {
             whileHover={{ scale: 1.05, boxShadow: "0 20px 40px rgba(99,102,241,0.3)" }}
             whileTap={{ scale: 0.95 }}
             className="relative bg-gradient-to-r from-primary to-secondary text-white py-4 px-12 rounded-lg text-lg shadow-xl transition-all duration-300 overflow-hidden group"
-            onClick={()=>navigate('/passes')}
+            onClick={() => navigate('/passes')}
           >
             <span className="relative z-10">Get Your {cityName} Card</span>
-            
-            {/* Shine animation */}
             <div className="absolute inset-0 opacity-30">
               <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
             </div>
           </motion.button>
         </motion.div>
+
       </div>
     </section>
   );

src/components/MelbourneBlogs.tsx

@@ -2,8 +2,9 @@ import { motion } from 'motion/react';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { Calendar, Clock, User, ArrowRight, Coffee, Camera, MapPin, Star } from 'lucide-react';
 import { Button } from './ui/button';
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useNavigate } from 'react-router-dom';
+import { useGetBlogsForCityQuery } from '../Redux/services/blogs.service';
 
 const blogPosts = [
   {
@@ -93,10 +94,22 @@ export function MelbourneBlogs() {
 
   const sectionRef = useRef(null);
   const navigate = useNavigate();
+  const cityId = localStorage.getItem('cityId');
+  const [categoryId, setCategoryId] = useState("");
+  const { data: blogsData, error, isLoading } = useGetBlogsForCityQuery({ cityId, categoryId });
   const featuredPost = blogPosts.find(post => post.featured);
   const regularPosts = blogPosts.filter(post => !post.featured);
 
   const cityName = localStorage.getItem('cityName');
+  const baseUrl = import.meta.env.VITE_BASE_URL;
+
+  const blogss = blogsData?.blogs ?? [];
+  const categoriess = blogsData?.categories ?? []
+
+  const handleCategoryClick = (id: string) => {
+    // toggle logic: if already selected, reset to empty
+    setCategoryId(prev => (prev === id ? "" : id));
+  };
 
   return (
     <section
@@ -145,29 +158,42 @@ export function MelbourneBlogs() {
           viewport={{ once: true }}
           className="flex flex-wrap justify-center gap-3 mb-16"
         >
-          {categories.map((category, index) => (
+          <motion.button
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => setCategoryId("")}
+            className={`cursor-pointer px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group 
+      ${categoryId === "" ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-white text-gray-700"}`}
+          >
+            <span className="flex items-center gap-2">All</span>
+          </motion.button>
+
+          {categoriess.map((category: any, index) => (
             <motion.button
-              key={category.name}
+              key={category.id}
               initial={{ opacity: 0, scale: 0.9 }}
               whileInView={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.4, delay: 0.2 + index * 0.05 }}
               viewport={{ once: true }}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className={`px-6 py-3 rounded-full bg-gradient-to-r ${category.color} text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300 group`}
+              onClick={() => handleCategoryClick(category.id)}
+              className={`cursor-pointer px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group 
+        ${categoryId === category.id ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-white text-gray-700"}`}
             >
               <span className="flex items-center gap-2">
-                {category.name}
-                <span className="text-xs bg-white/20 px-2 py-1 rounded-full group-hover:bg-white/30 transition-colors duration-200">
-                  {category.count}
-                </span>
+                {category.categoryName}
               </span>
             </motion.button>
           ))}
         </motion.div>
 
+
         {/* Featured Post */}
-        {featuredPost && (
+        {/* {featuredPost && (
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -177,13 +203,13 @@ export function MelbourneBlogs() {
           >
 
           </motion.div>
-        )}
+        )} */}
 
         {/* Regular Blog Posts Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {regularPosts.map((post, index) => (
+          {blogss && blogss?.map((blog: any, index) => (
             <motion.article
-              key={post.id}
+              key={blog.id}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
@@ -193,47 +219,52 @@ export function MelbourneBlogs() {
               {/* Post Image */}
               <div className="relative overflow-hidden h-48">
                 <ImageWithFallback
-                  src={post.image}
-                  alt={post.title}
+                  src={`${baseUrl}${blog?.coverImage}`}
+                  alt={blog?.blogTitle}
                   className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
 
                 {/* Category Badge */}
                 <div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
-                  {post.category}
+                  {blog?.category?.categoryName}
                 </div>
               </div>
 
               {/* Post Content */}
               <div className="p-6 flex-1 flex flex-col justify-between">
                 <div className="flex items-center gap-3 text-xs text-gray-500 mb-3">
-                  <div className="flex items-center gap-1">
+                  {/* <div className="flex items-center gap-1">
                     <User className="w-3 h-3" />
-                    {post.author}
-                  </div>
+                    {blog?.author}
+                  </div> */}
                   <div className="flex items-center gap-1">
                     <Calendar className="w-3 h-3" />
-                    {post.date}
+                    {blog?.createdAt && new Date(blog.createdAt).toLocaleDateString(
+                      'en-US',
+                      { month: 'short', day: 'numeric', year: 'numeric' }
+                    )}
                   </div>
                   <div className="flex items-center gap-1">
                     <Clock className="w-3 h-3" />
-                    {post.readTime}
+                    5 min read
                   </div>
                 </div>
 
                 <div className="flex-1 flex flex-col">
                   <h3 className="font-merchant text-xl font-semibold text-gray-900 mb-3 leading-tight group-hover:text-primary transition-colors duration-200 line-clamp-2">
-                    {post.title}
+                    {blog?.blogTitle}
                   </h3>
 
-                  <p className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3">
-                    {post.excerpt}
-                  </p>
+                  <p
+                    className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3"
+                    dangerouslySetInnerHTML={{ __html: blog?.content }}
+                  />
+
 
                   {/* Tags */}
-                  <div className="flex flex-wrap gap-1 mb-4">
-                    {post.tags.slice(0, 2).map((tag, tagIndex) => (
+                  {/* <div className="flex flex-wrap gap-1 mb-4">
+                    {blog?.tags?.slice(0, 2).map((tag, tagIndex) => (
                       <span
                         key={tagIndex}
                         className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium"
@@ -241,12 +272,12 @@ export function MelbourneBlogs() {
                         {tag}
                       </span>
                     ))}
-                    {post.tags.length > 2 && (
+                    {blog?.tags?.length > 2 && (
                       <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">
-                        +{post.tags.length - 2}
+                        +{blog?.tags?.length - 2}
                       </span>
                     )}
-                  </div>
+                  </div> */}
                 </div>
 
                 <div className="flex items-center justify-between mt-auto">

src/components/MelbourneCardComparison.tsx

@@ -4,7 +4,6 @@ import { Button } from './ui/button';
 import { motion } from 'motion/react';
 import { useNavigate } from 'react-router';
 
-// const cardOptions = [
 //   {
 //     id: 'selective',
 //     name: 'Flexi Card',

src/components/Navbar.tsx

@@ -94,10 +94,8 @@ export default function Navbar({
 
   const baseUrl = import.meta.env.VITE_BASE_URL;
 
-  const protectedPaths = ["/passes", "/whats-included", "/", "/melbourne"];
-
   const handleOpenLoginModal = () => {
-    if (!user && protectedPaths.includes(location.pathname)) {
+    if (!user)  {
       setLoginOpen(true);
     }
     else if (!user) {
@@ -120,17 +118,17 @@ export default function Navbar({
         melbourneLabel: 'How It Works'
       },
       // Position 2
-      {
-        label: 'Magic Itinerary',
-        path: '/landing-magic-itinerary',
-        isShared: false
-      },
       // Position 3
       {
         label: 'Whats Included',
         path: '/whats-included',
         isShared: false
       },
+      {
+        label: 'Magic Itinerary',
+        path: '/landing-magic-itinerary',
+        isShared: false
+      },
       {
         label: 'FAQ',
         path: '/faq',
@@ -503,7 +501,7 @@ export default function Navbar({
       >
         <div className="">
           <motion.div
-            className={`w-full transition-all duration-500 ease-out px-8 py-4 bg-white backdrop-blur-[20px] border border-white/20 ${isScrolled
+            className={`w-full transition-all duration-500 ease-out px-3 py-3 bg-white backdrop-blur-[20px] border border-white/20 ${isScrolled
               ? 'shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.05)]'
               : 'shadow-lg shadow-black/5'
               }`}
@@ -529,7 +527,7 @@ export default function Navbar({
                         ? 'Melbourne CityCards Logo'
                         : 'CityCards Logo'
                     }
-                    className="h-14 w-auto"
+                    className="h-17 w-auto"
                   />
                 </Link>
               </motion.div>
@@ -613,27 +611,7 @@ export default function Navbar({
                   }
                 />
 
-                {/* Shopping Cart */}
-                {/* <Dropdown
-                  ref={cartRef}
-                  isOpen={activeCartDropdown}
-                  onToggle={() => setActiveCartDropdown(prev => !prev)}
-                  items={cartDropdownItems}
-                  title="Shopping Cart"
-                  trigger={
-                    <div className="relative text-gray-700 hover:text-gray-900 transition-colors duration-200 rounded-lg hover:bg-gray-50/50 cursor-pointer p-2">
-                      <ShoppingBag className="w-6 h-6" />
-                      <motion.div
-                        className="absolute -top-1 -right-1 w-5 h-5 bg-primary rounded-full flex items-center justify-center"
-                        animate={{ scale: [1, 1.1, 1] }}
-                        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
-                      >
-                        <span className="text-xs text-primary-foreground font-bold">{cartItems.length}</span>
-                      </motion.div>
-                    </div>
-                  }
-                /> */}
-                <ShoppingBag className="w-6 h-6" onClick={() => navigate("/cart")} />
+                <ShoppingBag className="w-6 h-6 cursor-pointer" onClick={() => navigate("/cart")} />
 
                 {/* Enhanced City Card Button with Source Tracking */}
                 <div className="flex items-center gap-3 pl-2">

src/components/PersonalizedTourHero.tsx

@@ -73,6 +73,7 @@ export function PersonalizedTourHero({ onCreateItineraryClick }: PersonalizedTou
   const nextCard = attractionCards[(currentCardIndex + 1) % attractionCards.length];
   const thirdCard = attractionCards[(currentCardIndex + 2) % attractionCards.length];
 
+  const cityName = localStorage.getItem("cityName")
   return (
     <div className="relative w-full min-h-[90vh] overflow-hidden flex items-center bg-gradient-to-br from-orange-50 via-white to-rose-50">
       {/* Gradient Background Elements */}
@@ -109,7 +110,7 @@ export function PersonalizedTourHero({ onCreateItineraryClick }: PersonalizedTou
                 >
                   <Wand2 className="w-5 h-5 text-primary drop-shadow-lg" />
                 </motion.div>
-                <span className="font-poppins font-semibold text-gray-800">AI-Powered Planning</span>
+                <span className="font-poppins font-semibold text-gray-800">Smart Planning</span>
                 <motion.div
                   className="w-1.5 h-1.5 bg-primary rounded-full"
                   animate={{
@@ -130,14 +131,14 @@ export function PersonalizedTourHero({ onCreateItineraryClick }: PersonalizedTou
               </h1>
 
               <p className="font-poppins text-lg md:text-xl font-normal leading-relaxed text-gray-600 mb-8">
-                Let AI craft a personalized journey tailored to your interests, timeline, and travel style. Get the perfect itinerary in minutes.
+                Craft a personalized journey tailored to your interests, timeline, and travel style. Get the perfect itinerary in minutes.
               </p>
 
               {/* Quick Features */}
               <div className="space-y-3 mb-8">
                 {[
-                  { icon: <Sparkles className="w-5 h-5" />, text: 'AI-powered smart suggestions' },
-                  { icon: <MapPin className="w-5 h-5" />, text: '40+ top Melbourne attractions' },
+                  { icon: <Sparkles className="w-5 h-5" />, text: 'Smart suggestions' },
+                  { icon: <MapPin className="w-5 h-5" />, text: `40+ top ${cityName} attractions` },
                   { icon: <Calendar className="w-5 h-5" />, text: 'Flexible & customizable plans' }
                 ].map((feature, index) => (
                   <motion.div
@@ -173,10 +174,10 @@ export function PersonalizedTourHero({ onCreateItineraryClick }: PersonalizedTou
                   <span className="relative z-10">Create My Itinerary</span>
                 </button>
 
-                <p className="font-poppins text-sm text-gray-600 font-normal flex items-center gap-2">
+                {/* <p className="font-poppins text-sm text-gray-600 font-normal flex items-center gap-2">
                   <Sparkles className="w-4 h-4 text-primary" />
                   <span>Free • Takes less than 2 minutes</span>
-                </p>
+                </p> */}
               </motion.div>
             </motion.div>
 

src/components/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+// ProtectedRoute.tsx
+import { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { LoginModal } from './LoginModal';
+import { useNavigate } from 'react-router-dom';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [isLoginOpen, setIsLoginOpen] = useState(!user);
+
+  if (!user) {
+    return (
+      <LoginModal
+        isOpen={isLoginOpen}
+        onClose={() => {
+          setIsLoginOpen(false);
+          navigate(-1);
+        }}
+      />
+    );
+  }
+
+  return <>{children}</>;
+}

src/components/RegisterPage.tsx

@@ -1,3 +1,4 @@
+//RegisterPage.tsx
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -8,9 +9,10 @@ import Navbar from './Navbar';
 import { Footer } from './Footer';
 import { useNavigate } from 'react-router-dom';
 import { Label } from './ui/label';
+import { useEffect } from 'react';
 
 export default function RegisterPage() {
-    const { login } = useAuth();
+    const { login, user } = useAuth();
     const email = localStorage.getItem("userEmail")
     const [formData, setFormData] = useState({
         firstName: '',
@@ -31,60 +33,75 @@ export default function RegisterPage() {
 
     const navigate = useNavigate()
 
+    useEffect(() => {
+        const pendingEmail = localStorage.getItem("userEmail");
+        if (user || !pendingEmail) {
+            navigate("/");
+        }
+    }, [user]);
+
     const [register, { isLoading: isRegistering }] = useRegisterMutation();
 
     const handleInputChange = (field: string, value: string) => {
         setFormData(prev => ({ ...prev, [field]: value }));
     };
 
-    const validateForm = () => {
-        // First Name
-        if (!formData.firstName.trim()) return toast.error('First name is required'), false;
-        if (!/^[A-Za-z]+$/.test(formData.firstName)) return toast.error('First name must contain only alphabets'), false;
-        if (formData.firstName.length < 2 || formData.firstName.length > 50) return toast.error('First name must be between 2 and 50 characters'), false;
+ const validateForm = () => {
+  // First Name
+  if (!formData.firstName.trim()) return toast.error('First name is required'), false;
+  if (/\s/.test(formData.firstName)) return toast.error('First name must not contain spaces'), false;
+  if (!/^[A-Za-z]+$/.test(formData.firstName)) return toast.error('First name must contain only letters (A–Z)'), false;
+  if (formData.firstName.length < 2 || formData.firstName.length > 50) return toast.error('First name must be between 2 and 50 characters'), false;
 
-        // Last Name
-        if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
-        if (!/^[A-Za-z]+$/.test(formData.lastName)) return toast.error('Last name must contain only alphabets'), false;
-        if (formData.lastName.length < 2 || formData.lastName.length > 50) return toast.error('Last name must be between 2 and 50 characters'), false;
+  // Last Name
+  if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
+  if (/\s/.test(formData.lastName)) return toast.error('Last name must not contain spaces'), false;
+  if (!/^[A-Za-z]+$/.test(formData.lastName)) return toast.error('Last name must contain only letters (A–Z)'), false;
+  if (formData.lastName.length < 2 || formData.lastName.length > 50) return toast.error('Last name must be between 2 and 50 characters'), false;
 
-        // Email
-        if (!formData.emailAddress.includes('@')) return toast.error('Invalid email address'), false;
+  // Email
+  if (!formData.emailAddress.trim()) return toast.error('Email address is required'), false;
+  if (!/\S+@\S+\.\S+/.test(formData.emailAddress)) return toast.error('Enter a valid email (e.g. name@example.com)'), false;
 
-        // ISD Code
-        if (!formData.isdCode.startsWith("+")) return toast.error("ISD code must start with '+'"), false;
-        if (!/^\+\d+$/.test(formData.isdCode)) return toast.error("ISD code must contain only numbers after '+'"), false;
+  // ISD
+  if (!formData.isdCode.trim()) return toast.error('ISD code is required'), false;
+  if (/\s/.test(formData.isdCode)) return toast.error('ISD code must not contain spaces'), false;
+  if (!formData.isdCode.startsWith('+')) return toast.error("ISD code must start with '+' (e.g. +91)"), false;
+  if (!/^\+\d+$/.test(formData.isdCode)) return toast.error("ISD code must contain only digits after '+'"), false;
 
-        // Mobile Number
-        if (!/^\d+$/.test(formData.mobileNumber)) return toast.error('Invalid mobile number'), false;
-        if (formData.mobileNumber.length < 7 || formData.mobileNumber.length > 15) return toast.error('Mobile number must be between 7 and 15 digits'), false;
+  // Phone
+  if (!formData.mobileNumber.trim()) return toast.error('Mobile number is required'), false;
+  if (/\s/.test(formData.mobileNumber)) return toast.error('Mobile number must not contain spaces'), false;
+  if (!/^\d+$/.test(formData.mobileNumber)) return toast.error('Mobile number must contain only digits (0–9)'), false;
+  if (formData.mobileNumber.length < 7 || formData.mobileNumber.length > 15) return toast.error('Mobile number must be between 7 and 15 digits'), false;
 
-        // Address Line 1
-        if (!formData.address1.trim()) return toast.error('Address required'), false;
-        if (!/^[A-Za-z0-9\s]+$/.test(formData.address1)) return toast.error('Address must be alphanumeric'), false;
-        if (formData.address1.length < 5 || formData.address1.length > 100) return toast.error('Address must be between 5 and 100 characters'), false;
+  // Address
+  if (!formData.address1.trim()) return toast.error('Address is required'), false;
+  if (!/^[A-Za-z0-9\s,\-.]+$/.test(formData.address1)) return toast.error('Address can only contain letters, numbers, spaces, commas, dots, and hyphens'), false;
+  if (formData.address1.length < 5 || formData.address1.length > 100) return toast.error('Address must be between 5 and 100 characters'), false;
 
-        // City
-        if (!formData.city.trim()) return toast.error('City required'), false;
-        if (!/^[A-Za-z\s]+$/.test(formData.city)) return toast.error('City must contain only alphabets'), false;
-        if (formData.city.length < 2 || formData.city.length > 50) return toast.error('City must be between 2 and 50 characters'), false;
+  // City
+  if (!formData.city.trim()) return toast.error('City is required'), false;
+  if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.city)) return toast.error('City can only contain letters and spaces'), false;
+  if (/\s{2,}/.test(formData.city)) return toast.error('City must not contain multiple consecutive spaces'), false;
 
-        // State
-        if (!formData.state.trim()) return toast.error('State required'), false;
-        if (!/^[A-Za-z\s]+$/.test(formData.state)) return toast.error('State must contain only alphabets'), false;
-        if (formData.state.length < 2 || formData.state.length > 50) return toast.error('State must be between 2 and 50 characters'), false;
+  // State
+  if (!formData.state.trim()) return toast.error('State is required'), false;
+  if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.state)) return toast.error('State can only contain letters and spaces'), false;
+  if (/\s{2,}/.test(formData.state)) return toast.error('State must not contain multiple consecutive spaces'), false;
 
-        // Country
-        if (!formData.country.trim()) return toast.error('Country required'), false;
-        if (!/^[A-Za-z\s]+$/.test(formData.country)) return toast.error('Country must contain only alphabets'), false;
-        if (formData.country.length < 2 || formData.country.length > 50) return toast.error('Country must be between 2 and 50 characters'), false;
+  // Country
+  if (!formData.country.trim()) return toast.error('Country is required'), false;
+  if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.country)) return toast.error('Country can only contain letters and spaces'), false;
 
-        // Postal Code
-        if (!/^\d+$/.test(formData.postalCode)) return toast.error('Postal code should only contain numbers'), false;
-        if (formData.postalCode.length < 4 || formData.postalCode.length > 10) return toast.error('Postal code must be between 4 and 10 digits'), false;
+  // Postal Code
+  if (!formData.postalCode.trim()) return toast.error('Postal code is required'), false;
+  if (/\s/.test(formData.postalCode)) return toast.error('Postal code must not contain spaces'), false;
+  if (!/^[A-Za-z0-9]+$/.test(formData.postalCode)) return toast.error('Postal code must contain only letters and numbers'), false;
+  if (formData.postalCode.length < 4 || formData.postalCode.length > 10) return toast.error('Postal code must be between 4 and 10 characters'), false;
 
-        return true;
-    };
+  return true;
+};
 
 
 

src/components/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}

src/components/TrustSection.tsx

@@ -204,7 +204,7 @@ export function TrustSection() {
                       style={{
                         transform: `rotate(${cardRotation}deg) translateY(${cardOffset}px)`,
                         transformOrigin: 'center center',
-                        minHeight: '480px',
+                        minHeight: '360px',
                         background: `
                           radial-gradient(circle at 20% 80%, rgba(255, 248, 235, 0.8) 0%, transparent 50%),
                           radial-gradient(circle at 80% 20%, rgba(250, 245, 230, 0.6) 0%, transparent 50%),

src/components/WhatsIncludedHero.tsx

@@ -100,7 +100,7 @@ export function WhatsIncludedHero({ onCreateItineraryClick }: WhatsIncludedHeroP
             >
               {/* Main Heading */}
               <h1 className="font-poppins text-4xl sm:text-5xl md:text-6xl w-full leading-tight mb-6">
-                <span className="font-light">One pass.</span>{' '}
+                <span className="font-light">One CityCard</span>{' '}
                 <span className="font-bold italic pr-2 bg-gradient-to-r from-primary via-orange-500 to-rose-500 bg-clip-text text-transparent">
                   Everything you
                 </span>{' '}

src/context/AuthContext.tsx

@@ -1,3 +1,4 @@
+// AuthContext.tsx
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom';
 

src/main.tsx

@@ -5,11 +5,13 @@ import "./index.css";
 import { Provider } from "react-redux";
 import { store } from "./Redux/Store";
 import { Toaster } from "sonner";
+import { ScrollToTop } from "./components/ScrollToTop";
 
 createRoot(document.getElementById("root")!).render(
   <Provider store={store}>
     <BrowserRouter>
       <Toaster position="top-right" richColors duration={2000} closeButton />
+      <ScrollToTop />
       <App />
     </BrowserRouter>
   </Provider>

src/pages/CheckoutPage.tsx

@@ -6,7 +6,7 @@ import {
 import Navbar from '../components/Navbar';
 import { Footer } from '../components/Footer';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useAddCardToCartMutation, useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
 import LoadingSpinner from '../components/LoadingSpinner';
 import { toast } from 'sonner';
@@ -187,9 +187,9 @@ function CheckoutConfigCard({
             if (bookingId) {
                 navigate(`/payment/${bookingId}`)
             } else {
-               throw new Error(response?.error?.data?.message)
+                throw new Error(response?.error?.data?.message)
             }
-        } catch (error:any) {
+        } catch (error: any) {
             toast.error(error.message);
         }
     }
@@ -307,6 +307,7 @@ export function CheckoutPage({
     currentPage,
 }: any) {
     const navigate = useNavigate();
+    const location = useLocation()
 
     // Default item (you can pass via props later)
     const baseUrl = import.meta.env.VITE_BASE_URL;
@@ -320,11 +321,12 @@ export function CheckoutPage({
     const flexiCard = checkoutPageData?.cards[0] ?? null
     const unlimitedCard = checkoutPageData?.cards[1] ?? null
     const attractions = checkoutPageData?.attractions ?? [];
-
-    const [checkoutItem, setCheckoutItem] = useState(flexiCard);
+    
+    const selectedCard = location.state?.selectedCard === "selective_pass" ? flexiCard : unlimitedCard
+    const [checkoutItem, setCheckoutItem] = useState(selectedCard);
 
     useEffect(() => {
-        setCheckoutItem(flexiCard)
+        setCheckoutItem(selectedCard)
     }, [cards])
 
     if (isLoading) {

src/pages/DiscoverPage.tsx

@@ -1,11 +1,12 @@
 import { ArrowRight, Check, CreditCard, DollarSign, MapPin, Palette, Sparkles, Ticket, Zap } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
-import { useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 import { Layout } from '../Layout';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
 import { MobileAppSection } from '../components/MobileAppSection';
 import { TrustSection } from '../components/TrustSection';
 import { Button } from '../components/ui/button';
+import { useNavigate } from 'react-router-dom';
 
 interface User {
     email: string;
@@ -68,6 +69,8 @@ export function DiscoverPage({
     const [direction, setDirection] = useState(0);
     const [activeStep, setActiveStep] = useState(0);
 
+    const navigate =useNavigate();
+
     const handleStepInView = (index: number) => {
         setActiveStep(index);
     };
@@ -687,8 +690,8 @@ export function DiscoverPage({
                                 </div>
 
                                 <Button
-                                    onClick={onPassesClick}
-                                    className="w-full py-6 rounded-full font-poppins font-semibold text-lg bg-gray-900 hover:bg-black text-white transition-all duration-300"
+                                    onClick={()=>navigate('/passes')}
+                                    className="cursor-pointer w-full py-6 rounded-full font-poppins font-semibold text-lg bg-gray-900 hover:bg-black text-white transition-all duration-300"
                                 >
                                     VIEW FLEXI OPTIONS
                                 </Button>
@@ -743,8 +746,8 @@ export function DiscoverPage({
                                 </div>
 
                                 <Button
-                                    onClick={onPassesClick}
-                                    className="w-full py-6 rounded-full font-poppins font-semibold text-lg bg-primary hover:bg-primary/90 text-white transition-all duration-300"
+                                    onClick={()=>navigate('/passes')}
+                                    className=" cursor-pointer w-full py-6 rounded-full font-poppins font-semibold text-lg bg-primary hover:bg-primary/90 text-white transition-all duration-300"
                                 >
                                     VIEW UNLIMITED OPTIONS
                                 </Button>

src/pages/ItinerarySummaryPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import {
     MapPin,
@@ -7,11 +7,12 @@ import {
     Share2,
     Download,
     ChevronRight,
+    Loader2,
 } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { Card, CardContent } from '../components/ui/card';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
-import { useCreateMagicItineraryMutation, useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service';
+import { useDownloadItineraryQuery, useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service';
 import { toast } from 'sonner';
 import { useNavigate, useParams } from 'react-router-dom';
 import Navbar from '../components/Navbar';
@@ -26,6 +27,37 @@ const ItinerarySummaryPage = () => {
 
     const { itineraryId } = useParams()
     const { data: itineraryDetails, isLoading: itineraryDetailsLoading } = useGetItineraryDetailsByIdQuery(itineraryId);
+    // Download logic using standard query with manual trigger
+    const [shouldDownload, setShouldDownload] = useState(false);
+    const { data: pdfBlob, isFetching: isDownloading, refetch } = useDownloadItineraryQuery
+        (itineraryId!, {
+            skip: !shouldDownload || !itineraryId,
+        });
+
+    useEffect(() => {
+        if (shouldDownload && pdfBlob) {
+            // Create download link
+            const url = window.URL.createObjectURL(pdfBlob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `itinerary-${itineraryId}.pdf`;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            window.URL.revokeObjectURL(url);
+            toast.success('Itinerary downloaded successfully!');
+            setShouldDownload(false); // reset trigger
+        }
+    }, [pdfBlob, shouldDownload, itineraryId]);
+
+    const handleDownloadItinerary = useCallback(() => {
+        if (!itineraryId) {
+            toast.error('Itinerary ID not found');
+            return;
+        }
+        setShouldDownload(true);
+        refetch(); // manually trigger the download query
+    }, [itineraryId, refetch]);
 
     const generatedItinerary = itineraryDetails ?? null;
     const days = generatedItinerary?.days ?? [];
@@ -35,305 +67,312 @@ const ItinerarySummaryPage = () => {
 
 
     return (
-         <div className="min-h-screen bg-background">
-      {/* Navbar */}
-      <Navbar
-      />
-        <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="space-y-8 max-w-3xl mx-auto mt-25"
-        >
-            {/* Title */}
-            <div className="text-center space-y-1">
-                <h1 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight">
-                    <span className="font-normal">Your</span>
-                </h1>
-                <h1 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight">
-                    <span className="font-bold text-primary italic">{generatedItinerary?.title}</span>
-                </h1>
-            </div>
+        <div className="min-h-screen bg-background">
+            {/* Navbar */}
+            <Navbar
+            />
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="space-y-8 max-w-3xl mx-auto mt-25"
+            >
+                {/* Title */}
+                <div className="text-center space-y-1">
+                    <h1 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight">
+                        <span className="font-normal">Your</span>
+                    </h1>
+                    <h1 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight">
+                        <span className="font-bold text-primary italic">{generatedItinerary?.title}</span>
+                    </h1>
+                </div>
 
-            {/* Trip Details Card */}
-            <div className="relative overflow-hidden rounded-2xl border border-gray-100 shadow-sm">
-                {/* Background Image */}
-                <div className="relative h-40 md:h-48">
-                    <ImageWithFallback
-                        src={generatedItinerary?.cityBanner}
-                        alt={generatedItinerary?.city}
-                        className="w-full h-full object-cover"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
-                    <div className="absolute bottom-4 left-5 right-5">
-                        <p className="font-poppins text-xs font-medium text-white/70 uppercase tracking-wider mb-1">Your Trip</p>
-                        <h3 className="font-merchant text-2xl md:text-3xl text-white leading-snug font-semibold">{generatedItinerary?.city}</h3>
+                {/* Trip Details Card */}
+                <div className="relative overflow-hidden rounded-2xl border border-gray-100 shadow-sm">
+                    {/* Background Image */}
+                    <div className="relative h-40 md:h-48">
+                        <ImageWithFallback
+                            src={generatedItinerary?.cityBanner}
+                            alt={generatedItinerary?.city}
+                            className="w-full h-full object-cover"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+                        <div className="absolute bottom-4 left-5 right-5">
+                            <p className="font-poppins text-xs font-medium text-white/70 uppercase tracking-wider mb-1">Your Trip</p>
+                            <h3 className="font-merchant text-2xl md:text-3xl text-white leading-snug font-semibold">{generatedItinerary?.city}</h3>
+                        </div>
+                    </div>
+                    {/* Stats Row */}
+                    <div className="grid grid-cols-3 divide-x divide-gray-100 bg-white">
+                        <div className="flex flex-col items-center py-4">
+                            <span className="font-merchant text-2xl text-primary">{generatedItinerary?.totalDays}</span>
+                            <span className="font-poppins text-xs font-normal text-gray-500 mt-0.5">Days</span>
+                        </div>
+                        <div className="flex flex-col items-center py-4">
+                            <span className="font-merchant text-2xl text-primary">{generatedItinerary?.totalStops}</span>
+                            <span className="font-poppins text-xs font-normal text-gray-500 mt-0.5">Stops</span>
+                        </div>
+                        <div className="flex flex-col items-center py-4">
+                            <span className="font-merchant text-2xl text-primary">{generatedItinerary?.days[0]?.date}</span>
+                            <span className="font-poppins text-xs font-normal text-gray-500 mt-0.5">Start Date</span>
+                        </div>
                     </div>
                 </div>
-                {/* Stats Row */}
-                <div className="grid grid-cols-3 divide-x divide-gray-100 bg-white">
-                    <div className="flex flex-col items-center py-4">
-                        <span className="font-merchant text-2xl text-primary">{generatedItinerary?.totalDays}</span>
-                        <span className="font-poppins text-xs font-normal text-gray-500 mt-0.5">Days</span>
-                    </div>
-                    <div className="flex flex-col items-center py-4">
-                        <span className="font-merchant text-2xl text-primary">{generatedItinerary?.totalStops}</span>
-                        <span className="font-poppins text-xs font-normal text-gray-500 mt-0.5">Stops</span>
-                    </div>
-                    <div className="flex flex-col items-center py-4">
-                        <span className="font-merchant text-2xl text-primary">{generatedItinerary?.days[0]?.date}</span>
-                        <span className="font-poppins text-xs font-normal text-gray-500 mt-0.5">Start Date</span>
-                    </div>
-                </div>
-            </div>
 
-            {/* Share & Download Buttons */}
-            <div className="flex gap-3">
-                <Button
-                    variant="outline"
-                    className="flex-1 border-2 border-primary/20 text-primary hover:bg-primary/5 font-poppins font-medium rounded-xl py-3"
-                >
-                    <Share2 className="w-4 h-4 mr-2" />
-                    Share
-                </Button>
-                <Button
-                    variant="outline"
-                    className="flex-1 border-2 border-primary/20 text-primary hover:bg-primary/5 font-poppins font-medium rounded-xl py-3"
-                >
-                    <Download className="w-4 h-4 mr-2" />
-                    Download
-                </Button>
-            </div>
-
-            {/* View Toggle */}
-            <div className="flex justify-center">
-                <div className="bg-gray-100 p-1 rounded-full inline-flex">
-                    <button
-                        onClick={() => setViewMode('daily')}
-                        className={`px-6 py-2.5 rounded-full font-poppins font-medium text-sm transition-all ${viewMode === 'daily'
-                            ? 'bg-white shadow-sm text-gray-900'
-                            : 'text-gray-500 hover:text-gray-700'
-                            }`}
+                {/* Share & Download Buttons */}
+                <div className="flex gap-3">
+                    <Button
+                        variant="outline"
+                        className="flex-1 border-2 border-primary/20 text-primary hover:bg-primary/5 font-poppins font-medium rounded-xl py-3"
                     >
-                        Daily View
-                    </button>
-                    <button
-                        onClick={() => setViewMode('summary')}
-                        className={`px-6 py-2.5 rounded-full font-poppins font-medium text-sm transition-all ${viewMode === 'summary'
-                            ? 'bg-white shadow-sm text-gray-900'
-                            : 'text-gray-500 hover:text-gray-700'
-                            }`}
+                        <Share2 className="w-4 h-4 mr-2" />
+                        Share
+                    </Button>
+                    <Button
+                        onClick={handleDownloadItinerary}
+                        disabled={isDownloading}
+                        variant="outline"
+                        className="flex-1 border-2 border-primary/20 text-primary hover:bg-primary/5 font-poppins font-medium rounded-xl py-3"
                     >
-                        Summary
-                    </button>
-                </div>
-            </div>
-
-            {/* Daily View */}
-            {viewMode === 'daily' && (
-                <div className="space-y-6">
-                    {/* Day Tabs */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2">
-                        {days?.map((day: any) => (
-                            <button
-                                key={day.dayNumber}
-                                onClick={() => setSelectedDayTab(day.dayNumber)}
-                                className={`px-5 py-2.5 rounded-xl whitespace-nowrap font-poppins text-base transition-all ${selectedDayTab === day.dayNumber
-                                    ? 'text-primary font-semibold bg-primary/10 border border-primary/20'
-                                    : 'text-gray-400 font-medium hover:text-gray-600'
-                                    }`}
-                            >
-                                Day {day.dayNumber}
-                            </button>
-                        ))}
-                        {days?.length > 4 && (
-                            <button className="p-2 text-gray-400 hover:text-gray-600">
-                                <ChevronRight className="w-4 h-4" />
-                            </button>
+                        {isDownloading ? (
+                            <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                        ) : (
+                            <Download className="w-5 h-5 mr-2" />
                         )}
-                    </div>
 
-                    {/* Activities for selected day */}
-                    {selectedDayPlan && (
-                        <AnimatePresence mode="wait">
-                            <motion.div key={`day-${selectedDayTab}`} initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -10 }} transition={{ duration: 0.3 }} className="space-y-8">
-                                {selectedDayPlan?.items?.map((activity: any, actIndex: number) => {
-                                    const activityKey = `day${selectedDayPlan.day}-act${actIndex}`;
-
-                                    return (
-                                        <motion.div
-                                            key={actIndex}
-                                            initial={{ opacity: 0, y: 20 }}
-                                            animate={{ opacity: 1, y: 0 }}
-                                            transition={{ duration: 0.4, delay: actIndex * 0.08 }}
-                                            className="space-y-4"
-                                        >
-                                            {/* Time Label */}
-                                            <p className="font-poppins text-sm font-medium text-gray-500 text-center uppercase tracking-wider">
-                                                {activity.timeSlot}
-                                            </p>
-
-                                            {/* Activity Card */}
-                                            <Card className="overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-shadow duration-300 rounded-2xl">
-                                                <CardContent className="p-0">
-                                                    {/* Image */}
-                                                    <div className="relative h-56 md:h-64 bg-gray-200">
-                                                        <ImageWithFallback
-                                                            src={activity.imageUrl}
-                                                            alt={activity.title}
-                                                            className="w-full h-full object-cover"
-                                                        />
-
-                                                        {/* TODO: Get Directions Badge redirect it to lat,long */}
-                                                        <div className="absolute bottom-3 left-3">
-                                                            <button className="flex items-center gap-1.5 bg-primary text-white px-4 py-2 rounded-full font-poppins text-xs font-semibold shadow-lg">
-                                                                <MapPin className="w-3.5 h-3.5" />
-                                                                Get Directions
-                                                            </button>
-                                                        </div>
-                                                    </div>
-
-                                                    {/* Content */}
-                                                    <div className="p-5 space-y-3">
-                                                        <h4 className="font-poppins text-lg font-semibold text-gray-900 leading-snug">
-                                                            {activity.title}
-                                                        </h4>
-                                                        <p className="font-poppins text-sm font-normal text-gray-500 leading-relaxed">
-                                                            {activity.locationName}
-                                                        </p>
-
-                                                        {/* Category Tags */}
-                                                        <div className="flex flex-wrap gap-2">
-                                                            {activity.categories?.map((cat: string, ci: number) => (
-                                                                <span
-                                                                    key={ci}
-                                                                    className="font-poppins text-xs font-medium px-3 py-1.5 rounded-full border border-primary/20 text-primary bg-primary/5"
-                                                                >
-                                                                    {cat}
-                                                                </span>
-                                                            ))}
-                                                        </div>
-
-                                                        {/* Bullet Points */}
-                                                        <div className="space-y-1.5 pt-1">
-
-                                                            <div className="flex items-baseline gap-2">
-                                                                <span className="text-primary flex-shrink-0 text-sm leading-relaxed">•</span>
-                                                                <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">{activity.description}</span>
-                                                            </div>
-
-                                                        </div>
-                                                    </div>
-                                                </CardContent>
-                                            </Card>
-                                        </motion.div>
-                                    );
-                                })}
-                            </motion.div>
-                        </AnimatePresence>
-                    )}
+                        Download
+                    </Button>
                 </div>
-            )}
 
-            {/* Summary View */}
-            {viewMode === 'summary' && (
-                <div className="space-y-6">
-                    {days?.map((day: any, dayIndex: number) => {
-                        const dayDate = days[0]?.date
-                            ? new Date(
-                                new Date(days[0].date).setDate(
-                                    new Date(days[0].date).getDate() + dayIndex
-                                )
-                            ).toLocaleDateString('en-AU', {
-                                day: '2-digit',
-                                month: '2-digit',
-                                year: 'numeric',
-                            })
-                            : '';
+                {/* View Toggle */}
+                <div className="flex justify-center">
+                    <div className="bg-gray-100 p-1 rounded-full inline-flex">
+                        <button
+                            onClick={() => setViewMode('daily')}
+                            className={`px-6 py-2.5 rounded-full font-poppins font-medium text-sm transition-all ${viewMode === 'daily'
+                                ? 'bg-white shadow-sm text-gray-900'
+                                : 'text-gray-500 hover:text-gray-700'
+                                }`}
+                        >
+                            Daily View
+                        </button>
+                        <button
+                            onClick={() => setViewMode('summary')}
+                            className={`px-6 py-2.5 rounded-full font-poppins font-medium text-sm transition-all ${viewMode === 'summary'
+                                ? 'bg-white shadow-sm text-gray-900'
+                                : 'text-gray-500 hover:text-gray-700'
+                                }`}
+                        >
+                            Summary
+                        </button>
+                    </div>
+                </div>
 
-                        // ✅ Find the matching summary for this day
-                        const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber);
+                {/* Daily View */}
+                {viewMode === 'daily' && (
+                    <div className="space-y-6">
+                        {/* Day Tabs */}
+                        <div className="flex items-center gap-2 overflow-x-auto pb-2">
+                            {days?.map((day: any) => (
+                                <button
+                                    key={day.dayNumber}
+                                    onClick={() => setSelectedDayTab(day.dayNumber)}
+                                    className={`px-5 py-2.5 rounded-xl whitespace-nowrap font-poppins text-base transition-all ${selectedDayTab === day.dayNumber
+                                        ? 'text-primary font-semibold bg-primary/10 border border-primary/20'
+                                        : 'text-gray-400 font-medium hover:text-gray-600'
+                                        }`}
+                                >
+                                    Day {day.dayNumber}
+                                </button>
+                            ))}
+                            {days?.length > 4 && (
+                                <button className="p-2 text-gray-400 hover:text-gray-600">
+                                    <ChevronRight className="w-4 h-4" />
+                                </button>
+                            )}
+                        </div>
 
-                        return (
-                            <div key={dayIndex} className="border-l-4 border-primary/20 pl-5 space-y-3">
-                                {/* Day Header */}
-                                <div className="flex items-center justify-between">
-                                    <h3 className="font-poppins text-lg font-semibold text-gray-900">
-                                        Day {day.dayNumber}:
-                                    </h3>
-                                    <div className="flex items-center gap-1.5 text-primary">
-                                        <Calendar className="w-3.5 h-3.5" />
-                                        <span className="font-poppins text-sm font-medium">{dayDate}</span>
-                                    </div>
-                                </div>
-
-                                {/* Activity List */}
-                                <div className="space-y-2">
-                                    {daySummary?.items?.map((item: any, actIndex: number) => {
-                                        const activityKey = `summary-day${day.dayNumber}-act${actIndex}`;
-                                        const isExpanded = selectedActivity === activityKey;
+                        {/* Activities for selected day */}
+                        {selectedDayPlan && (
+                            <AnimatePresence mode="wait">
+                                <motion.div key={`day-${selectedDayTab}`} initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -10 }} transition={{ duration: 0.3 }} className="space-y-8">
+                                    {selectedDayPlan?.items?.map((activity: any, actIndex: number) => {
+                                        const activityKey = `day${selectedDayPlan.day}-act${actIndex}`;
 
                                         return (
-                                            <div key={actIndex} className="bg-gray-50 rounded-xl overflow-hidden">
-                                                <div
-                                                    className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-100 transition-colors"
-                                                    onClick={() =>
-                                                        setSelectedActivity(isExpanded ? null : activityKey)
-                                                    }
-                                                >
-                                                    <p className="font-poppins text-sm font-medium text-gray-800">
-                                                        {item.timeSlot}: {item.title}
-                                                    </p>
-                                                    <ChevronDown
-                                                        className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-                                                    />
-                                                </div>
+                                            <motion.div
+                                                key={actIndex}
+                                                initial={{ opacity: 0, y: 20 }}
+                                                animate={{ opacity: 1, y: 0 }}
+                                                transition={{ duration: 0.4, delay: actIndex * 0.08 }}
+                                                className="space-y-4"
+                                            >
+                                                {/* Time Label */}
+                                                <p className="font-poppins text-sm font-medium text-gray-500 text-center uppercase tracking-wider">
+                                                    {activity.timeSlot}
+                                                </p>
 
-                                                <AnimatePresence>
-                                                    {isExpanded && (
-                                                        <motion.div
-                                                            initial={{ height: 0, opacity: 0 }}
-                                                            animate={{ height: 'auto', opacity: 1 }}
-                                                            exit={{ height: 0, opacity: 0 }}
-                                                            transition={{ duration: 0.3, ease: 'easeInOut' }}
-                                                        >
-                                                            <div className="px-4 pb-4 space-y-2">
-                                                                <div className="flex items-baseline gap-2">
-                                                                    <span className="text-primary flex-shrink-0 text-sm leading-relaxed">•</span>
-                                                                    <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
-                                                                        {item.description}
-                                                                    </span>
-                                                                </div>
-                                                                <button className="flex items-center gap-1.5 mt-2 bg-primary text-white px-4 py-2 rounded-full font-poppins text-xs font-semibold">
+                                                {/* Activity Card */}
+                                                <Card className="overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-shadow duration-300 rounded-2xl">
+                                                    <CardContent className="p-0">
+                                                        {/* Image */}
+                                                        <div className="relative h-56 md:h-64 bg-gray-200">
+                                                            <ImageWithFallback
+                                                                src={activity.imageUrl}
+                                                                alt={activity.title}
+                                                                className="w-full h-full object-cover"
+                                                            />
+
+                                                            {/* TODO: Get Directions Badge redirect it to lat,long */}
+                                                            <div className="absolute bottom-3 left-3">
+                                                                <button className="flex items-center gap-1.5 bg-primary text-white px-4 py-2 rounded-full font-poppins text-xs font-semibold shadow-lg">
                                                                     <MapPin className="w-3.5 h-3.5" />
-                                                                    Get directions
+                                                                    Get Directions
                                                                 </button>
                                                             </div>
-                                                        </motion.div>
-                                                    )}
-                                                </AnimatePresence>
-                                            </div>
+                                                        </div>
+
+                                                        {/* Content */}
+                                                        <div className="p-5 space-y-3">
+                                                            <h4 className="font-poppins text-lg font-semibold text-gray-900 leading-snug">
+                                                                {activity.title}
+                                                            </h4>
+                                                            <p className="font-poppins text-sm font-normal text-gray-500 leading-relaxed">
+                                                                {activity.locationName}
+                                                            </p>
+
+                                                            {/* Category Tags */}
+                                                            <div className="flex flex-wrap gap-2">
+                                                                {activity.categories?.map((cat: string, ci: number) => (
+                                                                    <span
+                                                                        key={ci}
+                                                                        className="font-poppins text-xs font-medium px-3 py-1.5 rounded-full border border-primary/20 text-primary bg-primary/5"
+                                                                    >
+                                                                        {cat}
+                                                                    </span>
+                                                                ))}
+                                                            </div>
+
+                                                            {/* Bullet Points */}
+                                                            <div className="space-y-1.5 pt-1">
+
+                                                                <div className="flex items-baseline gap-2">
+                                                                    <span className="text-primary flex-shrink-0 text-sm leading-relaxed">•</span>
+                                                                    <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">{activity.description}</span>
+                                                                </div>
+
+                                                            </div>
+                                                        </div>
+                                                    </CardContent>
+                                                </Card>
+                                            </motion.div>
                                         );
                                     })}
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            )}
+                                </motion.div>
+                            </AnimatePresence>
+                        )}
+                    </div>
+                )}
 
-            {/* Bottom Action */}
-            <div className="flex justify-center pt-4 pb-8">
-                <Button
-                    onClick={() => navigate('/create-itinerary')}
-                    className="w-full font-poppins font-semibold px-8 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white shadow-md shadow-primary/20"
-                >
-                    Create Another Itinerary
-                </Button>
-            </div>
-        </motion.div>
-         <Footer
-              />
-            </div>
+                {/* Summary View */}
+                {viewMode === 'summary' && (
+                    <div className="space-y-6">
+                        {days?.map((day: any, dayIndex: number) => {
+                            const dayDate = days[0]?.date
+                                ? new Date(
+                                    new Date(days[0].date).setDate(
+                                        new Date(days[0].date).getDate() + dayIndex
+                                    )
+                                ).toLocaleDateString('en-AU', {
+                                    day: '2-digit',
+                                    month: '2-digit',
+                                    year: 'numeric',
+                                })
+                                : '';
+
+                            // ✅ Find the matching summary for this day
+                            const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber);
+
+                            return (
+                                <div key={dayIndex} className="border-l-4 border-primary/20 pl-5 space-y-3">
+                                    {/* Day Header */}
+                                    <div className="flex items-center justify-between">
+                                        <h3 className="font-poppins text-lg font-semibold text-gray-900">
+                                            Day {day.dayNumber}:
+                                        </h3>
+                                        <div className="flex items-center gap-1.5 text-primary">
+                                            <Calendar className="w-3.5 h-3.5" />
+                                            <span className="font-poppins text-sm font-medium">{dayDate}</span>
+                                        </div>
+                                    </div>
+
+                                    {/* Activity List */}
+                                    <div className="space-y-2">
+                                        {daySummary?.items?.map((item: any, actIndex: number) => {
+                                            const activityKey = `summary-day${day.dayNumber}-act${actIndex}`;
+                                            const isExpanded = selectedActivity === activityKey;
+
+                                            return (
+                                                <div key={actIndex} className="bg-gray-50 rounded-xl overflow-hidden">
+                                                    <div
+                                                        className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-100 transition-colors"
+                                                        onClick={() =>
+                                                            setSelectedActivity(isExpanded ? null : activityKey)
+                                                        }
+                                                    >
+                                                        <p className="font-poppins text-sm font-medium text-gray-800">
+                                                            {item.timeSlot}: {item.title}
+                                                        </p>
+                                                        <ChevronDown
+                                                            className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                                                        />
+                                                    </div>
+
+                                                    <AnimatePresence>
+                                                        {isExpanded && (
+                                                            <motion.div
+                                                                initial={{ height: 0, opacity: 0 }}
+                                                                animate={{ height: 'auto', opacity: 1 }}
+                                                                exit={{ height: 0, opacity: 0 }}
+                                                                transition={{ duration: 0.3, ease: 'easeInOut' }}
+                                                            >
+                                                                <div className="px-4 pb-4 space-y-2">
+                                                                    <div className="flex items-baseline gap-2">
+                                                                        <span className="text-primary flex-shrink-0 text-sm leading-relaxed">•</span>
+                                                                        <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
+                                                                            {item.description}
+                                                                        </span>
+                                                                    </div>
+                                                                    <button className="flex items-center gap-1.5 mt-2 bg-primary text-white px-4 py-2 rounded-full font-poppins text-xs font-semibold">
+                                                                        <MapPin className="w-3.5 h-3.5" />
+                                                                        Get directions
+                                                                    </button>
+                                                                </div>
+                                                            </motion.div>
+                                                        )}
+                                                    </AnimatePresence>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+
+                {/* Bottom Action */}
+                <div className="flex justify-center pt-4 pb-8">
+                    <Button
+                        onClick={() => navigate('/create-itinerary')}
+                        className="w-full font-poppins font-semibold px-8 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white shadow-md shadow-primary/20"
+                    >
+                        Create Another Itinerary
+                    </Button>
+                </div>
+            </motion.div>
+            <Footer
+            />
+        </div>
     );
 }
 

src/pages/MagicItineraryPage.tsx

@@ -75,6 +75,7 @@ export function MagicItineraryPage({
     currentPage,
     user
 }: MagicItineraryPageProps) {
+    const cityName = localStorage.getItem("cityName") || "your city";
     return (
 
         <Layout activeCity="Landingpage" onSignInClick={onSignInClick} onSignOutClick={onSignOutClick} user={user}>
@@ -190,7 +191,7 @@ export function MagicItineraryPage({
                                             </h3>
                                         </div>
                                         <p className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
-                                            A perfectly planned Melbourne adventure
+                                            A perfectly planned {cityName} adventure
                                         </p>
                                     </div>
 

src/pages/PassesPage.tsx

@@ -156,20 +156,19 @@ export function PassesPage({
 
   const navigate = useNavigate()
   const cityId = localStorage.getItem("cityId")
+  const cityName = localStorage.getItem("cityName")
 
   const { data: cityDetails, isLoading: loadingCityDetails } = useGetSelectedCityDetailsQuery(cityId)
   const cards = cityDetails?.city?.cards ?? []
-  console.log(cards)
 
   if (loadingCityDetails) {
     return (<LoadingSpinner />)
   }
 
-
-  const handleCheckoutClick = () => {
+  const handleCheckoutClick = (cardTypeName:string) => {
     console.log('Proceeding to checkout for user:', user);
     // Add your checkout logic here
-    navigate('/checkout');
+    navigate('/checkout', { state: { selectedCard: cardTypeName } });
   };
 
   const handleSignInClick = () => {
@@ -282,7 +281,7 @@ export function PassesPage({
                         ? "bg-primary hover:bg-primary/90 text-white hover:shadow-lg"
                         : "bg-gray-400 hover:bg-gray-400 text-white hover:shadow-md"
                         }`}
-                      onClick={user ? handleCheckoutClick : handleSignInClick}
+                      onClick={() => user ? handleCheckoutClick(cards[0]?.cardType?.cardTypeName) : handleSignInClick}
                       disabled={selectedPass !== passTypes[0].id}
 
                     >
@@ -372,7 +371,7 @@ export function PassesPage({
                         }`}
                       disabled={selectedPass !== passTypes[1].id}
 
-                      onClick={user ? handleCheckoutClick : handleSignInClick}
+                      onClick={() => user ? handleCheckoutClick(cards[1]?.cardType?.cardTypeName) : handleSignInClick}
 
                     >
                       {user ? 'PURCHASE NOW' : 'LOGIN TO BUY PASS'}
@@ -415,7 +414,7 @@ export function PassesPage({
                       <Clock className="w-7 h-7" strokeWidth={1.5} />
                     </div>
                     <div className="flex-1 w-full">
-                      <h3 className="font-merchant text-2xl text-gray-900 mb-3">Calendar Days Policy</h3>
+                      <h3 className="font-merchant text-xl text-gray-900 mb-3">Calendar Days Policy</h3>
                       <p className="font-poppins text-gray-600 leading-relaxed mb-6">
                         Unlimited passes work on a <span className="font-medium text-gray-900">consecutive calendar day basis</span>, not 24-hour periods. Your pass expires at 11:59 PM on your final day.
                       </p>
@@ -452,7 +451,7 @@ export function PassesPage({
                       <Shield className="w-7 h-7" strokeWidth={1.5} />
                     </div>
                     <div className="flex-1">
-                      <h3 className="font-merchant text-2xl text-gray-900 mb-3">60-Minute Adventure Gap</h3>
+                      <h3 className="font-merchant text-xl text-gray-900 mb-3">60-Minute Adventure Gap</h3>
                       <p className="font-poppins text-gray-600 leading-relaxed">
                         To keep the journey smooth for everyone, there's a simple <span className="font-medium text-gray-900">60-minute wait</span> between scanning your pass at attractions.
                       </p>
@@ -597,7 +596,7 @@ export function PassesPage({
                               </div>
                               <div>
                                 <h3 className="text-white font-semibold text-lg">CityCards</h3>
-                                <p className="text-white/70 text-sm">Melbourne Explorer</p>
+                                <p className="text-white/70 text-sm">{cityName} Explorer</p>
                               </div>
                             </div>
                           </div>
@@ -770,7 +769,7 @@ export function PassesPage({
             <h3 className="heading-dynamic text-4xl mb-4">
               <span className="font-light">Ready to</span>{' '}
               <span className="font-bold italic text-emphasis">explore</span>{' '}
-              <span className="font-semibold">Melbourne?</span>
+              <span className="font-semibold">{cityName}?</span>
             </h3>
             <p className="text-xl mb-8 max-w-2xl mx-auto opacity-90 font-light">
               Choose your pass and start discovering amazing attractions with skip-the-line access.

src/pages/PaymentDetailsPage.tsx

@@ -230,25 +230,57 @@ export function PaymentDetailsPage({
 
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const validate = () => {
-    const e: Record<string, string> = {};
-    if (selectedTab === 'gift') {
-      if (!giftFirstName.trim()) e.giftFirstName = 'Required';
-      if (!giftLastName.trim()) e.giftLastName = 'Required';
-      if (!giftIsd.trim()) e.giftIsd = 'Required';
-      if (!giftMessage.trim()) e.giftMessage = 'Required';
-      if (!giftEmail.trim() || !/\S+@\S+\.\S+/.test(giftEmail)) {
-        e.giftEmail = 'Valid email required';
-      }
-      if (!giftPhone.trim() || !/^\+?[0-9]{7,15}$/.test(giftPhone)) {
-        e.giftPhone = 'Valid phone required';
-      }
-      if (!giftCity.trim()) e.giftCity = 'Required';
-      if (!giftCountry.trim()) e.giftCountry = 'Required';
-    }
-    return e;
-  };
+const validate = () => {
+  const e: Record<string, string> = {};
 
+  if (selectedTab === 'gift') {
+    // First Name
+    if (!giftFirstName.trim()) e.giftFirstName = 'First name is required';
+    else if (/\s/.test(giftFirstName)) e.giftFirstName = 'First name must not contain spaces';
+    else if (!/^[A-Za-z]+$/.test(giftFirstName)) e.giftFirstName = 'First name must contain only letters (A–Z)';
+    else if (giftFirstName.length < 2 || giftFirstName.length > 50) e.giftFirstName = 'First name must be between 2 and 50 characters';
+
+    // Last Name
+    if (!giftLastName.trim()) e.giftLastName = 'Last name is required';
+    else if (/\s/.test(giftLastName)) e.giftLastName = 'Last name must not contain spaces';
+    else if (!/^[A-Za-z]+$/.test(giftLastName)) e.giftLastName = 'Last name must contain only letters (A–Z)';
+    else if (giftLastName.length < 2 || giftLastName.length > 50) e.giftLastName = 'Last name must be between 2 and 50 characters';
+
+    // ISD Code
+    if (!giftIsd.trim()) e.giftIsd = 'ISD code is required';
+    else if (/\s/.test(giftIsd)) e.giftIsd = 'ISD code must not contain spaces';
+    else if (!giftIsd.startsWith('+')) e.giftIsd = "ISD code must start with '+' (e.g. +91)";
+    else if (!/^\+\d+$/.test(giftIsd)) e.giftIsd = "ISD code must contain only digits after '+'";
+
+    // Email
+    if (!giftEmail.trim()) e.giftEmail = 'Email address is required';
+    else if (!/\S+@\S+\.\S+/.test(giftEmail)) e.giftEmail = 'Enter a valid email (e.g. name@example.com)';
+
+    // Phone
+    if (!giftPhone.trim()) e.giftPhone = 'Phone number is required';
+    else if (/\s/.test(giftPhone)) e.giftPhone = 'Phone number must not contain spaces';
+    else if (!/^\d+$/.test(giftPhone)) e.giftPhone = 'Phone number must contain only digits (0–9)';
+    else if (giftPhone.length < 7 || giftPhone.length > 15) e.giftPhone = 'Phone number must be between 7 and 15 digits';
+
+    // Message
+    if (!giftMessage.trim()) e.giftMessage = 'Message is required';
+    else if (giftMessage.length < 5) e.giftMessage = 'Message must be at least 5 characters long';
+    else if (giftMessage.length > 500) e.giftMessage = 'Message must not exceed 500 characters';
+
+    // City
+    if (!giftCity.trim()) e.giftCity = 'City is required';
+    else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(giftCity)) e.giftCity = 'City can only contain letters and spaces';
+    else if (/\s{2,}/.test(giftCity)) e.giftCity = 'City must not contain multiple consecutive spaces';
+    else if (giftCity.length < 2 || giftCity.length > 50) e.giftCity = 'City must be between 2 and 50 characters';
+
+    // Country
+    if (!giftCountry.trim()) e.giftCountry = 'Country is required';
+    else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(giftCountry)) e.giftCountry = 'Country can only contain letters and spaces';
+    else if (giftCountry.length < 2 || giftCountry.length > 50) e.giftCountry = 'Country must be between 2 and 50 characters';
+  }
+
+  return e;
+};
   const [isRedirecting, setIsRedirecting] = useState(false);
 
   const handlePayment = async () => {

src/pages/ProfilePage.tsx

@@ -129,22 +129,50 @@ export function ProfilePage({
 
   }, [userDetails])
 
+  const validateForm = () => {
+  if (!formData.firstName.trim()) return toast.error('First name is required'), false;
+  if (/\s/.test(formData.firstName)) return toast.error('First name must not contain spaces'), false;
+  if (!/^[A-Za-z]+$/.test(formData.firstName)) return toast.error('First name must contain only letters'), false;
+
+  if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
+  if (/\s/.test(formData.lastName)) return toast.error('Last name must not contain spaces'), false;
+  if (!/^[A-Za-z]+$/.test(formData.lastName)) return toast.error('Last name must contain only letters'), false;
+
+  if (!formData.phone.trim()) return toast.error('Mobile number is required'), false;
+  if (/\s/.test(formData.phone)) return toast.error('Mobile number must not contain spaces'), false;
+  if (!/^\d+$/.test(formData.phone)) return toast.error('Mobile number must contain only digits'), false;
+
+  if (!formData.address1.trim()) return toast.error('Address is required'), false;
+  if (!/^[A-Za-z0-9\s,\-.]+$/.test(formData.address1)) return toast.error('Address contains invalid characters'), false;
+
+  if (!formData.city.trim()) return toast.error('City is required'), false;
+  if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.city)) return toast.error('City can only contain letters and spaces'), false;
+  if (/\s{2,}/.test(formData.city)) return toast.error('City must not contain multiple consecutive spaces'), false;
+
+  if (!formData.country.trim()) return toast.error('Country is required'), false;
+  if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.country)) return toast.error('Country can only contain letters and spaces'), false;
+
+  if (!formData.postalCode.trim()) return toast.error('Postal code is required'), false;
+  if (/\s/.test(formData.postalCode)) return toast.error('Postal code must not contain spaces'), false;
+  if (!/^[A-Za-z0-9]+$/.test(formData.postalCode)) return toast.error('Postal code must contain only letters and numbers'), false;
+
+  return true;
+};
+
 
   const handleInputChange = (field: string, value: string) => {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
 
   const handleSaveProfile = async () => {
-    try {
-      console.log("Saving profile...", formData);
-      const response = await updateUserProfileDetails({ userDetails: formData, userId });
-      console.log(response)
-      toast.success("Profile updated successfully!");
-    } catch (error) {
-      console.error("Error saving profile:", error);
-      toast.error("Failed to update profile. Please try again.");
-    }
-  };
+  if (!validateForm()) return;   
+  try {
+    const response = await updateUserProfileDetails({ userDetails: formData, userId });
+    toast.success("Profile updated successfully!");
+  } catch (error) {
+    toast.error("Failed to update profile. Please try again.");
+  }
+};
 
   const activeCards = cards.filter((card: any) => card.isActive === true);
   const expiredCards = cards.filter((card: any) => card.isActive === false);
@@ -256,6 +284,7 @@ export function ProfilePage({
                             id="email"
                             type="email"
                             value={formData.email}
+                            disabled
                             onChange={(e) => handleInputChange('email', e.target.value)}
                             className="mt-1 font-poppins font-light"
                           />
@@ -340,192 +369,6 @@ export function ProfilePage({
                   </motion.div>
                 </div>
 
-                {/* App Download Section */}
-                <div className="lg:col-span-1">
-                  <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.4 }}
-                  >
-                    <Card className="border border-gray-200 shadow-sm">
-                      <CardContent className="p-8 space-y-6">
-                        {(() => {
-                          // Determine which pass type to show
-                          const hasUnlimitedPass = activeCards.some((card: any) => card.cardType.cardTypeName === 'selective_pass');
-                          const hasSelectivePass = activeCards.some((card: any) => card.cardType.cardTypeName === 'unlimited_card');
-
-                          if (hasUnlimitedPass) {
-                            return (
-                              <>
-                                <div className="space-y-3">
-                                  <h3 className="font-poppins text-xl font-normal">
-                                    Get{' '}
-                                    <span className="text-primary">Melbourne Unlimited Card</span>
-                                  </h3>
-                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
-                                    Unlimited access to 25+ attractions. Visit as many places as you want with one simple card.
-                                    Save up to 40% compared to individual tickets.
-                                  </p>
-                                </div>
-
-                                {/* Card Benefits */}
-                                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4 space-y-2">
-                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
-                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-                                      <CreditCard className="w-3 h-3 text-white" />
-                                    </div>
-                                    <span>Unlimited entries to all attractions</span>
-                                  </div>
-                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
-                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-                                      <Calendar className="w-3 h-3 text-white" />
-                                    </div>
-                                    <span>Valid for 7 consecutive days</span>
-                                  </div>
-                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
-                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-                                      <MapPin className="w-3 h-3 text-white" />
-                                    </div>
-                                    <span>Skip the queue at major venues</span>
-                                  </div>
-                                </div>
-
-                                {/* Purchase CTA */}
-                                <div className="space-y-3">
-                                  <Button
-                                    onClick={onPassesClick}
-                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
-                                  >
-                                    Purchase Unlimited Card
-                                  </Button>
-                                  <Button
-                                    variant="outline"
-                                    onClick={onCityCardsClick}
-                                    className="w-full font-poppins font-normal"
-                                  >
-                                    Learn More
-                                  </Button>
-                                </div>
-                              </>
-                            );
-                          } else if (hasSelectivePass) {
-                            return (
-                              <>
-                                <div className="space-y-3">
-                                  <h3 className="font-poppins text-xl font-normal">
-                                    Get{' '}
-                                    <span className="text-primary">Selective Card</span>
-                                    {' '}now
-                                  </h3>
-                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
-                                    Choose your own adventure with 12 hand-picked attractions. Perfect for visitors
-                                    who want flexibility and value.
-                                  </p>
-                                </div>
-
-                                {/* Card Benefits */}
-                                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4 space-y-2">
-                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
-                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-                                      <CreditCard className="w-3 h-3 text-white" />
-                                    </div>
-                                    <span>Choose from 12 curated attractions</span>
-                                  </div>
-                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
-                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-                                      <Calendar className="w-3 h-3 text-white" />
-                                    </div>
-                                    <span>Flexible 7-day validity period</span>
-                                  </div>
-                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
-                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-                                      <Star className="w-3 h-3 text-white" />
-                                    </div>
-                                    <span>Save 40% on combined ticket price</span>
-                                  </div>
-                                </div>
-
-                                {/* Purchase CTA */}
-                                <div className="space-y-3">
-                                  <Button
-                                    onClick={onPassesClick}
-                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
-                                  >
-                                    Purchase Selective Card
-                                  </Button>
-                                  <Button
-                                    variant="outline"
-                                    onClick={onCityCardsClick}
-                                    className="w-full font-poppins font-normal"
-                                  >
-                                    View All Attractions
-                                  </Button>
-                                </div>
-                              </>
-                            );
-                          } else {
-                            return (
-                              <>
-                                <div className="space-y-3">
-                                  <h3 className="font-poppins text-xl font-normal">
-                                    Get{' '}
-                                    <span className="text-primary">CityCards</span>
-                                    {' '}now
-                                  </h3>
-                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
-                                    Explore Melbourne's best attractions with our flexible card options.
-                                    Choose unlimited access or select your favorites.
-                                  </p>
-                                </div>
-
-                                {/* Card Options */}
-                                <div className="space-y-3">
-                                  <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4">
-                                    <div className="flex items-start justify-between mb-2">
-                                      <div>
-                                        <h4 className="font-poppins text-base font-medium mb-1">Unlimited Card</h4>
-                                        <p className="text-xs text-gray-600 font-poppins font-light">25+ attractions, unlimited visits</p>
-                                      </div>
-                                      <Badge className="bg-primary text-white">Popular</Badge>
-                                    </div>
-                                    <div className="text-2xl font-poppins font-semibold text-primary">$149</div>
-                                  </div>
-
-                                  <div className="bg-gray-50 rounded-lg p-4">
-                                    <div className="flex items-start justify-between mb-2">
-                                      <div>
-                                        <h4 className="font-poppins text-base font-medium mb-1">Selective Card</h4>
-                                        <p className="text-xs text-gray-600 font-poppins font-light">12 attractions of your choice</p>
-                                      </div>
-                                    </div>
-                                    <div className="text-2xl font-poppins font-semibold text-primary">$89</div>
-                                  </div>
-                                </div>
-
-                                {/* Purchase CTA */}
-                                <div className="space-y-3">
-                                  <Button
-                                    onClick={onPassesClick}
-                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
-                                  >
-                                    Explore All Cards
-                                  </Button>
-                                  <Button
-                                    variant="outline"
-                                    onClick={onCityCardsClick}
-                                    className="w-full font-poppins font-normal"
-                                  >
-                                    Learn More
-                                  </Button>
-                                </div>
-                              </>
-                            );
-                          }
-                        })()}
-                      </CardContent>
-                    </Card>
-                  </motion.div>
-                </div>
               </div>
             </TabsContent>
 

src/pages/SuperSavingsDetailsPage.tsx

@@ -345,7 +345,7 @@ export function SuperSavingsDetailsPage({
           </div>
 
           {/* Right Sidebar - Calendar and Booking (preserved, but you can add a real calendar if needed) */}
-          <div className="lg:col-span-1">
+          {/* <div className="lg:col-span-1">
             <Card className="sticky top-32 p-6 bg-white border border-primary/20 shadow-xl rounded-2xl">
               <h3 className="text-2xl font-bold text-[#2d3134] mb-4">Book This Offer</h3>
               <div className="space-y-4 mb-6">
@@ -379,7 +379,7 @@ export function SuperSavingsDetailsPage({
                 Proceed to Checkout
               </Button>
             </Card>
-          </div>
+          </div> */}
         </div>
       </div>
     </Layout>