Merge pull request 'arya-branch' (#41) from arya-branch into main

Reviewed-on: #41

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,12 +179,16 @@ export function AppRouter({
                     {/* User Routes */}
                     <Route path="/profile" element={
                         <motion.div key="profile" {...pageTransition}>
+                            <ProtectedRoute>
                                 <ProfilePage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/view-card-details/:cardId" element={
                         <motion.div key="profile" {...pageTransition}>
+                            <ProtectedRoute>
                                 <ViewCardDetailsPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
@@ -191,18 +196,26 @@ export function AppRouter({
                     {/* Itinerary Routes */}
                     <Route path="/create-itinerary" element={
                         <motion.div key="create-itinerary" {...pageTransition}>
+                            <ProtectedRoute>
+
                                 <CreateMagicItineraryPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
                     <Route path="/view-itinerary/:itineraryId" element={
                         <motion.div key="itinerary-view" {...pageTransition}>
+                            <ProtectedRoute>
                                 <ItineraryViewPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/itinerary-summary/:itineraryId" element={
                         <motion.div key="itinerary-summary" {...pageTransition}>
+                            <ProtectedRoute>
+
                                 <ItinerarySummaryPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
 
@@ -276,12 +289,17 @@ export function AppRouter({
 
                     <Route path="/cart" element={
                         <motion.div key="super-savings" {...pageTransition}>
+                            <ProtectedRoute>
+
                                 <CartPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/checkout" element={
                         <motion.div key="super-savings" {...pageTransition}>
+                            <ProtectedRoute>
                                 <CheckoutPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/register" element={
@@ -292,7 +310,9 @@ export function AppRouter({
 
                     <Route path="/payment/:bookingId" element={
                         <motion.div key="super-savings" {...pageTransition}>
+                            <ProtectedRoute>
                                 <PaymentDetailsPage {...commonNavHandlers} />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/super-savings/:id" element={
@@ -305,6 +325,8 @@ export function AppRouter({
 
                     <Route path="/success" element={
                         <motion.div key="super-savings" {...pageTransition}>
+                            <ProtectedRoute>
+
                                 <PaymentSuccessPage
                                     // onHomeClick={onHomeClick}
                                     // onPassesClick={onPassesClick}
@@ -313,10 +335,13 @@ export function AppRouter({
                                     currentPage="success"
                                     user={user}
                                 />
+                            </ProtectedRoute>
                         </motion.div>
                     } />
                     <Route path="/cancel" element={
                         <motion.div key="super-savings" {...pageTransition}>
+                            <ProtectedRoute>
+
                                 <PaymentCancelPage
                                     // onHomeClick={onHomeClick}
                                     // onPassesClick={onPassesClick}
@@ -325,6 +350,7 @@ export function AppRouter({
                                     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/HowItWorks.tsx

@@ -2,7 +2,7 @@ import { CreditCard, MapPin, Calendar, Zap, ChevronLeft, ChevronRight, Smartphon
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import { ImageWithFallback } from './figma/ImageWithFallback';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const steps = [
   {
@@ -51,7 +51,8 @@ const steps = [
 
 export function HowItWorks() {
   const [activeStep, setActiveStep] = useState(0); // Start with first step active
-
+  const navigate=useNavigate()
+  const cityName = localStorage.getItem("cityName") || "Melbourne";
   const location = useLocation()
 
   const nextStep = () => {
@@ -82,7 +83,7 @@ export function HowItWorks() {
           <h2 className="text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
             <span className="font-light">How Your</span>{' '}
             {!location.pathname.includes("landing") &&
-            <span className="font-normal">Melbourne </span>
+              <span className="font-normal">{cityName}</span>
             }
             <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic pr-2">City Card</span>{' '}
             <span className="font-light">Works.</span>
@@ -365,7 +366,7 @@ export function HowItWorks() {
                               }}
                             >
                               <svg width="4" height="4" viewBox="0 0 12 12" fill="currentColor">
-                                <path d="M6 1v8m-2-2l2 2 2-2" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+                                <path d="M6 1v8m-2-2l2 2 2-2" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                               </svg>
                             </motion.div>
 
@@ -413,7 +414,7 @@ export function HowItWorks() {
                             >
                               <div className="w-4 h-4 text-primary">
                                 <svg viewBox="0 0 24 24" fill="currentColor" className="w-full h-full">
-                                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+                                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                                 </svg>
                               </div>
                             </motion.div>
@@ -500,7 +501,7 @@ export function HowItWorks() {
                               }}
                             >
                               <svg width="6" height="6" viewBox="0 0 12 12" fill="currentColor">
-                                <path d="M6 0v8m-3-3l3 3 3-3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+                                <path d="M6 0v8m-3-3l3 3 3-3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                               </svg>
                             </motion.div>
 
@@ -562,8 +563,7 @@ export function HowItWorks() {
                         <button
                           key={index}
                           onClick={() => goToStep(index)}
-                          className={`h-1.5 rounded-full transition-all duration-200 ${
-                            index === activeStep ? 'bg-primary w-6' : 'bg-gray-200 w-1.5 hover:bg-gray-300'
+                          className={`h-1.5 rounded-full transition-all duration-200 ${index === activeStep ? 'bg-primary w-6' : 'bg-gray-200 w-1.5 hover:bg-gray-300'
                             }`}
                         />
                       ))}
@@ -649,8 +649,8 @@ export function HowItWorks() {
                               />
                               <div className="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400">
                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                      <circle cx="11" cy="11" r="8"/>
-                                      <path d="m21 21-4.35-4.35"/>
+                                  <circle cx="11" cy="11" r="8" />
+                                  <path d="m21 21-4.35-4.35" />
                                 </svg>
                               </div>
                             </div>
@@ -1026,7 +1026,7 @@ export function HowItWorks() {
                                   }}
                                 >
                                   <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"/>
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
                                   </svg>
                                 </motion.button>
 
@@ -1045,7 +1045,7 @@ export function HowItWorks() {
                                   }}
                                 >
                                   <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"/>
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                                   </svg>
                                 </motion.button>
                               </div>
@@ -1263,7 +1263,7 @@ export function HowItWorks() {
                               }}
                             >
                               <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                               </svg>
                             </motion.div>
 
@@ -1308,8 +1308,8 @@ export function HowItWorks() {
                                   </div>
                                   <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                                     <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-                                          <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
-                                          <path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd"/>
+                                      <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
+                                      <path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
                                     </svg>
                                   </div>
                                 </div>
@@ -1359,11 +1359,11 @@ export function HowItWorks() {
                                     {[...Array(144)].map((_, idx) => {
                                       const patterns = [
                                         // Corner patterns (top-left, top-right, bottom-left)
-                                            ...[0,1,2,3,4,5,6, 12,13,14,15,16,17,18, 24,25,26,27,28,29,30, 36,37,38,39,40,41,42, 48,49,50,51,52,53,54, 60,61,62,63,64,65,66, 72,73,74,75,76,77,78],
-                                            ...[5,6,7,8,9,10,11, 17,18,19,20,21,22,23, 29,30,31,32,33,34,35, 41,42,43,44,45,46,47, 53,54,55,56,57,58,59, 65,66,67,68,69,70,71, 77,78,79,80,81,82,83],
-                                            ...[66,67,68,69,70,71,72, 78,79,80,81,82,83,84, 90,91,92,93,94,95,96, 102,103,104,105,106,107,108, 114,115,116,117,118,119,120, 126,127,128,129,130,131,132, 138,139,140,141,142,143,144],
+                                        ...[0, 1, 2, 3, 4, 5, 6, 12, 13, 14, 15, 16, 17, 18, 24, 25, 26, 27, 28, 29, 30, 36, 37, 38, 39, 40, 41, 42, 48, 49, 50, 51, 52, 53, 54, 60, 61, 62, 63, 64, 65, 66, 72, 73, 74, 75, 76, 77, 78],
+                                        ...[5, 6, 7, 8, 9, 10, 11, 17, 18, 19, 20, 21, 22, 23, 29, 30, 31, 32, 33, 34, 35, 41, 42, 43, 44, 45, 46, 47, 53, 54, 55, 56, 57, 58, 59, 65, 66, 67, 68, 69, 70, 71, 77, 78, 79, 80, 81, 82, 83],
+                                        ...[66, 67, 68, 69, 70, 71, 72, 78, 79, 80, 81, 82, 83, 84, 90, 91, 92, 93, 94, 95, 96, 102, 103, 104, 105, 106, 107, 108, 114, 115, 116, 117, 118, 119, 120, 126, 127, 128, 129, 130, 131, 132, 138, 139, 140, 141, 142, 143, 144],
                                         // Data pattern
-                                            ...[8,9,15,16,21,22,27,28,33,34,39,40,45,46,51,52,57,58,63,64,69,70,75,76,81,82,87,88,93,94,99,100,105,106,111,112,117,118,123,124,129,130,135,136,141,142]
+                                        ...[8, 9, 15, 16, 21, 22, 27, 28, 33, 34, 39, 40, 45, 46, 51, 52, 57, 58, 63, 64, 69, 70, 75, 76, 81, 82, 87, 88, 93, 94, 99, 100, 105, 106, 111, 112, 117, 118, 123, 124, 129, 130, 135, 136, 141, 142]
                                       ];
                                       const isActive = patterns.includes(idx) || Math.random() > 0.6;
 
@@ -1439,15 +1439,15 @@ export function HowItWorks() {
                                         }}
                                       >
                                         <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
+                                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                         </svg>
                                       </motion.div>
                                     )}
                                     {instruction.status === 'sent' && (
                                       <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
                                         <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
-                                              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+                                          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                                          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                         </svg>
                                       </div>
                                     )}
@@ -1548,8 +1548,8 @@ export function HowItWorks() {
                               <div className="flex items-center gap-2">
                                 <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
                                   <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                   </svg>
                                 </div>
                                 <span className="text-white font-medium text-sm">Opera House</span>
@@ -1566,7 +1566,7 @@ export function HowItWorks() {
                                 }}
                               >
                                 <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
+                                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                 </svg>
                               </motion.div>
                             </div>
@@ -1596,7 +1596,7 @@ export function HowItWorks() {
                                   }}
                                 >
                                   <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
+                                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                   </svg>
                                   Checked In
                                 </motion.div>
@@ -1624,8 +1624,7 @@ export function HowItWorks() {
                                   ].map((action, idx) => (
                                     <motion.button
                                       key={idx}
-                                          className={`p-2 rounded-lg text-xs font-medium flex flex-col items-center gap-1 ${
-                                            action.active ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600'
+                                      className={`p-2 rounded-lg text-xs font-medium flex flex-col items-center gap-1 ${action.active ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600'
                                         }`}
                                       animate={{
                                         backgroundColor: action.active ?
@@ -1684,8 +1683,7 @@ export function HowItWorks() {
                               ].map((tab, idx) => (
                                 <motion.div
                                   key={idx}
-                                      className={`flex flex-col items-center justify-center flex-1 ${
-                                        tab.active ? 'text-primary' : 'text-gray-400'
+                                  className={`flex flex-col items-center justify-center flex-1 ${tab.active ? 'text-primary' : 'text-gray-400'
                                     }`}
                                   animate={{
                                     color: tab.active ?
@@ -1727,7 +1725,7 @@ export function HowItWorks() {
                           <div className="flex items-center gap-2">
                             <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                               <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
+                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                               </svg>
                             </div>
                             <div>
@@ -1778,7 +1776,7 @@ export function HowItWorks() {
                               <div className="bg-gray-50 px-4 py-3 border-b border-gray-100 flex items-center gap-3">
                                 <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                                   <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd"/>
+                                    <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
                                   </svg>
                                 </div>
                                 <span className="font-bold text-gray-900">App Store</span>
@@ -2037,7 +2035,7 @@ export function HowItWorks() {
                           }}
                         >
                           <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
+                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                           </svg>
                           <span className="font-medium">CityCards installed successfully!</span>
                         </motion.div>
@@ -2120,8 +2118,7 @@ export function HowItWorks() {
                     <button
                       key={index}
                       onClick={() => goToStep(index)}
-                      className={`h-1.5 rounded-full transition-all duration-200 ${
-                        index === activeStep ? 'bg-primary w-6' : 'bg-gray-200 w-1.5 hover:bg-gray-300'
+                      className={`h-1.5 rounded-full transition-all duration-200 ${index === activeStep ? 'bg-primary w-6' : 'bg-gray-200 w-1.5 hover:bg-gray-300'
                         }`}
                     />
                   ))}
@@ -2215,9 +2212,10 @@ export function HowItWorks() {
               Join thousands of travelers who have discovered the easiest way to explore cities
             </p>
             <motion.button
-              className="bg-gradient-to-r from-primary to-secondary text-white py-4 px-12 rounded-lg text-lg hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
+              className="cursor-pointer bg-gradient-to-r from-primary to-secondary text-white py-4 px-12 rounded-lg text-lg hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
+              onClick={() => navigate("/passes")}
             >
               Get Your City Card
             </motion.button>

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,158 +3,36 @@ 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 }) => (
+  const apiAttractions = homePageAttractionsData?.attractions || [];
+  const apiCategories = homePageAttractionsData?.categories || [];
+
+  // Filter attractions by selected category
+  const filteredAttractions = selectedCategoryId === null
+    ? apiAttractions
+    : apiAttractions.filter((attraction: any) =>
+        attraction.categories?.some((cat: any) => cat.id === selectedCategoryId)
+      );
+
+  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 }}
@@ -162,86 +40,102 @@ export function MelbourneAttractions() {
         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}
+              src={coverImage}
+              alt={attraction.title}
               className="w-full h-full object-cover"
             />
-
-          {/* 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> */}
-
-          {/* 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>
+                <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>
 
           {/* 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 */}
+              {/* 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.includedValue}</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.originalPrice === "Free"
-                  ? "Premium access included"
-                  : "Save money with CityCard"}
+                  {attraction.isBookingRequired ? 'Booking required' : 'No booking required'}
                 </p>
               </div>
 
-            {/* What's Included List */}
+              {/* 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">
-                {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" />
+                    {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">{perk.label}</span>
+                        <span className="text-sm">{inc.title}</span>
                       </div>
                     ))}
                   </div>
                 </div>
+              )}
 
-            {/* Duration & Meta Info */}
+              {/* 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>2-3 hours</span>
+                      <span>{attraction.durations} mins</span>
                     </div>
+                  )}
+                  {attraction.groupSize && (
                     <div className="flex items-center gap-1">
                       <Users className="w-4 h-4" />
-                  <span>All ages</span>
+                      <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>
 
-            {/* Footer Features */}
+              {/* 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>
+              )}
+
+              {/* 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">
@@ -264,10 +158,12 @@ export function MelbourneAttractions() {
         </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
-              key={category}
             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(null)}
             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 === 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'
             }`}
           >
-              {category}
+            All
+          </motion.button>
+
+          {/* Dynamic category buttons from API */}
+          {apiCategories.map((category: any, index: number) => (
+            <motion.button
+              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={() => 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 ${
+                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.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
-              key={category.name}
+            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.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';
@@ -189,7 +189,7 @@ function CheckoutConfigCard({
             } else {
                 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;
@@ -321,10 +322,11 @@ export function CheckoutPage({
     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 ?? [];
@@ -96,10 +128,17 @@ const ItinerarySummaryPage = () => {
                         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"
                     >
-                    <Download className="w-4 h-4 mr-2" />
+                        {isDownloading ? (
+                            <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                        ) : (
+                            <Download className="w-5 h-5 mr-2" />
+                        )}
+
                         Download
                     </Button>
                 </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;
     }
 
@@ -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>

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>