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

Reviewed-on: #42

.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
+            

package-lock.json

@@ -2257,7 +2257,6 @@
                   "version": "9.2.0",
                   "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-9.2.0.tgz",
                   "integrity": "sha512-YSzLC0t6VS9MDdPTynSMqU8IxrItFUjkDORALFT6sSMR/XZ5Vgm3RDp/Gk7z727MC4A9s4MFVel0gF0c7+kdrg==",
-                  "peer": true,
                   "engines": {
                         "node": ">=12.16"
                   }
@@ -3098,7 +3097,6 @@
                   "integrity": "sha512-yCAeZl7a0DxgNVteXFHt9+uyFbqXGy/ShC4BlcHkoE0AfGXYv/BUiplV72DjMYXHDBXFjhvr6DD1NiRVfB4j8g==",
                   "devOptional": true,
                   "license": "MIT",
-                  "peer": true,
                   "dependencies": {
                         "undici-types": "~6.21.0"
                   }
@@ -3109,7 +3107,6 @@
                   "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
                   "devOptional": true,
                   "license": "MIT",
-                  "peer": true,
                   "dependencies": {
                         "csstype": "^3.0.2"
                   }
@@ -3120,7 +3117,6 @@
                   "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
                   "devOptional": true,
                   "license": "MIT",
-                  "peer": true,
                   "peerDependencies": {
                         "@types/react": "^19.0.0"
                   }
@@ -3390,8 +3386,7 @@
                   "version": "8.6.0",
                   "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
                   "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-                  "license": "MIT",
