explore card error solved

src/components/Navbar.tsx

@@ -341,20 +341,12 @@ export default function Navbar({
 
               <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-5">
                 {/* Explore Card - First Item - No Dropdown */}
-                <Dropdown
-                  ref={exploreCardRef}
-                  isOpen={activeExploreCardDropdown}
-                  onToggle={() => setActiveExploreCardDropdown(!activeExploreCardDropdown)}
-                  items={exploreCardItems}
-                  title="Explore Card"
-                  className='px-0'
-                  trigger={
-                    <div className="flex items-center space-x-1 text-gray-700 hover:text-gray-900 text-base font-medium transition-colors duration-200 cursor-pointer rounded-lg hover:bg-gray-50/50 px-2 py-1">
-                      <span>Explore Card</span>
-                      <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${activeExploreCardDropdown ? 'rotate-180' : ''}`} />
-                    </div>
-                  }
-                />
+                <Link
+                  to="/citycards"
+                  className="flex items-center space-x-1 text-gray-700 hover:text-gray-900 text-base font-medium transition-colors duration-200 cursor-pointer rounded-lg hover:bg-gray-50/50 px-2 py-1"
+                >
+                  <span>Explore Card</span>
+                </Link>
 
                 {/* Other Navigation Items */}
                 {navigationItems.map((item) => (

src/components/SubNavbar.tsx

@@ -1,61 +1,56 @@
+
 import { motion } from 'motion/react';
+import { useNavigate } from 'react-router-dom';
 
 interface SubNavbarProps {
   activePage?: 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
   activeTab?: 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
-  onCityCardsClick: () => void;
-  onMagicItineraryClick: () => void;
-  onPostCardsClick: () => void;
-  onOffersClick: () => void;
-  onEsimsClick: () => void;
-  onHotelDiscountsClick: () => void;
 }
 
 export function SubNavbar({
   activeTab,
   activePage,
-  onCityCardsClick,
-  onMagicItineraryClick,
-  onPostCardsClick,
-  onOffersClick,
-  onEsimsClick,
-  onHotelDiscountsClick
 }: SubNavbarProps) {
+  const navigate = useNavigate();
   const activeProduct = activePage || activeTab;
   
   const products = [
     {
       id: 'citycards',
       label: 'CityCards',
-      onClick: onCityCardsClick
+      path: '/citycards'
     },
     {
       id: 'magic-itinerary',
       label: 'Magic Itinerary',
-      onClick: onMagicItineraryClick
+      path: '/magic-itinerary'
     },
     {
       id: 'postcards',
       label: 'PostCards',
-      onClick: onPostCardsClick
+      path: '/postcards'
     },
     {
       id: 'offers',
       label: 'Offers',
-      onClick: onOffersClick
+      path: '/offers'
     },
     {
       id: 'esims',
       label: 'eSIMs',
-      onClick: onEsimsClick
+      path: '/esims'
     },
     {
       id: 'hotel-discounts',
       label: 'Hotel Discounts',
-      onClick: onHotelDiscountsClick
+      path: '/hotel-discounts'
     }
   ];
 
+  const handleProductClick = (path: string) => {
+    navigate(path);
+  };
+
   return (
     <motion.div
       className="fixed top-[120px] left-1/2 transform -translate-x-1/2 z-30 hidden lg:block"
@@ -81,7 +76,7 @@ export function SubNavbar({
           {products.map((product) => (
             <motion.button
               key={product.id}
-              onClick={product.onClick}
+              onClick={() => handleProductClick(product.path)}
               className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${
                 activeProduct === product.id
                   ? 'bg-primary text-white shadow-md'