diff --git a/src/components/EnhancedTestimonials.tsx b/src/components/EnhancedTestimonials.tsx
index a49643b..ce90c18 100644
--- a/src/components/EnhancedTestimonials.tsx
+++ b/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%),
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
index a4e680a..1f58f5a 100644
--- a/src/components/HowItWorks.tsx
+++ b/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>
@@ -96,7 +97,7 @@ export function HowItWorks() {
         <div className="max-w-6xl mx-auto">
           {/* Desktop Layout */}
           <div className="hidden lg:grid lg:grid-cols-12 gap-8">
-            
+
             {/* Left Panel - Section Header */}
             <div className="lg:col-span-5">
               <div className="sticky top-8">
@@ -148,7 +149,7 @@ export function HowItWorks() {
                                   }}
                                 />
                               ))}
-                              
+
                               {/* Selection wave effect */}
                               <motion.div
                                 className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/20 to-transparent"
@@ -162,7 +163,7 @@ export function HowItWorks() {
                                 }}
                               />
                             </div>
-                            
+
                             {/* Active selection indicator */}
                             <motion.div
                               className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-2 h-0.5 bg-primary rounded-full"
@@ -178,7 +179,7 @@ export function HowItWorks() {
                             />
                           </div>
                         )}
-                        
+
                         {currentStep.id === 2 && (
                           // Select Pass - Card selection animation (larger version)
                           <div className="relative scale-150">
@@ -206,7 +207,7 @@ export function HowItWorks() {
                             />
                           </div>
                         )}
-                        
+
                         {currentStep.id === 3 && (
                           // Plan Journey - Calendar animation (larger version)
                           <div className="relative scale-150">
@@ -233,7 +234,7 @@ export function HowItWorks() {
                             </div>
                           </div>
                         )}
-                        
+
                         {currentStep.id === 4 && (
                           // Download App - Complete app download experience
                           <div className="relative scale-125">
@@ -241,7 +242,7 @@ export function HowItWorks() {
                             <div className="w-8 h-6 rounded border-2 border-primary/20 bg-primary/5 relative overflow-hidden">
                               {/* App Store Header */}
                               <div className="absolute top-0 left-0 right-0 h-1 bg-primary/10" />
-                              
+
                               {/* App Listing */}
                               <div className="absolute top-1 left-1 right-1 bottom-1 flex gap-1">
                                 <div className="w-2 h-2 rounded-sm border border-primary/30 bg-primary/10" />
@@ -250,7 +251,7 @@ export function HowItWorks() {
                                   <div className="h-0.5 bg-primary/20 rounded w-2/3" />
                                 </div>
                               </div>
-                              
+
                               {/* Download Button */}
                               <motion.div
                                 className="absolute bottom-1 right-1 w-2 h-1.5 border border-primary rounded-sm bg-primary/10"
@@ -267,7 +268,7 @@ export function HowItWorks() {
                                 <div className="absolute inset-0.5 bg-primary/20 rounded-sm" />
                               </motion.div>
                             </div>
-                            
+
                             {/* Download Progress Indicator */}
                             <motion.div
                               className="absolute -bottom-3 left-0 right-0 h-1 bg-gray-200 rounded-full overflow-hidden"
@@ -294,7 +295,7 @@ export function HowItWorks() {
                                 style={{ transformOrigin: 'left' }}
                               />
                             </motion.div>
-                            
+
                             {/* Phone with Installing App */}
                             <div className="absolute -right-6 -top-1 w-3 h-5 rounded-sm border border-primary/30 bg-white relative overflow-hidden">
                               {/* Phone Screen */}
@@ -314,7 +315,7 @@ export function HowItWorks() {
                                     ease: "easeOut"
                                   }}
                                 />
-                                
+
                                 {/* Installation Progress Circle */}
                                 <motion.div
                                   className="absolute top-0.5 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 border border-primary/30 rounded-full"
@@ -330,11 +331,11 @@ export function HowItWorks() {
                                   }}
                                 />
                               </div>
-                              
+
                               {/* Phone Home Button */}
                               <div className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0.5 h-0.5 rounded-full bg-primary/30" />
                             </div>
-                            
+
                             {/* Download Success Animation */}
                             <motion.div
                               className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-1 border border-primary rounded-full"
@@ -350,7 +351,7 @@ export function HowItWorks() {
                                 ease: "easeOut"
                               }}
                             />
-                            
+
                             {/* Download Arrow */}
                             <motion.div
                               className="absolute -top-2 left-1/2 transform -translate-x-1/2 text-primary"
@@ -365,10 +366,10 @@ 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>
-                            
+
                             {/* Success Particles */}
                             {[...Array(4)].map((_, idx) => (
                               <motion.div
@@ -396,7 +397,7 @@ export function HowItWorks() {
                             ))}
                           </div>
                         )}
-                        
+
                         {currentStep.id === 5 && (
                           // Explore & Enjoy - Floating heart (larger version)
                           <div className="relative scale-150">
@@ -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>
@@ -442,7 +443,7 @@ export function HowItWorks() {
                             ))}
                           </div>
                         )}
-                        
+
                         {currentStep.id === 6 && (
                           // Download App - App download animation (larger version)
                           <div className="relative scale-125">
@@ -464,7 +465,7 @@ export function HowItWorks() {
                                     ease: "backOut"
                                   }}
                                 />
-                                
+
                                 {/* Download progress bar */}
                                 <div className="absolute bottom-1 left-0.5 right-0.5 h-0.5 bg-gray-200 rounded-full overflow-hidden">
                                   <motion.div
@@ -481,11 +482,11 @@ export function HowItWorks() {
                                   />
                                 </div>
                               </div>
-                              
+
                               {/* Home button */}
                               <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-primary/30" />
                             </div>
-                            
+
                             {/* Download arrow animation */}
                             <motion.div
                               className="absolute -top-1 left-1/2 transform -translate-x-1/2 text-primary"
@@ -500,10 +501,10 @@ 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>
-                            
+
                             {/* Success particles */}
                             {[...Array(3)].map((_, idx) => (
                               <motion.div
@@ -562,13 +563,12 @@ 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'
+                            }`}
                         />
                       ))}
                     </div>
-                    
+
                     <button
                       onClick={nextStep}
                       className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
@@ -584,501 +584,501 @@ export function HowItWorks() {
             <div className="lg:col-span-7">
               {/* Extra Large Detailed Animation Frame */}
               <div className="w-[480px] h-[400px] rounded-3xl flex items-start justify-center relative overflow-hidden bg-white border border-gray-200 p-4">
-                    
-                    <AnimatePresence mode="wait">
-                      {activeStep === 0 && (
-                        <motion.div
-                          key="step1"
-                          initial={{ opacity: 0, scale: 0.8 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          exit={{ opacity: 0, scale: 1.2 }}
-                          transition={{ duration: 0.5, ease: "easeOut" }}
-                          className="relative w-full h-full flex items-start justify-center"
-                        >
-                          {/* Step 1: City Selection Website Interface */}
-                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
-                            
-                            {/* Website Header */}
-                            <div className="absolute top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 flex items-center justify-between px-6">
-                              <div className="flex items-center gap-3">
-                                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
-                                  <div className="w-4 h-4 rounded-full bg-white"></div>
-                                </div>
-                                <span className="font-bold text-gray-900">CityCards</span>
-                              </div>
-                              
-                              <div className="flex items-center gap-6">
-                                <span className="text-sm text-gray-600">Cities</span>
-                                <span className="text-sm text-gray-600">Passes</span>
-                                <span className="text-sm text-gray-600">About</span>
-                                <button className="px-4 py-2 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-lg">
-                                  Sign In
-                                </button>
+
+                <AnimatePresence mode="wait">
+                  {activeStep === 0 && (
+                    <motion.div
+                      key="step1"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.2 }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="relative w-full h-full flex items-start justify-center"
+                    >
+                      {/* Step 1: City Selection Website Interface */}
+                      <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
+
+                        {/* Website Header */}
+                        <div className="absolute top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 flex items-center justify-between px-6">
+                          <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                              <div className="w-4 h-4 rounded-full bg-white"></div>
+                            </div>
+                            <span className="font-bold text-gray-900">CityCards</span>
+                          </div>
+
+                          <div className="flex items-center gap-6">
+                            <span className="text-sm text-gray-600">Cities</span>
+                            <span className="text-sm text-gray-600">Passes</span>
+                            <span className="text-sm text-gray-600">About</span>
+                            <button className="px-4 py-2 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-lg">
+                              Sign In
+                            </button>
+                          </div>
+                        </div>
+
+                        {/* Main Content Area */}
+                        <div className="absolute top-16 left-0 right-0 bottom-0 p-6">
+
+                          {/* Hero Section */}
+                          <div className="mb-6">
+                            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+                              <span className="font-light">Choose Your</span>{' '}
+                              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Adventure</span>
+                            </h1>
+                            <p className="text-gray-600 text-sm">Explore amazing cities with our curated travel passes</p>
+                          </div>
+
+                          {/* Search Bar */}
+                          <motion.div
+                            className="mb-6 relative"
+                            animate={{
+                              scale: [1, 1.02, 1],
+                            }}
+                            transition={{
+                              duration: 3,
+                              repeat: Infinity,
+                              ease: "easeInOut"
+                            }}
+                          >
+                            <div className="relative">
+                              <input
+                                className="w-full h-12 px-4 pl-12 bg-gray-50 border border-gray-200 rounded-xl text-sm"
+                                placeholder="Search cities..."
+                                readOnly
+                              />
+                              <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" />
+                                </svg>
                               </div>
                             </div>
+                          </motion.div>
 
-                            {/* Main Content Area */}
-                            <div className="absolute top-16 left-0 right-0 bottom-0 p-6">
-                              
-                              {/* Hero Section */}
-                              <div className="mb-6">
-                                <h1 className="text-2xl font-bold text-gray-900 mb-2">
-                                  <span className="font-light">Choose Your</span>{' '}
-                                  <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Adventure</span>
-                                </h1>
-                                <p className="text-gray-600 text-sm">Explore amazing cities with our curated travel passes</p>
-                              </div>
-
-                              {/* Search Bar */}
+                          {/* City Grid */}
+                          <div className="grid grid-cols-2 gap-4">
+                            {[
+                              { name: 'Sydney', attractions: '200+ Attractions', image: 'https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=200&h=150&fit=crop', popular: true },
+                              { name: 'Melbourne', attractions: '150+ Attractions', image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=200&h=150&fit=crop', popular: false },
+                              { name: 'Brisbane', attractions: '120+ Attractions', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=150&fit=crop', popular: false },
+                              { name: 'Perth', attractions: '90+ Attractions', image: 'https://images.unsplash.com/photo-1544735716-392fe2489ffa?w=200&h=150&fit=crop', popular: false }
+                            ].map((city, idx) => (
                               <motion.div
-                                className="mb-6 relative"
+                                key={idx}
+                                className="relative bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm cursor-pointer"
                                 animate={{
-                                  scale: [1, 1.02, 1],
+                                  scale: city.popular ? [1, 1.05, 1] : [0.98, 1, 0.98],
+                                  borderColor: city.popular ?
+                                    ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] :
+                                    ['rgb(229, 231, 235)'],
                                 }}
                                 transition={{
-                                  duration: 3,
+                                  duration: 2.5,
                                   repeat: Infinity,
+                                  delay: idx * 0.4,
                                   ease: "easeInOut"
                                 }}
                               >
-                                <div className="relative">
-                                  <input 
-                                    className="w-full h-12 px-4 pl-12 bg-gray-50 border border-gray-200 rounded-xl text-sm"
-                                    placeholder="Search cities..."
-                                    readOnly
-                                  />
-                                  <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"/>
+                                {city.popular && (
+                                  <motion.div
+                                    className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center"
+                                    animate={{
+                                      scale: [1, 1.2, 1],
+                                    }}
+                                    transition={{
+                                      duration: 2,
+                                      repeat: Infinity,
+                                      ease: "easeInOut"
+                                    }}
+                                  >
+                                    <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                     </svg>
-                                  </div>
+                                  </motion.div>
+                                )}
+
+                                <div className="h-24 relative overflow-hidden">
+                                  <ImageWithFallback
+                                    src={city.image}
+                                    alt={city.name}
+                                    className="w-full h-full object-cover"
+                                  />
+                                  <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
+                                </div>
+
+                                <div className="p-3">
+                                  <h3 className="font-semibold text-gray-900 text-sm mb-1">{city.name}</h3>
+                                  <p className="text-xs text-gray-600">{city.attractions}</p>
+
+                                  <motion.button
+                                    className="w-full mt-3 py-2 bg-gradient-to-r from-primary to-secondary text-white text-xs rounded-lg"
+                                    animate={{
+                                      backgroundColor: city.popular ?
+                                        ['rgb(99, 102, 241)', 'rgb(129, 140, 248)', 'rgb(99, 102, 241)'] :
+                                        ['rgb(99, 102, 241)'],
+                                    }}
+                                    transition={{
+                                      duration: 2,
+                                      repeat: Infinity,
+                                      delay: idx * 0.4 + 1,
+                                      ease: "easeInOut"
+                                    }}
+                                  >
+                                    Explore City
+                                  </motion.button>
                                 </div>
                               </motion.div>
-
-                              {/* City Grid */}
-                              <div className="grid grid-cols-2 gap-4">
-                                {[
-                                  { name: 'Sydney', attractions: '200+ Attractions', image: 'https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=200&h=150&fit=crop', popular: true },
-                                  { name: 'Melbourne', attractions: '150+ Attractions', image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=200&h=150&fit=crop', popular: false },
-                                  { name: 'Brisbane', attractions: '120+ Attractions', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=150&fit=crop', popular: false },
-                                  { name: 'Perth', attractions: '90+ Attractions', image: 'https://images.unsplash.com/photo-1544735716-392fe2489ffa?w=200&h=150&fit=crop', popular: false }
-                                ].map((city, idx) => (
-                                  <motion.div
-                                    key={idx}
-                                    className="relative bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm cursor-pointer"
-                                    animate={{
-                                      scale: city.popular ? [1, 1.05, 1] : [0.98, 1, 0.98],
-                                      borderColor: city.popular ? 
-                                        ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] : 
-                                        ['rgb(229, 231, 235)'],
-                                    }}
-                                    transition={{
-                                      duration: 2.5,
-                                      repeat: Infinity,
-                                      delay: idx * 0.4,
-                                      ease: "easeInOut"
-                                    }}
-                                  >
-                                    {city.popular && (
-                                      <motion.div
-                                        className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center"
-                                        animate={{
-                                          scale: [1, 1.2, 1],
-                                        }}
-                                        transition={{
-                                          duration: 2,
-                                          repeat: Infinity,
-                                          ease: "easeInOut"
-                                        }}
-                                      >
-                                        <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                        </svg>
-                                      </motion.div>
-                                    )}
-                                    
-                                    <div className="h-24 relative overflow-hidden">
-                                      <ImageWithFallback
-                                        src={city.image}
-                                        alt={city.name}
-                                        className="w-full h-full object-cover"
-                                      />
-                                      <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
-                                    </div>
-                                    
-                                    <div className="p-3">
-                                      <h3 className="font-semibold text-gray-900 text-sm mb-1">{city.name}</h3>
-                                      <p className="text-xs text-gray-600">{city.attractions}</p>
-                                      
-                                      <motion.button
-                                        className="w-full mt-3 py-2 bg-gradient-to-r from-primary to-secondary text-white text-xs rounded-lg"
-                                        animate={{
-                                          backgroundColor: city.popular ? 
-                                            ['rgb(99, 102, 241)', 'rgb(129, 140, 248)', 'rgb(99, 102, 241)'] : 
-                                            ['rgb(99, 102, 241)'],
-                                        }}
-                                        transition={{
-                                          duration: 2,
-                                          repeat: Infinity,
-                                          delay: idx * 0.4 + 1,
-                                          ease: "easeInOut"
-                                        }}
-                                      >
-                                        Explore City
-                                      </motion.button>
-                                    </div>
-                                  </motion.div>
-                                ))}
-                              </div>
-
-                              {/* Filter Tabs */}
-                              <div className="absolute bottom-4 left-6 right-6 flex justify-center gap-2">
-                                {['All Cities', 'Popular', 'New'].map((filter, idx) => (
-                                  <motion.button
-                                    key={filter}
-                                    className="px-4 py-2 text-xs rounded-full border border-gray-200 bg-white"
-                                    animate={{
-                                      borderColor: idx === 1 ? 
-                                        ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] : 
-                                        ['rgb(229, 231, 235)'],
-                                      backgroundColor: idx === 1 ? 
-                                        ['rgb(255, 255, 255)', 'rgb(99, 102, 241)', 'rgb(255, 255, 255)'] : 
-                                        ['rgb(255, 255, 255)'],
-                                      color: idx === 1 ? 
-                                        ['rgb(75, 85, 99)', 'rgb(255, 255, 255)', 'rgb(75, 85, 99)'] : 
-                                        ['rgb(75, 85, 99)'],
-                                    }}
-                                    transition={{
-                                      duration: 3,
-                                      repeat: Infinity,
-                                      delay: idx * 0.5 + 2,
-                                      ease: "easeInOut"
-                                    }}
-                                  >
-                                    {filter}
-                                  </motion.button>
-                                ))}
-                              </div>
-                            </div>
+                            ))}
                           </div>
-                        </motion.div>
-                      )}
 
-                      {activeStep === 1 && (
-                        <motion.div
-                          key="step2"
-                          initial={{ opacity: 0, scale: 0.8 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          exit={{ opacity: 0, scale: 1.2 }}
-                          transition={{ duration: 0.5, ease: "easeOut" }}
-                          className="relative w-full h-full flex items-start justify-center"
-                        >
-                          {/* Step 2: Pass Selection & Pricing Interface */}
-                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
-                            
-                            {/* Website Header */}
-                            <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
-                              <div className="flex items-center gap-2">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
-                                  <div className="w-3 h-3 rounded-full bg-white"></div>
-                                </div>
-                                <span className="font-bold text-gray-900 text-sm">CityCards</span>
-                              </div>
-                              <div className="flex items-center gap-4">
-                                <span className="text-xs text-gray-600">← Back</span>
-                                <div className="text-xs text-gray-600">Sydney</div>
-                              </div>
-                            </div>
-
-                            {/* Main Content */}
-                            <div className="absolute top-12 left-0 right-0 bottom-0 p-4">
-                              
-                              {/* Header */}
-                              <div className="mb-4">
-                                <h2 className="text-lg font-bold text-gray-900 mb-1">
-                                  <span className="font-normal">Choose Your</span>{' '}
-                                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Pass</span>
-                                </h2>
-                                <p className="text-xs text-gray-600">Select the perfect pass for your Sydney adventure</p>
-                              </div>
-
-                              {/* Pass Cards */}
-                              <div className="grid grid-cols-3 gap-3 mb-4">
-                                {[
-                                  { 
-                                    name: '1-Day Pass', 
-                                    price: '$49', 
-                                    originalPrice: '$65',
-                                    savings: 'Save $16',
-                                    features: ['15+ Attractions', 'Skip Lines', 'Mobile Pass'], 
-                                    popular: false,
-                                    color: 'from-blue-500 to-blue-600'
-                                  },
-                                  { 
-                                    name: '3-Day Pass', 
-                                    price: '$99', 
-                                    originalPrice: '$150',
-                                    savings: 'Save $51',
-                                    features: ['30+ Attractions', 'Skip Lines', 'Mobile Pass', 'Free Transit', 'Bonus Tours'], 
-                                    popular: true,
-                                    color: 'from-primary to-secondary'
-                                  },
-                                  { 
-                                    name: '7-Day Pass', 
-                                    price: '$149', 
-                                    originalPrice: '$220',
-                                    savings: 'Save $71',
-                                    features: ['50+ Attractions', 'Skip Lines', 'Mobile Pass', 'Free Transit', 'All Tours', 'VIP Access'], 
-                                    popular: false,
-                                    color: 'from-purple-500 to-purple-600'
-                                  }
-                                ].map((pass, idx) => (
-                                  <motion.div
-                                    key={idx}
-                                    className="relative bg-white rounded-xl border-2 overflow-hidden shadow-sm"
-                                    animate={{
-                                      borderColor: pass.popular ? 
-                                        ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] : 
-                                        ['rgb(229, 231, 235)'],
-                                      scale: pass.popular ? [1, 1.03, 1] : [0.98, 1, 0.98],
-                                      boxShadow: pass.popular ? 
-                                        ['0 1px 3px rgba(0,0,0,0.1)', '0 10px 25px rgba(99,102,241,0.2)', '0 1px 3px rgba(0,0,0,0.1)'] :
-                                        ['0 1px 3px rgba(0,0,0,0.1)'],
-                                    }}
-                                    transition={{
-                                      duration: 2.5,
-                                      repeat: Infinity,
-                                      delay: idx * 0.3,
-                                      ease: "easeInOut"
-                                    }}
-                                  >
-                                    {pass.popular && (
-                                      <motion.div
-                                        className="absolute -top-1 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary to-secondary text-white px-2 py-1 rounded-full text-xs font-medium"
-                                        animate={{
-                                          y: [-2, 0, -2],
-                                        }}
-                                        transition={{
-                                          duration: 2,
-                                          repeat: Infinity,
-                                          ease: "easeInOut"
-                                        }}
-                                      >
-                                        Most Popular
-                                      </motion.div>
-                                    )}
-
-                                    {/* Card Header */}
-                                    <div className={`p-3 bg-gradient-to-r ${pass.color} text-white text-center`}>
-                                      <h3 className="font-bold text-sm">{pass.name}</h3>
-                                      <div className="mt-1">
-                                        <span className="text-lg font-bold">{pass.price}</span>
-                                        <div className="text-xs opacity-80">
-                                          <span className="line-through">{pass.originalPrice}</span>
-                                          <span className="ml-1">{pass.savings}</span>
-                                        </div>
-                                      </div>
-                                    </div>
-
-                                    {/* Features */}
-                                    <div className="p-3 space-y-2">
-                                      {pass.features.slice(0, 4).map((feature, featureIdx) => (
-                                        <motion.div
-                                          key={featureIdx}
-                                          className="flex items-center gap-2 text-xs"
-                                          animate={{
-                                            opacity: [0.7, 1, 0.7],
-                                          }}
-                                          transition={{
-                                            duration: 2,
-                                            repeat: Infinity,
-                                            delay: idx * 0.3 + featureIdx * 0.2,
-                                            ease: "easeInOut"
-                                          }}
-                                        >
-                                          <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
-                                          <span className="text-gray-700">{feature}</span>
-                                        </motion.div>
-                                      ))}
-                                      {pass.features.length > 4 && (
-                                        <div className="text-xs text-gray-500">
-                                          +{pass.features.length - 4} more...
-                                        </div>
-                                      )}
-                                    </div>
-
-                                    {/* Select Button */}
-                                    <div className="p-3 pt-0">
-                                      <motion.button
-                                        className={`w-full py-2 rounded-lg text-xs font-medium bg-gradient-to-r ${pass.color} text-white`}
-                                        animate={{
-                                          opacity: pass.popular ? [1, 0.8, 1] : [0.9, 1, 0.9],
-                                          scale: pass.popular ? [1, 1.02, 1] : [1],
-                                        }}
-                                        transition={{
-                                          duration: 2,
-                                          repeat: Infinity,
-                                          delay: idx * 0.3 + 1,
-                                          ease: "easeInOut"
-                                        }}
-                                      >
-                                        Select Pass
-                                      </motion.button>
-                                    </div>
-                                  </motion.div>
-                                ))}
-                              </div>
-
-                              {/* Trust Indicators */}
-                              <div className="bg-gray-50 rounded-lg p-3 mb-3">
-                                <div className="flex items-center justify-between text-xs">
-                                  <div className="flex items-center gap-2">
-                                    <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
-                                      <svg className="w-2 h-2 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" />
-                                      </svg>
-                                    </div>
-                                    <span className="text-gray-700">Free cancellation within 24h</span>
-                                  </div>
-                                  <div className="flex items-center gap-1">
-                                    <span className="text-yellow-500">★★★★★</span>
-                                    <span className="text-gray-600">4.8 (2.1k reviews)</span>
-                                  </div>
-                                </div>
-                              </div>
-
-                              {/* Comparison Toggle */}
-                              <motion.div
-                                className="text-center"
+                          {/* Filter Tabs */}
+                          <div className="absolute bottom-4 left-6 right-6 flex justify-center gap-2">
+                            {['All Cities', 'Popular', 'New'].map((filter, idx) => (
+                              <motion.button
+                                key={filter}
+                                className="px-4 py-2 text-xs rounded-full border border-gray-200 bg-white"
                                 animate={{
-                                  opacity: [0.7, 1, 0.7],
+                                  borderColor: idx === 1 ?
+                                    ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] :
+                                    ['rgb(229, 231, 235)'],
+                                  backgroundColor: idx === 1 ?
+                                    ['rgb(255, 255, 255)', 'rgb(99, 102, 241)', 'rgb(255, 255, 255)'] :
+                                    ['rgb(255, 255, 255)'],
+                                  color: idx === 1 ?
+                                    ['rgb(75, 85, 99)', 'rgb(255, 255, 255)', 'rgb(75, 85, 99)'] :
+                                    ['rgb(75, 85, 99)'],
                                 }}
                                 transition={{
                                   duration: 3,
                                   repeat: Infinity,
+                                  delay: idx * 0.5 + 2,
                                   ease: "easeInOut"
                                 }}
                               >
-                                <button className="text-xs text-primary hover:text-secondary transition-colors">
-                                  View detailed comparison →
-                                </button>
+                                {filter}
+                              </motion.button>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+
+                  {activeStep === 1 && (
+                    <motion.div
+                      key="step2"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.2 }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="relative w-full h-full flex items-start justify-center"
+                    >
+                      {/* Step 2: Pass Selection & Pricing Interface */}
+                      <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
+
+                        {/* Website Header */}
+                        <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
+                          <div className="flex items-center gap-2">
+                            <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                              <div className="w-3 h-3 rounded-full bg-white"></div>
+                            </div>
+                            <span className="font-bold text-gray-900 text-sm">CityCards</span>
+                          </div>
+                          <div className="flex items-center gap-4">
+                            <span className="text-xs text-gray-600">← Back</span>
+                            <div className="text-xs text-gray-600">Sydney</div>
+                          </div>
+                        </div>
+
+                        {/* Main Content */}
+                        <div className="absolute top-12 left-0 right-0 bottom-0 p-4">
+
+                          {/* Header */}
+                          <div className="mb-4">
+                            <h2 className="text-lg font-bold text-gray-900 mb-1">
+                              <span className="font-normal">Choose Your</span>{' '}
+                              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Pass</span>
+                            </h2>
+                            <p className="text-xs text-gray-600">Select the perfect pass for your Sydney adventure</p>
+                          </div>
+
+                          {/* Pass Cards */}
+                          <div className="grid grid-cols-3 gap-3 mb-4">
+                            {[
+                              {
+                                name: '1-Day Pass',
+                                price: '$49',
+                                originalPrice: '$65',
+                                savings: 'Save $16',
+                                features: ['15+ Attractions', 'Skip Lines', 'Mobile Pass'],
+                                popular: false,
+                                color: 'from-blue-500 to-blue-600'
+                              },
+                              {
+                                name: '3-Day Pass',
+                                price: '$99',
+                                originalPrice: '$150',
+                                savings: 'Save $51',
+                                features: ['30+ Attractions', 'Skip Lines', 'Mobile Pass', 'Free Transit', 'Bonus Tours'],
+                                popular: true,
+                                color: 'from-primary to-secondary'
+                              },
+                              {
+                                name: '7-Day Pass',
+                                price: '$149',
+                                originalPrice: '$220',
+                                savings: 'Save $71',
+                                features: ['50+ Attractions', 'Skip Lines', 'Mobile Pass', 'Free Transit', 'All Tours', 'VIP Access'],
+                                popular: false,
+                                color: 'from-purple-500 to-purple-600'
+                              }
+                            ].map((pass, idx) => (
+                              <motion.div
+                                key={idx}
+                                className="relative bg-white rounded-xl border-2 overflow-hidden shadow-sm"
+                                animate={{
+                                  borderColor: pass.popular ?
+                                    ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] :
+                                    ['rgb(229, 231, 235)'],
+                                  scale: pass.popular ? [1, 1.03, 1] : [0.98, 1, 0.98],
+                                  boxShadow: pass.popular ?
+                                    ['0 1px 3px rgba(0,0,0,0.1)', '0 10px 25px rgba(99,102,241,0.2)', '0 1px 3px rgba(0,0,0,0.1)'] :
+                                    ['0 1px 3px rgba(0,0,0,0.1)'],
+                                }}
+                                transition={{
+                                  duration: 2.5,
+                                  repeat: Infinity,
+                                  delay: idx * 0.3,
+                                  ease: "easeInOut"
+                                }}
+                              >
+                                {pass.popular && (
+                                  <motion.div
+                                    className="absolute -top-1 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary to-secondary text-white px-2 py-1 rounded-full text-xs font-medium"
+                                    animate={{
+                                      y: [-2, 0, -2],
+                                    }}
+                                    transition={{
+                                      duration: 2,
+                                      repeat: Infinity,
+                                      ease: "easeInOut"
+                                    }}
+                                  >
+                                    Most Popular
+                                  </motion.div>
+                                )}
+
+                                {/* Card Header */}
+                                <div className={`p-3 bg-gradient-to-r ${pass.color} text-white text-center`}>
+                                  <h3 className="font-bold text-sm">{pass.name}</h3>
+                                  <div className="mt-1">
+                                    <span className="text-lg font-bold">{pass.price}</span>
+                                    <div className="text-xs opacity-80">
+                                      <span className="line-through">{pass.originalPrice}</span>
+                                      <span className="ml-1">{pass.savings}</span>
+                                    </div>
+                                  </div>
+                                </div>
+
+                                {/* Features */}
+                                <div className="p-3 space-y-2">
+                                  {pass.features.slice(0, 4).map((feature, featureIdx) => (
+                                    <motion.div
+                                      key={featureIdx}
+                                      className="flex items-center gap-2 text-xs"
+                                      animate={{
+                                        opacity: [0.7, 1, 0.7],
+                                      }}
+                                      transition={{
+                                        duration: 2,
+                                        repeat: Infinity,
+                                        delay: idx * 0.3 + featureIdx * 0.2,
+                                        ease: "easeInOut"
+                                      }}
+                                    >
+                                      <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
+                                      <span className="text-gray-700">{feature}</span>
+                                    </motion.div>
+                                  ))}
+                                  {pass.features.length > 4 && (
+                                    <div className="text-xs text-gray-500">
+                                      +{pass.features.length - 4} more...
+                                    </div>
+                                  )}
+                                </div>
+
+                                {/* Select Button */}
+                                <div className="p-3 pt-0">
+                                  <motion.button
+                                    className={`w-full py-2 rounded-lg text-xs font-medium bg-gradient-to-r ${pass.color} text-white`}
+                                    animate={{
+                                      opacity: pass.popular ? [1, 0.8, 1] : [0.9, 1, 0.9],
+                                      scale: pass.popular ? [1, 1.02, 1] : [1],
+                                    }}
+                                    transition={{
+                                      duration: 2,
+                                      repeat: Infinity,
+                                      delay: idx * 0.3 + 1,
+                                      ease: "easeInOut"
+                                    }}
+                                  >
+                                    Select Pass
+                                  </motion.button>
+                                </div>
                               </motion.div>
+                            ))}
+                          </div>
+
+                          {/* Trust Indicators */}
+                          <div className="bg-gray-50 rounded-lg p-3 mb-3">
+                            <div className="flex items-center justify-between text-xs">
+                              <div className="flex items-center gap-2">
+                                <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
+                                  <svg className="w-2 h-2 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" />
+                                  </svg>
+                                </div>
+                                <span className="text-gray-700">Free cancellation within 24h</span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <span className="text-yellow-500">★★★★★</span>
+                                <span className="text-gray-600">4.8 (2.1k reviews)</span>
+                              </div>
                             </div>
                           </div>
-                        </motion.div>
-                      )}
 
-                      {activeStep === 2 && (
-                        <motion.div
-                          key="step3"
-                          initial={{ opacity: 0, scale: 0.8 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          exit={{ opacity: 0, scale: 1.2 }}
-                          transition={{ duration: 0.5, ease: "easeOut" }}
-                          className="relative w-full h-full flex items-start justify-center"
-                        >
-                          {/* Step 3: Journey Planning & Calendar Interface */}
-                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
-                            
-                            {/* Website Header */}
-                            <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
-                              <div className="flex items-center gap-2">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
-                                  <div className="w-3 h-3 rounded-full bg-white"></div>
-                                </div>
-                                <span className="font-bold text-gray-900 text-sm">CityCards</span>
-                              </div>
-                              <div className="flex items-center gap-4">
-                                <span className="text-xs text-gray-600">← Back</span>
-                                <div className="text-xs text-gray-600">3-Day Pass Selected</div>
-                              </div>
+                          {/* Comparison Toggle */}
+                          <motion.div
+                            className="text-center"
+                            animate={{
+                              opacity: [0.7, 1, 0.7],
+                            }}
+                            transition={{
+                              duration: 3,
+                              repeat: Infinity,
+                              ease: "easeInOut"
+                            }}
+                          >
+                            <button className="text-xs text-primary hover:text-secondary transition-colors">
+                              View detailed comparison →
+                            </button>
+                          </motion.div>
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+
+                  {activeStep === 2 && (
+                    <motion.div
+                      key="step3"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.2 }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="relative w-full h-full flex items-start justify-center"
+                    >
+                      {/* Step 3: Journey Planning & Calendar Interface */}
+                      <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
+
+                        {/* Website Header */}
+                        <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
+                          <div className="flex items-center gap-2">
+                            <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                              <div className="w-3 h-3 rounded-full bg-white"></div>
                             </div>
+                            <span className="font-bold text-gray-900 text-sm">CityCards</span>
+                          </div>
+                          <div className="flex items-center gap-4">
+                            <span className="text-xs text-gray-600">← Back</span>
+                            <div className="text-xs text-gray-600">3-Day Pass Selected</div>
+                          </div>
+                        </div>
 
-                            {/* Main Content */}
-                            <div className="absolute top-12 left-0 right-0 bottom-0 p-4">
-                              
-                              {/* Header */}
-                              <div className="mb-4">
-                                <h2 className="text-lg font-bold text-gray-900 mb-1">
-                                  <span className="font-normal">Plan Your</span>{' '}
-                                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Journey</span>
-                                </h2>
-                                <p className="text-xs text-gray-600">Choose your travel dates and create your itinerary</p>
+                        {/* Main Content */}
+                        <div className="absolute top-12 left-0 right-0 bottom-0 p-4">
+
+                          {/* Header */}
+                          <div className="mb-4">
+                            <h2 className="text-lg font-bold text-gray-900 mb-1">
+                              <span className="font-normal">Plan Your</span>{' '}
+                              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Journey</span>
+                            </h2>
+                            <p className="text-xs text-gray-600">Choose your travel dates and create your itinerary</p>
+                          </div>
+
+                          {/* Two Column Layout */}
+                          <div className="grid grid-cols-5 gap-4 h-full">
+
+                            {/* Calendar Section */}
+                            <div className="col-span-3">
+                              {/* Month Navigation */}
+                              <div className="flex items-center justify-between mb-4">
+                                <motion.button
+                                  className="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50"
+                                  animate={{
+                                    borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
+                                  }}
+                                  transition={{
+                                    duration: 2,
+                                    repeat: Infinity,
+                                    ease: "easeInOut"
+                                  }}
+                                >
+                                  <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" />
+                                  </svg>
+                                </motion.button>
+
+                                <h3 className="font-semibold text-gray-900">December 2024</h3>
+
+                                <motion.button
+                                  className="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50"
+                                  animate={{
+                                    borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
+                                  }}
+                                  transition={{
+                                    duration: 2,
+                                    repeat: Infinity,
+                                    delay: 0.5,
+                                    ease: "easeInOut"
+                                  }}
+                                >
+                                  <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" />
+                                  </svg>
+                                </motion.button>
                               </div>
 
-                              {/* Two Column Layout */}
-                              <div className="grid grid-cols-5 gap-4 h-full">
-                                
-                                {/* Calendar Section */}
-                                <div className="col-span-3">
-                                  {/* Month Navigation */}
-                                  <div className="flex items-center justify-between mb-4">
-                                    <motion.button
-                                      className="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50"
-                                      animate={{
-                                        borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
-                                      }}
-                                      transition={{
-                                        duration: 2,
-                                        repeat: Infinity,
-                                        ease: "easeInOut"
-                                      }}
-                                    >
-                                      <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"/>
-                                      </svg>
-                                    </motion.button>
-                                    
-                                    <h3 className="font-semibold text-gray-900">December 2024</h3>
-                                    
-                                    <motion.button
-                                      className="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50"
-                                      animate={{
-                                        borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
-                                      }}
-                                      transition={{
-                                        duration: 2,
-                                        repeat: Infinity,
-                                        delay: 0.5,
-                                        ease: "easeInOut"
-                                      }}
-                                    >
-                                      <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"/>
-                                      </svg>
-                                    </motion.button>
-                                  </div>
-
-                                  {/* Calendar Grid */}
-                                  <div className="space-y-1">
-                                    {/* Weekday Headers */}
-                                    <div className="grid grid-cols-7 gap-1 mb-2">
-                                      {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
-                                        <div key={day} className="text-center text-xs font-medium text-gray-500 py-1">
-                                          {day}
-                                        </div>
-                                      ))}
+                              {/* Calendar Grid */}
+                              <div className="space-y-1">
+                                {/* Weekday Headers */}
+                                <div className="grid grid-cols-7 gap-1 mb-2">
+                                  {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
+                                    <div key={day} className="text-center text-xs font-medium text-gray-500 py-1">
+                                      {day}
                                     </div>
-                                    
-                                    {/* Calendar Days */}
-                                    <div className="grid grid-cols-7 gap-1">
-                                      {[
-                                        null, null, null, null, null, 1, 2,
-                                        3, 4, 5, 6, 7, 8, 9,
-                                        10, 11, 12, 13, 14, 15, 16,
-                                        17, 18, 19, 20, 21, 22, 23,
-                                        24, 25, 26, 27, 28, 29, 30,
-                                        31
-                                      ].map((date, idx) => {
-                                        const isSelected = date === 15 || date === 16 || date === 17;
-                                        const isToday = date === 12;
-                                        const isAvailable = date && date > 11;
-                                        
-                                        return (
-                                          <motion.div
-                                            key={idx}
-                                            className={`
+                                  ))}
+                                </div>
+
+                                {/* Calendar Days */}
+                                <div className="grid grid-cols-7 gap-1">
+                                  {[
+                                    null, null, null, null, null, 1, 2,
+                                    3, 4, 5, 6, 7, 8, 9,
+                                    10, 11, 12, 13, 14, 15, 16,
+                                    17, 18, 19, 20, 21, 22, 23,
+                                    24, 25, 26, 27, 28, 29, 30,
+                                    31
+                                  ].map((date, idx) => {
+                                    const isSelected = date === 15 || date === 16 || date === 17;
+                                    const isToday = date === 12;
+                                    const isAvailable = date && date > 11;
+
+                                    return (
+                                      <motion.div
+                                        key={idx}
+                                        className={`
                                               aspect-square flex items-center justify-center text-xs rounded-lg cursor-pointer
                                               ${!date ? 'invisible' : ''}
                                               ${isSelected ? 'bg-gradient-to-r from-primary to-secondary text-white' : ''}
@@ -1086,173 +1086,506 @@ export function HowItWorks() {
                                               ${isAvailable && !isSelected && !isToday ? 'hover:bg-gray-100 text-gray-700' : ''}
                                               ${!isAvailable && date ? 'text-gray-300 cursor-not-allowed' : ''}
                                             `}
-                                            animate={{
-                                              scale: isSelected ? [1, 1.1, 1] : [1],
-                                              boxShadow: isSelected ? 
-                                                ['0 0 0 rgba(99,102,241,0)', '0 0 20px rgba(99,102,241,0.3)', '0 0 0 rgba(99,102,241,0)'] :
-                                                ['0 0 0 rgba(99,102,241,0)'],
-                                            }}
-                                            transition={{
-                                              duration: 2,
-                                              repeat: Infinity,
-                                              delay: idx * 0.03,
-                                              ease: "easeInOut"
-                                            }}
-                                          >
-                                            {date}
-                                          </motion.div>
-                                        );
-                                      })}
-                                    </div>
-                                  </div>
-                                </div>
-
-                                {/* Itinerary Section */}
-                                <div className="col-span-2 border-l border-gray-100 pl-4">
-                                  <div className="mb-4">
-                                    <h4 className="font-semibold text-gray-900 text-sm mb-2">Your Itinerary</h4>
-                                    <p className="text-xs text-gray-500">3 days selected</p>
-                                  </div>
-
-                                  {/* Itinerary Items */}
-                                  <div className="space-y-3">
-                                    {[
-                                      { 
-                                        day: 'Day 1', 
-                                        date: 'Dec 15', 
-                                        attractions: ['Opera House', 'Harbour Bridge', 'Circular Quay'],
-                                        color: 'bg-blue-100 text-blue-600'
-                                      },
-                                      { 
-                                        day: 'Day 2', 
-                                        date: 'Dec 16', 
-                                        attractions: ['Bondi Beach', 'Art Gallery', 'Darling Harbour'],
-                                        color: 'bg-green-100 text-green-600'
-                                      },
-                                      { 
-                                        day: 'Day 3', 
-                                        date: 'Dec 17', 
-                                        attractions: ['Blue Mountains', 'Wildlife Park', 'Scenic Railway'],
-                                        color: 'bg-purple-100 text-purple-600'
-                                      }
-                                    ].map((day, dayIdx) => (
-                                      <motion.div
-                                        key={dayIdx}
-                                        className="bg-white border border-gray-200 rounded-lg p-3"
                                         animate={{
-                                          borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
-                                          boxShadow: ['0 1px 3px rgba(0,0,0,0.1)', '0 4px 12px rgba(99,102,241,0.15)', '0 1px 3px rgba(0,0,0,0.1)'],
+                                          scale: isSelected ? [1, 1.1, 1] : [1],
+                                          boxShadow: isSelected ?
+                                            ['0 0 0 rgba(99,102,241,0)', '0 0 20px rgba(99,102,241,0.3)', '0 0 0 rgba(99,102,241,0)'] :
+                                            ['0 0 0 rgba(99,102,241,0)'],
                                         }}
                                         transition={{
-                                          duration: 3,
+                                          duration: 2,
                                           repeat: Infinity,
-                                          delay: dayIdx * 0.5 + 1,
+                                          delay: idx * 0.03,
                                           ease: "easeInOut"
                                         }}
                                       >
-                                        <div className="flex items-center justify-between mb-2">
-                                          <div className={`px-2 py-1 rounded-full text-xs font-medium ${day.color}`}>
-                                            {day.day}
-                                          </div>
-                                          <span className="text-xs text-gray-500">{day.date}</span>
-                                        </div>
-                                        
-                                        <div className="space-y-1">
-                                          {day.attractions.map((attraction, attractionIdx) => (
-                                            <motion.div
-                                              key={attractionIdx}
-                                              className="flex items-center gap-2 text-xs"
-                                              animate={{
-                                                opacity: [0.7, 1, 0.7],
-                                              }}
-                                              transition={{
-                                                duration: 2,
-                                                repeat: Infinity,
-                                                delay: dayIdx * 0.5 + attractionIdx * 0.3 + 2,
-                                                ease: "easeInOut"
-                                              }}
-                                            >
-                                              <div className="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
-                                              <span className="text-gray-600">{attraction}</span>
-                                            </motion.div>
-                                          ))}
-                                        </div>
+                                        {date}
                                       </motion.div>
-                                    ))}
-                                  </div>
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                            </div>
 
-                                  {/* Add Activity Button */}
-                                  <motion.button
-                                    className="w-full mt-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-xs text-gray-500 hover:border-primary hover:text-primary transition-colors"
+                            {/* Itinerary Section */}
+                            <div className="col-span-2 border-l border-gray-100 pl-4">
+                              <div className="mb-4">
+                                <h4 className="font-semibold text-gray-900 text-sm mb-2">Your Itinerary</h4>
+                                <p className="text-xs text-gray-500">3 days selected</p>
+                              </div>
+
+                              {/* Itinerary Items */}
+                              <div className="space-y-3">
+                                {[
+                                  {
+                                    day: 'Day 1',
+                                    date: 'Dec 15',
+                                    attractions: ['Opera House', 'Harbour Bridge', 'Circular Quay'],
+                                    color: 'bg-blue-100 text-blue-600'
+                                  },
+                                  {
+                                    day: 'Day 2',
+                                    date: 'Dec 16',
+                                    attractions: ['Bondi Beach', 'Art Gallery', 'Darling Harbour'],
+                                    color: 'bg-green-100 text-green-600'
+                                  },
+                                  {
+                                    day: 'Day 3',
+                                    date: 'Dec 17',
+                                    attractions: ['Blue Mountains', 'Wildlife Park', 'Scenic Railway'],
+                                    color: 'bg-purple-100 text-purple-600'
+                                  }
+                                ].map((day, dayIdx) => (
+                                  <motion.div
+                                    key={dayIdx}
+                                    className="bg-white border border-gray-200 rounded-lg p-3"
                                     animate={{
-                                      borderColor: ['rgb(209, 213, 219)', 'rgb(99, 102, 241)', 'rgb(209, 213, 219)'],
+                                      borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
+                                      boxShadow: ['0 1px 3px rgba(0,0,0,0.1)', '0 4px 12px rgba(99,102,241,0.15)', '0 1px 3px rgba(0,0,0,0.1)'],
                                     }}
                                     transition={{
                                       duration: 3,
                                       repeat: Infinity,
-                                      delay: 4,
+                                      delay: dayIdx * 0.5 + 1,
                                       ease: "easeInOut"
                                     }}
                                   >
-                                    + Add activity
-                                  </motion.button>
-                                </div>
+                                    <div className="flex items-center justify-between mb-2">
+                                      <div className={`px-2 py-1 rounded-full text-xs font-medium ${day.color}`}>
+                                        {day.day}
+                                      </div>
+                                      <span className="text-xs text-gray-500">{day.date}</span>
+                                    </div>
+
+                                    <div className="space-y-1">
+                                      {day.attractions.map((attraction, attractionIdx) => (
+                                        <motion.div
+                                          key={attractionIdx}
+                                          className="flex items-center gap-2 text-xs"
+                                          animate={{
+                                            opacity: [0.7, 1, 0.7],
+                                          }}
+                                          transition={{
+                                            duration: 2,
+                                            repeat: Infinity,
+                                            delay: dayIdx * 0.5 + attractionIdx * 0.3 + 2,
+                                            ease: "easeInOut"
+                                          }}
+                                        >
+                                          <div className="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
+                                          <span className="text-gray-600">{attraction}</span>
+                                        </motion.div>
+                                      ))}
+                                    </div>
+                                  </motion.div>
+                                ))}
                               </div>
 
-                              {/* Continue Button */}
-                              <motion.div
-                                className="absolute bottom-4 right-4"
+                              {/* Add Activity Button */}
+                              <motion.button
+                                className="w-full mt-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-xs text-gray-500 hover:border-primary hover:text-primary transition-colors"
                                 animate={{
-                                  scale: [1, 1.02, 1],
+                                  borderColor: ['rgb(209, 213, 219)', 'rgb(99, 102, 241)', 'rgb(209, 213, 219)'],
+                                }}
+                                transition={{
+                                  duration: 3,
+                                  repeat: Infinity,
+                                  delay: 4,
+                                  ease: "easeInOut"
+                                }}
+                              >
+                                + Add activity
+                              </motion.button>
+                            </div>
+                          </div>
+
+                          {/* Continue Button */}
+                          <motion.div
+                            className="absolute bottom-4 right-4"
+                            animate={{
+                              scale: [1, 1.02, 1],
+                            }}
+                            transition={{
+                              duration: 2,
+                              repeat: Infinity,
+                              delay: 5,
+                              ease: "easeInOut"
+                            }}
+                          >
+                            <button className="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-lg font-medium">
+                              Continue to Payment
+                            </button>
+                          </motion.div>
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+
+                  {activeStep === 3 && (
+                    <motion.div
+                      key="step4"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.2 }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="relative w-full h-full flex items-start justify-center"
+                    >
+                      {/* Step 4: Digital Pass Activation & QR Code */}
+                      <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
+
+                        {/* Website Header */}
+                        <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
+                          <div className="flex items-center gap-2">
+                            <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                              <div className="w-3 h-3 rounded-full bg-white"></div>
+                            </div>
+                            <span className="font-bold text-gray-900 text-sm">CityCards</span>
+                          </div>
+                          <div className="flex items-center gap-4">
+                            <span className="text-xs text-green-600">✓ Payment Complete</span>
+                          </div>
+                        </div>
+
+                        {/* Main Content */}
+                        <div className="absolute top-12 left-0 right-0 bottom-0 p-6">
+
+                          {/* Success Header */}
+                          <div className="text-center mb-6">
+                            <motion.div
+                              className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"
+                              animate={{
+                                scale: [1, 1.1, 1],
+                              }}
+                              transition={{
+                                duration: 2,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              <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" />
+                              </svg>
+                            </motion.div>
+
+                            <h2 className="text-xl font-bold text-gray-900 mb-2">
+                              <span className="font-normal">Your Pass is</span>{' '}
+                              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Ready!</span>
+                            </h2>
+                            <p className="text-sm text-gray-600">Access your digital pass instantly</p>
+                          </div>
+
+                          {/* Two Column Layout */}
+                          <div className="grid grid-cols-2 gap-6">
+
+                            {/* Left: Digital Pass Card */}
+                            <motion.div
+                              className="bg-gradient-to-br from-primary to-secondary rounded-2xl p-6 text-white relative overflow-hidden"
+                              animate={{
+                                boxShadow: [
+                                  '0 10px 25px rgba(99,102,241,0.2)',
+                                  '0 20px 40px rgba(99,102,241,0.4)',
+                                  '0 10px 25px rgba(99,102,241,0.2)'
+                                ],
+                              }}
+                              transition={{
+                                duration: 3,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              {/* Background Pattern */}
+                              <div className="absolute inset-0 opacity-10">
+                                <div className="absolute top-4 right-4 w-20 h-20 border border-white rounded-full"></div>
+                                <div className="absolute bottom-4 left-4 w-16 h-16 border border-white rounded-full"></div>
+                              </div>
+
+                              {/* Pass Header */}
+                              <div className="relative z-10">
+                                <div className="flex items-center justify-between mb-4">
+                                  <div>
+                                    <h3 className="font-bold text-lg">Sydney 3-Day Pass</h3>
+                                    <p className="text-sm opacity-90">CityCards Premium</p>
+                                  </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" />
+                                    </svg>
+                                  </div>
+                                </div>
+
+                                {/* Pass Details */}
+                                <div className="space-y-2 mb-6">
+                                  <div className="flex justify-between text-sm">
+                                    <span className="opacity-80">Valid From:</span>
+                                    <span>Dec 15, 2024</span>
+                                  </div>
+                                  <div className="flex justify-between text-sm">
+                                    <span className="opacity-80">Valid Until:</span>
+                                    <span>Dec 17, 2024</span>
+                                  </div>
+                                  <div className="flex justify-between text-sm">
+                                    <span className="opacity-80">Attractions:</span>
+                                    <span>30+ included</span>
+                                  </div>
+                                </div>
+
+                                {/* Pass Number */}
+                                <div className="text-center">
+                                  <p className="text-xs opacity-80 mb-1">Pass ID</p>
+                                  <p className="font-mono text-sm">SYD-2024-12-001234</p>
+                                </div>
+                              </div>
+                            </motion.div>
+
+                            {/* Right: QR Code & Instructions */}
+                            <div className="space-y-4">
+
+                              {/* QR Code */}
+                              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 text-center">
+                                <motion.div
+                                  className="w-32 h-32 mx-auto mb-4 relative"
+                                  animate={{
+                                    scale: [1, 1.05, 1],
+                                  }}
+                                  transition={{
+                                    duration: 3,
+                                    repeat: Infinity,
+                                    ease: "easeInOut"
+                                  }}
+                                >
+                                  {/* QR Code Grid */}
+                                  <div className="grid grid-cols-12 gap-px bg-gray-900 p-2 rounded-lg">
+                                    {[...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],
+                                        // 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]
+                                      ];
+                                      const isActive = patterns.includes(idx) || Math.random() > 0.6;
+
+                                      return (
+                                        <motion.div
+                                          key={idx}
+                                          className={`aspect-square ${isActive ? 'bg-gray-900' : 'bg-white'}`}
+                                          animate={{
+                                            opacity: isActive ? [1, 0.8, 1] : [1],
+                                          }}
+                                          transition={{
+                                            duration: 2,
+                                            repeat: Infinity,
+                                            delay: idx * 0.01,
+                                            ease: "easeInOut"
+                                          }}
+                                        />
+                                      );
+                                    })}
+                                  </div>
+
+                                  {/* Corner Detection Squares */}
+                                  <div className="absolute top-2 left-2 w-6 h-6 border-2 border-gray-900 bg-white">
+                                    <div className="absolute inset-1 bg-gray-900"></div>
+                                  </div>
+                                  <div className="absolute top-2 right-2 w-6 h-6 border-2 border-gray-900 bg-white">
+                                    <div className="absolute inset-1 bg-gray-900"></div>
+                                  </div>
+                                  <div className="absolute bottom-2 left-2 w-6 h-6 border-2 border-gray-900 bg-white">
+                                    <div className="absolute inset-1 bg-gray-900"></div>
+                                  </div>
+                                </motion.div>
+
+                                <p className="text-sm font-medium text-gray-900 mb-1">Scan to Access</p>
+                                <p className="text-xs text-gray-600">Show this QR code at each attraction</p>
+                              </div>
+
+                              {/* Usage Instructions */}
+                              <div className="space-y-3">
+                                {[
+                                  { icon: '📱', text: 'Add to Apple/Google Wallet', status: 'ready' },
+                                  { icon: '📧', text: 'Email sent to john@example.com', status: 'sent' },
+                                  { icon: '📲', text: 'Download mobile app for offline access', status: 'optional' }
+                                ].map((instruction, idx) => (
+                                  <motion.div
+                                    key={idx}
+                                    className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"
+                                    animate={{
+                                      backgroundColor: instruction.status === 'ready' ?
+                                        ['rgb(249, 250, 251)', 'rgb(240, 253, 244)', 'rgb(249, 250, 251)'] :
+                                        ['rgb(249, 250, 251)'],
+                                    }}
+                                    transition={{
+                                      duration: 2.5,
+                                      repeat: Infinity,
+                                      delay: idx * 0.5,
+                                      ease: "easeInOut"
+                                    }}
+                                  >
+                                    <span className="text-lg">{instruction.icon}</span>
+                                    <span className="text-sm text-gray-700 flex-1">{instruction.text}</span>
+                                    {instruction.status === 'ready' && (
+                                      <motion.div
+                                        className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center"
+                                        animate={{
+                                          scale: [1, 1.1, 1],
+                                        }}
+                                        transition={{
+                                          duration: 2,
+                                          repeat: Infinity,
+                                          delay: 1,
+                                          ease: "easeInOut"
+                                        }}
+                                      >
+                                        <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" />
+                                        </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" />
+                                        </svg>
+                                      </div>
+                                    )}
+                                  </motion.div>
+                                ))}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Action Buttons */}
+                          <div className="flex gap-3 justify-center mt-6">
+                            <motion.button
+                              className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                              animate={{
+                                borderColor: ['rgb(209, 213, 219)', 'rgb(99, 102, 241)', 'rgb(209, 213, 219)'],
+                              }}
+                              transition={{
+                                duration: 3,
+                                repeat: Infinity,
+                                delay: 2,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              View Itinerary
+                            </motion.button>
+
+                            <motion.button
+                              className="px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg"
+                              animate={{
+                                boxShadow: [
+                                  '0 4px 6px rgba(99,102,241,0.1)',
+                                  '0 10px 25px rgba(99,102,241,0.3)',
+                                  '0 4px 6px rgba(99,102,241,0.1)'
+                                ],
+                              }}
+                              transition={{
+                                duration: 2.5,
+                                repeat: Infinity,
+                                delay: 3,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              Start Exploring
+                            </motion.button>
+                          </div>
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+
+                  {activeStep === 4 && (
+                    <motion.div
+                      key="step5"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.2 }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="relative w-full h-full flex items-start justify-center"
+                    >
+                      {/* Step 5: Live Mobile App Experience */}
+                      <div className="relative w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl overflow-hidden">
+
+                        {/* Phone Frame */}
+                        <motion.div
+                          className="w-64 h-full max-h-96 bg-black rounded-3xl p-2 relative"
+                          animate={{
+                            boxShadow: [
+                              '0 10px 40px rgba(0,0,0,0.3)',
+                              '0 20px 60px rgba(0,0,0,0.5)',
+                              '0 10px 40px rgba(0,0,0,0.3)'
+                            ],
+                          }}
+                          transition={{
+                            duration: 3,
+                            repeat: Infinity,
+                            ease: "easeInOut"
+                          }}
+                        >
+                          {/* Phone Screen */}
+                          <div className="w-full h-full bg-white rounded-3xl relative overflow-hidden">
+
+                            {/* Status Bar */}
+                            <div className="absolute top-0 left-0 right-0 h-8 bg-white flex items-center justify-between px-6 text-xs">
+                              <span className="font-medium">9:41 AM</span>
+                              <div className="flex items-center gap-1">
+                                <div className="w-4 h-2 border border-gray-400 rounded-sm">
+                                  <div className="w-1 h-full bg-green-500 rounded-sm"></div>
+                                </div>
+                                <div className="w-3 h-3 border border-gray-400 rounded-full">
+                                  <div className="w-2 h-2 bg-blue-500 rounded-full m-0.5"></div>
+                                </div>
+                                <div className="w-4 h-2 border border-gray-400 rounded-sm bg-green-500"></div>
+                              </div>
+                            </div>
+
+                            {/* App Header */}
+                            <div className="absolute top-8 left-0 right-0 h-12 bg-gradient-to-r from-primary to-secondary flex items-center justify-between px-4">
+                              <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" />
+                                  </svg>
+                                </div>
+                                <span className="text-white font-medium text-sm">Opera House</span>
+                              </div>
+                              <motion.div
+                                className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"
+                                animate={{
+                                  backgroundColor: ['rgba(255,255,255,0.2)', 'rgba(34,197,94,0.8)', 'rgba(255,255,255,0.2)'],
                                 }}
                                 transition={{
                                   duration: 2,
                                   repeat: Infinity,
-                                  delay: 5,
                                   ease: "easeInOut"
                                 }}
                               >
-                                <button className="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-lg font-medium">
-                                  Continue to Payment
-                                </button>
+                                <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" />
+                                </svg>
                               </motion.div>
                             </div>
-                          </div>
-                        </motion.div>
-                      )}
-
-                      {activeStep === 3 && (
-                        <motion.div
-                          key="step4"
-                          initial={{ opacity: 0, scale: 0.8 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          exit={{ opacity: 0, scale: 1.2 }}
-                          transition={{ duration: 0.5, ease: "easeOut" }}
-                          className="relative w-full h-full flex items-start justify-center"
-                        >
-                          {/* Step 4: Digital Pass Activation & QR Code */}
-                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
-                            
-                            {/* Website Header */}
-                            <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
-                              <div className="flex items-center gap-2">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
-                                  <div className="w-3 h-3 rounded-full bg-white"></div>
-                                </div>
-                                <span className="font-bold text-gray-900 text-sm">CityCards</span>
-                              </div>
-                              <div className="flex items-center gap-4">
-                                <span className="text-xs text-green-600">✓ Payment Complete</span>
-                              </div>
-                            </div>
 
                             {/* Main Content */}
-                            <div className="absolute top-12 left-0 right-0 bottom-0 p-6">
-                              
-                              {/* Success Header */}
-                              <div className="text-center mb-6">
+                            <div className="absolute top-20 left-0 right-0 bottom-0 bg-white">
+
+                              {/* Attraction Image */}
+                              <div className="h-32 relative overflow-hidden">
+                                <ImageWithFallback
+                                  src="https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=300&h=200&fit=crop"
+                                  alt="Sydney Opera House"
+                                  className="w-full h-full object-cover"
+                                />
+                                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+
+                                {/* Check-in Status */}
                                 <motion.div
-                                  className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"
+                                  className="absolute top-3 right-3 bg-green-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1"
                                   animate={{
                                     scale: [1, 1.1, 1],
                                   }}
@@ -1262,262 +1595,175 @@ export function HowItWorks() {
                                     ease: "easeInOut"
                                   }}
                                 >
-                                  <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"/>
+                                  <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" />
                                   </svg>
+                                  Checked In
                                 </motion.div>
-                                
-                                <h2 className="text-xl font-bold text-gray-900 mb-2">
-                                  <span className="font-normal">Your Pass is</span>{' '}
-                                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Ready!</span>
-                                </h2>
-                                <p className="text-sm text-gray-600">Access your digital pass instantly</p>
                               </div>
 
-                              {/* Two Column Layout */}
-                              <div className="grid grid-cols-2 gap-6">
-                                
-                                {/* Left: Digital Pass Card */}
-                                <motion.div
-                                  className="bg-gradient-to-br from-primary to-secondary rounded-2xl p-6 text-white relative overflow-hidden"
-                                  animate={{
-                                    boxShadow: [
-                                      '0 10px 25px rgba(99,102,241,0.2)', 
-                                      '0 20px 40px rgba(99,102,241,0.4)', 
-                                      '0 10px 25px rgba(99,102,241,0.2)'
-                                    ],
-                                  }}
-                                  transition={{
-                                    duration: 3,
-                                    repeat: Infinity,
-                                    ease: "easeInOut"
-                                  }}
-                                >
-                                  {/* Background Pattern */}
-                                  <div className="absolute inset-0 opacity-10">
-                                    <div className="absolute top-4 right-4 w-20 h-20 border border-white rounded-full"></div>
-                                    <div className="absolute bottom-4 left-4 w-16 h-16 border border-white rounded-full"></div>
+                              {/* Attraction Info */}
+                              <div className="p-4">
+                                <div className="flex items-center justify-between mb-3">
+                                  <div>
+                                    <h3 className="font-bold text-gray-900">Sydney Opera House</h3>
+                                    <p className="text-xs text-gray-600">Iconic performing arts venue</p>
                                   </div>
-                                  
-                                  {/* Pass Header */}
-                                  <div className="relative z-10">
-                                    <div className="flex items-center justify-between mb-4">
-                                      <div>
-                                        <h3 className="font-bold text-lg">Sydney 3-Day Pass</h3>
-                                        <p className="text-sm opacity-90">CityCards Premium</p>
-                                      </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"/>
-                                        </svg>
-                                      </div>
-                                    </div>
-
-                                    {/* Pass Details */}
-                                    <div className="space-y-2 mb-6">
-                                      <div className="flex justify-between text-sm">
-                                        <span className="opacity-80">Valid From:</span>
-                                        <span>Dec 15, 2024</span>
-                                      </div>
-                                      <div className="flex justify-between text-sm">
-                                        <span className="opacity-80">Valid Until:</span>
-                                        <span>Dec 17, 2024</span>
-                                      </div>
-                                      <div className="flex justify-between text-sm">
-                                        <span className="opacity-80">Attractions:</span>
-                                        <span>30+ included</span>
-                                      </div>
-                                    </div>
-
-                                    {/* Pass Number */}
-                                    <div className="text-center">
-                                      <p className="text-xs opacity-80 mb-1">Pass ID</p>
-                                      <p className="font-mono text-sm">SYD-2024-12-001234</p>
-                                    </div>
+                                  <div className="text-right">
+                                    <div className="text-sm font-medium text-green-600">Free Entry</div>
+                                    <div className="text-xs text-gray-500">with CityPass</div>
                                   </div>
-                                </motion.div>
+                                </div>
 
-                                {/* Right: QR Code & Instructions */}
-                                <div className="space-y-4">
-                                  
-                                  {/* QR Code */}
-                                  <div className="bg-white border-2 border-gray-200 rounded-xl p-6 text-center">
-                                    <motion.div
-                                      className="w-32 h-32 mx-auto mb-4 relative"
+                                {/* Quick Actions */}
+                                <div className="grid grid-cols-3 gap-2 mb-4">
+                                  {[
+                                    { icon: '🎫', label: 'Show Pass', active: true },
+                                    { icon: '📍', label: 'Directions', active: false },
+                                    { icon: '📱', label: 'Audio Guide', active: false }
+                                  ].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'
+                                        }`}
                                       animate={{
-                                        scale: [1, 1.05, 1],
+                                        backgroundColor: action.active ?
+                                          ['rgb(99, 102, 241)', 'rgb(129, 140, 248)', 'rgb(99, 102, 241)'] :
+                                          ['rgb(243, 244, 246)'],
+                                      }}
+                                      transition={{
+                                        duration: 2.5,
+                                        repeat: Infinity,
+                                        delay: idx * 0.3,
+                                        ease: "easeInOut"
+                                      }}
+                                    >
+                                      <span className="text-sm">{action.icon}</span>
+                                      <span>{action.label}</span>
+                                    </motion.button>
+                                  ))}
+                                </div>
+
+                                {/* Progress Stats */}
+                                <div className="bg-gray-50 rounded-lg p-3">
+                                  <div className="flex items-center justify-between mb-2">
+                                    <span className="text-xs font-medium text-gray-900">Today's Progress</span>
+                                    <span className="text-xs text-gray-600">3 of 8 attractions</span>
+                                  </div>
+
+                                  <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
+                                    <motion.div
+                                      className="bg-gradient-to-r from-primary to-secondary h-2 rounded-full"
+                                      animate={{
+                                        width: ['0%', '37.5%', '35%', '37.5%'],
                                       }}
                                       transition={{
                                         duration: 3,
                                         repeat: Infinity,
                                         ease: "easeInOut"
                                       }}
-                                    >
-                                      {/* QR Code Grid */}
-                                      <div className="grid grid-cols-12 gap-px bg-gray-900 p-2 rounded-lg">
-                                        {[...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],
-                                            // 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]
-                                          ];
-                                          const isActive = patterns.includes(idx) || Math.random() > 0.6;
-                                          
-                                          return (
-                                            <motion.div
-                                              key={idx}
-                                              className={`aspect-square ${isActive ? 'bg-gray-900' : 'bg-white'}`}
-                                              animate={{
-                                                opacity: isActive ? [1, 0.8, 1] : [1],
-                                              }}
-                                              transition={{
-                                                duration: 2,
-                                                repeat: Infinity,
-                                                delay: idx * 0.01,
-                                                ease: "easeInOut"
-                                              }}
-                                            />
-                                          );
-                                        })}
-                                      </div>
-                                      
-                                      {/* Corner Detection Squares */}
-                                      <div className="absolute top-2 left-2 w-6 h-6 border-2 border-gray-900 bg-white">
-                                        <div className="absolute inset-1 bg-gray-900"></div>
-                                      </div>
-                                      <div className="absolute top-2 right-2 w-6 h-6 border-2 border-gray-900 bg-white">
-                                        <div className="absolute inset-1 bg-gray-900"></div>
-                                      </div>
-                                      <div className="absolute bottom-2 left-2 w-6 h-6 border-2 border-gray-900 bg-white">
-                                        <div className="absolute inset-1 bg-gray-900"></div>
-                                      </div>
-                                    </motion.div>
-                                    
-                                    <p className="text-sm font-medium text-gray-900 mb-1">Scan to Access</p>
-                                    <p className="text-xs text-gray-600">Show this QR code at each attraction</p>
+                                    />
                                   </div>
 
-                                  {/* Usage Instructions */}
-                                  <div className="space-y-3">
-                                    {[
-                                      { icon: '📱', text: 'Add to Apple/Google Wallet', status: 'ready' },
-                                      { icon: '📧', text: 'Email sent to john@example.com', status: 'sent' },
-                                      { icon: '📲', text: 'Download mobile app for offline access', status: 'optional' }
-                                    ].map((instruction, idx) => (
-                                      <motion.div
-                                        key={idx}
-                                        className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"
-                                        animate={{
-                                          backgroundColor: instruction.status === 'ready' ? 
-                                            ['rgb(249, 250, 251)', 'rgb(240, 253, 244)', 'rgb(249, 250, 251)'] :
-                                            ['rgb(249, 250, 251)'],
-                                        }}
-                                        transition={{
-                                          duration: 2.5,
-                                          repeat: Infinity,
-                                          delay: idx * 0.5,
-                                          ease: "easeInOut"
-                                        }}
-                                      >
-                                        <span className="text-lg">{instruction.icon}</span>
-                                        <span className="text-sm text-gray-700 flex-1">{instruction.text}</span>
-                                        {instruction.status === 'ready' && (
-                                          <motion.div
-                                            className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center"
-                                            animate={{
-                                              scale: [1, 1.1, 1],
-                                            }}
-                                            transition={{
-                                              duration: 2,
-                                              repeat: Infinity,
-                                              delay: 1,
-                                              ease: "easeInOut"
-                                            }}
-                                          >
-                                            <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"/>
-                                            </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"/>
-                                            </svg>
-                                          </div>
-                                        )}
-                                      </motion.div>
-                                    ))}
+                                  <div className="flex justify-between text-xs text-gray-600">
+                                    <span>✓ Opera House</span>
+                                    <span>Next: Harbour Bridge</span>
                                   </div>
                                 </div>
                               </div>
+                            </div>
 
-                              {/* Action Buttons */}
-                              <div className="flex gap-3 justify-center mt-6">
-                                <motion.button
-                                  className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                            {/* Bottom Tab Bar */}
+                            <div className="absolute bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-100 flex items-center justify-around">
+                              {[
+                                { icon: '🗺️', label: 'Map', active: true },
+                                { icon: '🎫', label: 'Pass', active: false },
+                                { icon: '📅', label: 'Plan', active: false },
+                                { icon: '👤', label: 'Profile', active: false }
+                              ].map((tab, idx) => (
+                                <motion.div
+                                  key={idx}
+                                  className={`flex flex-col items-center justify-center flex-1 ${tab.active ? 'text-primary' : 'text-gray-400'
+                                    }`}
                                   animate={{
-                                    borderColor: ['rgb(209, 213, 219)', 'rgb(99, 102, 241)', 'rgb(209, 213, 219)'],
+                                    color: tab.active ?
+                                      ['rgb(99, 102, 241)', 'rgb(79, 70, 229)', 'rgb(99, 102, 241)'] :
+                                      ['rgb(156, 163, 175)'],
                                   }}
                                   transition={{
-                                    duration: 3,
+                                    duration: 2,
                                     repeat: Infinity,
-                                    delay: 2,
+                                    delay: idx * 0.2,
                                     ease: "easeInOut"
                                   }}
                                 >
-                                  View Itinerary
-                                </motion.button>
-                                
-                                <motion.button
-                                  className="px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg"
-                                  animate={{
-                                    boxShadow: [
-                                      '0 4px 6px rgba(99,102,241,0.1)', 
-                                      '0 10px 25px rgba(99,102,241,0.3)', 
-                                      '0 4px 6px rgba(99,102,241,0.1)'
-                                    ],
-                                  }}
-                                  transition={{
-                                    duration: 2.5,
-                                    repeat: Infinity,
-                                    delay: 3,
-                                    ease: "easeInOut"
-                                  }}
-                                >
-                                  Start Exploring
-                                </motion.button>
-                              </div>
+                                  <span className="text-lg mb-1">{tab.icon}</span>
+                                  <span className="text-xs">{tab.label}</span>
+                                </motion.div>
+                              ))}
+                            </div>
+
+                            {/* Home Indicator */}
+                            <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gray-300 rounded-full"></div>
+                          </div>
+                        </motion.div>
+
+                        {/* Floating Notifications */}
+                        <motion.div
+                          className="absolute top-4 right-4 bg-white rounded-lg shadow-lg p-3 border-l-4 border-green-500"
+                          animate={{
+                            x: [100, 0, 0, 100],
+                            opacity: [0, 1, 1, 0],
+                          }}
+                          transition={{
+                            duration: 4,
+                            repeat: Infinity,
+                            times: [0, 0.2, 0.8, 1],
+                            ease: "easeInOut"
+                          }}
+                        >
+                          <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" />
+                              </svg>
+                            </div>
+                            <div>
+                              <div className="font-medium text-sm text-gray-900">Check-in successful!</div>
+                              <div className="text-xs text-gray-600">Enjoy the Opera House</div>
                             </div>
                           </div>
                         </motion.div>
-                      )}
+                      </div>
+                    </motion.div>
+                  )}
 
-                      {activeStep === 4 && (
-                        <motion.div
-                          key="step5"
-                          initial={{ opacity: 0, scale: 0.8 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          exit={{ opacity: 0, scale: 1.2 }}
-                          transition={{ duration: 0.5, ease: "easeOut" }}
-                          className="relative w-full h-full flex items-start justify-center"
-                        >
-                          {/* Step 5: Live Mobile App Experience */}
-                          <div className="relative w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl overflow-hidden">
-                            
-                            {/* Phone Frame */}
+                  {activeStep === 5 && (
+                    <motion.div
+                      key="step6"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.2 }}
+                      transition={{ duration: 0.5, ease: "easeOut" }}
+                      className="relative w-full h-full flex items-start justify-center"
+                    >
+                      {/* Step 6: App Store Download Experience */}
+                      <div className="relative w-full h-full bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl overflow-hidden">
+
+                        {/* Two Column Layout */}
+                        <div className="grid grid-cols-2 gap-8 h-full p-6">
+
+                          {/* Left: App Store Interface */}
+                          <div className="flex flex-col justify-center">
+
+                            {/* App Store Header */}
                             <motion.div
-                              className="w-64 h-full max-h-96 bg-black rounded-3xl p-2 relative"
+                              className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden mb-6"
                               animate={{
                                 boxShadow: [
-                                  '0 10px 40px rgba(0,0,0,0.3)', 
-                                  '0 20px 60px rgba(0,0,0,0.5)', 
-                                  '0 10px 40px rgba(0,0,0,0.3)'
+                                  '0 4px 6px rgba(0,0,0,0.1)',
+                                  '0 20px 40px rgba(0,0,0,0.15)',
+                                  '0 4px 6px rgba(0,0,0,0.1)'
                                 ],
                               }}
                               transition={{
@@ -1526,68 +1772,55 @@ export function HowItWorks() {
                                 ease: "easeInOut"
                               }}
                             >
-                              {/* Phone Screen */}
-                              <div className="w-full h-full bg-white rounded-3xl relative overflow-hidden">
-                                
-                                {/* Status Bar */}
-                                <div className="absolute top-0 left-0 right-0 h-8 bg-white flex items-center justify-between px-6 text-xs">
-                                  <span className="font-medium">9:41 AM</span>
-                                  <div className="flex items-center gap-1">
-                                    <div className="w-4 h-2 border border-gray-400 rounded-sm">
-                                      <div className="w-1 h-full bg-green-500 rounded-sm"></div>
-                                    </div>
-                                    <div className="w-3 h-3 border border-gray-400 rounded-full">
-                                      <div className="w-2 h-2 bg-blue-500 rounded-full m-0.5"></div>
-                                    </div>
-                                    <div className="w-4 h-2 border border-gray-400 rounded-sm bg-green-500"></div>
-                                  </div>
+                              {/* Store Header */}
+                              <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" />
+                                  </svg>
                                 </div>
+                                <span className="font-bold text-gray-900">App Store</span>
+                              </div>
 
-                                {/* App Header */}
-                                <div className="absolute top-8 left-0 right-0 h-12 bg-gradient-to-r from-primary to-secondary flex items-center justify-between px-4">
-                                  <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"/>
-                                      </svg>
-                                    </div>
-                                    <span className="text-white font-medium text-sm">Opera House</span>
-                                  </div>
+                              {/* App Listing */}
+                              <div className="p-6">
+                                <div className="flex gap-4 mb-4">
+                                  {/* App Icon */}
                                   <motion.div
-                                    className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"
+                                    className="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center flex-shrink-0"
                                     animate={{
-                                      backgroundColor: ['rgba(255,255,255,0.2)', 'rgba(34,197,94,0.8)', 'rgba(255,255,255,0.2)'],
+                                      scale: [1, 1.05, 1],
                                     }}
                                     transition={{
-                                      duration: 2,
+                                      duration: 2.5,
                                       repeat: Infinity,
                                       ease: "easeInOut"
                                     }}
                                   >
-                                    <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"/>
-                                    </svg>
+                                    <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center">
+                                      <div className="w-6 h-6 rounded-full bg-white"></div>
+                                    </div>
                                   </motion.div>
-                                </div>
 
-                                {/* Main Content */}
-                                <div className="absolute top-20 left-0 right-0 bottom-0 bg-white">
-                                  
-                                  {/* Attraction Image */}
-                                  <div className="h-32 relative overflow-hidden">
-                                    <ImageWithFallback
-                                      src="https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=300&h=200&fit=crop"
-                                      alt="Sydney Opera House"
-                                      className="w-full h-full object-cover"
-                                    />
-                                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
-                                    
-                                    {/* Check-in Status */}
-                                    <motion.div
-                                      className="absolute top-3 right-3 bg-green-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1"
+                                  {/* App Info */}
+                                  <div className="flex-1">
+                                    <h3 className="font-bold text-lg text-gray-900 mb-1">CityCards</h3>
+                                    <p className="text-gray-600 text-sm mb-2">Travel & Navigation</p>
+                                    <div className="flex items-center gap-2 mb-3">
+                                      <div className="flex text-yellow-400">
+                                        {'★★★★★'.split('').map((star, idx) => (
+                                          <span key={idx}>{star}</span>
+                                        ))}
+                                      </div>
+                                      <span className="text-sm text-gray-600">4.8</span>
+                                      <span className="text-sm text-gray-500">(2.1K)</span>
+                                    </div>
+
+                                    {/* Download Button */}
+                                    <motion.button
+                                      className="w-full py-3 bg-blue-500 text-white rounded-lg font-medium text-sm"
                                       animate={{
-                                        scale: [1, 1.1, 1],
+                                        backgroundColor: ['rgb(59, 130, 246)', 'rgb(37, 99, 235)', 'rgb(59, 130, 246)'],
                                       }}
                                       transition={{
                                         duration: 2,
@@ -1595,126 +1828,46 @@ export function HowItWorks() {
                                         ease: "easeInOut"
                                       }}
                                     >
-                                      <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"/>
-                                      </svg>
-                                      Checked In
-                                    </motion.div>
-                                  </div>
-
-                                  {/* Attraction Info */}
-                                  <div className="p-4">
-                                    <div className="flex items-center justify-between mb-3">
-                                      <div>
-                                        <h3 className="font-bold text-gray-900">Sydney Opera House</h3>
-                                        <p className="text-xs text-gray-600">Iconic performing arts venue</p>
-                                      </div>
-                                      <div className="text-right">
-                                        <div className="text-sm font-medium text-green-600">Free Entry</div>
-                                        <div className="text-xs text-gray-500">with CityPass</div>
-                                      </div>
-                                    </div>
-
-                                    {/* Quick Actions */}
-                                    <div className="grid grid-cols-3 gap-2 mb-4">
-                                      {[
-                                        { icon: '🎫', label: 'Show Pass', active: true },
-                                        { icon: '📍', label: 'Directions', active: false },
-                                        { icon: '📱', label: 'Audio Guide', active: false }
-                                      ].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'
-                                          }`}
-                                          animate={{
-                                            backgroundColor: action.active ? 
-                                              ['rgb(99, 102, 241)', 'rgb(129, 140, 248)', 'rgb(99, 102, 241)'] :
-                                              ['rgb(243, 244, 246)'],
-                                          }}
-                                          transition={{
-                                            duration: 2.5,
-                                            repeat: Infinity,
-                                            delay: idx * 0.3,
-                                            ease: "easeInOut"
-                                          }}
-                                        >
-                                          <span className="text-sm">{action.icon}</span>
-                                          <span>{action.label}</span>
-                                        </motion.button>
-                                      ))}
-                                    </div>
-
-                                    {/* Progress Stats */}
-                                    <div className="bg-gray-50 rounded-lg p-3">
-                                      <div className="flex items-center justify-between mb-2">
-                                        <span className="text-xs font-medium text-gray-900">Today's Progress</span>
-                                        <span className="text-xs text-gray-600">3 of 8 attractions</span>
-                                      </div>
-                                      
-                                      <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
-                                        <motion.div
-                                          className="bg-gradient-to-r from-primary to-secondary h-2 rounded-full"
-                                          animate={{
-                                            width: ['0%', '37.5%', '35%', '37.5%'],
-                                          }}
-                                          transition={{
-                                            duration: 3,
-                                            repeat: Infinity,
-                                            ease: "easeInOut"
-                                          }}
-                                        />
-                                      </div>
-                                      
-                                      <div className="flex justify-between text-xs text-gray-600">
-                                        <span>✓ Opera House</span>
-                                        <span>Next: Harbour Bridge</span>
-                                      </div>
-                                    </div>
+                                      GET
+                                    </motion.button>
                                   </div>
                                 </div>
 
-                                {/* Bottom Tab Bar */}
-                                <div className="absolute bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-100 flex items-center justify-around">
-                                  {[
-                                    { icon: '🗺️', label: 'Map', active: true },
-                                    { icon: '🎫', label: 'Pass', active: false },
-                                    { icon: '📅', label: 'Plan', active: false },
-                                    { icon: '👤', label: 'Profile', active: false }
-                                  ].map((tab, idx) => (
+                                {/* App Screenshots Preview */}
+                                <div className="flex gap-2 overflow-hidden">
+                                  {[0, 1, 2].map((screenshot, idx) => (
                                     <motion.div
                                       key={idx}
-                                      className={`flex flex-col items-center justify-center flex-1 ${
-                                        tab.active ? 'text-primary' : 'text-gray-400'
-                                      }`}
+                                      className="w-16 h-28 bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg flex-shrink-0 border border-gray-200"
                                       animate={{
-                                        color: tab.active ? 
-                                          ['rgb(99, 102, 241)', 'rgb(79, 70, 229)', 'rgb(99, 102, 241)'] :
-                                          ['rgb(156, 163, 175)'],
+                                        scale: idx === 1 ? [1, 1.05, 1] : [1],
                                       }}
                                       transition={{
-                                        duration: 2,
+                                        duration: 3,
                                         repeat: Infinity,
-                                        delay: idx * 0.2,
+                                        delay: idx * 0.3,
                                         ease: "easeInOut"
                                       }}
                                     >
-                                      <span className="text-lg mb-1">{tab.icon}</span>
-                                      <span className="text-xs">{tab.label}</span>
+                                      {/* Mini screenshot content */}
+                                      <div className="p-1">
+                                        <div className="w-full h-4 bg-gradient-to-r from-primary to-secondary rounded-sm mb-1"></div>
+                                        <div className="space-y-1">
+                                          <div className="h-1 bg-gray-300 rounded w-3/4"></div>
+                                          <div className="h-1 bg-gray-300 rounded w-1/2"></div>
+                                          <div className="h-1 bg-gray-300 rounded w-2/3"></div>
+                                        </div>
+                                      </div>
                                     </motion.div>
                                   ))}
                                 </div>
-
-                                {/* Home Indicator */}
-                                <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gray-300 rounded-full"></div>
                               </div>
                             </motion.div>
 
-                            {/* Floating Notifications */}
+                            {/* Download Progress */}
                             <motion.div
-                              className="absolute top-4 right-4 bg-white rounded-lg shadow-lg p-3 border-l-4 border-green-500"
+                              className="bg-white rounded-xl p-4 shadow-sm border border-gray-200"
                               animate={{
-                                x: [100, 0, 0, 100],
                                 opacity: [0, 1, 1, 0],
                               }}
                               transition={{
@@ -1724,344 +1877,189 @@ export function HowItWorks() {
                                 ease: "easeInOut"
                               }}
                             >
-                              <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"/>
-                                  </svg>
-                                </div>
-                                <div>
-                                  <div className="font-medium text-sm text-gray-900">Check-in successful!</div>
-                                  <div className="text-xs text-gray-600">Enjoy the Opera House</div>
-                                </div>
-                              </div>
-                            </motion.div>
-                          </div>
-                        </motion.div>
-                      )}
-
-                      {activeStep === 5 && (
-                        <motion.div
-                          key="step6"
-                          initial={{ opacity: 0, scale: 0.8 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          exit={{ opacity: 0, scale: 1.2 }}
-                          transition={{ duration: 0.5, ease: "easeOut" }}
-                          className="relative w-full h-full flex items-start justify-center"
-                        >
-                          {/* Step 6: App Store Download Experience */}
-                          <div className="relative w-full h-full bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl overflow-hidden">
-                            
-                            {/* Two Column Layout */}
-                            <div className="grid grid-cols-2 gap-8 h-full p-6">
-                              
-                              {/* Left: App Store Interface */}
-                              <div className="flex flex-col justify-center">
-                                
-                                {/* App Store Header */}
+                              <div className="flex items-center gap-3 mb-3">
                                 <motion.div
-                                  className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden mb-6"
+                                  className="w-8 h-8 border-2 border-blue-500 rounded-full flex items-center justify-center"
                                   animate={{
-                                    boxShadow: [
-                                      '0 4px 6px rgba(0,0,0,0.1)', 
-                                      '0 20px 40px rgba(0,0,0,0.15)', 
-                                      '0 4px 6px rgba(0,0,0,0.1)'
-                                    ],
+                                    rotate: [0, 360],
                                   }}
                                   transition={{
-                                    duration: 3,
+                                    duration: 2,
+                                    repeat: Infinity,
+                                    ease: "linear"
+                                  }}
+                                >
+                                  <div className="w-3 h-3 border-l-2 border-blue-500 rounded-full"></div>
+                                </motion.div>
+                                <div>
+                                  <p className="font-medium text-gray-900 text-sm">Downloading CityCards...</p>
+                                  <p className="text-xs text-gray-600">47.2 MB of 52.1 MB</p>
+                                </div>
+                              </div>
+
+                              <div className="w-full bg-gray-200 rounded-full h-2">
+                                <motion.div
+                                  className="bg-blue-500 h-2 rounded-full"
+                                  animate={{
+                                    width: ['0%', '90%', '100%'],
+                                  }}
+                                  transition={{
+                                    duration: 4,
                                     repeat: Infinity,
                                     ease: "easeInOut"
                                   }}
-                                >
-                                  {/* Store Header */}
-                                  <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"/>
-                                      </svg>
-                                    </div>
-                                    <span className="font-bold text-gray-900">App Store</span>
-                                  </div>
+                                />
+                              </div>
+                            </motion.div>
+                          </div>
 
-                                  {/* App Listing */}
-                                  <div className="p-6">
-                                    <div className="flex gap-4 mb-4">
-                                      {/* App Icon */}
+                          {/* Right: Phone with App Installation */}
+                          <div className="flex items-center justify-center">
+                            <motion.div
+                              className="w-56 h-full max-h-96 bg-gray-900 rounded-3xl p-2 relative"
+                              animate={{
+                                boxShadow: [
+                                  '0 10px 40px rgba(0,0,0,0.3)',
+                                  '0 30px 60px rgba(99,102,241,0.4)',
+                                  '0 10px 40px rgba(0,0,0,0.3)'
+                                ],
+                              }}
+                              transition={{
+                                duration: 4,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              {/* Phone Screen */}
+                              <div className="w-full h-full bg-black rounded-3xl relative overflow-hidden">
+
+                                {/* Wallpaper */}
+                                <div className="absolute inset-0 bg-gradient-to-br from-purple-600 via-blue-600 to-teal-500"></div>
+
+                                {/* Status Bar */}
+                                <div className="absolute top-4 left-4 right-4 flex items-center justify-between text-white text-xs">
+                                  <span className="font-medium">9:41 AM</span>
+                                  <div className="flex items-center gap-1">
+                                    <div className="w-4 h-2 border border-white rounded-sm">
+                                      <div className="w-3 h-full bg-white rounded-sm"></div>
+                                    </div>
+                                    <div className="w-4 h-2 bg-white rounded-sm"></div>
+                                  </div>
+                                </div>
+
+                                {/* App Grid */}
+                                <div className="absolute top-16 left-4 right-4 bottom-20">
+                                  <div className="grid grid-cols-4 gap-4">
+                                    {[
+                                      { name: 'Phone', color: 'bg-green-500', installing: false },
+                                      { name: 'Messages', color: 'bg-green-400', installing: false },
+                                      { name: 'Camera', color: 'bg-gray-600', installing: false },
+                                      { name: 'Photos', color: 'bg-yellow-500', installing: false },
+                                      { name: 'Maps', color: 'bg-blue-500', installing: false },
+                                      { name: 'Weather', color: 'bg-blue-400', installing: false },
+                                      { name: 'CityCards', color: 'bg-gradient-to-br from-primary to-secondary', installing: true },
+                                      { name: 'Settings', color: 'bg-gray-500', installing: false }
+                                    ].map((app, idx) => (
                                       <motion.div
-                                        className="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center flex-shrink-0"
+                                        key={idx}
+                                        className={`aspect-square rounded-2xl flex items-center justify-center relative ${app.color}`}
                                         animate={{
-                                          scale: [1, 1.05, 1],
+                                          scale: app.installing ? [1, 1.1, 1] : [1],
                                         }}
                                         transition={{
                                           duration: 2.5,
                                           repeat: Infinity,
+                                          delay: idx * 0.1,
                                           ease: "easeInOut"
                                         }}
                                       >
-                                        <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center">
-                                          <div className="w-6 h-6 rounded-full bg-white"></div>
-                                        </div>
-                                      </motion.div>
-
-                                      {/* App Info */}
-                                      <div className="flex-1">
-                                        <h3 className="font-bold text-lg text-gray-900 mb-1">CityCards</h3>
-                                        <p className="text-gray-600 text-sm mb-2">Travel & Navigation</p>
-                                        <div className="flex items-center gap-2 mb-3">
-                                          <div className="flex text-yellow-400">
-                                            {'★★★★★'.split('').map((star, idx) => (
-                                              <span key={idx}>{star}</span>
-                                            ))}
-                                          </div>
-                                          <span className="text-sm text-gray-600">4.8</span>
-                                          <span className="text-sm text-gray-500">(2.1K)</span>
-                                        </div>
-                                        
-                                        {/* Download Button */}
-                                        <motion.button
-                                          className="w-full py-3 bg-blue-500 text-white rounded-lg font-medium text-sm"
-                                          animate={{
-                                            backgroundColor: ['rgb(59, 130, 246)', 'rgb(37, 99, 235)', 'rgb(59, 130, 246)'],
-                                          }}
-                                          transition={{
-                                            duration: 2,
-                                            repeat: Infinity,
-                                            ease: "easeInOut"
-                                          }}
-                                        >
-                                          GET
-                                        </motion.button>
-                                      </div>
-                                    </div>
-
-                                    {/* App Screenshots Preview */}
-                                    <div className="flex gap-2 overflow-hidden">
-                                      {[0, 1, 2].map((screenshot, idx) => (
-                                        <motion.div
-                                          key={idx}
-                                          className="w-16 h-28 bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg flex-shrink-0 border border-gray-200"
-                                          animate={{
-                                            scale: idx === 1 ? [1, 1.05, 1] : [1],
-                                          }}
-                                          transition={{
-                                            duration: 3,
-                                            repeat: Infinity,
-                                            delay: idx * 0.3,
-                                            ease: "easeInOut"
-                                          }}
-                                        >
-                                          {/* Mini screenshot content */}
-                                          <div className="p-1">
-                                            <div className="w-full h-4 bg-gradient-to-r from-primary to-secondary rounded-sm mb-1"></div>
-                                            <div className="space-y-1">
-                                              <div className="h-1 bg-gray-300 rounded w-3/4"></div>
-                                              <div className="h-1 bg-gray-300 rounded w-1/2"></div>
-                                              <div className="h-1 bg-gray-300 rounded w-2/3"></div>
+                                        {app.installing ? (
+                                          <>
+                                            {/* Installation Progress Circle */}
+                                            <motion.div
+                                              className="absolute inset-0 rounded-2xl border-4 border-white/30"
+                                              style={{
+                                                background: `conic-gradient(white 0deg, white 270deg, transparent 270deg)`
+                                              }}
+                                              animate={{
+                                                background: [
+                                                  'conic-gradient(white 0deg, white 0deg, transparent 0deg)',
+                                                  'conic-gradient(white 0deg, white 180deg, transparent 180deg)',
+                                                  'conic-gradient(white 0deg, white 360deg, transparent 360deg)'
+                                                ]
+                                              }}
+                                              transition={{
+                                                duration: 3,
+                                                repeat: Infinity,
+                                                ease: "easeInOut"
+                                              }}
+                                            />
+                                            <div className="w-6 h-6 rounded-lg bg-white/20 flex items-center justify-center">
+                                              <div className="w-3 h-3 rounded-full bg-white"></div>
                                             </div>
-                                          </div>
-                                        </motion.div>
-                                      ))}
-                                    </div>
+                                          </>
+                                        ) : (
+                                          <div className="w-6 h-6 rounded-lg bg-white/20"></div>
+                                        )}
+                                      </motion.div>
+                                    ))}
                                   </div>
-                                </motion.div>
+                                </div>
 
-                                {/* Download Progress */}
-                                <motion.div
-                                  className="bg-white rounded-xl p-4 shadow-sm border border-gray-200"
-                                  animate={{
-                                    opacity: [0, 1, 1, 0],
-                                  }}
-                                  transition={{
-                                    duration: 4,
-                                    repeat: Infinity,
-                                    times: [0, 0.2, 0.8, 1],
-                                    ease: "easeInOut"
-                                  }}
-                                >
-                                  <div className="flex items-center gap-3 mb-3">
-                                    <motion.div
-                                      className="w-8 h-8 border-2 border-blue-500 rounded-full flex items-center justify-center"
-                                      animate={{
-                                        rotate: [0, 360],
-                                      }}
-                                      transition={{
-                                        duration: 2,
-                                        repeat: Infinity,
-                                        ease: "linear"
-                                      }}
-                                    >
-                                      <div className="w-3 h-3 border-l-2 border-blue-500 rounded-full"></div>
-                                    </motion.div>
-                                    <div>
-                                      <p className="font-medium text-gray-900 text-sm">Downloading CityCards...</p>
-                                      <p className="text-xs text-gray-600">47.2 MB of 52.1 MB</p>
-                                    </div>
-                                  </div>
-                                  
-                                  <div className="w-full bg-gray-200 rounded-full h-2">
-                                    <motion.div
-                                      className="bg-blue-500 h-2 rounded-full"
-                                      animate={{
-                                        width: ['0%', '90%', '100%'],
-                                      }}
-                                      transition={{
-                                        duration: 4,
-                                        repeat: Infinity,
-                                        ease: "easeInOut"
-                                      }}
-                                    />
-                                  </div>
-                                </motion.div>
+                                {/* Dock */}
+                                <div className="absolute bottom-8 left-4 right-4 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-around px-2">
+                                  {[0, 1, 2, 3].map((dockApp) => (
+                                    <div key={dockApp} className="w-10 h-10 bg-white/30 rounded-xl"></div>
+                                  ))}
+                                </div>
+
+                                {/* Home Indicator */}
+                                <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/60 rounded-full"></div>
                               </div>
-
-                              {/* Right: Phone with App Installation */}
-                              <div className="flex items-center justify-center">
-                                <motion.div
-                                  className="w-56 h-full max-h-96 bg-gray-900 rounded-3xl p-2 relative"
-                                  animate={{
-                                    boxShadow: [
-                                      '0 10px 40px rgba(0,0,0,0.3)', 
-                                      '0 30px 60px rgba(99,102,241,0.4)', 
-                                      '0 10px 40px rgba(0,0,0,0.3)'
-                                    ],
-                                  }}
-                                  transition={{
-                                    duration: 4,
-                                    repeat: Infinity,
-                                    ease: "easeInOut"
-                                  }}
-                                >
-                                  {/* Phone Screen */}
-                                  <div className="w-full h-full bg-black rounded-3xl relative overflow-hidden">
-                                    
-                                    {/* Wallpaper */}
-                                    <div className="absolute inset-0 bg-gradient-to-br from-purple-600 via-blue-600 to-teal-500"></div>
-                                    
-                                    {/* Status Bar */}
-                                    <div className="absolute top-4 left-4 right-4 flex items-center justify-between text-white text-xs">
-                                      <span className="font-medium">9:41 AM</span>
-                                      <div className="flex items-center gap-1">
-                                        <div className="w-4 h-2 border border-white rounded-sm">
-                                          <div className="w-3 h-full bg-white rounded-sm"></div>
-                                        </div>
-                                        <div className="w-4 h-2 bg-white rounded-sm"></div>
-                                      </div>
-                                    </div>
-
-                                    {/* App Grid */}
-                                    <div className="absolute top-16 left-4 right-4 bottom-20">
-                                      <div className="grid grid-cols-4 gap-4">
-                                        {[
-                                          { name: 'Phone', color: 'bg-green-500', installing: false },
-                                          { name: 'Messages', color: 'bg-green-400', installing: false },
-                                          { name: 'Camera', color: 'bg-gray-600', installing: false },
-                                          { name: 'Photos', color: 'bg-yellow-500', installing: false },
-                                          { name: 'Maps', color: 'bg-blue-500', installing: false },
-                                          { name: 'Weather', color: 'bg-blue-400', installing: false },
-                                          { name: 'CityCards', color: 'bg-gradient-to-br from-primary to-secondary', installing: true },
-                                          { name: 'Settings', color: 'bg-gray-500', installing: false }
-                                        ].map((app, idx) => (
-                                          <motion.div
-                                            key={idx}
-                                            className={`aspect-square rounded-2xl flex items-center justify-center relative ${app.color}`}
-                                            animate={{
-                                              scale: app.installing ? [1, 1.1, 1] : [1],
-                                            }}
-                                            transition={{
-                                              duration: 2.5,
-                                              repeat: Infinity,
-                                              delay: idx * 0.1,
-                                              ease: "easeInOut"
-                                            }}
-                                          >
-                                            {app.installing ? (
-                                              <>
-                                                {/* Installation Progress Circle */}
-                                                <motion.div
-                                                  className="absolute inset-0 rounded-2xl border-4 border-white/30"
-                                                  style={{
-                                                    background: `conic-gradient(white 0deg, white 270deg, transparent 270deg)`
-                                                  }}
-                                                  animate={{
-                                                    background: [
-                                                      'conic-gradient(white 0deg, white 0deg, transparent 0deg)',
-                                                      'conic-gradient(white 0deg, white 180deg, transparent 180deg)',
-                                                      'conic-gradient(white 0deg, white 360deg, transparent 360deg)'
-                                                    ]
-                                                  }}
-                                                  transition={{
-                                                    duration: 3,
-                                                    repeat: Infinity,
-                                                    ease: "easeInOut"
-                                                  }}
-                                                />
-                                                <div className="w-6 h-6 rounded-lg bg-white/20 flex items-center justify-center">
-                                                  <div className="w-3 h-3 rounded-full bg-white"></div>
-                                                </div>
-                                              </>
-                                            ) : (
-                                              <div className="w-6 h-6 rounded-lg bg-white/20"></div>
-                                            )}
-                                          </motion.div>
-                                        ))}
-                                      </div>
-                                    </div>
-
-                                    {/* Dock */}
-                                    <div className="absolute bottom-8 left-4 right-4 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-around px-2">
-                                      {[0, 1, 2, 3].map((dockApp) => (
-                                        <div key={dockApp} className="w-10 h-10 bg-white/30 rounded-xl"></div>
-                                      ))}
-                                    </div>
-
-                                    {/* Home Indicator */}
-                                    <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/60 rounded-full"></div>
-                                  </div>
-                                </motion.div>
-                              </div>
-                            </div>
-
-                            {/* Success Notification */}
-                            <motion.div
-                              className="absolute top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg flex items-center gap-3"
-                              animate={{
-                                y: [-50, 0, 0, -50],
-                                opacity: [0, 1, 1, 0],
-                              }}
-                              transition={{
-                                duration: 5,
-                                repeat: Infinity,
-                                times: [0, 0.2, 0.8, 1],
-                                ease: "easeInOut"
-                              }}
-                            >
-                              <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"/>
-                              </svg>
-                              <span className="font-medium">CityCards installed successfully!</span>
                             </motion.div>
-
-                            {/* Bottom Text */}
-                            <div className="absolute bottom-6 left-0 right-0 text-center">
-                              <motion.p
-                                className="text-gray-600 text-sm"
-                                animate={{
-                                  opacity: [0.7, 1, 0.7],
-                                }}
-                                transition={{
-                                  duration: 3,
-                                  repeat: Infinity,
-                                  ease: "easeInOut"
-                                }}
-                              >
-                                <span className="font-medium">Ready to explore!</span> Open the app to start your adventure
-                              </motion.p>
-                            </div>
                           </div>
+                        </div>
+
+                        {/* Success Notification */}
+                        <motion.div
+                          className="absolute top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg flex items-center gap-3"
+                          animate={{
+                            y: [-50, 0, 0, -50],
+                            opacity: [0, 1, 1, 0],
+                          }}
+                          transition={{
+                            duration: 5,
+                            repeat: Infinity,
+                            times: [0, 0.2, 0.8, 1],
+                            ease: "easeInOut"
+                          }}
+                        >
+                          <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" />
+                          </svg>
+                          <span className="font-medium">CityCards installed successfully!</span>
                         </motion.div>
-                      )}
-                    </AnimatePresence>
+
+                        {/* Bottom Text */}
+                        <div className="absolute bottom-6 left-0 right-0 text-center">
+                          <motion.p
+                            className="text-gray-600 text-sm"
+                            animate={{
+                              opacity: [0.7, 1, 0.7],
+                            }}
+                            transition={{
+                              duration: 3,
+                              repeat: Infinity,
+                              ease: "easeInOut"
+                            }}
+                          >
+                            <span className="font-medium">Ready to explore!</span> Open the app to start your adventure
+                          </motion.p>
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
               </div>
             </div>
           </div>
@@ -2120,13 +2118,12 @@ 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'
+                        }`}
                     />
                   ))}
                 </div>
-                
+
                 <button
                   onClick={nextStep}
                   className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
@@ -2139,44 +2136,44 @@ export function HowItWorks() {
             {/* Mobile Flowchart */}
             <div className="bg-gradient-to-br from-green-50/60 to-blue-50/40 rounded-3xl p-6">
               <h4 className="text-lg font-medium text-gray-900 mb-4">Process Flow</h4>
-              
+
               <div className="space-y-3">
                 {steps.map((step, index) => {
                   const isActive = index === activeStep;
                   const isCompleted = index < activeStep;
-                  
+
                   return (
                     <div key={step.id} className="flex items-center gap-4">
                       {/* Connection line */}
                       {index > 0 && (
                         <div className="absolute left-6 -mt-3 w-0.5 h-3 bg-gradient-to-b from-primary/40 to-transparent"></div>
                       )}
-                      
+
                       <motion.button
                         onClick={() => goToStep(index)}
                         className={`
                           flex-1 flex items-center gap-3 p-3 rounded-2xl border-2 text-left transition-all duration-200
-                          ${isActive 
-                            ? 'bg-gradient-to-r from-primary to-secondary text-white border-transparent shadow-md' 
+                          ${isActive
+                            ? 'bg-gradient-to-r from-primary to-secondary text-white border-transparent shadow-md'
                             : isCompleted
-                            ? 'bg-white border-primary/30 text-gray-700'
-                            : 'bg-white border-gray-200 text-gray-700 hover:border-primary/30'
+                              ? 'bg-white border-primary/30 text-gray-700'
+                              : 'bg-white border-gray-200 text-gray-700 hover:border-primary/30'
                           }
                         `}
                         whileTap={{ scale: 0.98 }}
                       >
                         <div className={`
                           w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0
-                          ${isActive 
-                            ? 'bg-white/20 text-white' 
+                          ${isActive
+                            ? 'bg-white/20 text-white'
                             : isCompleted
-                            ? 'bg-primary text-white'
-                            : 'bg-gray-100 text-gray-500'
+                              ? 'bg-primary text-white'
+                              : 'bg-gray-100 text-gray-500'
                           }
                         `}>
                           {step.id}
                         </div>
-                        
+
                         <div className="flex-1 min-w-0">
                           <div className={`
                             text-sm font-medium leading-tight
@@ -2214,10 +2211,11 @@ export function HowItWorks() {
             <p className="text-gray-600 mb-6">
               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"
+            <motion.button
+              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>
diff --git a/src/components/LandingMagicItinerary.tsx b/src/components/LandingMagicItinerary.tsx
index 8ce3422..49174f1 100644
--- a/src/components/LandingMagicItinerary.tsx
+++ b/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>
diff --git a/src/components/LandingVarietyOfAdventures.tsx b/src/components/LandingVarietyOfAdventures.tsx
index 4af0519..7d0dc42 100644
--- a/src/components/LandingVarietyOfAdventures.tsx
+++ b/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 }}
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index be1c4e5..32ca669 100644
--- a/src/components/LoginModal.tsx
+++ b/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) {
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 193529a..c6972a9 100644
--- a/src/components/Navbar.tsx
+++ b/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>
diff --git a/src/components/PersonalizedTourHero.tsx b/src/components/PersonalizedTourHero.tsx
index 1d93534..ae2927a 100644
--- a/src/components/PersonalizedTourHero.tsx
+++ b/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>
 
diff --git a/src/components/WhatsIncludedHero.tsx b/src/components/WhatsIncludedHero.tsx
index aed0156..52f7be7 100644
--- a/src/components/WhatsIncludedHero.tsx
+++ b/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>{' '}
diff --git a/src/pages/DiscoverPage.tsx b/src/pages/DiscoverPage.tsx
index 73a9ad0..85c1fc8 100644
--- a/src/pages/DiscoverPage.tsx
+++ b/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>
diff --git a/src/pages/MagicItineraryPage.tsx b/src/pages/MagicItineraryPage.tsx
index 95eacf0..b9368c9 100644
--- a/src/pages/MagicItineraryPage.tsx
+++ b/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}>
diff --git a/src/pages/PassesPage.tsx b/src/pages/PassesPage.tsx
index 17a978c..04dcbb4 100644
--- a/src/pages/PassesPage.tsx
+++ b/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>