src/components/Navbar.tsx

@@ -501,7 +501,7 @@ export default function Navbar({
       >
         <div className="">
           <motion.div
-            className={`w-full transition-all duration-500 ease-out px-8 py-4 bg-white backdrop-blur-[20px] border border-white/20 ${isScrolled
+            className={`w-full transition-all duration-500 ease-out px-3 py-3 bg-white backdrop-blur-[20px] border border-white/20 ${isScrolled
               ? 'shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.05)]'
               : 'shadow-lg shadow-black/5'
               }`}

src/components/ScrollToTop.tsx

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

src/main.tsx

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

src/pages/CheckoutPage.tsx

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

src/pages/PassesPage.tsx

@@ -160,17 +160,15 @@ export function PassesPage({
 
   const { data: cityDetails, isLoading: loadingCityDetails } = useGetSelectedCityDetailsQuery(cityId)
   const cards = cityDetails?.city?.cards ?? []
-  console.log(cards)
 
   if (loadingCityDetails) {
     return (<LoadingSpinner />)
   }
 
-
-  const handleCheckoutClick = () => {
+  const handleCheckoutClick = (cardTypeName:string) => {
     console.log('Proceeding to checkout for user:', user);
     // Add your checkout logic here
-    navigate('/checkout');
+    navigate('/checkout', { state: { selectedCard: cardTypeName } });
   };
 
   const handleSignInClick = () => {
@@ -283,7 +281,7 @@ export function PassesPage({
                         ? "bg-primary hover:bg-primary/90 text-white hover:shadow-lg"
                         : "bg-gray-400 hover:bg-gray-400 text-white hover:shadow-md"
                         }`}
-                      onClick={user ? handleCheckoutClick : handleSignInClick}
+                      onClick={() => user ? handleCheckoutClick(cards[0]?.cardType?.cardTypeName) : handleSignInClick}
                       disabled={selectedPass !== passTypes[0].id}
 
                     >
@@ -373,7 +371,7 @@ export function PassesPage({
                         }`}
                       disabled={selectedPass !== passTypes[1].id}
 
-                      onClick={user ? handleCheckoutClick : handleSignInClick}
+                      onClick={() => user ? handleCheckoutClick(cards[1]?.cardType?.cardTypeName) : handleSignInClick}
 
                     >
                       {user ? 'PURCHASE NOW' : 'LOGIN TO BUY PASS'}