From 6bba8ea54a2e6fc9c150f57f70ac09aebfa05b25 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Thu, 9 Oct 2025 20:08:58 +0530 Subject: [PATCH] all link to main web link --- src/components/HeroSection.tsx | 1000 ++++++++++++++++---------------- 1 file changed, 499 insertions(+), 501 deletions(-) diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx index c1203b8..6959687 100644 --- a/src/components/HeroSection.tsx +++ b/src/components/HeroSection.tsx @@ -43,13 +43,13 @@ interface DropdownProps { } // Dropdown component with proper ref forwarding -const Dropdown = forwardRef(({ - isOpen, - onToggle, - items, - trigger, +const Dropdown = forwardRef(({ + isOpen, + onToggle, + items, + trigger, title, - className = "" + className = "" }, ref) => (
(({

{title}

)} - +
{items.map((item, index) => ( (null); const cartRef = useRef(null); @@ -150,7 +150,7 @@ export function HeroSection({ // Section IDs for navigation const sectionIds = [ 'hero-section', - 'why-choose-section', + 'why-choose-section', 'variety-adventures-section', 'how-it-works-section', 'magic-itinerary-section', @@ -251,7 +251,7 @@ export function HeroSection({ return (
{/* Sticky Hero Background Container */} -
- + - +
- {/* Desktop Navbar - Fixed and Sticky */} - -
- - {/* Using justify-between layout like Figma reference */} -
- {/* Logo Section - Increased Size */} - handleNavClick('about')} - > - - - - {/* Navigation Links - No automatic highlighting */} -
- {[ - { label: 'About Us', action: 'about' }, - { label: 'Your Card', action: 'card' } - ].map((item) => ( - handleNavClick(item.action)} - className={`relative px-0 py-2 text-base font-medium font-poppins transition-all duration-200 whitespace-nowrap group capitalize ${ - isNavItemActive(item.action) - ? 'text-primary' - : 'text-foreground hover:text-primary' - }`} - whileHover={{ scale: 1.02 }} - whileTap={{ scale: 0.98 }} - > - {item.label} - - {/* Active indicator - only for current page */} - - - {/* Hover background */} - - - ))} - - {/* Our Products */} - -
- - {/* Right Section - Increased Sizes */} -
- {/* Language Dropdown - Increased Font */} - setActiveLanguageDropdown(!activeLanguageDropdown)} - items={languages} - title="Select Language" - trigger={ -
- - ENG - -
- } - /> - - {/* Shopping Cart - Increased Size */} - setActiveCartDropdown(!activeCartDropdown)} - items={[ - ...cartItems.map(item => ({ - id: item.id, - label: `${item.name} - ${item.price}`, - badge: `${item.quantity}x` - })), - { - id: 'total', - label: `Total: $${cartTotal.toFixed(2)}`, - icon: - }, - { - id: 'checkout', - label: 'Proceed to Checkout', - action: () => console.log('Checkout') - } - ]} - title="Shopping Cart" - trigger={ -
- - - {cartItems.length} - -
- } - /> - - {/* CTA Button with Shine Effect */} - -
-
- -
- - - {/* Medium Screen Navbar - Fixed and Sticky */} - -
- -
- {/* Logo - Increased Size */} - handleNavClick('about')} - > - - - - {/* Navigation - Increased Font */} -
- {[ - { label: 'About Us', action: 'about' }, - { label: 'Cities', action: 'products' }, - { label: 'Your Card', action: 'card' }, - { label: 'Deals', action: 'offer' } - ].map((item) => ( - handleNavClick(item.action)} - className={`relative px-0 py-1.5 text-base font-poppins font-medium transition-all duration-200 whitespace-nowrap group capitalize ${ - isNavItemActive(item.action) - ? 'text-primary' - : 'text-foreground hover:text-primary' - }`} - whileHover={{ scale: 1.02 }} - whileTap={{ scale: 0.98 }} - > - {item.label} - - - - ))} -
- - {/* Right Section - Increased Sizes */} -
- setActiveLanguageDropdown(!activeLanguageDropdown)} - items={languages} - title="Select Language" - trigger={ -
- - ENG - -
- } - /> - - setActiveCartDropdown(!activeCartDropdown)} - items={[ - ...cartItems.map(item => ({ - id: item.id, - label: `${item.name} - ${item.price}`, - badge: `${item.quantity}x` - })), - { - id: 'total', - label: `Total: $${cartTotal.toFixed(2)}`, - icon: - }, - { - id: 'checkout', - label: 'Proceed to Checkout', - action: () => console.log('Checkout') - } - ]} - title="Shopping Cart" - trigger={ -
- - - {cartItems.length} - -
- } - /> - - {/* CTA Button with Shine Effect */} - -
-
- -
- - - {/* Mobile Navbar - Fixed and Sticky */} - - - {/* Mobile Menu Overlay - Already without Arrow */} - - {isMobileMenuOpen && ( - - {/* Backdrop */} - - {/* Menu Panel */} - - {/* Header - Increased Font */} -
-
+ {/* Using justify-between layout like Figma reference */} +
+ {/* Logo Section - Increased Size */} + handleNavClick('about')} + > + + + {/* Navigation Links - No automatic highlighting */} +
+ {[ + { label: 'About Us', action: 'about' }, + { label: 'Your Card', action: 'card' } + ].map((item) => ( + (window.location.href = "https://citycards-website.wdiprojects.com/")} + className={`relative px-0 py-2 text-base font-medium font-poppins transition-all duration-200 whitespace-nowrap group capitalize ${isNavItemActive(item.action) + ? 'text-primary' + : 'text-foreground hover:text-primary' + }`} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > + {item.label} + + {/* Active indicator - only for current page */} + + + {/* Hover background */} + + + ))} + + {/* Our Products */} + +
- + {/* Language Dropdown - Increased Font */} + setActiveLanguageDropdown(!activeLanguageDropdown)} + items={languages} + title="Select Language" + trigger={ +
+ + ENG + +
+ } + /> + + {/* Shopping Cart - Increased Size */} + setActiveCartDropdown(!activeCartDropdown)} + items={[ + ...cartItems.map(item => ({ + id: item.id, + label: `${item.name} - ${item.price}`, + badge: `${item.quantity}x` + })), + { + id: 'total', + label: `Total: $${cartTotal.toFixed(2)}`, + icon: + }, + { + id: 'checkout', + label: 'Proceed to Checkout', + action: () => console.log('Checkout') + } + ]} + title="Shopping Cart" + trigger={ +
+ + + {cartItems.length} + +
+ } + /> + + {/* CTA Button with Shine Effect */} + +
+
+ +
+ + + {/* Medium Screen Navbar - Fixed and Sticky */} + +
+ +
+ {/* Logo - Increased Size */} + handleNavClick('about')} + > + + + + {/* Navigation - Increased Font */} +
+ {[ + { label: 'About Us', action: 'about' }, + { label: 'Cities', action: 'products' }, + { label: 'Your Card', action: 'card' }, + { label: 'Deals', action: 'offer' } + ].map((item) => ( + handleNavClick(item.action)} + className={`relative px-0 py-1.5 text-base font-poppins font-medium transition-all duration-200 whitespace-nowrap group capitalize ${isNavItemActive(item.action) + ? 'text-primary' + : 'text-foreground hover:text-primary' + }`} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > + {item.label} + + + + ))} +
+ + {/* Right Section - Increased Sizes */} +
+ setActiveLanguageDropdown(!activeLanguageDropdown)} + items={languages} + title="Select Language" + trigger={ +
+ + ENG + +
+ } + /> + + setActiveCartDropdown(!activeCartDropdown)} + items={[ + ...cartItems.map(item => ({ + id: item.id, + label: `${item.name} - ${item.price}`, + badge: `${item.quantity}x` + })), + { + id: 'total', + label: `Total: $${cartTotal.toFixed(2)}`, + icon: + }, + { + id: 'checkout', + label: 'Proceed to Checkout', + action: () => console.log('Checkout') + } + ]} + title="Shopping Cart" + trigger={ +
+ + + {cartItems.length} + +
+ } + /> + + {/* CTA Button with Shine Effect */} + +
+
+ +
+ + + {/* Mobile Navbar - Fixed and Sticky */} + + + {/* Mobile Menu Overlay - Already without Arrow */} + + {isMobileMenuOpen && ( + + {/* Backdrop */} + + + {/* Menu Panel */} + + {/* Header - Increased Font */} +
+
+ +
+ + + +
+ + {/* Content - Increased Font Sizes */} +
+
+ {/* Navigation Links - Increased Font, No automatic highlighting */} +
+

Navigation

+ {[ + { label: 'About Us', action: 'about' }, + { label: 'Cities', action: 'products' }, + { label: 'Your Card', action: 'card' }, + { label: 'Deals', action: 'offer' } + ].map((item, index) => ( { + handleNavClick(item.action); + closeMobileMenu(); + }} + className={`w-full text-left px-4 py-4 rounded-xl transition-all duration-200 text-xl font-poppins font-medium flex items-center justify-between group ${isNavItemActive(item.action) + ? 'bg-primary/10 text-primary border border-primary/20' + : 'text-foreground hover:text-primary hover:bg-gray-50' + }`} + initial={{ opacity: 0, x: -20 }} + animate={{ opacity: 1, x: 0 }} + transition={{ delay: index * 0.1 }} + whileHover={{ scale: 1.02, x: 10 }} whileTap={{ scale: 0.98 }} > - {lang.icon} - {lang.label} + {item.label} + {isNavItemActive(item.action) && ( + + )} ))}
-
- {/* Shopping Cart Summary - Increased Font */} -
-

Cart ({cartItems.length})

+ {/* Language Selection - Increased Font */}
- {cartItems.map((item, index) => ( - - {item.name} - {item.price} - - ))} -
-
- Total: - ${cartTotal.toFixed(2)} +

Language

+
+ {languages.slice(0, 4).map((lang, index) => ( + + {lang.icon} + {lang.label} + + ))} +
+
+ + {/* Shopping Cart Summary - Increased Font */} +
+

Cart ({cartItems.length})

+
+ {cartItems.map((item, index) => ( + + {item.name} + {item.price} + + ))} +
+
+ Total: + ${cartTotal.toFixed(2)} +
-
- {/* Footer - CTA Button */} -
- -
+ {/* Footer - CTA Button */} +
+ +
+ - - )} - + )} + - {/* City Submenu */} - {showCitySubmenu && ( - setShowCitySubmenu(false)} - currentPage={currentPage} - onHomeClick={() => console.log('Home clicked')} - onMelbourneClick={() => console.log('Melbourne clicked')} - onAttractionsClick={() => console.log('Attractions clicked')} - onPassesClick={onPassesClick} - onBlogsClick={() => console.log('Blogs clicked')} - onHowItWorksClick={() => console.log('How It Works clicked')} - /> - )} + {/* City Submenu */} + {showCitySubmenu && ( + setShowCitySubmenu(false)} + currentPage={currentPage} + onHomeClick={() => console.log('Home clicked')} + onMelbourneClick={() => console.log('Melbourne clicked')} + onAttractionsClick={() => console.log('Attractions clicked')} + onPassesClick={onPassesClick} + onBlogsClick={() => console.log('Blogs clicked')} + onHowItWorksClick={() => console.log('How It Works clicked')} + /> + )} {/* Hero Content */} -