-                  "peer": true
+                  "license": "MIT"
             },
             "node_modules/embla-carousel-react": {
                   "version": "8.6.0",
@@ -3986,7 +3981,6 @@
                   "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
                   "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
                   "license": "MIT",
-                  "peer": true,
                   "engines": {
                         "node": ">=12"
                   },
@@ -4044,7 +4038,6 @@
                   "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
                   "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
                   "license": "MIT",
-                  "peer": true,
                   "dependencies": {
                         "loose-envify": "^1.1.0"
                   },
@@ -4071,7 +4064,6 @@
                   "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
                   "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
                   "license": "MIT",
-                  "peer": true,
                   "dependencies": {
                         "loose-envify": "^1.1.0",
                         "scheduler": "^0.23.2"
@@ -4107,7 +4099,6 @@
                   "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
                   "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
                   "license": "MIT",
-                  "peer": true,
                   "dependencies": {
                         "@types/use-sync-external-store": "^0.0.6",
                         "use-sync-external-store": "^1.4.0"
@@ -4310,8 +4301,7 @@
                   "version": "5.0.1",
                   "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
                   "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-                  "license": "MIT",
-                  "peer": true
+                  "license": "MIT"
             },
             "node_modules/redux-thunk": {
                   "version": "3.1.0",
@@ -4574,7 +4564,6 @@
                   "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
                   "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
                   "license": "MIT",
-                  "peer": true,
                   "dependencies": {
                         "esbuild": "^0.25.0",
                         "fdir": "^6.4.4",

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/LandingBookAttractionSection.tsx

@@ -259,7 +259,7 @@ export function LandingBookAttractionSection() {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               className={`px-6 py-4 h-14 rounded-full font-medium transition-all duration-300 ${activeCategory === category
-                  ? 'bg-warm-coral text-white shadow-xl shadow-warm-coral/25 ring-2 ring-warm-coral/20'
+                  ? 'bg-red-400 text-white shadow-xl shadow-warm-coral/25 ring-2 ring-warm-coral/20'
                   : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-warm-coral/20 hover:bg-white'
                 }`}
             >

src/components/LandingMagicItinerary.tsx

@@ -6,6 +6,7 @@ import { Button } from './ui/button';
 
 // Import your video from assets
 import cityTourVideo from '../assets/itinenary-animation-vid.mp4';
+import { useNavigate } from 'react-router-dom';
 
 interface ItineraryCard {
   id: number;
@@ -22,6 +23,8 @@ export function LandingMagicItinerary() {
   const [isPlaying, setIsPlaying] = useState(true);
   const [videoLoaded, setVideoLoaded] = useState(false);
 
+  const navigate = useNavigate()
+
   const handleVideoLoad = () => {
     setVideoLoaded(true);
   };
@@ -31,7 +34,7 @@ export function LandingMagicItinerary() {
   };
 
   return (
-    <section className="relative py-20 lg:py-32 overflow-hidden -mt-20 pt-32 z-[49]">
+    <section className="relative py-20 lg:py-15 overflow-hidden -mt-20 z-[49]">
       {/* Dynamic Background */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none z-[5]">
         {/* Background Image as fallback */}
@@ -97,7 +100,7 @@ export function LandingMagicItinerary() {
         {/* Header */}
         <div className="text-center mb-16 max-w-5xl w-full">
           <motion.div
-            className="inline-flex items-center gap-3 bg-gradient-to-r from-warm-coral/10 to-orange-100/50 backdrop-blur-sm px-6 py-3 rounded-full border-2 border-warm-coral/30 shadow-xl mb-8"
+            className="inline-flex items-center gap-3 bg-gradient-to-r from-warm-coral/10 to-orange-100/50 backdrop-blur-sm pl-6 py-3 rounded-full border-2 border-warm-coral/30 shadow-xl mb-8"
             initial={{ opacity: 0, scale: 0.8, y: 20 }}
             whileInView={{ opacity: 1, scale: 1, y: 0 }}
             transition={{ duration: 0.7, ease: [0.34, 1.56, 0.64, 1] }}
@@ -112,7 +115,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 +134,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 from-red-500  via-orange-500 to-rose-500 bg-clip-text pr-2 text-transparent drop-shadow-lg">
               Dream Journey
             </span>
             <br />
@@ -250,7 +253,8 @@ 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"
+              onClick={() => navigate('/landing-magic-itinerary')}
+              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 +262,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/LandingTrustSection.tsx

@@ -204,7 +204,7 @@ export function LandingTrustSection() {
                       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/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,11 @@ import Navbar from './Navbar';
 import { Footer } from './Footer';
 import { useNavigate } from 'react-router-dom';
 import { Label } from './ui/label';
+import { useEffect } from 'react';
+import { AlertCircle } from 'lucide-react';
 
 export default function RegisterPage() {
-    const { login } = useAuth();
+    const { login, user } = useAuth();
     const email = localStorage.getItem("userEmail")
     const [formData, setFormData] = useState({
         firstName: '',
@@ -28,64 +31,137 @@ export default function RegisterPage() {
 
     const [helperText, setHelperText] = useState('');
     const [isLoading, setIsLoading] = useState(false);
+    const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
 
     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 (/\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 (/\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.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
+    //   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;
+
+    //   // 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
+    //   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 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 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 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 (!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;
+    // };
     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 e: Record<string, string> = {};
 
-        // 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;
+        if (!formData.firstName.trim()) e.firstName = 'First name is required';
+        else if (/\s/.test(formData.firstName)) e.firstName = 'First name must not contain spaces';
+        else if (!/^[A-Za-z]+$/.test(formData.firstName)) e.firstName = 'First name must contain only letters (A–Z)';
+        else if (formData.firstName.length < 2 || formData.firstName.length > 50) e.firstName = 'First name must be between 2 and 50 characters';
 
-        // Email
-        if (!formData.emailAddress.includes('@')) return toast.error('Invalid email address'), false;
+        if (!formData.lastName.trim()) e.lastName = 'Last name is required';
+        else if (/\s/.test(formData.lastName)) e.lastName = 'Last name must not contain spaces';
+        else if (!/^[A-Za-z]+$/.test(formData.lastName)) e.lastName = 'Last name must contain only letters (A–Z)';
+        else if (formData.lastName.length < 2 || formData.lastName.length > 50) e.lastName = 'Last name must be between 2 and 50 characters';
 
-        // 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;
+        if (!formData.emailAddress.trim()) e.emailAddress = 'Email address is required';
+        else if (!/\S+@\S+\.\S+/.test(formData.emailAddress)) e.emailAddress = 'Enter a valid email (e.g. name@example.com)';
 
-        // 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;
+        if (!formData.isdCode.trim()) e.isdCode = 'ISD code is required';
+        else if (/\s/.test(formData.isdCode)) e.isdCode = 'ISD code must not contain spaces';
+        else if (!formData.isdCode.startsWith('+')) e.isdCode = "ISD code must start with '+' (e.g. +91)";
+        else if (!/^\+\d+$/.test(formData.isdCode)) e.isdCode = "ISD code must contain only digits after '+'";
 
-        // 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;
+        if (!formData.mobileNumber.trim()) e.mobileNumber = 'Mobile number is required';
+        else if (/\s/.test(formData.mobileNumber)) e.mobileNumber = 'Mobile number must not contain spaces';
+        else if (!/^\d+$/.test(formData.mobileNumber)) e.mobileNumber = 'Mobile number must contain only digits (0–9)';
+        else if (formData.mobileNumber.length < 7 || formData.mobileNumber.length > 15) e.mobileNumber = 'Mobile number must be between 7 and 15 digits';
 
-        // 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;
+        if (!formData.address1.trim()) e.address1 = 'Address is required';
+        else if (!/^[A-Za-z0-9\s,\-.]+$/.test(formData.address1)) e.address1 = 'Address can only contain letters, numbers, spaces, commas, dots, and hyphens';
+        else if (formData.address1.length < 5 || formData.address1.length > 100) e.address1 = 'Address must be between 5 and 100 characters';
 
-        // 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;
+        if (!formData.city.trim()) e.city = 'City is required';
+        else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.city)) e.city = 'City can only contain letters and spaces';
+        else if (/\s{2,}/.test(formData.city)) e.city = 'City must not contain multiple consecutive spaces';
 
-        // 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;
+        if (!formData.state.trim()) e.state = 'State is required';
+        else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.state)) e.state = 'State can only contain letters and spaces';
+        else if (/\s{2,}/.test(formData.state)) e.state = 'State must not contain multiple consecutive spaces';
 
-        // 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;
+        if (!formData.country.trim()) e.country = 'Country is required';
+        else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.country)) e.country = 'Country can only contain letters and spaces';
+        else if (formData.country.length < 2 || formData.country.length > 50) e.country = 'Country must be between 2 and 50 characters';
 
-        return true;
+        if (!formData.postalCode.trim()) e.postalCode = 'Postal code is required';
+        else if (/\s/.test(formData.postalCode)) e.postalCode = 'Postal code must not contain spaces';
+        else if (!/^[A-Za-z0-9]+$/.test(formData.postalCode)) e.postalCode = 'Postal code must contain only letters and numbers';
+        else if (formData.postalCode.length < 4 || formData.postalCode.length > 10) e.postalCode = 'Postal code must be between 4 and 10 characters';
+
+        setFieldErrors(e);
+        return Object.keys(e).length === 0;
     };
 
+    // Helper to render inline error (add once near top of return or as a small component)
+    const FieldError = ({ name }: { name: string }) =>
+        fieldErrors[name] ? (
+            <p className="text-xs text-red-500 mt-1 flex items-center gap-1">
+                <AlertCircle className="w-3 h-3" />{fieldErrors[name]}
+            </p>
+        ) : null;
 
 
     const handleRegister = async () => {
@@ -145,28 +221,36 @@ export default function RegisterPage() {
 
                             <div className="grid md:grid-cols-2 gap-6">
                                 <div>
-                                    <Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
+                                    <Label htmlFor="firstName" className="font-poppins font-light">
+                                        First Name <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="firstName"
                                         value={formData.firstName}
                                         onChange={(e) => handleInputChange('firstName', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.firstName ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="firstName" />
                                 </div>
 
                                 <div>
-                                    <Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
+                                    <Label htmlFor="lastName" className="font-poppins font-light">
+                                        Last Name <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="lastName"
                                         value={formData.lastName}
                                         onChange={(e) => handleInputChange('lastName', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.lastName ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="lastName" />
                                 </div>
                             </div>
 
                             <div>
-                                <Label htmlFor="emailAddress" className="font-poppins font-light">Email Address</Label>
+                                <Label htmlFor="emailAddress" className="font-poppins font-light">
+                                    Email Address <span className="text-red-500">*</span>
+                                </Label>
                                 <Input
                                     id="emailAddress"
                                     type="email"
@@ -175,28 +259,35 @@ export default function RegisterPage() {
                                     onChange={(e) => handleInputChange('emailAddress', e.target.value)}
                                     className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
                                 />
+                                <FieldError name="emailAddress" />
                             </div>
 
                             <div className="grid md:grid-cols-3 gap-6">
                                 <div>
-                                    <Label htmlFor="isdCode" className="font-poppins font-light">ISD Code</Label>
+                                    <Label htmlFor="isdCode" className="font-poppins font-light">
+                                        ISD Code <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="isdCode"
                                         placeholder="example: +91"
                                         value={formData.isdCode}
                                         onChange={(e) => handleInputChange('isdCode', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.isdCode ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="isdCode" />
                                 </div>
 
                                 <div className="md:col-span-2">
-                                    <Label htmlFor="mobileNumber" className="font-poppins font-light">Mobile Number</Label>
+                                    <Label htmlFor="mobileNumber" className="font-poppins font-light">
+                                        Mobile Number <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="mobileNumber"
                                         value={formData.mobileNumber}
                                         onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.mobileNumber ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="mobileNumber" />
                                 </div>
                             </div>
                         </div>
@@ -208,13 +299,16 @@ export default function RegisterPage() {
                             </h3>
 
                             <div>
-                                <Label htmlFor="address1" className="font-poppins font-light">Address Line 1</Label>
+                                <Label htmlFor="address1" className="font-poppins font-light">
+                                    Address Line 1 <span className="text-red-500">*</span>
+                                </Label>
                                 <Input
                                     id="address1"
                                     value={formData.address1}
                                     onChange={(e) => handleInputChange('address1', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                    className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.address1 ? 'border border-red-400' : ''}`}
                                 />
+                                <FieldError name="address1" />
                             </div>
 
                             <div>
@@ -229,45 +323,57 @@ export default function RegisterPage() {
 
                             <div className="grid md:grid-cols-2 gap-6">
                                 <div>
-                                    <Label htmlFor="city" className="font-poppins font-light">City</Label>
+                                    <Label htmlFor="city" className="font-poppins font-light">
+                                        City <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="city"
                                         value={formData.city}
                                         onChange={(e) => handleInputChange('city', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.city ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="city" />
                                 </div>
 
                                 <div>
-                                    <Label htmlFor="state" className="font-poppins font-light">State</Label>
+                                    <Label htmlFor="state" className="font-poppins font-light">
+                                        State <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="state"
                                         value={formData.state}
                                         onChange={(e) => handleInputChange('state', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.state ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="state" />
                                 </div>
                             </div>
 
                             <div className="grid md:grid-cols-2 gap-6">
                                 <div>
-                                    <Label htmlFor="country" className="font-poppins font-light">Country</Label>
+                                    <Label htmlFor="country" className="font-poppins font-light">
+                                        Country <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="country"
                                         value={formData.country}
                                         onChange={(e) => handleInputChange('country', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.country ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="country" />
                                 </div>
 
                                 <div>
-                                    <Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
+                                    <Label htmlFor="postalCode" className="font-poppins font-light">
+                                        Postal Code <span className="text-red-500">*</span>
+                                    </Label>
                                     <Input
                                         id="postalCode"
                                         value={formData.postalCode}
                                         onChange={(e) => handleInputChange('postalCode', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                                        className={`h-12 bg-gray-50 border-0 rounded-xl mt-1 ${fieldErrors.postalCode ? 'border border-red-400' : ''}`}
                                     />
+                                    <FieldError name="postalCode" />
                                 </div>
                             </div>
                         </div>

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/MelbournePage.tsx

@@ -222,7 +222,7 @@ export function MelbournePage({
           </div> */}
 
 
-          <div className="container mx-auto px-4 py-12 space-y-24">
+          <div className="container mx-auto px-4 py-12">
             {/* Features Grid */}
             <motion.section
               id="overview"
@@ -392,7 +392,7 @@ export function MelbournePage({
                     >
                       <Wand2 className="w-6 h-6 text-primary drop-shadow-lg" />
                     </motion.div>
-                    <span className="font-poppins font-semibold text-gray-800">AI-Powered Magic Itinerary</span>
+                    <span className="font-poppins font-semibold text-gray-800">Magic Itinerary</span>
                     <motion.div
                       className="w-2 h-2 bg-primary rounded-full"
                       animate={{
@@ -791,18 +791,18 @@ export function MelbournePage({
                       </span>
                     </Button>
 
-                    <p className="font-poppins text-gray-600 text-sm flex items-center gap-2">
+                    {/* <p className="font-poppins text-gray-600 text-sm flex items-center gap-2">
                       <Sparkles className="w-4 h-4 text-primary" />
                       <span>Free to use • No credit card required</span>
                       <Sparkles className="w-4 h-4 text-primary" />
-                    </p>
+                    </p> */}
                   </motion.div>
                 </div>
               </div>
             </section>
           </div>
 
-          <div className="container mx-auto px-4 py-12 space-y-24">
+          <div className="container mx-auto px-4 py-12">
             {/* Testimonials */}
             <EnhancedTestimonials />
 

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

@@ -85,7 +85,7 @@ function Field({
   prefilled,
   disabled = false,
 }: {
-  label: string;
+  label: React.ReactNode;
   value: string;
   onChange: (v: string) => void;
   placeholder?: string;
@@ -232,30 +232,62 @@ export function PaymentDetailsPage({
 
   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';
+      // 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 () => {
     const validationErrors = validate();
     setErrors(validationErrors);
     if (Object.keys(validationErrors).length > 0) {
-      toast.error('Please fill all required fields');
+      // toast.error('Please fill all required fields');
       return;
     }
 
@@ -381,8 +413,8 @@ export function PaymentDetailsPage({
                   <button
                     onClick={() => setSelectedTab('myself')}
                     className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-poppins text-sm font-medium transition-all duration-200 ${selectedTab === 'myself'
-                        ? 'bg-[#F95F62] text-white shadow-md shadow-[#F95F62]/20'
-                        : 'bg-gray-100 text-[#555] hover:bg-gray-200'
+                      ? 'bg-[#F95F62] text-white shadow-md shadow-[#F95F62]/20'
+                      : 'bg-gray-100 text-[#555] hover:bg-gray-200'
                       }`}
                   >
                     <User className="w-4 h-4" />
@@ -391,8 +423,8 @@ export function PaymentDetailsPage({
                   <button
                     onClick={() => setSelectedTab('gift')}
                     className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-poppins text-sm font-medium transition-all duration-200 ${selectedTab === 'gift'
-                        ? 'bg-[#F95F62] text-white shadow-md shadow-[#F95F62]/20'
-                        : 'bg-gray-100 text-[#555] hover:bg-gray-200'
+                      ? 'bg-[#F95F62] text-white shadow-md shadow-[#F95F62]/20'
+                      : 'bg-gray-100 text-[#555] hover:bg-gray-200'
                       }`}
                   >
                     <Gift className="w-4 h-4" />
@@ -454,64 +486,14 @@ export function PaymentDetailsPage({
                           <h3 className="font-poppins text-base font-semibold text-[#2a2a2a]">Gift Recipient Details</h3>
                         </div>
                         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                          <Field
-                            label="Recipient First Name"
-                            value={giftFirstName}
-                            onChange={setGiftFirstName}
-                            placeholder="Enter recipient's first name"
-                            error={errors.giftFirstName}
-                          />
-                          <Field
-                            label="Recipient Last Name"
-                            value={giftLastName}
-                            onChange={setGiftLastName}
-                            placeholder="Enter recipient's last name"
-                            error={errors.giftLastName}
-                          />
-                          <Field
-                            label="Recipient ISD Code"
-                            value={giftIsd}
-                            onChange={setGiftIsd}
-                            placeholder="e.g., 61"
-                            error={errors.giftIsd}
-                          />
-                          <Field
-                            label="Recipient Phone"
-                            value={giftPhone}
-                            onChange={setGiftPhone}
-                            type="tel"
-                            placeholder="Enter recipient's phone number"
-                            error={errors.giftPhone}
-                          />
-                          <Field
-                            label="Recipient Email"
-                            value={giftEmail}
-                            onChange={setGiftEmail}
-                            type="email"
-                            placeholder="Enter recipient's email"
-                            error={errors.giftEmail}
-                          />
-                          <Field
-                            label="Recipient City"
-                            value={giftCity}
-                            onChange={setGiftCity}
-                            placeholder="Enter recipient's city"
-                            error={errors.giftCity}
-                          />
-                          <Field
-                            label="Recipient Country"
-                            value={giftCountry}
-                            onChange={setGiftCountry}
-                            placeholder="Enter recipient's country"
-                            error={errors.giftCountry}
-                          />
-                          <Field
-                            label="Gift Message"
-                            value={giftMessage}
-                            onChange={setGiftMessage}
-                            placeholder="Write a heartfelt message"
-                            error={errors.giftMessage}
-                          />
+                          <Field label={<>Recipient First Name <span className="text-red-500">*</span></>} value={giftFirstName} onChange={setGiftFirstName} placeholder="Enter recipient's first name" error={errors.giftFirstName} />
+                          <Field label={<>Recipient Last Name <span className="text-red-500">*</span></>} value={giftLastName} onChange={setGiftLastName} placeholder="Enter recipient's last name" error={errors.giftLastName} />
+                          <Field label={<>Recipient ISD Code <span className="text-red-500">*</span></>} value={giftIsd} onChange={setGiftIsd} placeholder="e.g., +61" error={errors.giftIsd} />
+                          <Field label={<>Recipient Phone <span className="text-red-500">*</span></>} value={giftPhone} onChange={setGiftPhone} type="tel" placeholder="Enter recipient's phone number" error={errors.giftPhone} />
+                          <Field label={<>Recipient Email <span className="text-red-500">*</span></>} value={giftEmail} onChange={setGiftEmail} type="email" placeholder="Enter recipient's email" error={errors.giftEmail} />
+                          <Field label={<>Recipient City <span className="text-red-500">*</span></>} value={giftCity} onChange={setGiftCity} placeholder="Enter recipient's city" error={errors.giftCity} />
+                          <Field label={<>Recipient Country <span className="text-red-500">*</span></>} value={giftCountry} onChange={setGiftCountry} placeholder="Enter recipient's country" error={errors.giftCountry} />
+                          <Field label={<>Gift Message <span className="text-red-500">*</span></>} value={giftMessage} onChange={setGiftMessage} placeholder="Write a heartfelt message" error={errors.giftMessage} />
                         </div>
                       </div>
                     </motion.div>
@@ -557,8 +539,8 @@ export function PaymentDetailsPage({
                   <div className="flex items-start gap-4">
                     <div
                       className={`w-16 h-10 rounded-lg flex-shrink-0 flex items-center justify-center ${bookingDetails?.cardMode?.toLowerCase() === 'flexi'
-                          ? 'bg-gradient-to-br from-[#f95faf] to-[#F95F62]'
-                          : 'bg-gradient-to-br from-[#F95F62] to-[#c94245]'
+                        ? 'bg-gradient-to-br from-[#f95faf] to-[#F95F62]'
+                        : 'bg-gradient-to-br from-[#F95F62] to-[#c94245]'
                         }`}
                     >
                       <span className="font-poppins text-[10px] font-semibold text-white">{bookingDetails?.cardMode}</span>

src/pages/ProfilePage.tsx

@@ -13,7 +13,8 @@ import {
   Clock,
   Star,
   Badge as BadgeIcon,
-  Camera
+  Camera,
+  AlertCircle
 } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -21,7 +22,6 @@ import { Label } from '../components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
 import { Separator } from '../components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select';
 import { Badge } from '../components/ui/badge';
 import Navbar from '../components/Navbar';
 import { Footer } from '../components/Footer';
@@ -88,6 +88,7 @@ export function ProfilePage({
   currentPage
 }: ProfilePageProps) {
   const [activeTab, setActiveTab] = useState('profile');
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
   const [formData, setFormData] = useState({
     firstName: '',
     lastName: '',
@@ -106,7 +107,7 @@ export function ProfilePage({
   const cityId = localStorage.getItem("cityId")
   const { data: userDetails, isLoading } = useGetUserProfileDetailsQuery(userId)
   const [updateUserProfileDetails, { isLoading: savingChanges }] = useUpdateUserProfileDetailsMutation();
-  const { data, isLoading: loadingCards } = useGetUserCardsQuery({sort,cityId})
+  const { data, isLoading: loadingCards } = useGetUserCardsQuery({ sort, cityId })
   const { data: userItineraries, isLoading: loadingItineraries } = useGetUserItinerariesQuery(cityId)
 
   const cards = data ?? []
@@ -129,19 +130,87 @@ 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 validateForm = () => {
+    const e: Record<string, string> = {};
+
+    if (!formData.firstName.trim()) e.firstName = 'First name is required';
+    else if (/\s/.test(formData.firstName)) e.firstName = 'First name must not contain spaces';
+    else if (!/^[A-Za-z]+$/.test(formData.firstName)) e.firstName = 'First name must contain only letters';
+
+    if (!formData.lastName.trim()) e.lastName = 'Last name is required';
+    else if (/\s/.test(formData.lastName)) e.lastName = 'Last name must not contain spaces';
+    else if (!/^[A-Za-z]+$/.test(formData.lastName)) e.lastName = 'Last name must contain only letters';
+
+    if (!formData.phone.trim()) e.phone = 'Mobile number is required';
+    else if (/\s/.test(formData.phone)) e.phone = 'Mobile number must not contain spaces';
+    else if (!/^\d+$/.test(formData.phone)) e.phone = 'Mobile number must contain only digits';
+
+    if (!formData.address1.trim()) e.address1 = 'Address is required';
+    else if (!/^[A-Za-z0-9\s,\-.]+$/.test(formData.address1)) e.address1 = 'Address contains invalid characters';
+
+    if (!formData.city.trim()) e.city = 'City is required';
+    else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.city)) e.city = 'City can only contain letters and spaces';
+    else if (/\s{2,}/.test(formData.city)) e.city = 'City must not contain multiple consecutive spaces';
+
+    if (!formData.country.trim()) e.country = 'Country is required';
+    else if (!/^[A-Za-z\s\-'À-ÿ]+$/.test(formData.country)) e.country = 'Country can only contain letters and spaces';
+
+    if (!formData.postalCode.trim()) e.postalCode = 'Postal code is required';
+    else if (/\s/.test(formData.postalCode)) e.postalCode = 'Postal code must not contain spaces';
+    else if (!/^[A-Za-z0-9]+$/.test(formData.postalCode)) e.postalCode = 'Postal code must contain only letters and numbers';
+
+    setFieldErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  // inside ProfilePage function body:
+  const FieldError = ({ name }: { name: string }) =>
+    fieldErrors[name] ? (
+      <p className="text-xs text-red-500 mt-1 flex items-center gap-1">
+        <AlertCircle className="w-3 h-3" />{fieldErrors[name]}
+      </p>
+    ) : null;
 
   const handleInputChange = (field: string, value: string) => {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
 
   const handleSaveProfile = async () => {
+    if (!validateForm()) return;
     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.");
     }
   };
@@ -231,45 +300,57 @@ export function ProfilePage({
                       <CardContent className="space-y-6">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                           <div>
-                            <Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
+                            <Label htmlFor="firstName" className="font-poppins font-light">
+                              First Name <span className="text-red-500">*</span>
+                            </Label>
                             <Input
                               id="firstName"
                               value={formData.firstName}
                               onChange={(e) => handleInputChange('firstName', e.target.value)}
-                              className="mt-1 font-poppins font-light"
+                              className={`mt-1 font-poppins font-light ${fieldErrors.firstName ? 'border-red-400' : ''}`}
                             />
+                            <FieldError name="firstName" />
                           </div>
                           <div>
-                            <Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
+                            <Label htmlFor="lastName" className="font-poppins font-light">
+                              Last Name <span className="text-red-500">*</span>
+                            </Label>
                             <Input
                               id="lastName"
                               value={formData.lastName}
                               onChange={(e) => handleInputChange('lastName', e.target.value)}
-                              className="mt-1 font-poppins font-light"
+                              className={`mt-1 font-poppins font-light ${fieldErrors.lastName ? 'border-red-400' : ''}`}
                             />
+                            <FieldError name="lastName" />
                           </div>
                         </div>
 
                         <div>
-                          <Label htmlFor="email" className="font-poppins font-light">Email Address</Label>
+                          <Label htmlFor="email" className="font-poppins font-light">
+                            Email Address
+                          </Label>
                           <Input
                             id="email"
                             type="email"
                             value={formData.email}
+                            disabled
                             onChange={(e) => handleInputChange('email', e.target.value)}
                             className="mt-1 font-poppins font-light"
                           />
                         </div>
 
                         <div>
-                          <Label htmlFor="phone" className="font-poppins font-light">Phone Number</Label>
+                          <Label htmlFor="phone" className="font-poppins font-light">
+                            Phone Number <span className="text-red-500">*</span>
+                          </Label>
                           <Input
                             id="phone"
                             type="tel"
                             value={formData.phone}
                             onChange={(e) => handleInputChange('phone', e.target.value)}
-                            className="mt-1 font-poppins font-light"
+                            className={`mt-1 font-poppins font-light ${fieldErrors.phone ? 'border-red-400' : ''}`}
                           />
+                          <FieldError name="phone" />
                         </div>
 
                         <Separator />
@@ -277,29 +358,31 @@ export function ProfilePage({
                         <h3 className="font-poppins font-normal">Billing Address</h3>
 
                         <div>
-                          <Label htmlFor="country" className="font-poppins font-light">Country</Label>
+                          <Label htmlFor="country" className="font-poppins font-light">
+                            Country <span className="text-red-500">*</span>
+                          </Label>
                           <Input
                             id="country"
                             value={formData.country}
                             onChange={(e) => handleInputChange('country', e.target.value)}
-                            className="mt-1 font-poppins font-light"
+                            className={`mt-1 font-poppins font-light ${fieldErrors.country ? 'border-red-400' : ''}`}
                           />
+                          <FieldError name="country" />
                         </div>
 
                         <div>
                           <Label htmlFor="address1" className="font-poppins font-light">
-                            Address Line 1
+                            Address Line 1 <span className="text-red-500">*</span>
                           </Label>
                           <Input
                             id="address1"
                             value={formData.address1}
                             onChange={(e) => handleInputChange('address1', e.target.value)}
-                            className="mt-1 font-poppins font-light mb-4"
+                            className={`mt-1 font-poppins font-light mb-4 ${fieldErrors.address1 ? 'border-red-400' : ''}`}
                           />
+                          <FieldError name="address1" />
 
-                          <Label htmlFor="address2" className="font-poppins font-light">
-                            Address Line 2
-                          </Label>
+                          <Label htmlFor="address2" className="font-poppins font-light">Address Line 2</Label>
                           <Input
                             id="address2"
                             value={formData.address2}
@@ -310,22 +393,28 @@ export function ProfilePage({
 
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                           <div>
-                            <Label htmlFor="city" className="font-poppins font-light">City</Label>
+                            <Label htmlFor="city" className="font-poppins font-light">
+                              City <span className="text-red-500">*</span>
+                            </Label>
                             <Input
                               id="city"
                               value={formData.city}
                               onChange={(e) => handleInputChange('city', e.target.value)}
-                              className="mt-1 font-poppins font-light"
+                              className={`mt-1 font-poppins font-light ${fieldErrors.city ? 'border-red-400' : ''}`}
                             />
+                            <FieldError name="city" />
                           </div>
                           <div>
-                            <Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
+                            <Label htmlFor="postalCode" className="font-poppins font-light">
+                              Postal Code <span className="text-red-500">*</span>
+                            </Label>
                             <Input
                               id="postalCode"
                               value={formData.postalCode}
                               onChange={(e) => handleInputChange('postalCode', e.target.value)}
-                              className="mt-1 font-poppins font-light"
+                              className={`mt-1 font-poppins font-light ${fieldErrors.postalCode ? 'border-red-400' : ''}`}
                             />
+                            <FieldError name="postalCode" />
                           </div>
                         </div>
 
@@ -340,192 +429,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>
 
@@ -726,7 +629,7 @@ export function ProfilePage({
                           <Button
                             variant="outline"
                             className="w-full mt-4 font-poppins font-normal"
-                            onClick={()=>navigate(`/view-itinerary/${itinerary.id}`)}
+                            onClick={() => navigate(`/view-itinerary/${itinerary.id}`)}
                           >
                             View Itinerary
                           </Button>

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>