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>
@@ -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'
                             }`}
                         />
                       ))}
@@ -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 ?
@@ -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/LandingMagicItinerary.tsx

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

src/components/LandingVarietyOfAdventures.tsx

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

src/components/LoginModal.tsx

@@ -161,6 +161,7 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
 
         login(userData);
         toast.success("User Logged in successfully")
+        navigate("/passes")
       }
       onClose();
     } catch (err: any) {

src/components/Navbar.tsx

@@ -120,17 +120,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',
@@ -529,7 +529,7 @@ export default function Navbar({
                         ? 'Melbourne CityCards Logo'
                         : 'CityCards Logo'
                     }
-                    className="h-14 w-auto"
+                    className="h-17 w-auto"
                   />
                 </Link>
               </motion.div>

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/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/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/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}>

src/pages/PassesPage.tsx

@@ -415,7 +415,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 +452,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>